のWebGL Javascriptが私はシリンダーを描くしようとしていますが、そのは:(</p> <p>を働いていない:(

Question

を働いていない、あなたは助けることはできますか？

http://www.nextlevelgeek.com/CylinderWebGL.zip

var gl; 
    function initGL(canvas) { 
    try { 
     gl = canvas.getContext("experimental-webgl"); 
     gl.viewportWidth = canvas.width; 
     gl.viewportHeight = canvas.height; 
    } catch(e) { 
    } 
    if (!gl) { 
     alert("Could not initialise WebGL, sorry :-("); 
    } 
    } 


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

    shaderProgram.vertexColorAttribute = gl.getAttribLocation(shaderProgram, "aVertexColor"); 
    gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute); 

    shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix"); 
    shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix"); 
    } 


    var mvMatrix; 
    var mvMatrixStack = []; 

    function mvPushMatrix(m) { 
    if (m) { 
     mvMatrixStack.push(m.dup()); 
     mvMatrix = m.dup(); 
    } else { 
     mvMatrixStack.push(mvMatrix.dup()); 
    } 
    } 

    function mvPopMatrix() { 
    if (mvMatrixStack.length == 0) { 
     throw "Invalid popMatrix!"; 
    } 
    mvMatrix = mvMatrixStack.pop(); 
    return mvMatrix; 
    } 

    function loadIdentity() { 
    mvMatrix = Matrix.I(4); 
    } 


    function multMatrix(m) { 
    mvMatrix = mvMatrix.x(m); 
    } 

    function mvTranslate(v) { 
    var m = Matrix.Translation($V([v[0], v[1], v[2]])).ensure4x4(); 
    multMatrix(m); 
    } 

    function mvRotate(ang, v) { 
    var arad = ang * Math.PI/180.0; 
    var m = Matrix.Rotation(arad, $V([v[0], v[1], v[2]])).ensure4x4(); 
    multMatrix(m); 
    } 

    var pMatrix; 
    function perspective(fovy, aspect, znear, zfar) { 
    pMatrix = makePerspective(fovy, aspect, znear, zfar); 
    } 


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


    var triangleVertexPositionBuffer; 
    var triangleVertexColorBuffer; 
    var multiTriangleVertexPositionBuffer; 
    var multiTriangleVertexColorBuffer; 
    var squareVertexPositionBuffer; 
    var squareVertexColorBuffer; 
    function initBuffers() { 
    triangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    var vertices = [ 
     0.0, 1.0, 0.0, 
     -1.0, -1.0, 0.0, 
     1.0, -1.0, 0.0 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    triangleVertexPositionBuffer.itemSize = 3; 
    triangleVertexPositionBuffer.numItems = 3; 

    triangleVertexColorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
    var colors = [ 
     1.0, 0.0, 0.0, 1.0, 
     0.0, 1.0, 0.0, 1.0, 
     0.0, 0.0, 1.0, 1.0, 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
    triangleVertexColorBuffer.itemSize = 4; 
    triangleVertexColorBuffer.numItems = 3; 

    multiTriangleVertexPositionBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexPositionBuffer); 

    var segments = 10; // Higher numbers improve quality 
    var radius = 3; // The radius (width) of the cylinder 
    var height = 10; // The height of the cylind 
    var PI = 3.14159265; 

    var vertices = new Array(segments*3*2); 
    var v = 0; 
    for (var y = 0; y < 2; y++) 
    { 
     for (var x = 0; x < segments; x++) 
     { 
      var theta = (x/(segments - 1)) * 2 * PI; 
      vertices[v]= radius * Math.cos(theta); //x 
      v++; 
      vertices[v]= height * y; //y 
      v++; 
      vertices[v]= radius * Math.sin(theta); //z 
      v++; 
     } 
    } 

    var indices = new Array(segments*6); 
    var v = 0; 
    for (var x = 0; x < segments - 1; x++) 
    { 
     indices[v]=x; 
     v++; 
     indices[v]=x + segments; 
     v++; 
     indices[v]=x + segments + 1; 
     v++; 

     indices[v]=x + segments + 1; 
     v++; 
     indices[v]=x+ 1; 
     v++; 
     indices[v]=x; 
     v++; 
    } 

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW); 
    multiTriangleVertexPositionBuffer.itemSize = 3; 
    multiTriangleVertexPositionBuffer.numItems = segments; 

    multiTriangleVertexColorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexColorBuffer); 
    var colors = [ 
     1.0, 0.0, 0.0, 1.0, 
     0.0, 1.0, 0.0, 1.0, 
     0.0, 0.0, 1.0, 1.0, 
    ]; 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
    multiTriangleVertexColorBuffer.itemSize = 4; 
    multiTriangleVertexColorBuffer.numItems = 3; 
    alert(dump(indices,colors)); 

    ////////////////////////////////////////////////////////////////////////////////// 

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

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
    squareVertexPositionBuffer.itemSize = 3; 
    squareVertexPositionBuffer.numItems = 4; 

    squareVertexColorBuffer = gl.createBuffer(); 
    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); 
    colors = [] 
    for (var i=0; i < 4; i++) { 
     colors = colors.concat([0.5, 0.5, 1.0, 1.0]); 
    } 
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 
    squareVertexColorBuffer.itemSize = 4; 
    squareVertexColorBuffer.numItems = 4; 
    } 

function dump(arr,level) { 
    var dumped_text = ""; 
    if(!level) level = 0; 

    //The padding given at the beginning of the line. 
    var level_padding = ""; 
    for(var j=0;j<level+1;j++) level_padding += " "; 

    if(typeof(arr) == 'object') { //Array/Hashes/Objects 
     for(var item in arr) { 
      var value = arr[item]; 

      if(typeof(value) == 'object') { //If it is an array, 
       dumped_text += level_padding + "'" + item + "' ...\n"; 
       dumped_text += dump(value,level+1); 
      } else { 
       dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n"; 
      } 
     } 
    } else { //Stings/Chars/Numbers etc. 
     dumped_text = "===>"+arr+"<===("+typeof(arr)+")"; 
    } 
    return dumped_text; 
} 

    var rTri = 0; 
    var rSquare = 0; 
    function drawScene() { 
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); 
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 

    perspective(45, gl.viewportWidth/gl.viewportHeight, 0.1, 100.0); 
    loadIdentity(); 

    mvTranslate([-1.5, 0.0, -7.0]) 
/* 
    mvPushMatrix(); 
    mvRotate(rTri, [0, 1, 0]); 

    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    setMatrixUniforms(); 
    gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems); 

    mvPopMatrix(); 


    mvTranslate([3.0, 0.0, 0.0]) 

    mvPushMatrix(); 
    mvRotate(rSquare, [1, 0, 0]); 

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    setMatrixUniforms(); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems); 

    mvPopMatrix(); */ 

    mvTranslate([0.0, 0.0, 0.0]) 

    mvPushMatrix(); 
    mvRotate(rTri, [0, 1, 0]); 

    gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexPositionBuffer); 
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, multiTriangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    // gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexColorBuffer); 
    // gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, multiTriangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

    setMatrixUniforms(); 
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, multiTriangleVertexPositionBuffer.numItems); 

    mvPopMatrix(); 
    } 


    var lastTime = 0; 
    function animate() { 
    var timeNow = new Date().getTime(); 
    if (lastTime != 0) { 
     var elapsed = timeNow - lastTime; 

     rTri += (90 * elapsed)/1000.0; 
     rSquare += (75 * elapsed)/1000.0; 
    } 
    lastTime = timeNow; 
    } 


    function tick() { 
    drawScene(); 
    animate(); 
    } 


    function webGLStart() { 
    var canvas = document.getElementById("lesson03-canvas"); 
    initGL(canvas); 
    initShaders() 
    initBuffers(); 

    gl.clearColor(0.0, 0.0, 0.0, 1.0); 

    gl.clearDepth(1.0); 

    gl.enable(gl.DEPTH_TEST); 
    gl.depthFunc(gl.LEQUAL); 

    setInterval(tick, 15); 
    } 

Answer 1

をここでスタートだ。あなたはねシリンダーカラーを供給しないでください。

gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexColorBuffer); 
var colors = [ 
    1.0, 0.0, 0.0, 1.0, 
    0.0, 1.0, 0.0, 1.0, 
    0.0, 0.0, 1.0, 1.0, 
]; 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 

あなたはcylの数に一致するようなものが必要ですインダー頂点：

gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexColorBuffer); 
colors = [] 
for (var i=0; i < segments*3*2; i++) { 
    colors = colors.concat([1.0, 0.5, 0.5, 1.0]); 
} 
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW); 

は、その後、あなたがこれを実行したら、あなたがシーンに回転するオブジェクトが表示されますライン

// gl.bindBuffer(gl.ARRAY_BUFFER, multiTriangleVertexColorBuffer); 
    // gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, multiTriangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0); 

のコメントを解除する必要があります。それは円柱ではありませんが、おそらくあなたはそれを見ることができる形をデバッグすることができます。手始めに

、私の代わりに

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(indices), gl.STATIC_DRAW); 
multiTriangleVertexPositionBuffer.itemSize = 3; 
multiTriangleVertexPositionBuffer.numItems = segments; 

のあなたは

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 
multiTriangleVertexPositionBuffer.itemSize = 3; 
multiTriangleVertexPositionBuffer.numItems = segments*2; 

そしてよりむしろgl.TRIANGLESを使用する方法についてはLesson 4に先読み、gl.TRIANGLE_STRIPとしてこれを描画する必要があると思います。 （これは、あなたのインデックス配列を使用することができます）

Answer 2

私にとって、これはうまくいきました。変更

：あなたはどのようなエラーを

<script type="text/javascript" src="glMatrix-0.9.5.min.js" ></script> 

へ

<script type="text/javascript" src="glMatrix-0.9.5.min.js" />