Configure renderer color space for brighter GLB models

src/react-three/Canvas.tsx

@@ -11,6 +11,7 @@ import * as THREE from "three"
 import { ThreeContext, ThreeContextState } from "./ThreeContext"
 import { HoverProvider } from "./HoverContext"
 import { removeExistingCanvases } from "./remove-existing-canvases"
+import { configureRenderer } from "./configure-renderer"
 
 declare global {
   interface Window {
@@ -65,6 +66,7 @@ export const Canvas = forwardRef<THREE.Object3D, CanvasProps>(
       removeExistingCanvases(mountRef.current)
 
       const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
+      configureRenderer(renderer)
       renderer.setSize(
         mountRef.current.clientWidth,
         mountRef.current.clientHeight,

src/react-three/configure-renderer.ts

@@ -0,0 +1,12 @@
+import * as THREE from "three"
+
+/**
+ * Applies renderer configuration that ensures GLTF/GLB assets are rendered
+ * using the expected color space and tone mapping. Without this configuration
+ * GLB assets can appear noticeably darker than intended.
+ */
+export const configureRenderer = (renderer: THREE.WebGLRenderer) => {
+  renderer.outputColorSpace = THREE.SRGBColorSpace
+  renderer.toneMapping = THREE.ACESFilmicToneMapping
+  renderer.toneMappingExposure = 1
+}

src/react-three/getDefaultEnvironmentMap.ts

@@ -0,0 +1,36 @@
+import * as THREE from "three"
+import { RoomEnvironment } from "three-stdlib"
+
+type RendererLike = THREE.WebGLRenderer | (Record<string, unknown> & object)
+
+const environmentCache = new WeakMap<object, THREE.Texture>()
+
+const createFallbackEnvironmentMap = () => {
+  const texture = new THREE.Texture()
+  texture.name = "fallback-environment-map"
+  texture.mapping = THREE.EquirectangularReflectionMapping
+  return texture
+}
+
+export const getDefaultEnvironmentMap = (
+  renderer: RendererLike | null | undefined,
+): THREE.Texture | null => {
+  if (!renderer) return null
+
+  const cacheKey = renderer as object
+  const cached = environmentCache.get(cacheKey)
+  if (cached) return cached
+
+  let texture: THREE.Texture
+
+  if (renderer instanceof THREE.WebGLRenderer) {
+    const pmremGenerator = new THREE.PMREMGenerator(renderer)
+    texture = pmremGenerator.fromScene(RoomEnvironment(), 0.04).texture
+    pmremGenerator.dispose()
+  } else {
+    texture = createFallbackEnvironmentMap()
+  }
+
+  environmentCache.set(cacheKey, texture)
+  return texture
+}

src/three-components/GltfModel.tsx

@@ -3,6 +3,9 @@ import * as THREE from "three"
 import { GLTFLoader } from "three-stdlib"
 import { useThree } from "src/react-three/ThreeContext"
 import ContainerWithTooltip from "src/ContainerWithTooltip"
+import { getDefaultEnvironmentMap } from "src/react-three/getDefaultEnvironmentMap"
+
+const DEFAULT_ENV_MAP_INTENSITY = 1.25
 
 export function GltfModel({
   gltfUrl,
@@ -21,7 +24,7 @@ export function GltfModel({
   isHovered: boolean
   scale?: number
 }) {
-  const { rootObject } = useThree()
+  const { renderer, rootObject } = useThree()
   const [model, setModel] = useState<THREE.Group | null>(null)
 
   useEffect(() => {
@@ -68,6 +71,61 @@ export function GltfModel({
     }
   }, [rootObject, model])
 
+  useEffect(() => {
+    if (!model || !renderer) return
+
+    const environmentMap = getDefaultEnvironmentMap(renderer)
+    if (!environmentMap) return
+
+    const previousMaterialState: Array<{
+      material: THREE.MeshStandardMaterial
+      envMap: THREE.Texture | null
+      envMapIntensity: number
+    }> = []
+
+    const applyEnvironmentToMaterial = (material: THREE.Material) => {
+      if (!(material instanceof THREE.MeshStandardMaterial)) return
+
+      previousMaterialState.push({
+        material,
+        envMap: material.envMap ?? null,
+        envMapIntensity: material.envMapIntensity ?? 1,
+      })
+
+      if (!material.envMap) {
+        material.envMap = environmentMap
+      }
+
+      if (
+        typeof material.envMapIntensity !== "number" ||
+        material.envMapIntensity < DEFAULT_ENV_MAP_INTENSITY
+      ) {
+        material.envMapIntensity = DEFAULT_ENV_MAP_INTENSITY
+      }
+
+      material.needsUpdate = true
+    }
+
+    model.traverse((child) => {
+      if (!(child instanceof THREE.Mesh)) return
+
+      const material = child.material
+      if (Array.isArray(material)) {
+        material.forEach(applyEnvironmentToMaterial)
+      } else if (material) {
+        applyEnvironmentToMaterial(material)
+      }
+    })
+
+    return () => {
+      previousMaterialState.forEach(({ material, envMap, envMapIntensity }) => {
+        material.envMap = envMap
+        material.envMapIntensity = envMapIntensity
+        material.needsUpdate = true
+      })
+    }
+  }, [model, renderer])
+
   useEffect(() => {
     if (!model) return
     model.traverse((child) => {

stories/Bugs/RemoteGlbBrightness.stories.tsx

@@ -0,0 +1,29 @@
+import { CadViewer } from "src/CadViewer"
+
+export const RemoteSoic6Glb = () => (
+  <div style={{ width: 640, height: 480 }}>
+    <CadViewer>
+      <board width="10mm" height="10mm">
+        <chip
+          name="Remote SOIC-6"
+          cadModel={{
+            glbUrl: "https://modelcdn.tscircuit.com/jscad_models/soic6.glb",
+            rotationOffset: { x: 90, y: 0, z: 0 },
+            positionOffset: { x: 0, y: 0, z: 0.6 },
+          }}
+          footprint={
+            <footprint>
+              <hole diameter="0.9mm" pcbX={0} pcbY={0} />
+            </footprint>
+          }
+        />
+      </board>
+    </CadViewer>
+  </div>
+)
+
+RemoteSoic6Glb.storyName = "Remote SOIC-6 GLB"
+
+export default {
+  title: "Bugs/Remote GLB Brightness",
+}