我能做些什么来优化我的WebGL动画?

我有一个带有多个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>