The pass I implemented myself did not meet my expectations

Questions
1

Hi, I have implemented a Pass that can adjust the color and color range of the lens based on ColorifyShader, but it will make other objects in the scene disappear. I am not sure why this is.

Firstly, I cloned three.js-dev and add a html file in examples

In the scene, I added a BoxGeometry for testing

Use GUI to adjust range and color, and whether to enable it.


effectComposer = new EffectComposer(renderer)
let renderPass = new RenderPass(scene, camera)

const cameraPass = new ShaderPass(CameraColorShader)
cameraPass.uniforms['range'].value = 0
cameraPass.uniforms['color'].value = new THREE.Color(1, 1, 1)

const outPutPass = new OutputPass()

effectComposer.addPass(renderPass)
effectComposer.addPass(cameraPass)

const params = {
    range: 0,
    color: '#ffffff',
    enabled: false
}
gui.add(params, 'range', 0, 1).onChange(function(v) {
    cameraPass.uniforms['range'].value = Number(v)
})
gui.addColor(params, 'color').onChange(function(v) {
     cameraPass.uniforms['color'].value = new THREE.Color(v)
})

gui.add(params, 'enabled').onChange(function(v) {
     cameraPass.enabled = v
})


const CameraColorShader = {

  name: 'CameraColorShader',

  uniforms: {
    'range': { value: 0.0},
    'color': { value: new Color(1, 1, 1) } ,
  },
  vertexShader: `
    varying vec2 vUv;

    void main() {

      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );

    }`,
  fragmentShader:  /* glsl */` 

    uniform vec3 color;

    uniform float range;

    uniform sampler2D tDiffuse;

    varying vec2 vUv;

    void main() {

        vec2 center = vec2(0.5, 0.5); 

        vec4 texel = texture2D(tDiffuse, vUv);

        float distance = distance(vUv, center); 

        float modifiedRange = range * distance; 

        vec3 modifiedColor = mix(texel.rgb, color, modifiedRange);

        gl_FragColor = vec4(modifiedColor, texel.a);
    }
  `
}

i got this in picture

20230818094937
202308180949371328×928 21.9 KB

20230818095000
202308180950001330×929 34 KB

The geometry disappears when pass is enabled.

I guess it’s the center, but I’m not sure.

As explained above, what I want is to only adjust the color and range, but keep the other geometry and models in the scene unchanged.

2

I found out where the mistake was.

I didn’t pass in tDiffuse in uniforms

2 Likes