fix(BatchedText): Correct color rendering with Three.js Color Management #371
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Solve issue #353
The Problem
When using BatchedText in a Three.js project with ColorManagement.enabled (the default in recent versions ), all text colors appear washed out or significantly lighter than intended.
This is caused by a color space mismatch. The Three.js renderer operates in a linear color space, but BatchedText was packing sRGB color values into its data texture and unpacking them in the shader without converting them to linear. The renderer would then treat these sRGB values as if they were linear, leading to an incorrect final output after gamma correction was applied.
The Solution
This PR updates the BatchedText derived material to be fully aware of Three.js's color management system.
Conditional sRGB-to-Linear Conversion: The troikaFloatToColor GLSL function now checks if ColorManagement.enabled is true at material creation time.
If true, it converts the unpacked sRGB color into the linear color space using the standard sRGBTransferEOTF function.
If false, it retains the original behavior for legacy sRGB workflows.
The sRGBTransferEOTF function from three.js has been added directly to the vertex shader definitions. This ensures the fix works reliably across all Three.js versions.
Correct Normalization: The 8-bit color channel normalization has been corrected from division by 256.0 to the mathematically correct 255.0.
Result
With this change, BatchedText now renders colors correctly in both legacy sRGB and modern linear workflows, matching the behavior of standard Text components and other Three.js objects.
Let me know if I can clarify anything.