在 WebGL2 中在哪里放置制服、视图矩阵和投影矩阵以形成相机？

Question

我正在做关于 WebGL2 的作业，并提供了一个投影和视图矩阵，我必须使用它来形成一个相机。它说“必须将矩阵发送到着色器，并且必须通过新制服扩展着色器”。 这是多部分分配的第二部分，其中第一部分是将立方体的顶点发送到顶点着色器。 我到达了显示矩形的部分，因为立方体的所有部分都在那个后面。

我查看了 webgl2fundamentals 上的一些示例，但无法使代码适应我们提供的代码。我已经尝试了几种定位，尤其是在 init() 期间查找制服，然后在 createGeometry() 或 render() 中将它们绑定，所有有问题的代码行目前都位于此处以便更好地概览。 我认为至少不应该在渲染时进行查找。

顶点着色器：

#version 300 es

    precision mediump float;

    layout(location = 0) in vec3 aPos;
    layout(location = 1) in vec3 aColor;    

    uniform mat4 u_pmatrix;
    uniform mat4 u_vmatrix;

    out vec3 color;

    void main() {  
      color = aColor;  
      gl_Position = u_pmatrix * u_vmatrix * vec4(aPos, 1.0); 
    }

"use strict"

var gl;

var viewMatrix;
var projectionMatrix;

var program;

var vao;

function render(timestamp, previousTimestamp) 
{
    var light = getLightPosition(); // vec3
    var rotation = getRotation();   // vec3 

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    gl.useProgram(program); 

    gl.bindVertexArray(vao);

    var pMatLocation = gl.getUniformLocation(program, "u_pmatrix");
    var vMatLocation = gl.getUniformLocation(program, "u_vmatrix");

    gl.uniformMatrix4fv(pMatLocation, false, projectionMatrix);
    gl.uniformMatrix4fv(vMatLocation, false, viewMatrix);

    gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);

    window.requestAnimFrame(function (time) {       
        render(time, timestamp);
    });
}

function createGeometry()
{
    var positions = [];
    positions.push(vec3(-0.5, -0.5,  -0.5));
    positions.push(vec3(-0.5,  0.5,  -0.5));
    positions.push(vec3(0.5, -0.5,  -0.5));
    positions.push(vec3(-0.5, 0.5,  -0.5));
    positions.push(vec3(0.5, 0.5,  -0.5));
    positions.push(vec3(0.5, -0.5,  -0.5));

    positions.push(vec3(-0.5, -0.5, 0.5));
    positions.push(vec3(0.5, -0.5, 0.5));
    positions.push(vec3(-0.5, 0.5, 0.5));
    positions.push(vec3(-0.5, 0.5, 0.5));
    positions.push(vec3(0.5, -0.5, 0.5));
    positions.push(vec3(0.5, 0.5, 0.5));

    positions.push(vec3(-0.5, 0.5, -0.5));
    positions.push(vec3(-0.5, 0.5, 0.5));
    positions.push(vec3(0.5, 0.5, -0.5));
    positions.push(vec3(-0.5, 0.5, 0.5));
    positions.push(vec3(0.5, 0.5, 0.5));
    positions.push(vec3(0.5, 0.5, -0.5));

    positions.push(vec3(-0.5, -0.5, -0.5));
    positions.push(vec3(0.5, -0.5, -0.5));
    positions.push(vec3(-0.5, -0.5, 0.5));
    positions.push(vec3(-0.5, -0.5, 0.5));
    positions.push(vec3(0.5, -0.5, -0.5));
    positions.push(vec3(0.5, -0.5, 0.5));

    positions.push(vec3(-0.5, -0.5, -0.5));
    positions.push(vec3(-0.5, -0.5, 0.5));
    positions.push(vec3(-0.5, 0.5, -0.5));
    positions.push(vec3(-0.5, 0.5, -0.5));
    positions.push(vec3(-0.5, 0.5, 0.5));
    positions.push(vec3(-0.5, 0.5, -0.5));

    positions.push(vec3(0.5, -0.5, -0.5));
    positions.push(vec3(0.5, 0.5, -0.5));
    positions.push(vec3(0.5, -0.5, 0.5));
    positions.push(vec3(0.5, -0.5, 0.5));
    positions.push(vec3(0.5, 0.5, -0.5));
    positions.push(vec3(0.5, 0.5, 0.5));

    vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

    var vertexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
    gl.bufferData(gl.ARRAY_BUFFER, flatten(positions), gl.STATIC_DRAW);
    gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 0, 0);
    gl.enableVertexAttribArray(0);

    var colors = [];
    colors.push(vec3(0.0, 1.0, 0.0));
    colors.push(vec3(0.0, 1.0, 0.0));
    colors.push(vec3(0.0, 1.0, 0.0));
    colors.push(vec3(0.0, 1.0, 0.0));
    colors.push(vec3(0.0, 1.0, 0.0));
    colors.push(vec3(0.0, 1.0, 0.0));

    colors.push(vec3(1.0, 0.0, 0.0));
    colors.push(vec3(1.0, 0.0, 0.0));
    colors.push(vec3(1.0, 0.0, 0.0));
    colors.push(vec3(1.0, 0.0, 0.0));
    colors.push(vec3(1.0, 0.0, 0.0));
    colors.push(vec3(1.0, 0.0, 0.0));


    colors.push(vec3(0.0, 0.0, 1.0));
    colors.push(vec3(0.0, 0.0, 1.0));
    colors.push(vec3(0.0, 0.0, 1.0));
    colors.push(vec3(0.0, 0.0, 1.0));
    colors.push(vec3(0.0, 0.0, 1.0));
    colors.push(vec3(0.0, 0.0, 1.0));

    colors.push(vec3(1.0, 1.0, 0.0));
    colors.push(vec3(1.0, 1.0, 0.0));
    colors.push(vec3(1.0, 1.0, 0.0));
    colors.push(vec3(1.0, 1.0, 0.0));
    colors.push(vec3(1.0, 1.0, 0.0));
    colors.push(vec3(1.0, 1.0, 0.0));

    colors.push(vec3(1.0, 1.0, 0.5));
    colors.push(vec3(1.0, 1.0, 0.5));
    colors.push(vec3(1.0, 1.0, 0.5));
    colors.push(vec3(1.0, 1.0, 0.5));
    colors.push(vec3(1.0, 1.0, 0.5));
    colors.push(vec3(1.0, 1.0, 0.5));

    colors.push(vec3(1.0, 0.0, 1.0));
    colors.push(vec3(1.0, 0.0, 1.0));
    colors.push(vec3(1.0, 0.0, 1.0));
    colors.push(vec3(1.0, 0.0, 1.0));
    colors.push(vec3(1.0, 0.0, 1.0));
    colors.push(vec3(1.0, 0.0, 1.0));

    var vboColor = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, vboColor);
    gl.bufferData(gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW);    
    gl.vertexAttribPointer(1, 3, gl.FLOAT, gl.FALSE, 0, 0);
    gl.enableVertexAttribArray(1);
}

function loadModel()
{
    var meshData = loadMeshData();
    var positions = meshData.positions;
    var normals = meshData.normals;
    var colors = meshData.colors;
    var vertexCount = meshData.vertexCount;
}

window.onload = function init() {

    var canvas = document.getElementById('rendering-surface');  
    gl = WebGLUtils.setupWebGL( canvas );

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.enable(gl.DEPTH_TEST);
    gl.clearColor(0.0, 0.0, 0.0, 0.0);  

    program = initShaders(gl, "vertex-shader","fragment-shader");
    gl.useProgram(program); 

    createGeometry();
    loadModel();    

    var projectionMatrix = mat4(1.0);
    projectionMatrix = perspective(90, canvas.width / canvas.height, 0.1, 100); 

    var eyePos = vec3(0, 1.0, 2.0);
    var lookAtPos = vec3(0.0, 0.0, 0.0);
    var upVector = vec3(0.0, 1.0, 0.0);
    viewMatrix = lookAt(eyePos, lookAtPos, upVector);

    render(0,0);
}

应该有一个立方体，但所看到的只是空白区域。要么定位或变换错误，要么程序崩溃。

Answer 1

在您的init 函数中，您是shadowing 您的全局projectionMatrix，因此您在render 中使用的投影矩阵始终保持为undefined。

    var projectionMatrix = mat4(1.0);// << shadowing your global with the same name
    projectionMatrix = perspective(90, canvas.width / canvas.height, 0.1, 100); 

您可能想看看this article，了解如何使用开发人员工具进行调试。