@drcmda do you know any video or blog that shows similar work-flow? i would like to understand everything about it, also i wonder is react necessary or not?
i first saw @donmccurdy explain hdr workflow on a discord, selective bloom has confused me for years and how people are usually handling it seems quite complicated, i just didn’t know it was that easy. you don’t need react, it’s hard for me to make a vanilla demo as it would take too much time, but all the principles apply.
this demo is commented btw https://twitter.com/0xca0a/status/1525083552672632833 again it’s just three easy steps:
- set up bloom with a threshold of 1 (nothing gets bloomed)
- push material colors into hd range
- disable tonemapping
i don’t think there are tutorials, you will always find people messing with copy shaders, traversal, layers, which seems somewhat complex and messy, perhaps even slower since you will double render.
Hey there,
I am struggling with a very similar problem like @mrmiyagi and followed your conversation. I tried to download the ZIP file you uploaded on codesandbox.io (@drcmda) but opened it in Visual Studio code. When I open it through the Live Server in the browser I can’t see anything. This is a problem I stumbled already over many times. Is it because I need to change these paths or extra download these files and store them somewhere? :
import * as THREE from ‘three’
import { useGLTF } from ‘@react-three/drei’
import { Canvas, extend } from ‘@react-three/fiber’
import { Effects, OrbitControls, OrthographicCamera, BakeShadows } from ‘@react-three/drei’
import { UnrealBloomPass } from ‘three-stdlib’
Thanks for helping out 
when you click download on codesandbox the zip contains a self contained project, i believe they use parcel. you need to have node installed, then just run “npm install” inside and now “npm run start”. live server sounds suspect to me, that isn’t normally how web dev works unless that server knows how to read the projects package.json and so on.
and just to repeat, react is there only bc i like to pair it with three. you can do this with three/jsm/effects/EffectComposer which is also what the abstraction above uses.
2 Likes
Good idea.
There is one more thing you didn’t mention: EffectComposer has to be instantiated with a WebGLRenderTarget in the second parameter, otherwise there will be no glowing.
good to know! composer does create a default target if none is given, i wonder what it is that interferes, the encoding perhaps?
the abstraction i use sets it up like this:
new WebGLRenderTarget(width, height, {
type: HalfFloatType,
format: RGBAFormat,
encoding: sRGBEncoding
1 Like
I used from this post: [SOLVED] sRGB/HDR color values in postprocessing fragment shaders - #3 by Harold
2 Likes
@drcmda to be honest adding bloom is understandable for me, but the part where you took my gltf which looked white and over exposed and made it actually look as its supposed to be, is what i want to learn more about
the key for good looking scenes is getting color correction right and unfortunately threejs comes with a configuration that sets you back Color management in three.js
[With gamma workflows, or incorrectly-configured linear workflows] the material and lighting parameters we would need to choose would be completely devoid of any physical meaning whatsoever; they’ll be just a random set of numbers that happen to produce an OK looking image for that particular scene , and thus not transferable to other scenes or lighting conditions. It’s a lot of wasted energy to work like that. … It’s also important to point out that incorrect gamma handling in 3D rendering is one of the main culprits behind the “fake plasticky CGI look” in some (mostly older) games.
i posted the other link describing THREE.ColorManagement above. enable it and you get the same results.
@drcmda btw i have a question, can i add lights in result scene? after i generated jsx code with gltfjsx.
not only lights in general, maybe snow particles generated by threejs itself. i am going to fix several things in my gltf model that was broken, and than i will try to import it with gltfjsx, and hopefully later i will be able to add lights&snow and some text(buttons).
you can add whatever you want. click the demo again, added some particles flying around, you’re free to add lights as well. keep in mind that lights are very expensive, every pointlight adds 6 extra renders/draw calls. three.js manual
@drcmda recently i started to recreate code you created, i managed to generate gltfjsx file, but i noticed that, your code is way more complicated:
<mesh
castShadow
receiveShadow
geometry={nodes.Plane001.geometry}
material={materials['Material.006']}
position={[-0.08, 1.38, -0.62]}
rotation={[Math.PI / 2, -1.57, 0]}
/>
and mine is way simpler:
<mesh geometry={nodes.Plane001.geometry}
material={materials['Material.006']}
position={[-0.08, 1.38, -0.62]}
rotation={[Math.PI / 2, -1.57, 0]}
/>
i noticed that most of the meshes have castShadow and recieveShadow but still in the end once i modified my glb file and added more objects, somehow my generated code is only 140 lines in comparison to yours which is 600+ lines.
i would like to know if there is a package or app that helps modify gltfjsx dynamically? (meaning if i want to modify some object, in this case tree leaves the glowRed material form your code, i don’t have to go through my blender and match the geometry name to the code or adding castShadow properties , do i? )
i added the props, in VSC you can select something and hit shift-command-L and you can multi-edit every occurrence. i looked the meshes up in blender that were supposed to glow and exchanged their materials. gltfjsx just exposes the scene graph nothing more, if your model has 10 meshes so will the jsx. if yours has less it’s probably due to compress and packing steps, gltfpack or whatever made it so. and it’s good, less nodes/vertices/drawcalls is something to strive for.
you can also do this as a traversal if that’s easier for you:
function Model() {
const { scene, nodes, materials } = useGLTF(url)
useLayoutEffect(() => {
Object.values(nodes).map(node => node.castShadow = node.receiveShadow = true)
nodes["whatever"].material = new THREE.MeshBasicMaterial(...)
}, [])
return <primitive object={scene} />
}@drcmda i have found this package react-particles-webgl i tried to add it to my scene
i get errors for some reason and cant get it to work, could you help me out.
dont really need to use that exact particles, i just want to create infinite snow fall, i tried sparkles form r3-drei, but i couldnt find settings that change particles direction and movement speed…
Hi, I have tried to implement your method and it works, but how can I get the exact color I need (0.39, 0.91, 0.98)) If we have to push it beyond 1?
I don’t know. This is the reason I don’t use this approach. As I have no idea how to manage exact colors 
@drcmda any thougths?
like in blender upping emissiveintensity will change the color, making it brighter as it gets hotter. bloom seems to behave very similar. if you want to retain the color then try tweaking color, emissive and emissiveIntensity.