Weekly Video: Image-Based Lighting: The Easy Way

Hey Everyone!

@PatrickRyan is up with the video this time…and WOW does he deliver a great one! If you’ve ever wanted to know how to take a panoramic image and use it to light your Babylon.js scenes, then this is the video for you!!!

Follow along with this playground:
https://playground.babylonjs.com/#3I1LMP#1

Test spheres glb:
https://github.com/PatrickRyanMS/SampleModels/blob/master/ENV_Spheres/glb/ENV_Spheres_3Line.glb

Adobe HDRI:
https://stock.adobe.com/search?filters[content_type%3A3d]=1&filters[3d_type_id][0]=2&load_type=3d+lp

HDRI Haven:

High Contrast HDRI in Image Based Lighting:

Sandbox:
https://sandbox.babylonjs.com/

8 Likes

Will this feature be available in BabylonJS code or will it stay only in the sandbox?
Otherwise I guess I can find the code here but I don’t know where to search: Babylon.js/sandbox at master · BabylonJS/Babylon.js · GitHub

Because that would be huge to also be able to make this conversion directly in our app!

Again thanks for making our life easier with this kind of improvements :smiling_face_with_three_hearts:

You can use HDRCubeTexture to load an HDR file and pre-filter it, then use EnvironmentTextureTools.CreateEnvTextureAsync to convert to a .env file.

See this thread and PG.

2 Likes