Webgl 在不使用变换矩阵的情况下使用顶点着色器中的偏移量旋转两个三角形

Question

此任务的目标是在 canvas 上显示两个三角形，使用相同的顶点数据和偏移量来显示三角形，并让它们在顶点着色器中旋转。我可以得到两个三角形来显示（注释掉 window.requestAnimFrame(render, canvas); 在我的渲染函数中）如何尝试为这段代码设置动画时只显示一个三角形，真的有什么东西吗很明显我不见了？下面的代码。

canvas requestAnimFrame 注释掉的显示

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

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);
    
}`;

如有任何帮助，我们将不胜感激。

Answer 1

您需要为每次开奖设置uOffset。

代码有效地做到了这一点

uOffset = 0 // 默认值
渲染
drawTri
uOffset = 0.3, 0.1
drawTri
requestAnimationFrame
渲染
drawTri // 这里uOffset还是0.3，0.1。它不会神奇地回到 0
uOffset = 0.3, 0.1
drawTri

Answer 2

添加答案以显示解决此问题的代码，感谢 Gman 的建议。

        gl.clear(gl.COLOR_BUFFER_BIT);      
        var uOffset = gl.getUniformLocation(program, "uOffset"); 
        var offset = vec2(0.0, 0.0); 
        gl.uniform2fv(uOffset, offset); 
        drawtri();      
        var offset = vec2(0.3, 0.1); 
        gl.uniform2fv(uOffset, offset); 
        drawtri();      
        window.requestAnimFrame(render, canvas);        
    }   ```

Webgl 在不使用变换矩阵的情况下使用顶点着色器中的偏移量旋转两个三角形

Webgl rotate two triangles using offset in vertex shader without using transformation matrix

webgl