WebGL的旋转顶点着色器的三角形，而无需使用转换矩阵

Question

所以，这是试图不使用矩阵变换旋转三角形的结果，我的任务需要一个浮动传递到顶点着色器和然后在着色器内进行变换数学运算。

我使用

uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y); 
    uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x); 

从我所随处可见，做一个矩阵将执行相同的数学旋转顶点，我不想用一个矩阵来执行它。下面 WebGL的代码

全码：

var gl; 
var points; 
var colours; 
var fRotation; 
var program; 

window.onload = function init() 
{ 
    canvas = document.getElementById("gl-canvas"); 

    gl = WebGLUtils.setupWebGL(canvas); 
    if (!gl) { alert("WebGL isn't available"); } 

    fRotation = 1; 

    // 
    // Initialize our data for the Triangle 
    // 

    // First, initialize the corners of our triangle with three points. 
    points = [ 
     vec2(0, 0.6), 
     vec2(-0.5, -0.3), 
     vec2(0.5, -0.3) 
    ]; 

    //Next, initialize the colours for each corner in Red,Green,Blue 
    colours = [ 
     vec3(1, 0,0), 
     vec3(0, 1,0), 
     vec3(0, 0,1) 
    ]; 

    // 
    // Configure WebGL 
    // 
    gl.viewport(0, 0, canvas.width, canvas.height); 
    gl.clearColor(0.0, 0.0, 0.0, 1.0); 

    // Load shaders and initialize attribute buffers 
    program = initShaders(gl, vBasicShaderCode, 
           fBasicShaderCode); 
    gl.useProgram(program); 

    // Load the positional data into the GPU 
    var posBufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, posBufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 
    var vPos = gl.getAttribLocation(program, "aPosition"); 
    gl.vertexAttribPointer(vPos, 2, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vPos); 

    // Load the colour data into the GPU 
    var colBufferId = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, colBufferId); 
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colours), gl.STATIC_DRAW); 

    // Associate out shader variables with our data buffer 
    var vCol = gl.getAttribLocation(program, "aColour"); 
    gl.vertexAttribPointer(vCol, 3, gl.FLOAT, false, 0, 0); 
    gl.enableVertexAttribArray(vCol); 


    render(); 
}; 


function render() 
{ 

    gl.uniform1f(gl.getUniformLocation(program, "fRotation"), fRotation); 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    gl.drawArrays(gl.TRIANGLES, 0, 3); //Draw a single triangle (3 points) 

    fRotation += 0.1; 
} 

顶点着色器

var vBasicShaderCode =` 
attribute vec2 aPosition; 
attribute vec3 aColour; 
uniform float fRotation; 
varying vec3 vColour; 


void 
main() 
{ 
    vColour=aColour; 

    vec2 uPosition = vec2(0.0,0.0); 

    //translate 

    uPosition.x = aPosition.x; 
    uPosition.y = aPosition.y; 

    uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y); 
    uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x); 

    gl_Position = vec4(uPosition.x,uPosition.y,0.0,1.0); 
}`; 

Answer 1

你正在改变你的着色器代码的变量uPosition.x，你用它来计算uPosition.y之前。

uPosition.x = (cos(fRotation)*uPosition.x)-(sin(fRotation)*uPosition.y); 
uPosition.y = (cos(fRotation)*uPosition.y)+(sin(fRotation)*uPosition.x); 

使用属性aPosition计算uPosition代替：

uPosition.x = (cos(fRotation)*aPosition.x)-(sin(fRotation)*aPosition.y); 
uPosition.y = (cos(fRotation)*aPosition.y)+(sin(fRotation)*aPosition.x);