Tone Mapping in Three.js: Shader vs. Post-Processing

Your approach to implementing tone mapping directly in your fragment shader is actually aligned with how Three.js handles tone mapping by default. Let me explain the current best practices:

Default Three.js Approach

In Three.js, tone mapping is typically handled at the renderer level using the toneMapping property of the WebGLRenderer. By default, it's set to NoToneMapping, but you can choose from various options available in the Renderer constants.

JAVASCRIPTCopied
// Set tone mapping on the renderer
renderer.toneMapping = THREE.ACESFilmicToneMapping; // or other options
renderer.toneMappingExposure = 1.0; // Adjust as needed

When you set this property, Three.js applies the tone mapping in the fragment shaders of materials during the standard rendering pipeline, not as a separate post-processing step.

Custom Shader Approach

For custom shaders like your sky shader, including the tone mapping chunks is the correct approach if you want your material to respect the renderer's tone mapping settings:

GLSLCopied
#include <tonemapping_fragment>
#include <colorspace_fragment>

This ensures your custom shader behaves consistently with the rest of your scene materials.

Post-Processing Alternative

If you prefer to handle tone mapping as a true post-process (which can be more flexible), you can:

1. Set the renderer's toneMapping to NoToneMapping
2. Use the EffectComposer with specific post-processing passes

This approach gives you more control but requires additional setup:

JAVASCRIPTCopied
// Basic EffectComposer setup for post-processing
const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));

// Add tone mapping as a post-process
const toneMappingPass = new ShaderPass(/* your tone mapping shader */);
composer.addPass(toneMappingPass);

// Use composer instead of renderer to render
composer.render();

Recommendation

For your HDR sky with bloom:

1. If simplicity is key, your current approach (including tone mapping in the shader) is appropriate
2. If you need more control over the tone mapping process or want to apply different tone mapping to different parts of your scene, the EffectComposer approach would be better

Your sky implementation looks great so far! The HDR values should work well with bloom when properly tone-mapped.