0

我使用 Canvas 元素制作了一款游戏，每帧绘制了 300 多张图像，我被迫让它以 <20 fps 的速度运行，并且需要 60+% 的 CPU：

所以我想我最好的选择是切换到 WebGL。我一直在网上搜索，寻找教程和示例。这有点复杂，但我设法破解了一个工作源。

<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebGL - 2D Image</title>
<link type="text/css" href="http://games.greggman.com/downloads/examples/webgl/resources/webgl-tutorials.css" rel="stylesheet" />
<script type="text/javascript" src="http://games.greggman.com/downloads/examples/webgl/resources/webgl-utils.js"></script>
<script>
window.onload = main;

function main() {
  image = new Image();
  image.src = "http://games.greggman.com/downloads/examples/webgl/resources/leaves.jpg";  // MUST BE SAME DOMAIN!!!
  image.onload = function() {
    setUp();
    setInterval(function(){
        x1 += 1;
        y1 += 1
        for (i = 0; i < 30; i++) {
            for (e = 0; e < 10; e++) {
                //render(image, x1+i*5, y1+e*5);
                gl.bindTexture(gl.TEXTURE_2D, texture);

                 // Set a rectangle the same size as the image.
                setRectangle(gl, x1+i*5, y1+e*5, image.width, image.height);

                // Draw the rectangle.
                 gl.drawArrays(gl.TRIANGLES, 0, 6);
            }
        }
    },1000/60);
  }
}
var x1 = 0;
var y1 = 0;
var image;
var canvas;
var gl;
var texture;
function setUp() {
  canvas = document.getElementById("canvas");
  gl = getWebGLContext(canvas);
    // setup GLSL program
  vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
  fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
  program = createProgram(gl, [vertexShader, fragmentShader]);
  gl.useProgram(program);

    // lookup uniforms
  var resolutionLocation = gl.getUniformLocation(program, "u_resolution");

  // set the resolution
  gl.uniform2f(resolutionLocation, canvas.width, canvas.height);

// Create a texture.
  texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);

  // Set the parameters so we can render any size image.
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

  // Upload the image into the texture.
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);

 // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texCoordLocation = gl.getAttribLocation(program, "a_texCoord");

  // provide texture coordinates for the rectangle.
  var texCoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
      0.0,  0.0,
      1.0,  0.0,
      0.0,  1.0,
      0.0,  1.0,
      1.0,  0.0,
      1.0,  1.0]), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(texCoordLocation);
  gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);





  // Create a buffer for the position of the rectangle corners.
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.enableVertexAttribArray(positionLocation);
  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
}

function render(image, x, y) {

}

function randomInt(range) {
  return Math.floor(Math.random() * range);
}

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

</script>
<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec2 a_position;
attribute vec2 a_texCoord;

uniform vec2 u_resolution;

varying vec2 v_texCoord;

void main() {
   // convert the rectangle from pixels to 0.0 to 1.0
   vec2 zeroToOne = a_position / u_resolution;

   // convert from 0->1 to 0->2
   vec2 zeroToTwo = zeroToOne * 2.0;

   // convert from 0->2 to -1->+1 (clipspace)
   vec2 clipSpace = zeroToTwo - 1.0;

   gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1);

   // pass the texCoord to the fragment shader
   // The GPU will interpolate this value between points.
   v_texCoord = a_texCoord;
}
</script></script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
precision mediump float;

// our texture
uniform sampler2D u_image;

// the texCoords passed in from the vertex shader.
varying vec2 v_texCoord;

void main() {
   gl_FragColor = texture2D(u_image, v_texCoord);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

它绘制了 300 张图像，但只占用了使用普通画布的 1/2 的 CPU。现在这还不算太糟糕，但仍然不够好。我做错了什么或不必要的事情吗？有没有办法通过在 GPU 中进行计算或缓存它们来减轻 CPU 的负担？我研究过着色器，是否可以使用着色器来存储纹理和坐标，只需向着色器输入一个数组来设置我需要绘制的每个图像的位置点？

谢谢，我希望有一个简单的解决方案来解决这种疯狂。

4

1 回答 1

2

你真的需要画 300 个（不同的）图像吗？还是只有 300 个具有相同纹理的矩形？（这是你目前正在做的）

一般来说，由于多种原因，您的代码效率非常低：

  • 您无需创建一次缓冲区并重用它，而是为每帧分配 300 个新的 Float32Array 数组（in setRectangle()）
  • 您可以将所有顶点信息放在一个缓冲区中，而不是为 300 个对象创建 300 个小缓冲区，而不是一次绘制所有内容（这仅在您不想用不同的纹理绘制每个对象时才有效）
  • 您正在切换每个对象 ( glBindTexture) 的纹理状态。最好设置一次纹理，而不是绘制一批具有相同纹理的对象

更优化的代码版本如下所示：

// called once
setup() {
  // load and setup texture
  // create vertex buffer object for your vertex data
  // setup shader
}

// called every frame
display() {
  gl.useProgram(..) // set shader
  gl.bindTexture(..) // set texture
  gl.bindBuffer(..) // set buffer
  gl.drawArrays(0, 1800) // draw all you object in one step
}

对于您真的想用另一个纹理绘制每个对象的情况，它有点复杂。但同样你有多种选择来优化：

  • 在文件中组合多个纹理。例如，您可以在单个 512x512 纹理文件中组合 16 个 128x128 纹理。在这种情况下，您必须更新对象的纹理坐标以匹配纹理
  • 使用多个纹理单元并在着色器中决定应该使用哪个单元。
  • 如果您有多个使用相同纹理的对象，您可以对对象进行排序，以便一步绘制这些对象。
于 2012-07-25T16:11:09.987 回答