Slow Shader编译时间

Question

我正在使用three.js/r87.Chrome 60.0.3112.113.

我构建了2个网格,每个网格使用一个新的ShaderMaterial,因此创建了2个ShaderMaterials.顶点着色器和片段着色器在两者中是相同的,实际上材料是相同的,除了我side=THREE.FrontSide在一种情况下设置而在另一种情况side=THREE.BackSide下.(我正在使用此处建议的解决方法:https://github.com/mrdoob/three.js/issues/2476#issuecomment-9076268).实际上它们并不完全相同,一个顶点着色器有#define FLIP_SIDED,另一个没有.我的着色器不使用FLIP_SIDED,因此不需要这个额外的标志.

所以这个顶点着色器被编译2次,每种材质一次.但是第二次编译它很慢 - 每次5秒左右.

我怎么知道？通过使用Chrome性能分析器.然后我通过在three.js代码中设置一个中断并在慢速语句周围放置时间语句并让它打印出编译速度慢的着色器来确认它,例如:

return function WebGLShader( gl, type, string ) {

    var shader = gl.createShader( type );

    gl.shaderSource( shader, string );
    gl.compileShader( shader );

    var t0 = performance.now();
    if ( gl.getShaderParameter( shader, gl.COMPILE_STATUS ) === false ) {

        console.error( 'THREE.WebGLShader: Shader couldn\'t compile.' );

    }
    var t1 = performance.now();
    if ((t1 - t0) > 1000) {
        console.log("------------------Slow compile.----------------");
        console.log(string);
    }
    //  .....etc....

}

打印出来的着色器是顶点着色器,在编译的SECOND TIME上.顶点着色器非常简单:

varying vec2 vUv; 
uniform float morphTargetInfluences[ 4 ];
void main()
{
    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0 );
    gl_Position = projectionMatrix * mvPosition;
    vUv = uv;
}

所以我正在寻找如何调试这个慢编译时间的建议.此外,以下任何问题的答案都具有启发性:

1 - 为什么顶点着色器编译速度慢？
2 - 为什么它第二次编译时会变慢？
3 - 由于我的着色器不使用FLIP_SIDED,是否有办法不在着色器中包含该标志(从而避免额外的编译)？

任何建议或指针都会有用.