在 CPU 上预计算顶点

Question

为了用WebGL渲染很多精灵，我想我会问性能。

让我们考虑一下：

for(let i = 0; i < 50000; i++){
    let t = new Sprite();
    t.scale(Math.random())
    t.rotate(Math.random())
    t.transform(Math.random(),Math.random())

scale、rotate 和 transform

具有以下功能

 translate(x, y) {
    for (let i = 0; i < this.vertexData.length; i += 3) {
      this.vertexData[i] += x;
      this.vertexData[i + 1] += y;
    }
  }


  rotate(alpha) {
    this.translate(-this.position[0], -this.position[1]);
    for (let i = 0; i < this.vertexData.length; i += 3) {
      let new_x = this.vertexData[i] * Math.cos(alpha) - this.vertexData[i + 1] * Math.sin(alpha);
      let new_y = this.vertexData[i + 1] * Math.cos(alpha) + this.vertexData[i] * Math.sin(alpha);
      this.vertexData[i] = new_x;
      this.vertexData[i + 1] = new_y;
    }
    this.translate(this.position[0], this.position[1]);
  }


  scale(factor) {
    this.translate(-this.position[0], -this.position[1]);
    for (let i = 0; i < this.vertexData.length; i += 3) {
      this.vertexData[i] *= factor;
      this.vertexData[i + 1] *= factor;
    }
    this.translate(this.position[0], this.position[1])
  }

和this.vertexData=[-1, -1, 0, 1, -1, 0, -1, 1, 0, -1, 1, 0, 1, -1, 0, 1, 1, 0];

我有什么可能使函数 scale、rotate 和 transform 更快？取决于语言或数学。

Answer 1

将所有精灵的所有精灵数据放在一个数组中。 AFAICT 你正在为每个精灵使用一个数组。这意味着您必须分别为每个精灵的 vertexData 调用 gl.bufferData。这比一次上传所有 sprite 的所有 sprite 数据的一次调用要慢。

如果您仍想为每个精灵保留一个对象，您可以让每个精灵使用一个更大的全局数组的偏移量

const maxSprites = 50000;
const globalVertData = new Float32Array(maxSprites * 12);
const quad = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
const numSprites = 0;

class Sprite {
  constructor() {
    const offset = numSprites++ * 12 * 4;
    // make vertexData a view into the larger array
    this.vertexData = new Float32Array(
        globalVertData.buffer, offset, 12);
    this.vertexData.set(quad); 
  }
  ... your functions from above ...
}

或这个

const maxSprites = 50000;
const globalVertData = new Float32Array(maxSprites * 12);
const quad = [-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1];
const numSprites = 0;

class Sprite {
  constructor() {
    this.offset = numSprites++ * 12;
    globalVertData.set(quad, this.offset);
  }
  translate(x, y) {
    let i = this.offset;
    const end = i + 12;
    for (; i < end; i += 2) {
      globalVertData[i] += x;
      globalVertData[i + 1] += y;
    }
  } 
  ... functions for rotate and scale that use this.offset ...
}

然后您只需上传 globalVertData 和 gl.bufferData 而不是每个单独的精灵 vertexData。

我有一种直觉，第二个比第一个快。它还需要更少的内存，因为每个对象只有一个数组对象而不是一个数组视图。那就是说我没有测试它所以我可能是错的。

干掉Z。假设您不需要 Z 精灵摆脱它（而且看起来您不需要，因为既不旋转也不平移操作 z）。然后你上传的数据更少，至少 scale 会变得更快。我在上面做了这个。
从循环中拉出长度
```
for (let i = 0; i < someArray.length; ++i) {
  ...
```
比
慢
```
const len = someArray.length;
for (let i = 0; i < len; ++i) {
  ...
```
也比
慢
```
const spriteLen = 12;  // GLOBAL OR CLOSED VARIABLE

const len = spriteLen;
for (let i = 0; i < len; ++i) {
  ...
```
基本上，. 运算符与 array.length 或 foo.bar 一样需要时间。在第一个示例中，. 运算符在每次迭代中发生。在里面其次它每个循环发生一次。在第 3 次，它根本没有发生。
let 比 var
慢
虽然如果你把它从循环中拉出来，问题就会消失。浏览器将来可能会修复此问题他们可以分析代码并发现他们不需要每次迭代都创建一个新对象（Spidermonkey 似乎这样做并且 Chrome 60 似乎也解决了这个问题。Safari 它仍然更慢）
通常对精灵有帮助的其他事情。使用 texture atlas。这样一来，您就可以通过一次绘制调用绘制所有精灵。

您可能会发现也很有用

在 CPU 上预计算顶点

Pre calculating vertices on CPU

javascript

arrays

performance

webgl