Learn Three.js for 3D Computer Graphics/

...

HDR Images as Textures

Learn how to load HDR images as texture and bump map for extra details of the material in Three.js.

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:

Introduction to the Course

Part 1: Getting Up and Running

Creating the First 3D Scene with Three.js

The Basic Components That Make Up a Three.js Application

Working with Light Sources in Three.js

Part 2: Working with the Three.js Core Components

Working with Three.js Materials

Learning to Work with Geometries

Exploring Advanced Geometries

Points and Sprites

Part 3: Particle Clouds, Loading, and Animating Models

Creating and Loading Advanced Meshes and Geometries

Animation and Moving the Camera

Loading and Working with Textures

Part 4: Post-Processing, Physics, and Sounds

Render Post-Processing

Adding Physics and Sounds to Our Scene

Working with Blender and Three.js

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

Conclusion

Appendix

HDR Images as Textures

Loading HDR images as textures