New Pattern for Coding Shaders

@jeromeetienne has posted a gist with an interesting proposal. In it, he proposes a new pattern for coding shaders. I have provided some three.js-specific examples here.

Below, shader1 uses the current pattern; shader2 uses the new pattern. Notice that shader2 avoids the use of quotes and commas. It is also more readable in debug output.

THREE.Shader = {

'shader1' : {

    vertexShader : [

        "#ifdef USE_LIGHTMAP",

            "varying vec2 vUv2;",

        "#endif",

        "varying vec3 vNormal;",

        "void main() {",

            "#ifdef USE_LIGHTMAP",

                "vUv2 = uv2;",

            "#endif",

            "vNormal = normalize( normalMatrix * normal );",

            "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

        "}"

    ].join("\n")

},

'shader2' : {

    vertexShader : ( function() { /*

        #ifdef USE_LIGHTMAP

            varying vec2 vUv2;

        #endif

        varying vec3 vNormal;

        void main() {

            #ifdef USE_LIGHTMAP

                vUv2 = uv2;

            #endif

            vNormal = normalize( normalMatrix * normal );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

        }

    */ } ).toString().split( '\n' ).slice( 1, -1 ).join( '\n' )

}

};

console.log( THREE.Shader[ 'shader1' ].vertexShader );

#ifdef USE_LIGHTMAP
varying vec2 vUv2;
#endif
varying vec3 vNormal;
void main() {
#ifdef USE_LIGHTMAP
vUv2 = uv2;
#endif
vNormal = normalize( normalMatrix * normal );
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

console.log( THREE.Shader[ 'shader2' ].vertexShader );

    #ifdef USE_LIGHTMAP

        varying vec2 vUv2;

    #endif

    varying vec3 vNormal;

    void main() {

        #ifdef USE_LIGHTMAP

            vUv2 = uv2;

        #endif

        vNormal = normalize( normalMatrix * normal );

        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }

[mrdoob]

Is there any particular reason why such an approach is not considered?

Saving on network requests?

[zz85]

for those who still pursuing for a easier/different way to write shaders, ShaderDSL could be another interesting approach http://typedarray.org/shaderdsl-js-javascript-based-dsls-for-gpu-shaders/