How to import a material in a shader

Questions
,
1

hi, i try to import a material into a shader for further experiment but i cant make it work . Does someone knwo why and can explain it to me because i dont know what else to try.

here is the part of the code involved :
when i assigne the material2 to my 3d items it work but when i try to use compositeMaterial , its not working anymore , my 3d shapes are black and i have no error in the console.
thanks,
Pierre

// material2 that work fine by itself

const material2 = new THREE.MeshPhongMaterial({
color: 0xfffffd,
flatShading: true,
envMap: textureCube2,
reflectivity: 1,
refractionRatio: 0.9,
specular: 0x000000,
transparent: true,
opacity: 1,

});

const compositeMaterial = new THREE.ShaderMaterial({
uniforms: {
material2Texture: { value: material2.map }
},
vertexShader: `
varying vec2 vUv;

void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

`,

fragmentShader: `
uniform sampler2D material2Texture;
varying vec2 vUv;

void main() {
  gl_FragColor = texture2D(material2Texture, vUv); //display black while i would like to dispaly material2
   //gl_FragColor = vec4(0.5, 0.5, 0.5, 0.3); // test that works with a flat color 
}

`,
});

2

it’s probably impossible to import a material in a shader i guess i have to reproduce the effect of material2 in my shader

3

Unfortunately, what you are trying to do does not work. The map property just holds a diffuse texture but not the “result” of the rendered material for further usage.

4

ok , thanks for the right explanation of what happen. i realized it was not working but didn’t understand the reasons.

5

You can make a modified version of one of the built in materials, but it’s pretty fiddly.
There is a callback on the materal called .onBeforeCompile that you can set to call your code before the material gets compiled, and there you can modify it and put your own custom behavior in, but be warned, the built in materials are pretty complex, and composed of many smaller shader “chunk” fragments.

This nice tool lets you see the shader source code of each of the built in materials:

https://ycw.github.io/three-shaderlib-skim/dist/#/latest/phong/fragment

Click the unfold all to expand all the “chunks” and see the full shader.

In threejs you can do:

material.onBeforeCompile = function( shader ){
//shader.vertexShader
//shader.fragmentShader contain the shader source before it is compiled… and you can hack it up or inject your custom functionality.
}

It’s definitely not trivial but it’s a lot of fun!

6

hey , thanks but i will save this for later. i dont have so many hours of three.js behind me. For now i stick to the basics and decided to drop this idea for now :slight_smile: but thanks for the link , ill probably go back to it in a while.

1 Like
7

Yeah… that’s probably a good call. It’s definitely not “easy”. Just something to think about later… :slight_smile: have fun!

1 Like