From 19d7b2c7a49597bafb33979c2b23732098ec1974 Mon Sep 17 00:00:00 2001
From: rndexe <himanshu.ernde@gmail.com>
Date: Sat, 10 Aug 2024 16:39:47 +0530
Subject: [PATCH] Add bloom effect to space-game

---
 demos/space-game/package.json       |  1 +
 demos/space-game/src/3d/Effects.jsx | 21 ++++-----------------
 demos/space-game/src/3d/Enemies.jsx |  2 +-
 demos/space-game/src/3d/Planets.jsx |  2 +-
 demos/space-game/src/3d/Rings.jsx   |  2 +-
 demos/space-game/src/3d/Ship.jsx    |  4 ++--
 demos/space-game/src/3d/Track.jsx   |  2 +-
 demos/space-game/src/App.jsx        |  3 ++-
 package-lock.json                   |  1 +
 9 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/demos/space-game/package.json b/demos/space-game/package.json
index dd3f2c58..bf9512d1 100644
--- a/demos/space-game/package.json
+++ b/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",
diff --git a/demos/space-game/src/3d/Effects.jsx b/demos/space-game/src/3d/Effects.jsx
index 6b75fff2..05b5f199 100755
--- a/demos/space-game/src/3d/Effects.jsx
+++ b/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>
   )
 }
diff --git a/demos/space-game/src/3d/Enemies.jsx b/demos/space-game/src/3d/Enemies.jsx
index 180f5658..2a54d078 100755
--- a/demos/space-game/src/3d/Enemies.jsx
+++ b/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 }) => {
diff --git a/demos/space-game/src/3d/Planets.jsx b/demos/space-game/src/3d/Planets.jsx
index b3f8ad31..ae7fdc64 100755
--- a/demos/space-game/src/3d/Planets.jsx
+++ b/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>
diff --git a/demos/space-game/src/3d/Rings.jsx b/demos/space-game/src/3d/Rings.jsx
index d26103e6..618fa2bc 100755
--- a/demos/space-game/src/3d/Rings.jsx
+++ b/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)
diff --git a/demos/space-game/src/3d/Ship.jsx b/demos/space-game/src/3d/Ship.jsx
index f71f6d0d..b024c77b 100755
--- a/demos/space-game/src/3d/Ship.jsx
+++ b/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>
   )
diff --git a/demos/space-game/src/3d/Track.jsx b/demos/space-game/src/3d/Track.jsx
index 8ad3cae9..03eb230c 100755
--- a/demos/space-game/src/3d/Track.jsx
+++ b/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>
   )
 }
diff --git a/demos/space-game/src/App.jsx b/demos/space-game/src/App.jsx
index b28c63d4..3419b26e 100755
--- a/demos/space-game/src/App.jsx
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 3969cfb9..3359e3b0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6928,6 +6928,7 @@
       "version": "1.0.0",
       "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",