I am ashamed to say I wasted the entire day trying to figure this out and I now have to surrender.
I found this, [SOLVED] EffectComposer + Layers, which I believe to be the same thing I need, but Impossible for me to make work.
What I want:
To add bloom, but only on specific meshes. Specifically the body, but without affecting the chrome clothing around the body, I can’t just adjust the emissiveness on each material, because the env. map will be affected by the bloom as well, which makes the entire chrome material be affected, so I need to make a split render on separate layers.
import * as THREE from 'three'
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
import Experience from './Experience.js'
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js';
export default class Renderer
{
constructor()
{
this.experience = new Experience()
this.canvas = this.experience.canvas
this.sizes = this.experience.sizes
this.scene = this.experience.scene
this.camera = this.experience.camera
this.debug = this.experience.debug
this.setInstance()
this.instance.autoClear = false;
this.setComposer()
this.setTestCube()
}
setInstance()
{
this.instance = new THREE.WebGLRenderer({
canvas: this.canvas,
antialias: true
})
this.instance.toneMapping = THREE.CineonToneMapping
this.instance.toneMappingExposure = 1.75
this.instance.shadowMap.enabled = true
this.instance.shadowMap.type = THREE.PCFSoftShadowMap
this.instance.setClearColor('#211d20')
this.instance.setSize(this.sizes.width, this.sizes.height)
this.instance.setPixelRatio(this.sizes.pixelRatio)
}
resize()
{
this.instance.setSize(this.sizes.width, this.sizes.height)
this.instance.setPixelRatio(this.sizes.pixelRatio)
}
setComposer()
{
this.composer = new EffectComposer(this.instance)
this.renderPass = new RenderPass(this.scene, this.camera.instance)
this.composer.addPass(this.renderPass)
this.outputPass = new OutputPass()
this.composer.addPass(this.outputPass)
this.bloomPass = new UnrealBloomPass(
1.5, // strength
0.4, // radius
0.85 // threshold
)
this.composer.addPass(this.bloomPass)
}
setTestCube(){
const cube = new THREE.Mesh
(
new THREE.BoxGeometry(1, 1),
new THREE.MeshStandardMaterial({color: 'white'})
)
cube.layers.set(1)
this.scene.add(cube)
}
update()
{
this.instance.clear()
this.camera.instance.layers.enable(1);
this.camera.instance.layers.set(1)
this.composer.render()
this.instance.clearDepth();
this.camera.instance.layers.set(0)
this.instance.render(this.scene, this.camera.instance)
}
}