Hello!
I am following a threeJS tutorial and am encountering a bug with the color rendering that I don’t know how to tackle. The original 3D model and the tutorial’s render both have vibrant colors, while my result looks quite pale.
Tutorial / original:
Mine:
I am really new to three so don’t really know where to look, but I have tried a couple of things I have found online:
- gltf file differences: I have inspected the
scene.gltf on a text editor and compared my version with the tutorial’s, and they are exactly the same;
- color encoding: I have tried to add this line for color encoding (
renderer.outputEncoding = THREE.sRGBEncoding), but it doesn’t change the output;
For further read, here’s the tutorial source and here’s my code. I don’t know if it’s be relevant, but the only difference I can spot between the tutorial’s source and my code is theirs being compiled by Webpack, and mine by Vite.
Can anyone help me or route me in the right direction?
Would appreciate a lot! Thanks.
It looks to me like the sketchfab view has some tone mapping or color grading enabled. That sort of thing doesn’t come with the model, and I’m not sure how to see what that color grade is specifically, but enable/disable post processing in the sketchfab “model inspector” panel and note the difference. It won’t be an exact match, but a quick way to get a bit closer here would be:
renderer.toneMapping = THREE.ACESFilmicToneMapping;
Thank you so much, the result is much better!
If I may ask, I have noticed that there is a static/textures folder with this file inside, where the colors look very close to the expected result.
Do you know if the intended use is to add it as a texture on the model?
The texture is referenced by the glTF file - there’s no need to add it manually. The tutorial is based on a fairly old version of three.js, newer three.js versions r152+ have color management updates, and we can’t see your code here to tell you if it’s correct for whichever three.js version you’re using … so I don’t think my speculating further based on screenshots will be much help to you. Please share a demo with code, if you need help debugging.
Or try loading this model in viewers like https://gltf-viewer.donmccurdy.com, toggle the tone mapping there. To match the higher saturation of the Sketchfab render, I think you will certainly need to use color grading or tone mapping, as Sketchfab does.
I see, thanks for the clarification.
It’s just a toy project so I don’t want to take too much of your time, I’ll do some research on post processing which is a good hint/direction already.
Thank you for your help!
1 Like
