Struggling with gltf and lighting

A possible issue despite it should not happen with blender since it’s the ultimate official three.js companion (your case is strange):
gltf loader is known for bad srgb conversion sometimes, like with cinema4D wich always display them darker because the colors are already pre-converted in the binary code. Not a big deal, you can try to open the loader script and remove any mention/function related to “srgb” and check if it improve.

three runs in a different color space than blender, the default is a little less useful because it bands and rips colors apart. you must set outputencoding to srgb, and it’s generally recommended to switch on color management, look at this: three.js docs

gltf loader is known for bad srgb conversion sometimes…

Just to clarify here — THREE.GLTFLoader is handling colors and textures correctly, but it does assume the renderer is configured with correct color management. as @drcmda mentions. Any of the glTF-related official examples will show how to do this correctly: three.js/webgl_loader_gltf.html at 0c26bb4bb8220126447c8373154ac045588441de · mrdoob/three.js · GitHub

1 Like

i will give it a try

@donmccurdy btw this is what error i get everytime i use that code you linked

was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

and i think its becasue of this part…

        import * as THREE from 'three';
		import { OrbitControls } from './jsm/controls/OrbitControls.js';
		import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
		import { RGBELoader } from './jsm/loaders/RGBELoader.js';

would be nice if anyone actually fixes my model and shows me working code

i tried your model, srgb works as expected, banding is gone. also implemented hdr bloom and compressed your file to a few hundred kb.

code: bloom hdr workflow, high key (forked) - CodeSandbox

i used a tool that allows me to alter the gltf scene graph (gltfjsx), in vanilla you will have to traverse and stretch colors. refer to this thread EffectComposer with scene background - #3 by drcmda it explains how to use bloom selectively.

ps. these are not import paths:

import { OrbitControls } from './jsm/controls/OrbitControls.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { RGBELoader } from './jsm/loaders/RGBELoader.js';

it’s three/jsm/controls/OrbitControls etc

1 Like

this looks best for now now i will try to open it with my vs code , thanks for helping out

Yes your are perfectly right but…
Sadly I can’t lock my entire renderer behind gltfLoader color requirement.
I’m using three.js as a messy experimental field, with convoluted shenanigans sometimes (In fact…all the time? :laughing:)

The natural move for my case is to simply remove any automatic process behind color management.
Once again, no big deal. It take 30 sec, I don’t expect the loader to adapt for any wild purpose.

@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 again it’s just three easy steps:

  1. set up bloom with a threshold of 1 (nothing gets bloomed)
  2. push material colors into hd range
  3. 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 (@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 :slight_smile:

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.


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


@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 thanks

@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).