Struggling with gltf and lighting

[mrmiyagi]

hi i am trying to import model i created in blender, i think im not exporting gltf properly, basically i get overlit render in threejs. iamge1
this is what i want my model to look like: image2

here is link to my project and gltf i exported: project link

also pay attention to red circle in image1 : that is yellow wire on the roof, for some reason in gltf format it messes up.

can you help me out?

[Mugen87]

Do you mind sharing the glTF asset differently? I can open the zip on macOS for some reasons.

BTW: The bloom effect you are seeing in the original project will not automatically be applied by loading the glTF asset. You need post processing for this like demonstrated in webgl_postprocessing_unreal_bloom.

[mrmiyagi]

yes i know about post processing., but before that i just want to have normal looking model in threejs to than apply post processing and other stuff.
i will upload on my drive and give you the link for both blend and gltf files then.

here is the link to drive with blend, gltf and code i used : link

[Oxyn]

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.

[drcmda]

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

[donmccurdy]

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/examples/webgl_loader_gltf.html at 0c26bb4bb8220126447c8373154ac045588441de · mrdoob/three.js · GitHub

[mrmiyagi]

i will give it a try

[mrmiyagi]

@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

[drcmda]

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

fullscreen: https://whnhyr.csb.app
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

[mrmiyagi]

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

[Oxyn]

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? )

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.

[mrmiyagi]

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

[drcmda]

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.

[drcmda]

this demo is commented btw https://twitter.com/0xca0a/status/1525083552672632833 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.

[l1610]

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

[drcmda]

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.

[prisoner849]

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.

[drcmda]

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

[prisoner849]

I used from this post: [SOLVED] sRGB/HDR color values in postprocessing fragment shaders - #3 by Harold

[mrmiyagi]

@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