在webgl中绘制简单的正方形_Webgl

在webgl中绘制简单的正方形

webgl

在webgl中绘制简单的正方形,webgl,Webgl,我有一个非常基本的问题。我是webgl新手，正在尝试画一个简单的正方形。我正在使用gl矩阵库进行矩阵操作 Javascript代码： squareVertexPositionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); vertices = [ 0.9, 0.9, 0.0,1.0, -0.9, 0.9, 0.0

我有一个非常基本的问题。我是webgl新手，正在尝试画一个简单的正方形。我正在使用gl矩阵库进行矩阵操作

Javascript代码：

squareVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
    vertices = [
         0.9,  0.9,  0.0,1.0,
        -0.9,  0.9,  0.0,1.0,
         0.9, -0.9,  0.0,1.0,
        -0.9, -0.9,  0.0,1.0

    ];


    squareVertexPositionBuffer.itemSize = 4;
    squareVertexPositionBuffer.numItems = 4;

    mat4.identity(pMatrix);
    mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);
    mat4.identity(mvMatrix);
    mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute,         squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);

着色器：

attribute vec3 aVertexPosition;

uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec3 debug;


void main(void) {
    gl_Position =  uPMatrix * uMVMatrix * vec4(aVertexPosition.xyz, 1.0);
    debug = aVertexPosition;
}

这似乎很好。在这里，我将模型视图和透视矩阵作为统一体传递给着色器程序，并将它们与那里的顶点坐标相乘。但是如果将javascript中的模型视图和透视矩阵相乘，然后将修改后的顶点传递给着色器，那么它似乎不起作用

我看不出这个错误。非常感谢您的帮助

我立刻注意到几个问题：

1）顶点着色器输入属性与传递给VertexAttribute指针的参数不匹配：

指定属性为4浮动宽度，但顶点着色器将其指定为vec3。这些应该是一致的

2）我没有看到对EnableVertexAttributeArray的调用，类似于：

gl.enableVertexAttributeArray（shaderProgramm.vertexPositionAttribute）

必须启用顶点着色器使用的顶点属性数组

3）从显示的代码中，您只指定了一个模型矩阵（标识、转换）。您需要创建一个视图矩阵。一个简单的方法是调用mat4.lookAt。其定义如下：

mat4.lookAt=功能（眼睛、中心、向上、目标）

眼睛是相机的位置 “中心”是相机正在查看的位置 up应始终为（0，1，0）

例如：

眼睛=（0,0,1）中心=（0,0,0）

这将使相机1装置沿正Z轴向下，并使其注视原点

将其与模型矩阵相乘将得到模型视图矩阵

代码缺失太多，因此很难确定您的错误是否存在于其他地方。例如，片段着色器的作用是什么

当尝试在屏幕上显示第一个基本体时，我建议禁用剔除和深度测试。如果片段输出与清晰颜色匹配，还可以随时间改变清晰颜色

约翰