WebGLのは、だから、変換行列

Question

を使用せずに、頂点シェーダで三角形を回転させ、これは行列変換を使用せずに三角形を回転させるようにしようとした結果である、私の割り当ては、頂点シェーダに渡されるfloatを必要とし、シェーダ内で変換数学が発生するようにします。

私は行列が実行することになり、私は行列を使用して、それを実行しないと同じ数学をしているどこにでも見てきたものから

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.yを計算するためにそれを使用する前に、あなたのシェーダコード内の変数uPosition.xを変更しています。

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

代わりuPositionを計算するための属性aPositionを使用します。

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