Slow Shader Compilation Time

Question

Slow Shader Compilation Time

I am using three.js / r87. Chrome 60.0.3112.113.

I create 2 cells, each of which uses a new ShaderMaterial, so 2 ShaderMaterials are created. Vertex shaders and fragment shaders are the same for both, in fact the materials are identical, except that I installed side=THREE.FrontSidein one case and side=THREE.BackSidein the other case. (I use the workaround suggested here: https://github.com/mrdoob/three.js/issues/2476#issuecomment-9076268 ). So in reality they are not completely identical, one vertex shader has #define FLIP_SIDED, and the other does not. My shaders do not use FLIP_SIDED, so this extra flag is not needed.

So, this vertex shader is compiled 2 times, once for each material. But the second time it is compiled, it is rather slow - 5 seconds each time.

How do I know? Using the Chrome performance analyzer. Then I confirmed this by setting a gap in the three.js code and placing time instructions around a slow statement and printing out a shader that slowly compiles, for example:

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....

}

The shader that prints is the vertex shader and compiled in SECOND TIME. The vertex shader is pretty simple:

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