@woosh/meep-engine/src/engine/graphics/geometry/instancing/rewriteMaterial.js

Pure JavaScript game engine. Fully featured and production ready.

const SHADER_PREAMBLE = `
    #define USE_COLOR_ALPHA
    #define USE_INSTANCING_COLOR 
     
    attribute mat4 instanceMatrix;
    attribute vec4 instanceColor;
    \n`;

export function rewriteMaterial(shader) {
    const originalVertexShader = shader.vertexShader;

    const newVertexShader = SHADER_PREAMBLE
        + originalVertexShader
            .replace(
                '#include <begin_vertex>',
                `
                vec3 transformed = ( instanceMatrix * vec4(position,1.0) ).xyz;
                `
            )
            .replace(
                '#include <beginnormal_vertex>',
                `
                vec3 objectNormal = vec3( normal );
                {
                    // this is in lieu of a per-instance normal-matrix
                    // shear transforms in the instance matrix are not supported

                    mat3 m = mat3( instanceMatrix );
                    
                    objectNormal /= vec3( dot( m[ 0 ], m[ 0 ] ), dot( m[ 1 ], m[ 1 ] ), dot( m[ 2 ], m[ 2 ] ) );
                    objectNormal = m * objectNormal;
                    
                }
                
                #ifdef USE_TANGENT
                    vec3 objectTangent = vec3( tangent.xyz );
                #endif
                `
            )
    .replace(
        '#include <color_vertex>',
        `
            #if defined( USE_COLOR_ALPHA )
                vColor = instanceColor;
            #else
                vColor = instanceColor.xyz;
            #endif
        `
    );

    shader.vertexShader = newVertexShader;

    shader.fragmentShader = `
    #define USE_COLOR_ALPHA
    #define USE_INSTANCING_COLOR 
    `+shader.fragmentShader;
}