2015-03-28 3 views
0

Я использую DuoCode для рисования 2D-полигонов в webGL. Я написал конкретные шейдер для этой цели, которые принимают 2D-вершины и позицию г, а также некоторые другие данные:Рисование 2D-полигонов в openGL

<!-- Fragment shader program --> 
<script id="shader-fs" type="x-shader/x-fragment"> 
    varying highp vec2 vTextureCoord; 
    uniform highp vec3 uColor; 
    uniform sampler2D uSampler; 
    uniform int uSamplerCount; 

    void main(void) { 
    highp vec4 texColor =vec4(uColor, 1.0); 
    if(uSamplerCount > 0) 
     texColor = texture2D(uSampler, vTextureCoord); 

    gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 
    } 
</script> 

<!-- Vertex shader program --> 
<script id="shader-vs" type="x-shader/x-vertex"> 
    attribute highp vec2 aVertexPosition; 
    attribute highp vec2 aTextureCoord; 

    uniform highp vec2 uPosition; 
    uniform highp float uZLayer; 

    varying highp vec2 vTextureCoord; 

    void main(void) { 
    gl_Position = vec4(uPosition + aVertexPosition, uZLayer, 1.0); 
    vTextureCoord = aTextureCoord; 
    } 
</script> 

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

Я создаю свои буферы вершин, как это:

public void UpdateBuffers() 
    { 
     System.Console.WriteLine("Updating buffers"); 
     System.Console.Write("Vertices: "); 
     for (int i = 0; i < rotatedPoints.length; i++) 
      System.Console.Write(rotatedPoints[i] + ", "); 
     System.Console.WriteLine(" "); 
     System.Console.Write("texCoords: "); 
     for (int i = 0; i < texCoords.length; i++) 
      System.Console.Write(texCoords[i] + ", "); 
     System.Console.WriteLine(" "); 
     System.Console.Write("Triangles: "); 
     for (int i = 0; i < triangles.length; i++) 
      System.Console.Write(triangles[i] + ", "); 
     System.Console.WriteLine(" "); 

     gl.bindBuffer(GL.ARRAY_BUFFER, bVertexPositions); 
     gl.bufferData(GL.ARRAY_BUFFER, rotatedPoints.As<ArrayBufferView>(), GL.STATIC_DRAW); 

     gl.bindBuffer(GL.ARRAY_BUFFER, bTextureCoords); 
     gl.bufferData(GL.ARRAY_BUFFER, texCoords.As<ArrayBufferView>(), GL.STATIC_DRAW); 

     gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, bIndices); 
     gl.bufferData(GL.ELEMENT_ARRAY_BUFFER, triangles.As<ArrayBufferView>(), GL.STATIC_DRAW); 
    } 

, который снова идет без ошибок и дает мне следующий вывод:

Обновление буферов Вершины: 0, 0, 10, 0, 10, 10, 0, 10,
texCoords: 0, 1, 1, 1, 1, 0, 0, 0,
Треугольники: 3, 0, 1, 3, 1, 2,

(Вершины являются 2-компонентная)

Я пытаюсь нарисовать один полигон, как это:

gl.viewport(0, 0, (int)canvas.width, (int)canvas.height); 
gl.clear(GL.COLOR_BUFFER_BIT | GL.DEPTH_BUFFER_BIT); 
testSprite.Draw(aVertexPosition, aTextureCoord, uColor, uPosition, uZLayer, uSampler, uSamplerCount); 

а обозначает атрибуты, и обозначает униформы места здесь.

Рисунок сам по себе выглядит следующим образом:

public void Draw(uint aVertexPosition, uint aTextureCoord, 
     WebGLUniformLocation uColor, WebGLUniformLocation uPosition, WebGLUniformLocation uZLayer, WebGLUniformLocation uSampler, WebGLUniformLocation uSamplerCount) 
    { 

     //position 
     gl.uniform2f(uPosition, this.position.x, this.position.y); 
     gl.uniform1f(uZLayer, this.position.z); 
     gl.uniform3f(uColor, 1f, 0.5f, 0.5f); 
     gl.uniform1i(uSamplerCount, 0); 

     //vertex data 
     gl.bindBuffer(GL.ARRAY_BUFFER, bVertexPositions); 
     gl.vertexAttribPointer(aVertexPosition, 2, GL.FLOAT, false, 0, 0); 

     gl.bindBuffer(GL.ARRAY_BUFFER, bTextureCoords); 
     gl.vertexAttribPointer(aTextureCoord, 2, GL.FLOAT, false, 0, 0); 

     gl.bindBuffer(GL.ELEMENT_ARRAY_BUFFER, bIndices); 

     //texture 
     // gl.activeTexture(GL.TEXTURE0); 
     // gl.bindTexture(GL.TEXTURE_2D, texture); 
     // gl.uniform1i(uSampler, 0); 

     //draw 
     gl.drawElements(GL.TRIANGLES, triangles.length, GL.UNSIGNED_SHORT, 0); 
    } 

Опять нет ошибок в консоли JS. К сожалению, экран остается черным. Я думаю, что ошибка может быть связана с тем, что массив вершин имеет 2 компонента, но я не могу понять это. Я думал, что понял основы openGL, но, видимо, я ошибся, так как это действительно не проблема. Но я ничего не могу сделать. Если вам это нужно, я могу опубликовать оставшийся код, например создание буфера, но я думаю, что моя ошибка должна быть где-то в этом коде. Надеюсь, это не слишком много, потому что «найти ошибку где-то в моем коде», но я действительно не знаю, куда идти отсюда, я просто не могу понять свою ошибку.

EDIT: Нашел свою ошибку, я проезжал ИНТ в список индекса элемента, но я отметил их как USHORT

+1

Я хотел бы видеть весь ваш код для этого. Могли бы вы создать плункер или подобное для этого? На первом румянце мой инстинкт заключается в том, что ваши вершины находятся вне диапазона (от -1 до 1, если какое-то масштабирование выполняется с однородной координатой где-нибудь), или что на самом деле ничего не составлено для вашего скрипта. –

+0

Код справки: http://pastebin.com/LZVLGS59 Код программы: http://pastebin.com/ZvYPMJNU – pixartist

+0

Оставшийся код: http://pastebin.com/rLbVdGYD – pixartist

ответ

0

Ошибка здесь:

gl.drawElements(GL.TRIANGLES, triangles.length, GL.UNSIGNED_SHORT, 0); 

треугольники фактически типа Int, не UShort

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