在openGL中绘制2D多边形

pixartist

我正在使用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,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

pixartist

错误在这里:

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

三角形实际上是int类型,而不是ushort类型

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

通过Sharpdx API用4个顶点(2D位置)绘制并填充多边形

来自分类Dev

在Python 3中绘制3D多边形

来自分类Dev

在Python 3中绘制3D多边形

来自分类Dev

绘制多边形并将其用作 cocos2d js 中的精灵

来自分类Dev

解决2D游戏碰撞(多边形)

来自分类Dev

如何计算任何2D多边形的重力?

来自分类Dev

通过矢量扩展2D多边形

来自分类Dev

Unity 2D 多边形碰撞器

来自分类Dev

不同图层中2D多边形的岛的微分或相交

来自分类Dev

在matplotlib中绘制多边形的并集

来自分类Dev

在R中绘制多边形

来自分类Dev

在PyQt中绘制多边形

来自分类Dev

在JS中绘制多个多边形

来自分类Dev

在画布中绘制多个多边形

来自分类Dev

在 Pyglet 中绘制凸多边形

来自分类Dev

OpenGL中的多边形撕裂

来自分类Dev

如何在现代openGL中用3D点绘制多边形?

来自分类Dev

最佳实践,以检测点是否在2D多边形内(多边形的顶点在表上)

来自分类Dev

如何强制openGL绘制非凸填充多边形

来自分类Dev

OpenGL和GLFW:不绘制多边形

来自分类Dev

OpenGL 在多边形顶部绘制奇怪的线条

来自分类Dev

在Slick2D中多边形的定位

来自分类Dev

在Slick2D中多边形的定位

来自分类Dev

glDrawElements绘制多边形

来自分类Dev

绘制多边形:限制?

来自分类Dev

绘制多边形:限制?

来自分类Dev

如何在具有碰撞检测功能的Unity中制作自定义2D多边形?

来自分类Dev

尝试在OpenGL中绘制带有三角形的复杂多边形时出现错误

来自分类Dev

Libgdx Box2D批量绘制未覆盖整个多边形