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，了解如何使用开发人员工具进行调试。

在WebGL2中将制服，视图矩阵和投影矩阵放置在何处以形成摄影机？

1 个答案: