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:
@@ -2,7 +2,8 @@ import { Suspense, useEffect, useRef, useState, type ReactNode } from 'react';
|
||||
import { Icon } from '@iconify/react';
|
||||
import { Canvas } from '@react-three/fiber';
|
||||
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,
|
||||
@@ -120,6 +121,8 @@ export default function Scene({
|
||||
/>
|
||||
|
||||
<EffectComposer>
|
||||
<ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
|
||||
<BrightnessContrast brightness={0.06} contrast={0} />
|
||||
<Vignette eskil={false} offset={0.25} darkness={0.6} />
|
||||
</EffectComposer>
|
||||
</Canvas>
|
||||
|
||||
Reference in New Issue
Block a user