improved bloom effect

Resaki1 · Jan 13, 2024 · b0a00d4 · b0a00d4
1 parent 7576a55
commit b0a00d4
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/src/components/Planet/Planet.tsx b/src/components/Planet/Planet.tsx
@@ -1,6 +1,6 @@
 import { Sphere, shaderMaterial, useTexture } from "@react-three/drei";
 import { extend, useFrame } from "@react-three/fiber";
-import { useRef } from "react";
+import { memo, useRef } from "react";
 import {
   AdditiveBlending,
   DoubleSide,
@@ -104,7 +104,7 @@ const Planet = () => {
 
   return (
     <group position={position} rotation={rotation} ref={planet}>
-      <Sphere args={[81, 48, 48]} ref={atmosphere}>
+      <Sphere args={[81, 64, 64]} ref={atmosphere}>
         <atmosphereShaderMaterial
           attach="material"
           args={[
@@ -124,7 +124,7 @@ const Planet = () => {
           specular={"lightblue"}
         />
       </Sphere>
-      <Sphere args={[80.2, 48, 48]}>
+      <Sphere args={[80.2, 64, 64]}>
         <meshPhongMaterial {...clouds} transparent alphaTest={0} />
       </Sphere>
     </group>
@@ -133,4 +133,4 @@ const Planet = () => {
 
 useTexture.preload("/textures/earth_day.webp");
 
-export default Planet;
+export default memo(Planet);
diff --git a/src/components/Scene/Scene.tsx b/src/components/Scene/Scene.tsx
@@ -10,7 +10,7 @@ import {
   Bloom,
   ToneMapping,
 } from "@react-three/postprocessing";
-import { ToneMappingMode } from "postprocessing";
+import { KernelSize, ToneMappingMode } from "postprocessing";
 import SpaceShip from "@/components/Spaceship";
 import StarsComponent from "../Stars/StarsComponent";
 import Star from "../Star/Star";
@@ -47,9 +47,14 @@ const Scene = () => {
         dpr={[1, 2]}
       >
         {isSafari ? <Stats /> : <StatsGl />}
-        {gpu.tier > 1 && (
+        {(gpu.tier > 1 || false) && (
           <EffectComposer disableNormalPass>
-            <Bloom mipmapBlur intensity={0.02} />
+            <Bloom
+              mipmapBlur
+              intensity={0.02}
+              luminanceThreshold={0}
+              kernelSize={KernelSize.VERY_SMALL}
+            />
             <ToneMapping mode={ToneMappingMode.ACES_FILMIC} />
           </EffectComposer>
         )}