Overview
When displaying a GLTF model using React Three Fiber, I encountered an issue where textures appeared blurry or rough. This article explains the cause and solution.
Symptoms
- GLTF model textures appear blurry
- The same model that displays correctly in other 3D viewers looks rough in a custom viewer
- Setting
dpr(device pixel ratio) orantialiasdoes not improve the issue
Cause
Since Three.js r152, the default output color space has been changed.
GLTF model textures are typically stored in sRGB color space. However, since Three.js defaults to Linear color space for output, the following problems occur:
- Texture interpolation is performed in Linear space
- Mipmap generation is not done in the correct color space
- As a result, textures appear blurry or colors look incorrect
Solution
Set outputColorSpace in the Canvas’s onCreated callback.
Before (problematic code)
After (fixed code)
Explanation of Each Setting
outputColorSpace: THREE.SRGBColorSpace
The most important setting. Setting the output color space to sRGB ensures textures are displayed correctly.
toneMapping: THREE.ACESFilmicToneMapping
Specifies the conversion method from HDR (High Dynamic Range) to SDR (Standard Dynamic Range). ACES Filmic is a tone mapping used in the film industry that produces a natural look.
toneMappingExposure: 1
The exposure value for tone mapping. 1 is the default; increasing it makes the scene brighter, decreasing it makes it darker.
preserveDrawingBuffer: true
Preserves the Canvas content. This is needed when taking screenshots, for example.
powerPreference: 'high-performance'
GPU power setting. Specifying ‘high-performance’ uses a high-performance GPU when available.
Supplement: Getting Normals Using Raycast
I also implemented a method to get the surface normal of a model from an annotation position for 3D annotation camera control.
Summary
When displaying GLTF models with Three.js + React Three Fiber, don’t forget to set outputColorSpace to THREE.SRGBColorSpace. This alone will significantly improve texture quality.
Environment
- Three.js: r152+
- React Three Fiber: 8.x
- @react-three/drei: 9.x
- Next.js: 16.x