Где расположить униформу, просмотреть матрицу и матрицу проекции для формирования камеры в WebGL2? - PullRequest
Новая
       10

Где расположить униформу, просмотреть матрицу и матрицу проекции для формирования камеры в WebGL2?

1 голос
/ 21 июня 2019

Я делаю домашнее задание на 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);
}

Должен быть куб, но все, что нужно увидеть, это пустое место. Либо неправильное позиционирование или преобразование, либо сбой программы.

1 Ответ

1 голос
/ 21 июня 2019

В вашей функции init вы отслеживаете ваш глобальный 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);

Возможно, вы захотите взглянуть на эту статью о том, как использовать инструменты разработчика для отладки.

...