[英]Drawing 2D polygons in openGL
我正在使用DuoCode嘗試在webGL中繪制2D多邊形。 為此,我編寫了特定的着色器,這些着色器采用2D頂點和z位置以及一些其他數據:
<!-- 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);
a表示屬性,u表示此處的制服位置。
繪圖本身看起來像這樣:
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的基礎知識,但是顯然我錯了,因為這實際上應該不是那么難解決的問題。 但是我什么也畫不出來。 如果需要,我可以發布其余代碼,例如創建緩沖區,但是我認為我的錯誤一定在此代碼中。 我希望這不是“在我的代碼中的某個地方找到錯誤”的帖子,但我真的不知道從這里去哪里,我只是無法弄清楚我的錯誤。
編輯:發現我的錯誤,我將int傳遞到元素索引列表,但是我將它們標記為ushort
錯誤在這里:
gl.drawElements(GL.TRIANGLES, triangles.length, GL.UNSIGNED_SHORT, 0);
三角形實際上是int類型,而不是ushort類型
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.