shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换(WebGL-Shader开发基础03)

Posted 点燃火柴

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换(WebGL-Shader开发基础03)相关的知识,希望对你有一定的参考价值。

shader编程-二维空间中使用矩阵实现物体的旋转、缩放、平移变换

1. 变换前物体的绘制

在进行变换操前先绘制出要操作的物体,我们就简单的绘制一个矩形来代表,利用之前的绘制矩形的代码稍作修改,之前用的是step函数,现在调整为smoothstep函数,因为旋转时使用step函数绘制的矩形边缘会出现锯齿,具体如下

float box(vec3 st)
  float right = 0.15;
  float top = 0.1;
  float blur = 0.002;//边缘模糊系数

  //通过右上角绘制原点对称的四边形
  vec2 bl = 1.0-smoothstep(vec2(right,top)-blur,vec2(right,top)+blur,abs(st.xy));
  float pct = bl.x * bl.y;
  return pct;

绘制的结果如下,一个小矩形出现在绘制区域中央

2. 物体旋转的实现

我们使用矩阵来实现物体的旋转,先来看看齐次坐标下的旋转矩阵长什么样

上面的矩阵用于二维平面下对物体进行旋转变换,旋转矩阵的相关知识,请参照这篇文章图形学中的基本变换

接下来看看获取旋转矩阵函数的代码

 mat3 rotate2d(float _angle)
   float angle = radians(_angle);//角度转为弧度
   return mat3(cos(angle),-sin(angle),0.0,
               sin(angle),cos(angle),0.0,
               0.0,0.0,1.0
               );
 

调用的时候需要注意一下,齐次坐标下返回的旋转矩阵是一个三维矩阵,所以先将屏幕坐标转为三维坐标,以匹配旋转矩阵,与旋转矩阵相乘后相当于将整个屏幕坐标旋转了,接着绘图,绘出的图就带旋转效果了,具体参照如下代码

void main( void ) 

  //窗口坐标调整为[-1,1],坐标原点在屏幕中心
  vec2 _st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;

  vec3 line_color = vec3(1.0,1.0,0.0);
  vec3 color = vec3(0.6);//背景色
  float pct = 0.0;

 //将屏幕坐标转为三维坐标,使之在和矩阵相乘时相匹配
  vec3 st = vec3(_st,1.0);

  //使用旋转矩阵使矩形顺时针旋转10度
  st *= rotate2d(10.0);
  
  pct = box(st);
  color = mix(color,line_color,pct);

  gl_FragColor = vec4(color, 1);

看看运行结果,矩形在原来的基础上顺时针旋转了10度

如果想逆时针旋转10度,只需要在参数前添加个负号

st *= rotate2d(-10.0);

如果你想让它不停旋转,需要用到u_time变量,之所以乘以30.0,是为了让物体旋转的更快一些

st *= rotate2d(u_time*30.0);

3. 物体缩放的实现

同样先来看看齐次坐标下缩放矩阵的模样

该矩阵相关知识还是参照这篇文章图形学中的基本变换

接着我们编写返回缩放矩阵的函数,如下

mat3 scale2d(vec2 scale)
  //缩放矩阵作用于坐标系,所以放大和缩小刚好相反,为了使用习惯,缩放参数取倒数
  return mat3(1.0/scale.x,0.0,0.0,
            0.0,1.0/scale.y,0.0,
            0.0,0.0,1.0
            );

绘制物体前,将屏幕坐标与该矩阵相乘

st *= scale2d(vec2(2.0,4.0));

执行上面的代码物体x轴方向放大2倍,y轴方向放大4倍,结果如下

4. 物体平移的实现

下图是齐次坐标下平移矩阵

该矩阵相关知识还是参照这篇文章图形学中的基本变换

开始编写返回平移矩阵的函数,如下

mat3 translation2d(vec2 translate)
  //平移矩阵作用于坐标系,所以平移的方向相反,为了使用习惯,缩放参数取负
  return mat3(1.0,0.0,-translate.x,
            0.0,1.0,-translate.y,
            0.0,0.0,1.0
            );

绘图前屏幕坐标与平移坐标相乘

st *= translation2d(vec2(0.2,0.4)); 

执行结果如下图,与原物体相比,在x轴方向平移0.2,y轴方向平移0.4

如果将代码调整成下面的代码,则物体沿着y轴像弹簧一样做上下往复运动

st *= translation2d(vec2(0.0,sin(u_time)*0.5));

如果替换为下面代码,则物体会沿着半径为0.5的圆环上做环形运动

st *= translation2d(vec2(cos(u_time)*0.5,sin(u_time)*0.5));

至此,如果你已经掌握物体的基本变换就,其实各种变换是可以叠加的,只需要不断地乘上变换矩阵,例如让物体既自己旋转,又通过平移矩阵实现环形运动,可使用以下代码

st *= rotate2d(u_time*30.0);
st *= translation2d(vec2(cos(u_time)*0.5,sin(u_time)*0.5));

5. 平移与缩放另外一种实现方式

平移与缩放可以通过另外一种不使用矩阵的方式实现,原理就是改变屏幕坐标,物体则以相反的变换变化,例如将屏幕坐标乘以2,相当于屏幕坐标放大两倍,而绘制物体时大小不变,则物体看起来像缩小为原来的一半,如果你对屏幕坐标的x轴减0.5个单位,绘制的结果是物体向右移动0.5个单位
一些简单的平移与缩放示例代码

//非矩阵的放大缩小方式
//st *=3.0;//屏幕坐标放大3倍,相当于物体缩小3倍
//st /=3.0;//屏幕坐标缩小3倍,相当于物体放大3倍


//非矩阵的平移方式
//st.x -=0.2;//物体向右移0.2个单位
//st -=0.4;//物体向右向上移0.4个单位
//st.x +=0.3;//物体向左移0.3个单位

6. 所有示例代码

<body>
  <div id="container"></div>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <script>
    var container;
    var camera, scene, renderer;
    var uniforms;
    var vertexShader = `
      void main() 
        gl_Position = vec4( position, 1.0 );
       
    `
    var fragmentShader = `
    #ifdef GL_ES
    precision mediump float;
    #define sat(x) clamp(x, 0.0, 1.0)
    #endif
    uniform float u_time;
    uniform vec2 u_mouse;
    uniform vec2 u_resolution;


    mat3 rotate2d(float _angle)
      float angle = radians(_angle);//角度转为弧度
      return mat3(cos(angle),-sin(angle),0.0,
                  sin(angle),cos(angle),0.0,
                  0.0,0.0,1.0
                  );
    

    mat3 scale2d(vec2 scale)
      //缩放矩阵作用于坐标系,所以放大和缩小刚好相反,为了使用习惯,缩放参数取倒数
      return mat3(1.0/scale.x,0.0,0.0,
                0.0,1.0/scale.y,0.0,
                0.0,0.0,1.0
                );
    


    mat3 translation2d(vec2 translate)
      //平移矩阵作用于坐标系,所以平移的方向相反,为了使用习惯,缩放参数取负
      return mat3(1.0,0.0,-translate.x,
                0.0,1.0,-translate.y,
                0.0,0.0,1.0
                );
    

    float box(vec3 st)
      float right = 0.15;
      float top = 0.1;
      float blur = 0.002;//边缘模糊系数

      //通过右上角绘制原点对称的四边形
      vec2 bl = 1.0-smoothstep(vec2(right,top)-blur,vec2(right,top)+blur,abs(st.xy));
      float pct = bl.x * bl.y;
      return pct;
    

    void main( void ) 

      //窗口坐标调整为[-1,1],坐标原点在屏幕中心
      vec2 _st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;

      //窗口坐标调整为[0,1],坐标原点在屏幕左下角
      //vec2 st = gl_FragCoord.xy/u_resolution;

      vec3 line_color = vec3(1.0,1.0,0.0);
      vec3 color = vec3(0.6);//背景色
      float pct = 0.0;

      

      //将屏幕坐标转为三维坐标,使之在和矩阵相乘时相匹配
      vec3 st = vec3(_st,1.0);

      //使用旋转矩阵使矩形顺时针旋转10度
      //st *= rotate2d(10.0);

      //st *= rotate2d(u_time*30.0);

      //缩放
      //st *= scale2d(vec2(2.0,4.0));

      //平移
      //st *= translation2d(vec2(0.2,0.4)); 
      //st *= translation2d(vec2(0.0,sin(u_time)*0.5));
      //st *= translation2d(vec2(cos(u_time)*0.5,sin(u_time)*0.5));


      //非矩阵的放大缩小方式
      //st *=3.0;//屏幕坐标放大3倍,相当于物体缩小3倍
      //st /=3.0;//屏幕坐标缩小3倍,相当于物体放大3倍


      //非矩阵的平移方式
      //st.x -=0.2;//物体向右移0.2个单位
      //st -=0.4;//物体向右向上移0.4个单位
      //st.x +=0.3;//物体向左移0.3个单位
      
      pct = box(st);
      color = mix(color,line_color,pct);

      gl_FragColor = vec4(color, 1);
    
    `

    init();
    animate();

    function init() 
      container = document.getElementById('container');

      camera = new THREE.Camera();
      camera.position.z = 1;

      scene = new THREE.Scene();

      var geometry = new THREE.PlaneBufferGeometry(2, 2);

      uniforms = 
        u_time: 
          type: "f",
          value: 1.0
        ,
        u_resolution: 
          type: "v2",
          value: new THREE.Vector2()
        ,
        u_mouse: 
          type: "v2",
          value: new THREE.Vector2()
        
      ;

      var material = new THREE.ShaderMaterial(
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      );

      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new THREE.WebGLRenderer();
      //renderer.setPixelRatio(window.devicePixelRatio);

      container.appendChild(renderer.domElement);

      onWindowResize();
      window.addEventListener('resize', onWindowResize, false);

      document.onmousemove = function (e) 
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
      
    

    function onWindowResize(event) 
      renderer.setSize(800, 800);
      uniforms.u_resolution.value.x = renderer.domElement.width;
      uniforms.u_resolution.value.y = renderer.domElement.height;
    

    function animate() 
      requestAnimationFrame(animate);
      render();
    

    function render() 
      uniforms.u_time.value += 0.02;
      renderer.render(scene, camera);
    
  </script>
</body>

以上是关于shader编程-二维空间中使用矩阵实现物体的旋转缩放平移变换(WebGL-Shader开发基础03)的主要内容,如果未能解决你的问题,请参考以下文章

shader编程-RayMarching三维场景下模型基本变换旋转缩放平移(WebGL-Shader开发基础09)

shader编程-RayMarching三维场景下模型基本变换旋转缩放平移(WebGL-Shader开发基础09)

shader编程-RayMarching三维场景下模型基本变换旋转缩放平移(WebGL-Shader开发基础09)

如何比较物体之间的相对旋转?

three.js中物体旋转实践之房门的打开与关闭

旋转二维物体的功能?