Stripping out shaders from three.js to reduce size

Resources
,
1

This has been concerning me for a while as such code included is not modular and completely not all needed apart from the mesh basic shaders and its includes ?

I have managed to bring three.js down another 150kb to 250kb. that is how much the shaders increases it.

I have figured out a way to append empty strings for the shaders not required in the bundler like this. This is being passed through for every single file though so slow.

function glsl() {

return {

	transform( code, id ) {

		if ( /\.glsl$/.test( id ) === false ) return;

		if (!/meshbasic/.test(id)) {
			return {
				code: 'export default " "',
				map: { mappings: '' }
			};
		}

		var transformedCode = 'export default ' + JSON.stringify(
				code
					.replace( /[ \t]*\/\/.*\n/g, '' )
					.replace( /[ \t]*\/\*[\s\S]*?\*\//g, '' )
					.replace( /\n{2,}/g, '\n' )
			) + ';';

		return {
			code: transformedCode,
			map: { mappings: '' }
		};

	}

};

}
2

There is other included shader programs when using ShaderMaterial / MeshBasicMaterial. Stuff that deals with lighting etc. It has to be searched for also to include those.

If you use RawShaderMaterial and a custom vertex and fragment shader program. All of it can be removed. That is what I have to end up doing now to keep it lightweight. Something like this ??

var material1 = new THREE.RawShaderMaterial( {
        uniforms: { texture: { value: texture } },
        vertexShader: `
        attribute vec2 uv;
        attribute vec4 position;
        uniform mat4 projectionMatrix;
        uniform mat4 modelViewMatrix;
        varying vec2 vUV;
        void main() {
          vUV = vec2( uv.x, uv.y); 
          gl_Position = projectionMatrix * modelViewMatrix * position;
        }
    `,
        fragmentShader: `
        precision highp float;
        uniform sampler2D texture;
        varying vec2 vUV;
        void main() {
          gl_FragColor = texture2D( texture, vUV );
        }
    `
    });