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

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

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

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

var to2dCoord=Mat.Identity(4).//新建一个单位矩阵
		translate3d(-1,1,0).//移到左上角
		scale3d(2/canvas.width,-2/canvas.height,0);//上下翻转,缩放坐标,喂给二向箔(去掉z轴)
gl.uniformMatrix4fv(u2dUniform,false,to2dCoord);//丢给shader

到顶点shader里这样乘一下
attribute vec3 aVertexPosition;

uniform mat4 u2dCoordinate;//转换矩阵

void main(void) {
	gl_Position = u2dCoordinate * vec4(aVertexPosition, 1.0);//最左边乘上转换矩阵
}

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



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。