Issue with shaderMaterial

[marekalgoud]

Hello,

I'm learning shaders, so I tried to make a really simple one. The goal is to change the color of a cone depending of the normal. My shader works pretty well, but I have a strange behavior : I use uniforms to pass a color to the sader. If I have 3 differents cone in my App, but the color of the first is applied to all the others... I don't understand why the uniforms are shared beetween them.

Here's the code :

the shader :

const CustomShader = {
  uniforms: {
    color: { type: "v", value: undefined },
    color2: { type: "v", value: undefined }
  },

  vertexShader: `
    varying vec2 vUv;
    varying vec3 vNormal;

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

  fragmentShader: `
    varying vec2 vUv;
    varying vec3 vNormal;
    uniform vec3 color;
    uniform vec3 color2;

    void main() {
      vec3 mask = abs(vNormal.z) > 0.0 ?  color : color2;
      gl_FragColor = vec4(mask, 1.0);
    }
  `
}

export { CustomShader }

the 'Cone' :

import React, {useRef} from 'react'
import { Color } from "three"
import {CustomShader} from '../shaders/CustomShader'

function Cone({ position, width, height, color, color2 }) {
  const ref = useRef()

  return (
    <mesh ref={ref} position={position}>
      <coneBufferGeometry attach="geometry" args={[width, height, 32]} />
      <shaderMaterial
        attach="material"
        args={[CustomShader]}
        uniforms-color-value={new Color(color)}
        uniforms-color2-value={new Color(color2)}
      />
    </mesh>
  )
}

export default Cone

and in my app :

function App() {

  const mouse = useRef({ x: 0, y: 0 })

  return (<Canvas
    camera={{ position: [0, 0, 20], near: 1, far: 25 }}
    onMouseMove={e => (mouse.current = getMousePos(e))}
  >
    <ambientLight intensity={1} />
    //  ...
    <Cone position={[0, 7, 0]} color="#000000" color2="#F3FF2B" width={1} height={3} />
    <Cone position={[7, 7, 0]} color="#000000" color2="#FFF000" width={1} height={3} />
    <Cone position={[-7, 7, 0]} color="#000000" color2="#004488" width={1} height={3} />
    // ...
  </Canvas>
  )
}

Many thanks for your help and for your works !

[drcmda]

then it looks like you cant share shaders in threejs. it's probably enough to do:

const shader = useMemo(() => ({ ... CustomShader }), [])
return <shaderMaterial args={[CustomShader]} />

https://stackoverflow.com/questions/15597846/three-js-sharing-shadermaterial-between-meshes-but-with-different-uniform-sets

personally i like to create shaders like this: https://codesandbox.io/s/r3f-shader-material-0b2b0?file=/src/ColorMaterial.js

import * as THREE from "three"
import { extend } from "react-three-fiber"

class CustomMaterial extends THREE.ShaderMaterial {
  constructor() {
    super({
      uniforms: { color: { value: new THREE.Color("white") } },
      vertexShader: `...`,
      fragmentShader: `...`
    })
  }
  get color() {
    return this.uniforms.color.value
  }
}

extend({ CustomMaterial })

and then

<mesh>
    <planeBufferGeometry attach="geometry" />
    <customMaterial attach="material" color="hotpink" />

that takes care of the uniforms problem, and you get to define real props that you can alter declaratively.

[marekalgoud]

Thank you for your quick answser. I tried your solution and it works perfectly !

[molp]

Thanks for the example. It seems this doesn't work anymore. If I try it I get the error Uncaught TypeError: Class constructor CustomMaterial cannot be invoked without 'new'. Any tips how to solve this?