How To Create Realistic Scenes In Three.js - Tone Mapping, HDR, Gamma Correction, sRGB Color Space

[@WaelYasmina]

Three.js r152 update renderer.outEncoding is replaced with renderer.outputColorSpace THREE.sRGBEncoding is replaced with THREE.SRGBColorSpace Article waelyasmina.net/articles/how-to-create-ultra-realistic-scenes-in-three.js/

[@precisionchoker]

This is so good, I learned a lot about HDR and gamma correction. Thank you

[@WaelYasmina]

Glad it was helpful!

[@Iturner72]

Thank you so much for this video! It cleared up a ton of confusion I had about loading hdr images.

[@vrmeup]

Thanks for a great video 😀 It was really educational, and interesting. It's amazing the quality of the results that can be achieved from using environment lighting.

[@NoobishAlpha]

Thanks a lot, I could not find a better video about this

[@WaelYasmina]

Glad you liked it!

[@BikashMIshra-y2p]

Great Video,Great Content Thank you so much for such wonderful content

[@webghoul]

yet another magic from you!!!1

[@WaelYasmina]

Thank you!

[@TheZeFiiiR]

Thank you, that's really helped me! btw your pronunciation sounds like voice of Gru from the "Despicable me", which is kinda funny😅

[@achreflegend4335]

ya bro i'm enjoying your threeJs vids keep up

[@WaelYasmina]

Glad you do! :D

[@achreflegend4335]

@@WaelYasmina i have a question man can i contact you for help ?

[@IranStar]

Can we create an environment mapping texture from the reflection cube instead of equirectangular for lighting 3D objects (r156)? Thanks

[@juanpablo2097]

Really great video! I have enjoyed coding this demonstration of ThreeJS on use, however I am getting the same HDR large picture after declare the texture.mapping as EquirectangularReflectionMapping exactly the same as the video. Does someone knows if that instace had a modification or something related? Min 8:57

[@shwetajain2713]

How to put down sphere model at floor area?

[@StabilDEV]

How can the spheres be made to reflect each other as well as the environment map?

[@thinginthenorth]

This is great thanks so much!

[@gramitech9801]

Excellent, thank you for this

[@WaelYasmina]

You're welcome!

[@jacopofolgoniborsa9481]

very helpful tutorial!

[@blokche_dev]

Thanks a lot for sharing! 🙂

[@WaelYasmina]

You're welcome :)

[@JustinWaulters]

Does this make the spheres show in each other's reflections? Or is the reflection solely the image-based background?

[@arsil_]

Thanks a tons!! this is a great video

[@WaelYasmina]

You're very welcome!

[@matiassomoza6385]

I like your video so far (I'm up to 6:25). Technical stuff is not boring for me, it's actually quite interesting (at least for me). I'm confused about a point in HDR, on one side, like you said, it's a photograpic technic to achive a widely dinamic range by taking severel pictures at diferent exposures and then merging them. But, the other HDR, the one related to displays a whole new world that came from cell phones, and now it's on some tv's and computer . The standard HDR10 estimates that a display have to be able to emit 1000 nits (or cd/m2) to be called HDR. I know that there are professional cameras that can shoot video for those displays (The Alexa 35 has 17 stops of dynamic range). About the color deph, there are actually professional cameras that can shot at 16 bit (Sony F65 for instance). But I haven’t heard yet about any monitor, even professional ones, that can handle that. Most of them work with 12 bits, some with 14 bits (please correct me if I’m wrong, I might be outdated). My question is, regarding to HDR, are you talking about the photographic technic of taking several pictures at different exposures in order to gain a wider dynamic range, or are you talking about the capability of a screen to resolve 1000 nits (average computers are about 300, 350)?

[@vosyasabesquien]

if you use an HDR image, you can appreciate it in any monitor. of course the image will look better on a high end TV or professional monitor.

[@captainofthewhitetower]

Can we add unity object into three js and make it interactable with html? Like when I press a certain point I would get a highlight and a widget popup

[@Carlos-si9bn]

Awesome!!

[@BleeizMobile]

I'm wondering how to setup reflections like this but with THREE.ShaderMaterial so I can actually add stuff in .js. I haven't found the file storing base shaders

[@felizr_com]

good info thanks

[@bestapps4709]

I want to put brightness in my .obj model, make it bright, can you help bro?

[@laxmangiri5511]

awesome and thanks for this

[@WaelYasmina]

My pleasure!

[@antoniofuller2331]

How can you be having problems when you watch this guy's tutorials?

[@laxmangiri5511]

@@antoniofuller2331 bro you here too

[@WaelYasmina]

😂😂😂😂😂

[@laxmangiri5511]

@@antoniofuller2331 why you block me in facebook when i didn't reply your answer

[@edwardhandrich6043]

This is a good example of faking environement reflection. However, the green sphere is not reflected in the yellow sphere and vice-versa. How do you implement actual reflection of other objects in the scene?

[@mtxar]

awesome 👍👍👍👍👍👍👍👍👍👍

[@WaelYasmina]

Thank you!

[@wetdogpizza-tq1di]

but how do you make the balls appear in each other's reflection?

[@honefone]

rad video

[@WaelYasmina]

Thank you!

[@木夕-c3s]

Coooooooool

[@nicholasbazzoni7084]

you're vids are awesome and in depth. I'm trying to build a music player within a three js env wherein i can trigger different songs by clicking various objects on the screen. however i cant seem to find anything that specifically explains how to do just this. For instance imagine in your video the yellow and blue orbs would play different songs when you click them and perhaps even react to to the music! any ideas? thanks.

[@WaelYasmina]

Thank you Nicholas! For simple music playing you need to use the raycaster and the audio listener. I've explained how to use the former in this video (38:42): kzbin.info/www/bejne/rnukl3-aisyXmZY But I didn't yet do tutorials on the latter yet. So you'd need to follow the documentation which is pretty easy. threejs.org/docs/#api/en/audio/Audio

[@nicholasbazzoni7084]

@@WaelYasmina thx a lot I’ll take a look.

[@nicholasbazzoni7084]

@@WaelYasmina I got it to work with a mouse move but not with a click . I also can’t figure out how to add multiple sound files! Can’t wait for you to do a tutorial on this !😀

[@WaelYasmina]

Just use the code you put in the animate function inside the callback of a click eventListener instead. The whole audio thing is on my todo list so yeah 😉

[@rinomoen9001]

6:24

[@antoniofuller2331]

Hmm

[@WaelYasmina]

Hmm 🤔

[@emmanuelavanzi3998]

RGBELoader.js:45 THREE.RGBELoader Bad File Format: bad initial token

[@ttmmaacc]

Are you a robot?

[@WaelYasmina]

Yes sir!