性能警告Processing.js

Question

当我用JavaScript风格编写Processing.js时，我会得到一个性能警告，这是我在使用Processing.js解析处理代码时没有得到的。我创建了一个非常简单的草图，并提供了3d支持以进入其中，控制台上充斥着这样的警告：

性能警告:属性0被禁用。这有明显的表现处罚。

那是什么意思？更重要的是:如何解决这个问题？

这就是素描。(在codepen.io上观看/编辑)

var can = document.createElement("canvas");
var sketch = function(p){

  p.setup = function(){
    p.size(800, 600, p.OPENGL);
    p.fill(170);
  };

  p.draw = function(){
    p.pushMatrix();
    p.translate(p.width/2, p.height/2);
    p.box(50);
    p.popMatrix();
  };
};

document.body.appendChild(can);
new Processing(can, sketch);

Answer 1

这是Processing.js中的一个问题

有关详细说明: OpenGL和OpenGL ES具有属性。所有属性都可以从缓冲区中获取值或提供一个常量值。但是，在OpenGL中，属性0是特殊的。它不能提供一个恒定的值。它必须从缓冲区中获取值。不过，WebGL是基于OpenGL ES 2.0的，它没有这个限制。

因此，当WebGL运行在OpenGL之上而用户不使用属性0(设置为使用常量值)时，WebGL必须创建一个临时缓冲区，用常量值填充它，并将其交给OpenGL。太慢了。因此发出了警告。

处理中的问题是，它们有一个单独的着色器来处理多个用例。它具有法线、位置、颜色和纹理坐标的属性。根据您要求处理绘制的内容，它可能没有使用所有这些属性。例如，它通常不会使用法线。法线只需要在处理，以支持灯，所以如果你没有灯，没有法线(我猜)。在这种情况下，他们关闭了法线。不幸的是，如果法线恰好位于属性0上，为了使WebGL呈现它必须创建一个临时缓冲区，将其填充一个常量值，然后呈现。

解决这个问题的方法是始终使用属性0。在处理的情况下，他们总是使用位置数据。因此，在链接他们的着色器之前，他们应该调用bindAttribLocation

// "aVertex" is the name of the attribute used for position data in
// Processing.js
gl.bindAttribLocation(program, 0, "aVertex");

这将使属性'aVertex‘总是使用attrib 0，因为对于每个用例，它们总是使用'aVertex’，因此永远不会收到警告。

理想情况下，您应该始终绑定您的位置。这样，您就不必在链接之后查询它们。