WebGL编程指南05-通过计算顶点坐标实现平移、旋转和缩放

鸡米工程师

已于 2022-09-05 22:25:49 修改

阅读量392

点赞数 1

分类专栏： WebGL编程指南文章标签：着色器前端

于 2022-09-04 22:06:37 首次发布

本文链接：https://blog.csdn.net/weixin_46773434/article/details/126664614

版权

WebGL编程指南专栏收录该内容

32 篇文章 6 订阅

订阅专栏

1.平移demo

在这里插入图片描述

如上图，从点p(x,y,z)平移到p’(x’, y’, z’)的位置，只需要加上x,y,z平移的分量就可以了

2.平移图形的代码

在这里插入图片描述

2.1在顶点着色器中定义uniform类型的变量u_Translation，为什么用uniform类型而不用attribute类型因为平移不直接影响顶点坐标

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个400px*400px大小的画布-->
  <canvas id="webgl" width="400" height="400"></canvas>

  <script>
    //顶点着色器
    const VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'uniform vec4 u_Translation;\n' + //声明uniform变量u_Translation，用来存放平移信息
      'void main(){\n' +
      '  gl_Position = a_Position + u_Translation;\n' + //将平移后的坐标赋值给顶点着色器内置变量gl_Position
      '}\n';

    //片元着色器
    const FSHADER_SOURCE = '' +
      'precision mediump float;\n' + // 设置精度
      'uniform vec4 u_FragColor;\n' + //声明uniform变量u_FragColor，用来存放顶点颜色信息
      'void main(){\n' +
      //通过u_FragColor变量设置片元颜色
      ' gl_FragColor = u_FragColor;\n' +
      '}\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      const program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      const canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      const gl = canvas.getContext('webgl');
      //初始化着色器
      initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //清空canvas
      gl.clear(gl.COLOR_BUFFER_BIT);

      //给片元着色器uniform变量u_FragColor赋值
      setFragColor(gl)

      //初始化顶点
      const n = initVertexBuffers(gl)

      //获取顶点着色器uniform变量u_Translation的存储地址
      const u_Translation = gl.getUniformLocation(gl.program, 'u_Translation')

      //在 x、y、z轴方向上平移的距离
      const Tx = 0.5
      const Ty = 0.5
      const Tz = 0.0

      //向顶点着色器uniform变量u_Translation传值
      gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0)

      //绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, n)

    }

    //给片元着色器uniform变量u_FragColor赋值
    function setFragColor(gl) {
      //获取片元着色器uniform变量u_FragColor的存储地址
      const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
      //向片元着色器uniform变量u_FragColor传值
      gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0) //绿色
    }

    //初始化顶点
    function initVertexBuffers(gl) {
      const vertices = new Float32Array([
        0.0, 0.5,
        -0.5, -0.5,
        0.5, -0.5
      ])

      //1.创建缓冲区对象
      const vertexBuffer = gl.createBuffer();
      if (!vertexBuffer) {
        console.log('创建缓冲区对象失败！')
        return -1
      }

      //2.将缓冲区对象绑定到目标
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

      //3.向缓冲区对象中写入数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

      const a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取着色器attribute变量a_Position的存储地址

      //4.将缓冲区对象分配给a_Position变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

      //5.连接a_Position变量与分配给它的缓冲区对象
      gl.enableVertexAttribArray(a_Position)

      return vertices.length / 2

    }
    init()
  </script>
</body>

</html>

3.图形的旋转

在这里插入图片描述

3.1图形旋转计算原理

旋转比平移要复杂一些，我们描述一个旋转时，必须指明三个因素：

旋转轴（图形将围绕旋转轴旋转）
旋转方向（顺时针或逆时针）
旋转角度（图形绕旋转轴顺着旋转方向旋转的角度）
关于旋转方向，我们把逆时针旋转称之为正旋转，例如一个图形绕Z轴旋转了90度，指的是逆时针旋转了90度，响应的如果是-90度就是顺时针旋转90度，关于正旋转请参照下图

3.2图形旋转计算公式

如上图，设点p(x, y, z)旋转b角度之后便为了点p’(x’, y’, z’)，op的距离与op’的距离相等都是r，op与x轴的夹角是a，op与op’的夹角是b。由于是绕Z轴旋转的所有z坐标不会变，我们主要看一下x坐标和y坐标是如何变化的：
由上图及说明可知p点的x坐标和y坐标：
x = r * cos a
y = r * sin a
类似的点p’的可以这样表示：
x’ = r * cos(a + b)
y’ = r * sin(a + b)

这里我们温习一下三角函数两角相加减的公式：
sin(a + b) = sin a * cos b + cos a * sin b
cos(a + b) = cos a * cos b - sin a * sin b

由p点的坐标关系可以推出：
r = x / cos a = y / sin a

将以上关系带入计算p’的计算公式得：
x’ = r * (cos a * cos b - sin a * sin b)
x’ = x / cos a * cos a * cos b - y / sin a * sin a * sin b
x’ = x * cos b - y * sin b

y’ = r * (sin a * cos b + cos a * sin b)
y’ = y / sin a * sin a * cos b + x / cos a * cos a * sin b
y’ = y * cos b + x * sin b
y’ = x * sin b + y * cos b

得到最终计算p’ 点坐标的计算方式：
x’ = x * cos b - y * sin b
y’ = x * sin b + y * cos b
z’ = z

3.3图形旋转实现代码

// 顶点着色器程序
var VSHADER_SOURCE =
    `attribute vec4 a_Position;
    uniform float u_CosB,u_SinB;
    void main() {
        gl_Position.x=a_Position.x*u_CosB - a_Position.y*u_SinB;
        gl_Position.y=a_Position.x*u_SinB+a_Position.y*u_CosB;
        gl_Position.z=a_Position.z;
        gl_Position.w =1.0;
	// gl_Position = a_Position;
	// gl_PointSize = 10.0; //由于只在绘制Point的时候有效，所欲可以去掉
}`;

// 片元着色器程序
var FSHADER_SOURCE =
    `void main() {

	gl_FragColor = vec4(1, 0, 0, 1);
}`;

const main = () => {
    let count = 0.1
    //获取绘制dom
    const canvas = document.getElementById('webgl');

    //获取canvas上下文
    const gl = canvas.getContext('webgl');

    //初始化着色器
    if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        return console.log('Failed to initialize shaders.')
    }
    const initVertexBuffers = (gl) => {
        //类型化数组设置顶点坐标
        const vertices = new Float32Array([
            0.0, 0.5, -0.5, -0.5, 0.5, -0.5
        ]);

        const n = 3;//点的个数

        //创建缓冲区对象
        const vertexBuffer = gl.createBuffer();
        if (!vertexBuffer) {
            console.log('Failed to create the buffer object');
            return -1
        }

        //将缓冲区对象绑定到目标
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        //向缓冲区对象中写入数据
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        const a_Position = gl.getAttribLocation(gl.program, 'a_Position');

        //将缓冲区对象分配给a_Position变量
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

        //链接a_Position变量与分配给它的缓冲区对象
        gl.enableVertexAttribArray(a_Position);

        return n
    }
    //旋转90°
    const ANGLE = 90;
    const radian = Math.PI * ANGLE / 180;
    const cosB = Math.cos(radian);
    const sinB = Math.sin(radian);

    const u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
    const u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
    gl.uniform1f(u_SinB, sinB);
    gl.uniform1f(u_CosB, cosB);
    const n = initVertexBuffers(gl);
    if (n < 0) {
        console.error('n<0')
        return
    }


    //设置canvas的背景色
    gl.clearColor(0.0, 0.0, 0.0, 1.0);

    //清空canvas

    gl.clear(gl.COLOR_BUFFER_BIT);

    //绘制一个点
    gl.drawArrays(gl.LINE_LOOP, 1, 3);


}
main()

声明uniform变量u_CosB, u_SinB

我们需要在顶点着色器中声明uniform变量u_CosB、u_SinB，用来存放旋转角度B的正余弦值，同时需要利用上面推导出的计算旋转后点的坐标的公式来计算传输给gl_Position变量的坐标

4.图形的缩放

在这里插入图片描述

4.1图形缩放原理

图形缩放的原理比较简单，就是给图形的每一个点乘以要缩放的比例即可。
我们需要在顶点着色器中声明uniform变量u_Scale，用来存放图形缩放的比例，同时需要用顶点坐标u_Scale的每一个分量乘以缩放比例u_Scale，然后传输给gl_Position变量对应的坐标分量

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>
</head>

<body>
  <!--通过canvas标签创建一个400px*400px大小的画布-->
  <canvas id="webgl" width="400" height="400"></canvas>

  <script>
    //顶点着色器
    const VSHADER_SOURCE = '' +
      'attribute vec4 a_Position;\n' + //声明attribute变量a_Position，用来存放顶点位置信息
      'uniform float u_Scale;\n' + //声明uniform变量u_Scale，用来存放缩放比例
      'void main(){\n' +
      '  gl_Position.x = a_Position.x * u_Scale;\n' + //将缩放u_Scale倍后的x坐标赋值给顶点着色器内置变量gl_Position的x坐标
      '  gl_Position.y = a_Position.y * u_Scale;\n' + //将缩放u_Scale倍后的y坐标赋值给顶点着色器内置变量gl_Position的y坐标
      '  gl_Position.z = a_Position.z * u_Scale;\n' + //将缩放u_Scale倍后的z坐标赋值给顶点着色器内置变量gl_Position的z坐标
      '  gl_Position.w = 1.0;\n' +
      '}\n';

    //片元着色器
    const FSHADER_SOURCE = '' +
      'precision mediump float;\n' + // 设置精度
      'uniform vec4 u_FragColor;\n' + //声明uniform变量u_FragColor，用来存放顶点颜色信息
      'void main(){\n' +
      //通过u_FragColor变量设置片元颜色
      ' gl_FragColor = u_FragColor;\n' +
      '}\n';

    //初始化着色器函数
    function initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE) {
      //创建顶点着色器对象
      const vertexShader = gl.createShader(gl.VERTEX_SHADER);
      //创建片元着色器对象
      const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      //引入顶点、片元着色器源代码
      gl.shaderSource(vertexShader, VSHADER_SOURCE);
      gl.shaderSource(fragmentShader, FSHADER_SOURCE);
      //编译顶点、片元着色器
      gl.compileShader(vertexShader);
      gl.compileShader(fragmentShader);

      //创建程序对象program
      const program = gl.createProgram();
      //附着顶点着色器和片元着色器到program
      gl.attachShader(program, vertexShader);
      gl.attachShader(program, fragmentShader);
      //链接program
      gl.linkProgram(program);
      //使用program
      gl.useProgram(program);
      gl.program = program
      //返回程序program对象
      return program;
    }

    function init() {
      //通过getElementById()方法获取canvas画布
      const canvas = document.getElementById('webgl');
      //通过方法getContext()获取WebGL上下文
      const gl = canvas.getContext('webgl');
      //初始化着色器
      initShader(gl, VSHADER_SOURCE, FSHADER_SOURCE);

      // 设置canvas的背景色
      gl.clearColor(0.0, 0.0, 0.0, 1.0);

      //清空canvas
      gl.clear(gl.COLOR_BUFFER_BIT);

      //给片元着色器uniform变量u_FragColor赋值
      setFragColor(gl)

      //初始化顶点
      const n = initVertexBuffers(gl)

      //获取顶点着色器uniform变量u_Scale的存储地址
      const u_Scale = gl.getUniformLocation(gl.program, 'u_Scale')

      //定义要缩放的倍数
      const SCALE = 0.5
      //向顶点着色器uniform变量u_Scale传值
      gl.uniform1f(u_Scale, SCALE)

      //绘制三角形
      gl.drawArrays(gl.TRIANGLES, 0, n)

    }

    //给片元着色器uniform变量u_FragColor赋值
    function setFragColor(gl) {
      //获取片元着色器uniform变量u_FragColor的存储地址
      const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
      //向片元着色器uniform变量u_FragColor传值
      gl.uniform4f(u_FragColor, 0.0, 1.0, 0.0, 1.0) //绿色
    }

    //初始化顶点
    function initVertexBuffers(gl) {
      const vertices = new Float32Array([
        0.0, 0.5,
        -0.5, -0.5,
        0.5, -0.5
      ])

      //1.创建缓冲区对象
      const vertexBuffer = gl.createBuffer();
      if (!vertexBuffer) {
        console.log('创建缓冲区对象失败！')
        return -1
      }

      //2.将缓冲区对象绑定到目标
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)

      //3.向缓冲区对象中写入数据
      gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

      const a_Position = gl.getAttribLocation(gl.program, 'a_Position'); //获取着色器attribute变量a_Position的存储地址

      //4.将缓冲区对象分配给a_Position变量
      gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)

      //5.连接a_Position变量与分配给它的缓冲区对象
      gl.enableVertexAttribArray(a_Position)

      return vertices.length / 2

    }
    init()
  </script>
</body>

</html>

鸡米工程师

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WebGL编程指南05-通过计算顶点坐标实现平移、旋转和缩放

旋转轴（图形将围绕旋转轴旋转）旋转方向（顺时针或逆时针）旋转角度（图形绕旋转轴顺着旋转方向旋转的角度）关于旋转方向，我们把逆时针旋转称之为正旋转，例如一个图形绕Z轴旋转了90度，指的是逆时针旋转了90度，响应的如果是-90度就是顺时针旋转90度，关于正旋转请参照下图。
复制链接

扫一扫