Question

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

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

我是否需要优化与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内检查它的画布是否实际出现在屏幕上来做到这一点。

我把它变成了polyfill

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

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

我该怎么做才能优化我的WebGL动画？

1 个答案: