Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

In the uniforms section of the shader pass configuration, declare the variables to be used in the shader program:

Code Block
languagejs
this.shaderPass = new ShaderPass({
    uniforms: {
        "tDiffuse": { value: null },
        "tMask": { value: null },
        "tBackground": { value: null }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

...

You can dynamically update the values of the shader pass properties, such as tBackground and tMask, when necessary. For example, upon loading textures or changing the room in your application:

Code Block
languagejs
this.shaderPass.tBackground.value = bgTexture; 
this.shaderPass.tMask.value = maskTexture;

Adding Passes to EffectComposer Ensure the correct order of passes by adding them to the EffectComposer in sequence:

Code Block
languagejs
this.composer.addPass(renderPass); 
this.composer.addPass(this.fxaaPass); 
this.composer.addPass(this.shaderPass);

Rendering the Scene Launch the rendering process by calling the render method:

Code Block
languagejs
this.composer.render();

Bind the render method to the requestAnimationFrame event to continuously update the rendering.

...