（三）旋转的正方形

一、旋转的正方形主要思路：

　　(1)定义正方形顶点　　

    vertices = [
        vec2(0,1),
        vec2(1,0),
        vec2(-1,0),
        vec2(0,-1)
    ]

　　(2)在顶点着色器中定义theta（uniform变量），用来改变顶点的位置信息

attribute vec4 vPosition;
attribute vec3 vColor;
varying vec4 fColor;
uniform float theta;
void main(){
    gl_Position.x = -sin(theta) * vPosition.y + cos(theta) * vPosition.x;
    gl_Position.y = sin(theta) * vPosition.x + cos(theta) * vPosition.y;
    gl_Position.z = 0.0;
    gl_Position.w = 1.0;
    fColor = vec4(vColor, 1.0);
}

　　(3)获取顶点着色器中theta变量的地址

  var  thetaLoc = gl.getUniformLocation(program, 'theta');

　　(4)使用uniform1f()函数传递theta值，并使用window.requerstAnimFrame()函数进行动态刷新绘制四边形

function render(){
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    theta += 0.01;
    gl.uniform1f(thetaLoc, theta);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length)

    window.requestAnimFrame(render);
}

　　(5)最终效果如下:

                                                                            

二、变量及函数解释：

　　（1）uniform变量：

　　  可以用于顶点着色器，也可以用于片元着色器，主要用于定义与顶点信息无关的变量，只要是与顶点坐标无关的变量，基本都会用uniform来定义。

　　（2）getUniformLocation函数：获取顶点着色器中uniform变量的地址

　　 gl.getUniformLocation(WebGLProgram, "uniformName");

　　（3）uniform1f函数：传递uniform变量至着色器中

　  　gl.uniform[1234][uif][v]()


• [1234]表示数目1~4，[uif]表示类型，float是f，int是i，unsigned int是ui。所以设置一个整数就是 uniform1i。
• [v]，表示向量，所以传递的参数就是类型为type，维度为n的向量。

三、旋转的正方形源码下载地址

https://gitee.com/yiliangmi/computer-graphic-base-webgl

四、学习交流群

QQ群：871934478

版权所有，转载请注明源地址