feat(web): add tone mapping and brightness to 3D scene
The EffectComposer disables three's tone mapping, leaving colors flat and washed out. Add ACES filmic tone mapping plus a small brightness lift so cards match their source images.
This commit is contained in:
@@ -25,6 +25,7 @@
|
|||||||
"@tts/http": "workspace:*",
|
"@tts/http": "workspace:*",
|
||||||
"@tts/tabletop": "workspace:*",
|
"@tts/tabletop": "workspace:*",
|
||||||
"bson": "^7.3.1",
|
"bson": "^7.3.1",
|
||||||
|
"postprocessing": "^6.36.6",
|
||||||
"react": "^19.2.8",
|
"react": "^19.2.8",
|
||||||
"react-dom": "^19.2.8",
|
"react-dom": "^19.2.8",
|
||||||
"react-router-dom": "^7.18.2",
|
"react-router-dom": "^7.18.2",
|
||||||
|
|||||||
@@ -2,7 +2,8 @@ import { Suspense, useEffect, useRef, useState, type ReactNode } from 'react';
|
|||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import { Canvas } from '@react-three/fiber';
|
import { Canvas } from '@react-three/fiber';
|
||||||
import { Bounds, ContactShadows, OrbitControls, useProgress } from '@react-three/drei';
|
import { Bounds, ContactShadows, OrbitControls, useProgress } from '@react-three/drei';
|
||||||
import { EffectComposer, Vignette } from '@react-three/postprocessing';
|
import { BrightnessContrast, EffectComposer, ToneMapping, Vignette } from '@react-three/postprocessing';
|
||||||
|
import { ToneMappingMode } from 'postprocessing';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Shared 3D scene wrapper for object viewers. Provides a consistent camera,
|
* Shared 3D scene wrapper for object viewers. Provides a consistent camera,
|
||||||
@@ -120,6 +121,8 @@ export default function Scene({
|
|||||||
/>
|
/>
|
||||||
|
|
||||||
<EffectComposer>
|
<EffectComposer>
|
||||||
|
<ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
|
||||||
|
<BrightnessContrast brightness={0.06} contrast={0} />
|
||||||
<Vignette eskil={false} offset={0.25} darkness={0.6} />
|
<Vignette eskil={false} offset={0.25} darkness={0.6} />
|
||||||
</EffectComposer>
|
</EffectComposer>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
|
|||||||
Generated
+3
@@ -102,6 +102,9 @@ importers:
|
|||||||
bson:
|
bson:
|
||||||
specifier: ^7.3.1
|
specifier: ^7.3.1
|
||||||
version: 7.3.1
|
version: 7.3.1
|
||||||
|
postprocessing:
|
||||||
|
specifier: ^6.36.6
|
||||||
|
version: 6.39.4(three@0.185.1)
|
||||||
react:
|
react:
|
||||||
specifier: ^19.2.8
|
specifier: ^19.2.8
|
||||||
version: 19.2.8
|
version: 19.2.8
|
||||||
|
|||||||
Reference in New Issue
Block a user