Add bloom effect to space-game

demos/space-game/package.json

@@ -11,6 +11,7 @@
   ],
   "dependencies": {
     "@react-three/fiber": "^8.16.8",
+    "@react-three/postprocessing": "^2.16.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^5.1.0",

demos/space-game/src/3d/Effects.jsx

@@ -1,22 +1,9 @@
-import React, { useRef, useEffect } from 'react'
-import { extend, useThree, useFrame } from '@react-three/fiber'
-import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
-import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass'
-import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass'
-import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass'
-import { FilmPass } from 'three/examples/jsm/postprocessing/FilmPass'
-
-extend({ EffectComposer, ShaderPass, RenderPass, UnrealBloomPass, FilmPass })
+import { EffectComposer, Bloom } from '@react-three/postprocessing'
 
 export default function Effects() {
-  const composer = useRef()
-  const { scene, gl, size, camera } = useThree()
-  useEffect(() => void composer.current.setSize(size.width, size.height), [size])
-  useFrame(() => composer.current.render(), 2)
   return (
-    <effectComposer ref={composer} args={[gl]}>
-      <renderPass attachArray="passes" scene={scene} camera={camera} />
-      <unrealBloomPass attachArray="passes" args={[undefined, 1.8, 1, 0]} />
-    </effectComposer>
+    <EffectComposer>
+      <Bloom intensity={1.8} radius={0.85} luminanceThreshold={0} />
+    </EffectComposer>
   )
 }

demos/space-game/src/3d/Enemies.jsx

@@ -13,7 +13,7 @@ export default function Enemies() {
 
 const box = new THREE.Box3()
 box.setFromCenterAndSize(new THREE.Vector3(0, 0, 1), new THREE.Vector3(3, 3, 3))
-const glowMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightblue') })
+const glowMaterial = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightblue'), toneMapped: false })
 const bodyMaterial = new THREE.MeshPhongMaterial({ color: new THREE.Color('black') })
 
 const Drone = React.memo(({ data }) => {

demos/space-game/src/3d/Planets.jsx

@@ -20,7 +20,7 @@ export default function Planets() {
       <pointLight position={[-5, -5, -5]} distance={1000} decay={0} intensity={6 * Math.PI} />
       <mesh position={[-30, -10, -60]}>
         <sphereGeometry args={[4, 32, 32]} />
-        <meshBasicMaterial color="#FFFF99" fog={false} />
+        <meshBasicMaterial color="#FFFF99" toneMapped={false} fog={false} />
         <pointLight distance={6100} intensity={50 * Math.PI} color="white" decay={0} />
       </mesh>
     </group>

demos/space-game/src/3d/Rings.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import useStore from '../store'
 
 const geometry = new THREE.RingGeometry(1, 1.01, 64)
-const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightgreen'), side: THREE.DoubleSide })
+const material = new THREE.MeshBasicMaterial({ color: new THREE.Color('lightgreen'), side: THREE.DoubleSide, toneMapped: false })
 
 export default function Rings() {
   const { rings } = useStore(state => state.mutation)

demos/space-game/src/3d/Ship.jsx

@@ -10,7 +10,7 @@ const geometry = new THREE.BoxGeometry(1, 1, 40)
 const lightgreen = new THREE.Color('lightgreen')
 const hotpink = new THREE.Color('hotpink')
 const laserMaterial = new THREE.MeshBasicMaterial({ color: lightgreen })
-const crossMaterial = new THREE.MeshBasicMaterial({ color: hotpink, fog: false })
+const crossMaterial = new THREE.MeshBasicMaterial({ color: hotpink, fog: false, toneMapped: false })
 const position = new THREE.Vector3()
 const direction = new THREE.Vector3()
 
@@ -110,7 +110,7 @@ export default function Ship() {
       </group>
       <mesh ref={exhaust} scale={[1, 1, 30]} position={[0, 1, 30]}>
         <dodecahedronGeometry args={[1.5, 0]} />
-        <meshBasicMaterial color="lightblue" />
+        <meshBasicMaterial color="lightblue" toneMapped={false}/>
       </mesh>
     </group>
   )

demos/space-game/src/3d/Track.jsx

@@ -5,7 +5,7 @@ export default function Track() {
   const { scale, track } = useStore((state) => state.mutation)
   return (
     <mesh scale={[scale, scale, scale]} geometry={track}>
-      <meshBasicMaterial color="indianred" />
+      <meshBasicMaterial color="indianred" toneMapped={false} />
     </mesh>
   )
 }

demos/space-game/src/App.jsx

@@ -32,7 +32,7 @@ export default function App() {
           gl.setClearColor(new THREE.Color('#020209'))
         }}>
         <fog attach="fog" args={['#070710', 100, 700]} />
-        <ambientLight intensity={0.25} />
+        <ambientLight intensity={Math.PI} />
         <Stars />
         <Explosions />
         <Track />
@@ -46,6 +46,7 @@ export default function App() {
             <Ship />
           </Rig>
         </Suspense>
+        <Effects />
       </Canvas>
       <Hud />
     </div>