What is the difference between MeshPhongMaterial and ShaderMaterial in THREEJS

Question

What is the difference between using MeshPhongMaterial and ShaderMaterial with THREE.ShaderLib.phong.

1. Will Three js internally use the shaders for all materials ?
2. Will using ShaderMaterial improve performance ?
3. I have a piece of code which uses MeshPhongMaterial and how do i convert to ShaderMaterial with THREE.ShaderLib.phong.

Here is the code

var material = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 35, shading: THREE.SmoothShading, combine: THREE.MultiplyOperation, specular: 0x030303, reflectivity: 1 });

How do I specify combine, reflectivity and other properties in ShaderMaterial

Answer 1

I clear you doubts line by line might be helpful:

What is the difference between using MeshPhongMaterial and ShaderMaterial with THREE.ShaderLib.phong.

MeshPhongMaterial is the Namespace provided you end user by library to make the development faster more easy for those who are from graphics ( dev/designer background ) So Internally if you check library src/renderers/shaders/ShaderLib.js THREE.ShaderLib['phong'] is mapped to shaderIDs line 29574 three 75 version. So they are same.

Will Three js internally use the shaders for all materials ?

Answer: OpenGLES 2.0 and above all are shader based technology compare to fixed pipeline to draw stuff on the surface created using EGL.

Will using ShaderMaterial improve performance ?

Answer: Depends what you are looking into three.js shaders are mature enough you could get a peanut if you don't want light vector calculation into fragment shader ( by providing direct vec3 instead of uniform) but this might not be first point to shoot for performance they are many like LOD, Object Pooling etc etc. ( different people might have different opinion about same )

I have a piece of code which uses MeshPhongMaterial and how do i convert to ShaderMaterial with THREE.ShaderLib.phong.

Answer: You can manually Called

var phongShader = THREE.ShaderLib[ 'phong' ]
var shaderMaterial = new THREE.ShaderMaterial( {
 uniform: phongShader.uniform,
 vertexShader: phongShader.vertexShader,
 fragmentShader: phongShader.fragmentShader
});

But you can use extend shader by calling your custom glsl file using the THREE.ShaderChunk too.

How do I specify combine, reflectivity and other properties in ShaderMaterial

Answer: Create your own uniform (the one one which you mention are already supported in material) and then call

THREE.UniformsUtils.merge( [
phongShader.uniform,
{
//to do custom uniform
}
vertexShader:vertexShader,
fragmentShader:fragmentShader
)]
var vertexShader = [

//so on add the shaderChunk Required
].join( '\n' )

var fragmentShader = [
THREE.ShaderChunk[ "common" ],
//so on add the shaderChunk Required
//call your custom uniform which you have supplied into the final gl_FragColor
].join( '\n' )

Seeing your problem IMHO you won't need to change in the vertexShader you can edit the fragmentShader directly using your custom paramters.

Answer 2

You can probably think of a MeshPhongMaterial as a ShaderMaterial but with all the hard work done for you (variables, fragment and vertex shader).

1. Yes, all materials are a shader (send shader code to the gpu).
2. Depends on your shader.
3. Why would you want to recreate it? You could though. You should probably understand how the materials work before attempting it.

I have a page of my own experiments with ShaderMaterial you could take a look at.

I also took a look at the built in materials/shaders for my own reference here.

Note though, the three.js materials and how they are made up has changed a bit since I posted these. But my shader experiments might be a bit of a help.

I also have a fiddle here which extends the ShaderMaterial class, effectively making my own material class (though this was just an experiment and I'm not sure if it's the best, or even the correct way to do it.)

...

Answer 3

They are not really the same, because the renderer has built-in updating of special uniforms for the MeshPhongMaterial, whereas some ShaderMaterial uniforms have to be updated manually. That being said, I don't have the complete overview, which at least requires inspecting details the source code of THREE.WebGLRenderer.

What I can tell for sure, is that

let mat = new THREE.MeshPhongMaterial();

works, and that

let mat = new THREE.ShaderMaterial(THREE.ShaderLib.phong);

fails with error messages about uniforms. This can, at least in part, also be caused by missing default values.

EDIT: I was wrong.

It works if you add

mat.lights = true;

You may also want to use mat.fog = true to enable fog. If you specify the shader object parts (uniforms, vertexShader, fragmentShader) individually, you can also add "lights: true" and "fog: true" to the parameters to the ShaderMaterial constructor.