Hi guys,
I have look for a solution to my problem inside several topics without success.
I’m trying to achieve the result of glowing a part of a gltf model loaded.
At the beginning, I applied bloom effect on all scene and not with the selective bloom, but I encounter an issue on iOS where rendering dot not work properly and I am trying to solve it with the selective bloom according to this topic Bloom pass bug in IOS 15
My starting point to apply the selective bloom was this topic [SOLVED] EffectComposer + Layers and the unreal bloom selective demo three.js examples
I have understood layers’s handing with objects to glow and the camera for render successivly two rendering, the first one for the glow effect, and the second one for the entire scene without glow. As I think according to my tests, this two rendering are added one above the other.
It’s work perfectly great in examples I found where objects are created directly with threejs but not on my scene imported from a gltf. Let’s me explain with images and some code.
I have a cubes pyramid with numbered faces realized with Cinema4d and exported as gltf model. There are emissives maps on all numbers. Their emissiveIntensity is set to 0, juste the 13 has an emissiveIntensity to 1.
With code extract from other topics, I am able to create a first rendering with bloom effect.
//scene loaded from gltf previously
const frontFace = scene.getObjectByName('frontFace13');
frontFace.layers.enable(1);
renderer.antialias = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = PCFSoftShadowMap;
renderer.physicallyCorrectLights = true;
renderer.outputEncoding = LinearEncoding;
renderer.toneMapping = ACESFilmicToneMapping;
renderer.autoClear = false;
renderer.preserveDrawingBuffer = true;
const renderPass = new RenderPass(scene, camera);
const bloomPass = new UnrealBloomPass(new Vector2( window.innerWidth, innerHeight ));
bloomPass.threshold = 0.1
bloomPass.strength = 2;
bloomPass.radius = 0;
const bloomComposer = new EffectComposer(renderer);
bloomComposer.autoClear = false;
bloomComposer.renderToScreen = true;
bloomComposer.setSize(window.innerWidth, innerHeight);
bloomComposer.addPass(renderPass);
bloomComposer.addPass(bloomPass);
function render() {
requestAnimationFrame(render);
// first rendering
renderer.clear();
camera.layers.set(1);
bloomComposer.render();
// second rendering
// renderer.clearDepth();
// camera.layers.set(0);
// renderer.render(scene, camera);
}
But when I enable the second rendering, this one seems to replace the previous one and no bloom is applied above the scene.
function render() {
requestAnimationFrame(render);
// first rendering
renderer.clear();
camera.layers.set(1);
bloomComposer.render();
// second rendering
renderer.clearDepth();
camera.layers.set(0);
renderer.render(scene, camera);
}
I was thinking that black of the bloom rendering will be used as transparency but bloom dot not appear at all.
Is it an issue of gltf ? Or depth ? Or alpha ? I do not know where look anymore to solve this problem. I really do not understand why bloom rendering is not applied where as my code seems to be the same of others examples where it works.
So thanks for your help.