标签归档:webgl

三维笛卡尔坐标系转换为二维笛卡尔坐标系

在三维坐标系画一些不需要z轴坐标的二维内容的时候,和直接在二维画布上画有些不一样,因为三维坐标系原点在画布中间,并且Y轴朝上,而且xyz轴的值范围都是-1~1,所以按照二维坐标系的坐标来绘制的话,需要在顶点shader里给顶点坐标最后乘一个转换矩阵,把它转换为三维坐标系中对应的点。

过程也很简单,把坐标系先移到左上角,把横纵坐标按照实际的像素数缩小,然后上下翻转一下,顺便把它喂给二向箔。

用我做的这个矩阵库举个例子的话就是(只写了关键步骤,省略了部分内容)

到顶点shader里这样乘一下

这样就可以当canvas2d画布用了。