Making two material with same shader

[Pravin_Poudel]

I have one material with shader code and I tried to make that shader inside a function so that it can be used for another material

I have two planes with the same characteristics only difference is what color to pass in each plane Mesh.

I am creating material with beforeCompileShader and both of them are using same function

const beforeCompileShader = (shader) => {};

  const tankGeometry = new THREE.PlaneGeometry(50, 90);
  tankMaterial = new THREE.MeshBasicMaterial({
    onBeforeCompile: (shader) => {
    },
  });

I was expecting different color in two plane but i am getting same color
Any help please

[prisoner849]

Works well for me.
Create a new material with new instance of the uniform for colors.

[Pravin_Poudel]

I realised that i need colormap texture rather than few color values so i tried to pass that into shader but i am not able to. I am trying for last 4/5 hours but not able to find what is wrong in this

I am sorry for bugging you but i am so lost in this

I have passed the texture with uniform and am also sampling that inside the fragment shader.

Do I have to do something more because when i use rawshader, i only do this.

Is there anything extra that i need to do in beforeCompile?

[prisoner849]

@Pravin_Poudel

    vec3 coldColor = texture(heatTexture, vec2(0.5, 0.5)).rgb;
    vec3 hotColor = texture(heatTexture, vec2(0.5, 0.5)).rgb;

What do you expect, using these lines?
You sample the same color into two variables, as you use the same uv coordinates.

[Pravin_Poudel]

I wanted to get at least something because right now I am getting black ( for debugging)

This is the image

I wanted to sample the center of the image

[prisoner849]

Where is that line, or something similar, in your code: shader.uniforms.heatTexture = tankMaterial.userData.uniforms.heatTexture;?

[PavelBoytchev]

A reminder: It is better to use a pure gradient texture without back border. Otherwise you may accidentally pick the color of a border pixel.

[Pravin_Poudel]

Oh yes I had not passed the uniform value in

(shader)=> {
}

Thank you so much, it never occurred to my mind that I have to pass there as well.

Oh god !! thank you so much. i was so busted

[Pravin_Poudel]

Thank you, the posted image is a screenshot and the colored image in that screenshot is the colormap image. Thank you

[prisoner849]

I leave it here just in case https://codepen.io/prisoner849/full/wvxOYWV

[Pravin_Poudel]

I never realized that fractal brownian motion (FBM) could be used to create such a beautiful effect in tanks.

This water-flowing effect is so so beautiful.

Thank you so so much !!!

[Pravin_Poudel]

Hi @prisoner849 I realized that i want particle( i mean particle with the colors) with it’s the expected movement inside the simulation container.

To achieve that i tried to make particle falling but I am not able to !! Specially making particle from one end to another and transitioning in betwen

[prisoner849]

What simulation? What particles with the colors? What code? Any working live code examples and/or explanatory pics/vids?
Sorry, I’m not that good at telepathy ¯\_(ツ)_/¯

[Pravin_Poudel]

I am sorry for not being clear

[prisoner849]

@Pravin_Poudel

I am not able to make this sprial tube.

THREE.Path() of multiple half-circles (.absarc())

@Pravin_Poudel

this pipe turning pipe

Didn’t get what you mean.

@Pravin_Poudel

i saw in physics simulation to simulate the heat transfer, they show movement of heat particle with color of particle showing the temperature which in my case is those two temperature.

Depents on your goal and needs. Use THREE.Points(), or a plane mesh with a matrial with an animated looped texture with small circles, or a modified material, where you draw small circles in shaders.

Creativity is up to you