如何使用WebGL的

我試着迭戈康托爾&布蘭登 - 瓊斯繪製的立足之本WebGL的入門GUID一個簡單的方形，但被困在第二課繪製一個正方形。如何使用WebGL的

我是想畫一個正方形，但我的控制檯顯示出錯信息如下：

我的代碼示例

<html> 
<head> 
<title>WebGL-Lesson One</title> 
<style type="text/css"> 
canvas { 
    border: 2px dotted black; 
} 
</style> 
<script id="code-js" type="text/javascript"> 
    var gl = null; 

    function getGlContext() { 
     var my_canvas = document.getElementById("my_canvas"); 
     var names = [ "webgl", "experimental-webgl", "webkit-3d", "moz-webgl" ]; 
     for (var i = 0; i < names.length; ++i) { 
      try { 
       gl = my_canvas.getContext(names[i]); 
      } catch (e) { 
      } 
      if (gl) 
       break; 
     } 
     if (gl == null) { 
      alert("empty canvas") 
     } else { 
      drawing(); 
     } 
    } 

    function drawing() { 
     var vertices = [ -50.0, 50.0, 0.0, -50.0, -50.0, 0.0, 50.0, -50.0, 0.0, 
       50.0, 50.0, 0.0 ]; 
     var indices = [ 3, 2, 1, 3, 1, 0 ] 

     var myVBOBuffer = gl.createBuffer(); 
     gl.bindBuffer(gl.ARRAY_BUFFER, myVBOBuffer); 
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), 
       gl.STATIC_DRAW); 

     var aVertexPosition = (0,0,0); 

     gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0); 

     gl.enableVertexAttribArray(aVertexPosition); 

     gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 
    // gl.bindBuffer(gl.ARRAY_BUFFER, null); 

     var myIBOBuffer = gl.createBuffer(); 

     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, myIBOBuffer); 

     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices),gl.STATIC_DRAW); 

    // gl.bindBuffer(gl.ARRAY_BUFFER, null); 


    } 
</script> 
<script id="shader-fs" type="x-shader/xfragment"></script> 
<script id="shader-vs" type="x-shader/x-vertex"></script> 
</head> 
<body onload="getGlContext()"> 

    <canvas id="my_canvas" width="700" height="500"></canvas> 

</body> 
</html>

來源

2013-11-26 Dipak

您是否考慮過使用中間件庫？我喜歡pixi.js，它是一個帶畫布後備的webGL渲染庫。如果你打算構建一個遊戲引擎，這可能需要考慮，它可以處理所有的樣板工作。所以，讓它工作的時間更少，實際工作時間更多。 – tsturzl

+1 @tsturzl我剛開始學習這個東西..，沒有那麼多的* .js框架知道。但是，正如你所說的意圖是創建一些良好的Web應用程序（遊戲本身:)：D）。不管怎麼說，還是要謝謝你。 – Dipak

我會推薦[這些課程]（http://games.greggman.com/game/webgl-fundamentals/）。他們從比其他課程更基礎的層面開始，並將幫助您真正理解正在發生的事情。 – gman

：

WebGL: INVALID_OPERATION: drawArrays: attribs not setup correctly

我試了一下下面給出着色器腳本顯示爲空。你至少需要一個基本的頂點和片段着色器。您還需要加載，編譯它們並創建着色器程序，然後您需要調用gl.useProgram來設置您的屬性，獲得統一的位置並設置統一的值。我建議嘗試these lessons，他們爲我工作。

來源

2013-11-26 04:53:15 pixelmike

如何使用WebGL的

回答

相關問題