What is the Three.js standard shader?

Questions
1

Hello all,

My company is using three.js to view 3D objects online, but we want our models in Unity and in our Web View to look the same. We are thinking it comes down to how the shaders are working on each end.

And so I was hoping to ask where/if I could get the source code for the three.js standard shader to kickstart this reverse engineering process?

It would be greatly appreciated,
Alex

2
2 Likes
3

Thanks loeeee!!!

1 Like
4

Hi, are you familiar with github?

Three.js lives there and you can find the entire source of it:

The shaders live here:

You can find other shaders in there too, not just the standard. It’s better to look this up on github, because you have the entire source available there. If you came here to ask for source on various shaders and classes it would quickly bog down the entire forum. At worst you would have a thousand topics here each asking about a file, and someone would have to copy paste it.

Technically though, the “unrolled” shader (the way @looeee posted) cannot be found in the source. But i would advise against this being your starting point. three can parse #include <foo> statements, so you can modify some of the chunks, reuse some.

5

If you’re going to do such a comparison, I’d suggest choosing your settings in three.js to more closely match Unity’s linear workflow. Assuming you have sRGB color textures (which is usually true), then:

// for all materials
material.map.encoding = THREE.sRGBEncoding;

// for renderer
renderer.gammaOutput = true;
renderer.gammaFactor = 2.2;
renderer.physicallyCorrectLights = true;

If using Unity’s legacy gamma workflow, then you can ignore all the above.

I’d also mention that three.js’s MeshStandardMaterial is a metallic-roughness PBR model. Unity’s Standard Shader offers that option, as well as a “Standard Specular” alternative. The implementations are not identical, but should appear reasonably close if the settings — and the environment map in particular — are configured the same way.

For other examples comparing metal/rough PBR shaders across different engines, and some of the complexities involved in doing so, see https://github.com/vorg/pbr-compare (various WebGL engines) or https://googlewebcomponents.github.io/model-viewer/test/fidelity/results-viewer.html (currently down, compares threejs and Filament).

3 Likes