HDR Images as Textures

Explore how to load and apply HDR images as textures in Three.js to capture a wide range of luminance. Understand how tone mapping settings affect rendering and learn to use bump maps to add depth and detail to 3D models, enhancing realism in your scenes.

We'll cover the following...

Loading HDR images as textures
Bump map for extra details to a mesh
- Example: Texture bump map
- Setting properties of the bump map

Aside from these normal images, Three.js also supports HDR images.

Loading HDR images as textures

An HDR imageHigh Dynamic Range captures a higher range of luminance levels than standard images, and can more closely match what we see with the human eye. Three.js supports the EXR and RGBE formats. If we’ve got an HDR image, we can fine-tune how Three.js renders the HDR image since an HDR image contains more luminance information than can be shown on a display. This can be done by setting the following properties in THREE.WebGLRenderer:

1.Introduction to the Course

2.Part 1: Getting Up and Running

3.Creating the First 3D Scene with Three.js

4.The Basic Components That Make Up a Three.js Application

5.Working with Light Sources in Three.js

6.Part 2: Working with the Three.js Core Components

7.Working with Three.js Materials

8.Learning to Work with Geometries

9.Exploring Advanced Geometries

10.Points and Sprites

11.Part 3: Particle Clouds, Loading, and Animating Models

12.Creating and Loading Advanced Meshes and Geometries

13.Animation and Moving the Camera

14.Loading and Working with Textures

15.Part 4: Post-Processing, Physics, and Sounds

16.Render Post-Processing

17.Adding Physics and Sounds to Our Scene

18.Working with Blender and Three.js

19.Three.js: Together with React, TypeScript, and WebXR

20.Conclusion

21.Appendix

HDR Images as Textures

Loading HDR images as textures