CODEWITHSUNDEEP
three.js
K2xL
K2xL

Reputation: 10330

ThreeJS - Getting the "existing" color in a FragmentShader

A bit new to ThreeJS. I have a bunch of instanced meshes and doing setColorAt's for each of them. I have their materials set to a ShaderMaterial with a vertexShader and fragmentShader.

I want to experiment with writing vertex shaders but keep the existing colors that I have for the meshes. My fragment shader:

        void main() {

            gl_FragColor = /* How do I get the "existing" or whatever the color used to be?

        }

From my understanding, the "existing" color isn't available during this part of the rendering pipeline, so there isn't really a way to do something like gl_FragColor=gl_FragColor or anything of the sort.

From what I was reading from other posts, the only way to retrieve the existing colors that they were set with is to render them once with a regular MeshStandardMaterial, write that render to a texture, and then create a composer pass and pass in the texture to that passes fragmentShader.

Are there any good & simple examples of this technique being used? I have a specific algorithm that is setting the colors of each of the meshes, so I want to be able to keep those while modifying the vertices. Also, if there is a way to simply ignore the fragmentShader and only use a vertexShader I would be OK with that too as long as I could still customize the color for each mesh.

Upvotes: 2

Views: 1306

Answers (3)

K2xL
K2xL

Reputation: 10330

Finally figured it out.

instanceColor is available to the vertexShader. So just make a varying vec3 to store it and pass to the fragmentShader.

Upvotes: 2

Cody Bennett
Cody Bennett

Reputation: 786

Instances can only be customized via geometry attributes (which can be split up per-vertex/instance), whereas uniforms are global and will apply to every vertex/instance of a mesh (instancing is just drawing a single mesh multiple times, so you'd interface with it as a single mesh).

InstancedMesh.setColorAt will set a per "instance" color via geometry attributes, similar to how you would with vertex colors. In threejs, you can access this via instanceColor in your vertex shader or InstancedMesh.instanceColor via three.

Some more reading on WebGLPrograms and built-ins.

Upvotes: 1

investInSoup
investInSoup

Reputation: 205

I am a little confused with the ask. So previously you used the setColorAt method to pass a color to your instanced mesh? If I am reading this right then the easiest way to get that same color passed to your fragment shader is to just pass the value as a uniform to the shader. You can pass uniform values from javascript to ShaderMaterial and use those values in your shader.

https://threejs.org/docs/#api/en/core/Uniform

hope this helps clear things up a bit

Upvotes: 0

Related Questions