webgl - Webgl使用顶点着色器中的偏移量旋转两个三角形而不使用变换矩阵

问题描述

此任务的目标是使用相同的顶点数据和偏移量在画布上显示两个三角形，以显示三角形并让它们在顶点着色器中旋转。我可以显示两个三角形（在我的渲染函数中注释掉 window.requestAnimFrame(render, canvas);）但是，当尝试对此代码进行动画处理时，只显示一个三角形，是否有一些非常明显的东西我错过了？代码如下。

注释掉 requestAnimFrame 的画布显示

尝试为三角形设置动画后的画布显示

var fRotation;
var uOffset;
window.onload = function init()
{
    canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);

    if (!gl) {alter("WebGL is not available.");}
    
    fRotation = 1;
    
    
    gl.viewport(0, 0, 512, 512);
    gl.clearColor(0, 0, 0, 1);
    
    
    points = [
        vec2(-1, 0),
        vec2(1, 0),
        vec2(0, 1)      
    ];

    colors = [
        vec3(0, 1, 0),
        vec3(1, 0, 0),
        vec3(0, 0, 1)
    ];

    

    var program = initShaders(gl, vBasicShaderCode, fBasicShaderCode);
    gl.useProgram(program);
    
    var posBufferId = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, posBufferId);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW);

    var vPos = gl.getAttribLocation(program, "aPosition");
    

    console.log("position data loaded");

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

    // Associate shader variables with data buffer
    var vCol = gl.getAttribLocation(program, "aColour");
    gl.vertexAttribPointer(vCol, 3, gl.FLOAT, false, 0, 0);
    gl.enableVertexAttribArray(vCol);
    console.log("color data loaded");
        
    render();
    
    function drawtri(){
    
        gl.enableVertexAttribArray(vPos);
        gl.bindBuffer(gl.ARRAY_BUFFER, posBufferId);
        gl.vertexAttribPointer(vPos, 2, gl.FLOAT, false, 0, 0);
        
        fRotation += 0.1 / 144;
    
        gl.uniform1f(gl.getUniformLocation(program, "fRotation"), fRotation );  
        
        gl.drawArrays(gl.TRIANGLES, 0, 3);

        
    }
    
    function render(){
        
        gl.clear(gl.COLOR_BUFFER_BIT);
        
        drawtri();
        var uOffset = gl.getUniformLocation(program, "uOffset"); // first need to get the location of the uniform variable
        var offset = vec2(0.3, 0.1); // we define 'offset' which is a 2 dimensional vector
        gl.uniform2fv(uOffset, offset); // we pass 'offset' to the variable in the Vertex Shader.
        drawtri();
        
        window.requestAnimFrame(render, canvas);
        
    }   
    
}

和顶点着色器

var vBasicShaderCode  =`
attribute vec2 aPosition; 
uniform vec2 uOffset; 
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;

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

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

任何帮助将不胜感激。

标签： webgl

webgl - Webgl使用顶点着色器中的偏移量旋转两个三角形而不使用变换矩阵

问题描述

解决方案

推荐阅读