Question

我试图找出一种使用WebGL渲染数学函数的好方法。或者只是我放入数组中的所有东西，比如基本的数学函数。所以在这里我只是将一些3D坐标放在一个数组中，它似乎不起作用。

这是我的代码行：

arrays.js [更新]

var myPosArray = [];
var myArrBuffer = null;
var x = 0, y = 0, z = 0;
/*Function that fills the array*/
function dotter() {
    myArrBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, myArrBuffer);
    for (var i = 0; i < 10; ++i) {
        x = Math.cos(i * Math.PI / 3);
        y = Math.sin(i * Math.PI / 4);
        z = x + y;
        myPosArray.push(x);
        myPosArray.push(y);
        myPosArray.push(z);
    }
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(myPosArray), gl.STATIC_DRAW);
    myArrBuffer.itemSize = 3;
    myArrBuffer.numItems = myPosArray.lenght / 3;

}
/*This function is supposed to draw the points*/
function drawPoints(){
        gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
        mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0,
                pMatrix);
//      mat4.identity(mvMatrix);
        /*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
        /*Draw triangle*/
        mat4.translate(mvMatrix, [ -1.5, 0.0, -7.0 ]);
        gl.bindBuffer(gl.ARRAY_BUFFER, myArrBuffer);
        gl.vertexAttribArray(shaderProgram.vertexPositionAttribute, myArrBuffer.itemSize, gl.FLOAT, false, 0, 0);
        gl.drawArrays(gl.POINTS, 0, myArrBuffer.numItems);
}

着色器：

我在这里设置着色器[更新]：

<script id="shader-fs" type="x-shader/x-fragment">
 precision mediump float;

  varying vec4 vColor;

  void main(void) {
    gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
  }
</script>
<script id="shader-vs" type="x-shader/x-vertex">
  attribute vec3 aVertexPosition;
  attribute vec4 aVertexColor;

  uniform mat4 mvMatrix;
  uniform mat4 pMatrix;

  varying vec4 vColor;

  void main(void) {
    gl_Position = pMatrix * mvMatrix * vec4(aVertexPosition, 1.0);
  }
</script>

schaders.js

/* Setting shaders up */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
function getShader(gl, id) {
    var shaderScript = document.getElementById(id);
    if (!shaderScript) {
        return null;
    }
    var str = "";
    var k = shaderScript.firstChild;
    while (k) {
        if (k.nodeType == 3) {
            str += k.textContent;
        }
        k = k.nextSibling;
    }
    var shader;
    if (shaderScript.type == "x-shader/x-fragment") {
        shader = gl.createShader(gl.FRAGMENT_SHADER);
    } else if (shaderScript.type == "x-shader/x-vertex") {
        shader = gl.createShader(gl.VERTEX_SHADER);
    } else {
        return null;
    }
    gl.shaderSource(shader, str);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        alert(gl.getShaderInfoLog(shader));
        return null;
    }
    return shader;
}
var shaderProgram;
function lightingShaders(){
     shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "pMatrix");
     shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "mvMatrix");

}
function initShaders() {
    var fragmentShader = getShader(gl, "shader-fs");
    var vertexShader = getShader(gl, "shader-vs");
    shaderProgram = gl.createProgram();
    gl.attachShader(shaderProgram, vertexShader);
    gl.attachShader(shaderProgram, fragmentShader);
    gl.linkProgram(shaderProgram);
    if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
        alert("Could not initialise shaders");
    }
    gl.useProgram(shaderProgram);

    shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram,"aVertexPosition");
    gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

    lightingShaders();
}

Answer 1

正如你所说，有一些小错误，但我认为这里真正的问题是你在调用gl.drawArrays之前没有设置矩阵制服。我假设您正在关注http://learningwebgl.com/上的教程，因此drawPoints()中的最后3行应为：

gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, 
                       myArrBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.POINTS, 0, myArrBuffer.numItems);

其中setMatrixUniforms()定义为：

function setMatrixUniforms() {
    gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
    gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

请注意，我还将gl.vertexAttribArray更改为gl.vertexAttribPointer。

使用翻译矩阵

mat4.translate(mvMatrix, [ 0.0, 0.0, -7.0 ]);

并在顶点着色器中将点大小设置为10以获得可见性

gl_PointSize = 10.0;

这是我得到的输出：

WebGL screenshot

WebGL如何渲染3d数组？

1 个答案: