javascript - 我可以做些什么来优化我的 WebGL 动画？

Question

我有一个包含多个 WebGL 动画的页面。当我在页面上有一个或两个时，大多数硬件上的性能都很好。当我运行 7 或 8 时，动画变得非常慢。

我听说过视口(viewport)切片，但找不到合适的资源。这会有帮助吗？我将如何实现，如果您知道，请提供资源或工具。

我需要优化 WebGL 相关代码，还是优化 javascript 就足够了？

这是页面: http://www.vanderblonk.com/tutorial/advanced/some-speed-tips/

主要来源是:http://www.vanderblonk.com/wp-content/plugins/rubik/js/rubiks.js

我也使用 jQuery 和 https://github.com/toji/gl-matrix

这些是着色器:

<script id="fragmentShader" type="x-shader/x-fragment">
    varying highp vec4 position;
    varying highp vec3 normal;

    uniform bool lighting;
    uniform highp vec3 eyePosition;
    uniform highp vec4 ambient;
    uniform highp vec4 diffuse;
    uniform highp vec4 specular;
    uniform highp float shininess;

    const highp vec4 lightPosition = vec4(-1.,1.,-1., 1);
    const highp vec4 lightColor = vec4(.2,.2,.2,1);

    void main(void) {
        if (lighting) {
            highp vec3 position = position.xyz / position.w;
            highp vec3 eyeDirection = normalize(eyePosition - position);
            highp vec3 lightPosition = lightPosition.xyz / lightPosition.w;
            highp vec3 lightDirection = normalize(lightPosition - position);
            highp vec3 halfAngle = normalize(lightDirection + eyeDirection);
            highp vec4 diffuseTerm = diffuse * lightColor * max(dot(normal, lightDirection), 0.0);
            highp vec4 specularTerm = specular * lightColor * pow(max(dot(normal, halfAngle), 0.0), shininess);
            gl_FragColor = diffuseTerm + specularTerm + ambient;
        } else {
            gl_FragColor = ambient;
        }
    }
</script>
<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec3 vertexPosition;
    attribute vec3 vertexNormal;

    uniform mat4 modelViewMatrix;
    uniform mat4 projectionMatrix;
    uniform mat3 normalMatrix;

    varying vec4 position;
    varying vec3 normal;

    void main(void) {
        position = modelViewMatrix * vec4(vertexPosition, 1.0);
        gl_Position = projectionMatrix * position;
        normal = normalize(normalMatrix * vertexNormal);
    }
</script>

Answer 1

我遇到了这样的问题。对我来说，问题不在于我的 WebGL 或着色器。我没有画那么多，每个区域都有一个简单的立方体。问题是浏览器和 requestAnimationFrame 标准。基本上浏览器不喜欢大量的 requestAnimationFrame 动画并且不检查屏幕外的东西。

我的解决方案是确保只有屏幕上的动画在实际运行。为此，我检查了每个动画的 requestAnimationFrame 内部，看它的 Canvas 是否确实在屏幕上。

我把它变成了一个 polyfill

https://github.com/greggman/requestanimationframe-fix.js

我不知道这是否能解决你的问题，但它解决了我的问题