繁体   English   中英

在openGL中绘制2D多边形

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM