WebGL как рендерить 3D-массив?

Question

Я пытаюсь найти хороший способ визуализации математических функций с помощью WebGL. Или просто все, что я помещал в массив, как основные математические функции. Поэтому здесь я просто помещаю некоторую трехмерную координату в массив, но она не работает.

Это мои строки кода:

arrays.js [UPDATED]

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); 
} 

шейдеры:

i set up the shaders here [UPDATED]:

<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/, так что последние 3 строки в drawPoints() должны быть:

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; 

вот выход я получил: