feat: environment blur

.storybook/stories/Environment.stories.tsx

@@ -19,10 +19,10 @@ export default {
   ],
 }
 
-export const EnvironmentStory = ({ background, preset }) => (
+export const EnvironmentStory = ({ background, preset, blur }) => (
   <>
     <React.Suspense fallback={null}>
-      <Environment preset={preset} background={background} />
+      <Environment preset={preset} background={background} blur={blur} />
       <mesh>
         <torusKnotGeometry args={[1, 0.5, 128, 32]} />
         <meshStandardMaterial metalness={1} roughness={0} />
@@ -36,6 +36,7 @@ const presets = Object.keys(presetsObj)
 
 EnvironmentStory.args = {
   background: true,
+  blur: 0,
   preset: presets[0],
 }
 
@@ -46,6 +47,7 @@ EnvironmentStory.argTypes = {
       type: 'select',
     },
   },
+  blur: { control: { type: 'range', min: 0, max: 1, step: 0.01 } },
 }
 
 EnvironmentStory.storyName = 'Default'

README.md

@@ -2836,6 +2836,7 @@ Sets up a global cubemap, which affects the default `scene.environment`, and opt
 ```jsx
 <Environment
   background={false} // can be true, false or "only" (which only sets the background) (default: false)
+  blur={0} // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)
   files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
   path="/"
   preset={null}

package.json

@@ -125,7 +125,7 @@
     "rollup-plugin-glslify": "^1.3.0",
     "rollup-plugin-multi-input": "^1.3.1",
     "rollup-plugin-terser": "^7.0.2",
-    "three": "^0.139.2",
+    "three": "^0.146.0",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4",
     "yarn": "^1.22.17"

src/core/Environment.tsx

@@ -27,6 +27,7 @@ type Props = {
   far?: number
   resolution?: number
   background?: boolean | 'only'
+  blur?: number
   map?: THREE.Texture
   files?: string | string[]
   path?: string
@@ -47,21 +48,35 @@ const isRef = (obj: any): obj is React.MutableRefObject<THREE.Scene> => obj.curr
 const resolveScene = (scene: THREE.Scene | React.MutableRefObject<THREE.Scene>) =>
   isRef(scene) ? scene.current : scene
 
-export function EnvironmentMap({ scene, background = false, map }: Props) {
+function setEnvProps(
+  background: boolean | 'only',
+  scene: Scene | React.MutableRefObject<Scene> | undefined,
+  defaultScene: Scene,
+  texture: Texture,
+  blur = 0
+) {
+  const target = resolveScene(scene || defaultScene)
+  const oldbg = target.background
+  const oldenv = target.environment
+  // @ts-ignore
+  const oldBlur = target.backgroundBlurriness || 0
+  if (background !== 'only') target.environment = texture
+  if (background) target.background = texture
+  // @ts-ignore
+  if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = blur
+  return () => {
+    if (background !== 'only') target.environment = oldenv
+    if (background) target.background = oldbg
+    // @ts-ignore
+    if (background && target.backgroundBlurriness !== undefined) target.backgroundBlurriness = oldBlur
+  }
+}
+
+export function EnvironmentMap({ scene, background = false, blur, map }: Props) {
   const defaultScene = useThree((state) => state.scene)
   React.useLayoutEffect(() => {
-    if (map) {
-      const target = resolveScene(scene || defaultScene)
-      const oldbg = target.background
-      const oldenv = target.environment
-      if (background !== 'only') target.environment = map
-      if (background) target.background = map
-      return () => {
-        if (background !== 'only') target.environment = oldenv
-        if (background) target.background = oldbg
-      }
-    }
-  }, [defaultScene, scene, map, background])
+    if (map) return setEnvProps(background, scene, defaultScene, map, blur)
+  }, [defaultScene, scene, map, background, blur])
   return null
 }
 
@@ -99,21 +114,12 @@ export function useEnvironment({
   return texture
 }
 
-export function EnvironmentCube({ background = false, scene, ...rest }: Props) {
+export function EnvironmentCube({ background = false, scene, blur, ...rest }: Props) {
   const texture = useEnvironment(rest)
-
   const defaultScene = useThree((state) => state.scene)
   React.useLayoutEffect(() => {
-    const target = resolveScene(scene || defaultScene)
-    const oldbg = target.background
-    const oldenv = target.environment
-    if (background !== 'only') target.environment = texture
-    if (background) target.background = texture
-    return () => {
-      if (background !== 'only') target.environment = oldenv
-      if (background) target.background = oldbg
-    }
-  }, [texture, background, scene, defaultScene])
+    return setEnvProps(background, scene, defaultScene, texture, blur)
+  }, [texture, background, scene, defaultScene, blur])
   return null
 }
 
@@ -125,6 +131,7 @@ export function EnvironmentPortal({
   frames = 1,
   map,
   background = false,
+  blur,
   scene,
   files,
   path,
@@ -143,15 +150,7 @@ export function EnvironmentPortal({
 
   React.useLayoutEffect(() => {
     if (frames === 1) camera.current.update(gl, virtualScene)
-    const target = resolveScene(scene || defaultScene)
-    const oldbg = target.background
-    const oldenv = target.environment
-    if (background !== 'only') target.environment = fbo.texture
-    if (background) target.background = fbo.texture
-    return () => {
-      if (background !== 'only') target.environment = oldenv
-      if (background) target.background = oldbg
-    }
+    return setEnvProps(background, scene, defaultScene, fbo.texture, blur)
   }, [children, virtualScene, fbo.texture, scene, defaultScene, background, frames, gl])
 
   let count = 1
@@ -193,9 +192,7 @@ function EnvironmentGround(props: Props) {
   const textureDefault = useEnvironment(props)
   const texture = props.map || textureDefault
 
-  React.useMemo(() => {
-    extend({ GroundProjectedEnvImpl })
-  }, [])
+  React.useMemo(() => extend({ GroundProjectedEnvImpl }), [])
 
   const args = React.useMemo<[CubeTexture | Texture]>(() => [texture], [texture])
   const height = (props.ground as any)?.height

yarn.lock

@@ -11350,10 +11350,10 @@ three-stdlib@^2.17.3:
     potpack "^1.0.1"
     zstddec "^0.0.2"
 
-three@^0.139.2:
-  version "0.139.2"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.139.2.tgz#b110799a15736df673b9293e31653a4ac73648dd"
-  integrity sha512-gV7q7QY8rogu7HLFZR9cWnOQAUedUhu2WXAnpr2kdXZP9YDKsG/0ychwQvWkZN5PlNw9mv5MoCTin6zNTXoONg==
+three@^0.146.0:
+  version "0.146.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.146.0.tgz#fd80f0d128ab4bb821a02191ae241e4e6326f17a"
+  integrity sha512-1lvNfLezN6OJ9NaFAhfX4sm5e9YCzHtaRgZ1+B4C+Hv6TibRMsuBAM5/wVKzxjpYIlMymvgsHEFrrigEfXnb2A==
 
 throat@^5.0.0:
   version "5.0.0"