WebGL рисуем индексы

Я новичок в WebGL, я пытаюсь нарисовать квадрат, используя два треугольника и индексы. Однако я ничего не понимаю. Я смотрю на коды и примеры, но что-то не хватает. Я стараюсь, чтобы все было очень просто.WebGL рисуем индексы

<html> 
<head>   
    <meta charset="utf-8"/> 
     <script id="vertex" type="x-shader"> 
      attribute vec2 aVertexPosition; 
      void main() { 
        gl_Position = vec4(aVertexPosition, 0.0, 1.0); 
      } 
    </script> 
    <script id="fragment" type="x-shader"> 
      #ifdef GL_ES 
       precision highp float; 
      #endif 

      uniform vec4 uColor; 

      void main() { 
       gl_FragColor = uColor; 
      } 
    </script>   
    <script type="text/javascript"> 
      function init(){ 
       var canvas = document.getElementById("mycanvas"); 
       var gl = canvas.getContext("experimental-webgl"); 
       gl.viewport(0, 0, canvas.width, canvas.height); 
       gl.clearColor(0.5, 0.0, 0.2, 1); 
       gl.clear(gl.COLOR_BUFFER_BIT); 

       var v = document.getElementById("vertex").firstChild.nodeValue; 
       var f = document.getElementById("fragment").firstChild.nodeValue; 

       var vs = gl.createShader(gl.VERTEX_SHADER); 
       gl.shaderSource(vs, v); 
       gl.compileShader(vs); 

       var fs = gl.createShader(gl.FRAGMENT_SHADER); 
       gl.shaderSource(fs, f); 
       gl.compileShader(fs); 

       var program = gl.createProgram(); 
       gl.attachShader(program, vs); 
       gl.attachShader(program, fs); 
       gl.linkProgram(program); 

       var vertices = [ -0.5, -0.5, -0.5, 0.5, 0.5, 0.5, 0.5, -0.5]; 
       var indices = [ 3, 2, 1, 3, 1, 0 ] 

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

       var ebuffer = gl.createBuffer(); 
       gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);          
       gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 



       var itemSize = 2; 
       var numItems = vertices.length/itemSize; 


       gl.useProgram(program); 

       program.uColor = gl.getUniformLocation(program, "uColor"); 
       gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]); 

       program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
       gl.enableVertexAttribArray(program.aVertexPosition); 
       gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0); 

       gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); 
     } 



</script> 

</head> 
<body onload="init()"> 
     <canvas id="mycanvas" width="800" height="500"></canvas> 
</body>

появляется фон, но площадь не делает.

Загруженные коды запускаются, поэтому я знаю, что ошибка указана только в моем коде.

источник

2015-07-02 Bhavya Arora

Ваш неверный неверный адрес gl.vertexAttribPointer. Вы создали Float32Array, но вы говорите webGL, чтобы использовать unsigned shorts, и вы неправильно указали itemSize.

Изменение на gl.vertexAttribPointer(program.aVertexPosition, itemSize, gl.FLOAT, false, 0, 0); и оно работает для меня.

источник

2015-07-04 00:48:52

В вашем массиве вершин отсутствует координата для последнего элемента. Всегда, массивы вершин должны иметь 3 координаты для каждой вершины и быть многоплодными.

Ваш массив индексов, указывает, какие вершины должны быть соединены в виде треугольников, чтобы вы отображали геометрию. Попробуйте это. Это должно сработать.

function init(){ 
       var canvas = document.getElementById("mycanvas"); 
       var gl = canvas.getContext("experimental-webgl"); 
       gl.viewport(0, 0, canvas.width, canvas.height); 
       gl.clearColor(0.5, 0.0, 0.2, 1); 
       gl.clear(gl.COLOR_BUFFER_BIT); 

       var v = document.getElementById("vertex").firstChild.nodeValue; 
       var f = document.getElementById("fragment").firstChild.nodeValue; 

       var vs = gl.createShader(gl.VERTEX_SHADER); 
       gl.shaderSource(vs, v); 
       gl.compileShader(vs); 

       var fs = gl.createShader(gl.FRAGMENT_SHADER); 
       gl.shaderSource(fs, f); 
       gl.compileShader(fs); 

       var program = gl.createProgram(); 
       gl.attachShader(program, vs); 
       gl.attachShader(program, fs); 
       gl.linkProgram(program); 

       var vertices = [ -0.5, 0, 0, 0, 0.5, 0, 0.5, 0, 0]; 
       var indices = [ 0, 1, 2 ] 

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

       var ebuffer = gl.createBuffer(); 
       gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, ebuffer);          
       gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW); 



       var itemSize = 2; 
       var numItems = vertices.length/itemSize; 


       gl.useProgram(program); 

       program.uColor = gl.getUniformLocation(program, "uColor"); 
       gl.uniform4fv(program.uColor, [0.0, 0.3, 0.0, 1.0]); 

       program.aVertexPosition = gl.getAttribLocation(program, "aVertexPosition"); 
       gl.enableVertexAttribArray(program.aVertexPosition); 
       gl.vertexAttribPointer(program.aVertexPosition, itemsize, gl.UNSIGNED_SHORT, false, 0, 0); 

       gl.drawElements(gl.TRIANGLES, 3, gl.UNSIGNED_SHORT, 0); 
     }

источник

2015-07-02 16:37:06

Этот код также показывает только фон, как мой код, а не квадрат. Также мой вершинный шейдер имеет «атрибут vec2 aVertexPosition»; Также я рисую в 2D. У меня нет глубоких знаний, поскольку я стартер, но насколько я понимаю, если я рисую в 2D, мне не нужна третья координата. Пожалуйста, поправьте меня, если я ошибаюсь. –

любезно помощь. Я застрял. –

WebGL рисуем индексы

ответ

Смежные вопросы