IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

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

    罗佳(博主)发表于 2017-03-26 12:54:12
    love 0

    在三维坐标系画一些不需要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画布用了。



沪ICP备19023445号-2号
友情链接