我一直在关注html5rocks上的一些教程,并且设法制作了一个JavaScript程序,该程序使用webGL在 Canvas 上显示一个图像。我已经在下面发布了我为此的代码。

问题是,似乎没有人向您展示如何在webGL中绘制多个对象。我以前从未直接与webGL合作过,所以对我来说不是很直观。

如何修改此代码以绘制imageObjectArray中的每个对象? (注意,现在我只是在绘制imageObjectArray[0]

    function render(canvas, contextGL, imageObjectArray) {
        vertexShader = createShaderFromScriptElement(contextGL, "2d-vertex-shader");
        fragmentShader = createShaderFromScriptElement(contextGL, "2d-fragment-shader");

        program = createProgram(contextGL, [vertexShader, fragmentShader]);
        contextGL.useProgram(program);

        var positionLocation = contextGL.getAttribLocation(program, "a_position");

        var texCoordLocation = contextGL.getAttribLocation(program, "a_texCoord");

        var texCoordBuffer = contextGL.createBuffer();
        contextGL.bindBuffer(contextGL.ARRAY_BUFFER, texCoordBuffer);

        contextGL.enableVertexAttribArray(texCoordLocation);
        contextGL.vertexAttribPointer(texCoordLocation, 2, contextGL.FLOAT, false, 0, 0);

        setRectangle(contextGL, 0.0, 0.0, 1.0, 1.0);

        var texture = contextGL.createTexture();
        contextGL.bindTexture(contextGL.TEXTURE_2D, texture);

        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_WRAP_S, contextGL.CLAMP_TO_EDGE);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_WRAP_T, contextGL.CLAMP_TO_EDGE);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_MIN_FILTER, contextGL.NEAREST);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_MAG_FILTER, contextGL.NEAREST);

        contextGL.texImage2D(contextGL.TEXTURE_2D, 0, contextGL.RGBA, contextGL.RGBA, contextGL.UNSIGNED_BYTE, imageObjectArray[0].displayObject.data);

        var resolutionLocation = contextGL.getUniformLocation(program, "u_resolution");
        contextGL.uniform2f(resolutionLocation, canvas.width, canvas.height);

        var buffer = contextGL.createBuffer();
        contextGL.bindBuffer(contextGL.ARRAY_BUFFER, buffer);
        contextGL.enableVertexAttribArray(positionLocation);
        contextGL.vertexAttribPointer(positionLocation, 2, contextGL.FLOAT, false, 0, 0);

        setRectangle(contextGL, imageObjectArray[0].x, imageObjectArray[0].y, imageObjectArray[0].width, imageObjectArray[0].height);

        // draw
        contextGL.drawArrays(contextGL.TRIANGLES, 0, 6);
    }

function setRectangle(gl, x, y, width, height) {
    var x2 = x + width;
    var y2 = y + height;
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(
                                        [x, y,
                                         x2, y,
                                         x, y2,
                                         x, y2,
                                         x2, y,
                                         x2, y2
                                        ]), gl.STATIC_DRAW);
}

我的目的是开发(非常基本的)2D Sprite游戏。没有图书馆的舒适。 (也许glMatrix.js除外)

[编辑]我的渲染功能出现错误,已修复。

最佳答案

以下代码执行以下操作:

  • 编译顶点和片段着色器
  • 将它们链接到着色器程序
  • 创建一个顶点缓冲区以保存纹理坐标并填充它(texCoordBuffer)
  • 创建纹理(createTexture)
  • 配置如何采样纹理(texParameteri)

  • 以上5个步骤仅需运行一次。
        vertexShader = createShaderFromScriptElement(contextGL, "2d-vertex-shader");
        fragmentShader = createShaderFromScriptElement(contextGL, "2d-fragment-shader");
    
        program = createProgram(contextGL, [vertexShader, fragmentShader]);
        contextGL.useProgram(program);
    
        var positionLocation = contextGL.getAttribLocation(program, "a_position");
    
        var texCoordLocation = contextGL.getAttribLocation(program, "a_texCoord");
    
        var texCoordBuffer = contextGL.createBuffer();
        contextGL.bindBuffer(contextGL.ARRAY_BUFFER, texCoordBuffer);
    
        contextGL.enableVertexAttribArray(texCoordLocation);
        contextGL.vertexAttribPointer(texCoordLocation, 2, contextGL.FLOAT, false, 0, 0);
    
        var texture = contextGL.createTexture();
        contextGL.bindTexture(contextGL.TEXTURE_2D, texture);
    
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_WRAP_S, contextGL.CLAMP_TO_EDGE);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_WRAP_T, contextGL.CLAMP_TO_EDGE);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_MIN_FILTER, contextGL.NEAREST);
        contextGL.texParameteri(contextGL.TEXTURE_2D, contextGL.TEXTURE_MAG_FILTER, contextGL.NEAREST);
    
        setRectangle(contextGL, 0.0, 0.0, 1.0, 1.0);
    

    其余代码必须针对要绘制的每个图像执行,并且执行以下操作:
  • 将图像上传到纹理(texImage2D)
  • 创建一个顶点缓冲区以保存位置并填充(缓冲区)
  • 调用drawArrays

  • contextGL.texImage2D(contextGL.TEXTURE_2D,0,contextGL.RGBA,contextGL.RGBA,contextGL.UNSIGNED_BYTE,imageObjectArray [0] .displayObject.data);

    var resolutionLocation = contextGL.getUniformLocation(program,“u_resolution”);
    contextGL.uniform2f(resolutionLocation,canvas.width,canvas.height);

    var buffer = contextGL.createBuffer();
    contextGL.bindBuffer(contextGL.ARRAY_BUFFER,缓冲区);
    contextGL.enableVertexAttribArray(positionLocation);
    contextGL.vertexAttribPointer(positionLocation,2,contextGL.FLOAT,false,0,0);

    setRectangle(contextGL,imageObjectArray [0] .x,imageObjectArray [0] .y,imageObjectArray [0] .width,imageObjectArray [0] .height);

    // 画
    contextGL.drawArrays(contextGL.TRIANGLES,0,6);

    您需要将步骤2拆分为单独的步骤。第一步,为位置创建顶点缓冲区,应该只执行一次。第二步,填充图像的位置,需要对要绘制的每个图像执行。

    我应该说,我的建议不会提供最佳的实现,但可以使您绘制多于1张图像。为了达到最佳效果,您应该考虑这样做:
  • 实现纹理 map 集(将所有图像打包到一个纹理中)。
  • 只上传一次纹理和位置坐标。
  • 使用更好的顶点和片段着色器选择要绘制的图像(纹理坐标偏移),要绘制的图像(位置偏移)以及图像的大小(宽度和高度缩放)
  • 08-03 15:16