How to re-use shaders?

Questions
#1

If I have two materials using the same shader code:

const mat1 = new THREE.RawShaderMaterial({
    vertexShader: document.getElementById('vs').textContent,
    fragmentShader: document.getElementById('fs').textContent,
});

const mat2 = new THREE.RawShaderMaterial({
    vertexShader: document.getElementById('vs').textContent,
    fragmentShader: document.getElementById('fs').textContent,
});

will THREE understand that these are the same shaders or will it compile them twice?

If the latter is the case, how can I make it so that shaders are compiled only once and then work with different materials? Materials have different uniforms objects.

Thank you!

#2

The engine should be able to detect that the shader code is the same and only maintain a single internal shader program.

You can verify how many programs exists by evaluating the programs property of WebGLRenderer.info.

1 Like
#3

Thank you, judging by cache property, it looks like the engine detects matching combinations of vertex/fragment shaders but if, say, a fragment shader is reused with different vertex shaders, it’ll be compiled twice, and the other way around, is that correct?

https://jsfiddle.net/tfoller/jchsLe65/14/

#4

Yes, that is correct. The code of the vertex and fragment are part of the key to detect internal program entities.