feat: HBAO + SSGI + TRAA + MotionBlur

.storybook/stories/Autofocus.stories.tsx

@@ -8,7 +8,7 @@ import { EffectComposer, Autofocus } from '../../src'
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
- title: 'Effect/Autofocus',
+ title: 'Effects/Autofocus',
  component: Autofocus,
  decorators: [
  (Story) => (

.storybook/stories/HBAO.stories.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react'
+import * as THREE from 'three'
+import type { Meta, StoryObj } from '@storybook/react'
+import { EffectComposer, HBAO as HBAOImpl } from '../../src'
+import { Canvas } from '@react-three/fiber'
+import { Environment, useGLTF, OrbitControls } from '@react-three/drei'
+
+const meta = {
+ title: 'Effects/HBAO',
+ component: HBAOImpl,
+ parameters: {
+ layout: 'fullscreen',
+ },
+} satisfies Meta<typeof HBAOImpl>
+export default meta
+
+function Model() {
+ const gltf = useGLTF('/porsche.glb')
+ return <primitive object={gltf.scene} />
+}
+
+type Story = StoryObj<typeof meta>
+
+export const HBAO: Story = {
+ render: (args) => (
+ <Canvas gl={{ antialias: false }} camera={{ fov: 35, position: [5, 3, 5] }}>
+ <OrbitControls />
+ <Environment preset="city" />
+ <EffectComposer disableNormalPass multisampling={0}>
+ <HBAOImpl {...args} />
+ </EffectComposer>
+ <Model />
+ <directionalLight position={[217, 43, 76]} />
+ </Canvas>
+ ),
+ args: {
+ // AO
+ resolutionScale: 1,
+ spp: 8,
+ distance: 2,
+ distancePower: 1,
+ power: 2,
+ bias: 40,
+ thickness: 0.075,
+ color: new THREE.Color('black'),
+ useNormalPass: false,
+ // Poisson
+ iterations: 1,
+ radius: 8,
+ rings: 5.625,
+ lumaPhi: 10,
+ depthPhi: 2,
+ normalPhi: 3.25,
+ samples: 16,
+ },
+}

.storybook/stories/SSGI.stories.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import { EffectComposer, SSGI as SSGIImpl, TRAA, MotionBlur } from '../../src'
+import { Canvas } from '@react-three/fiber'
+import { Environment, useGLTF, OrbitControls } from '@react-three/drei'
+
+const meta = {
+ title: 'Effects/SSGI',
+ component: SSGIImpl,
+ parameters: {
+ layout: 'fullscreen',
+ },
+} satisfies Meta<typeof SSGIImpl>
+export default meta
+
+function Model() {
+ const gltf = useGLTF('/porsche.glb')
+ return <primitive object={gltf.scene} />
+}
+
+type Story = StoryObj<typeof meta>
+
+export const SSGI: Story = {
+ render: (args) => (
+ <Canvas gl={{ antialias: false }} camera={{ fov: 35, position: [5, 3, 5] }}>
+ <OrbitControls />
+ <Environment preset="city" />
+ <EffectComposer disableNormalPass multisampling={0}>
+ <SSGIImpl {...args} />
+ <TRAA />
+ <MotionBlur />
+ </EffectComposer>
+ <Model />
+ <directionalLight position={[217, 43, 76]} />
+ </Canvas>
+ ),
+ args: {
+ distance: 10,
+ thickness: 10,
+ autoThickness: false,
+ maxRoughness: 1,
+ blend: 0.9,
+ denoiseIterations: 1,
+ denoiseKernel: 2,
+ denoiseDiffuse: 10,
+ denoiseSpecular: 10,
+ depthPhi: 2,
+ normalPhi: 50,
+ roughnessPhi: 1,
+ envBlur: 0.5,
+ importanceSampling: true,
+ directLightMultiplier: 1,
+ steps: 20,
+ refineSteps: 5,
+ spp: 1,
+ resolutionScale: 1,
+ missedRays: false,
+ },
+}

package.json

@@ -49,6 +49,7 @@
  "maath": "^0.6.0",
  "n8ao": "^1.6.6",
  "postprocessing": "^6.32.1",
+ "realism-effects": "^1.1.2",
  "screen-space-reflections": "^2.5.0",
  "three-stdlib": "^2.23.4"
  },

src/index.tsx

@@ -1,7 +1,3 @@
-export * from './Selection'
-export * from './EffectComposer'
-export * from './util'
-
 export * from './effects/Autofocus'
 export * from './effects/Bloom'
 export * from './effects/BrightnessContrast'
@@ -33,6 +29,14 @@ export * from './effects/TiltShift'
 export * from './effects/TiltShift2'
 export * from './effects/ASCII'
 
-// These are not effect passes
-export * from './effects/SSR'
-export * from './effects/N8AO'
+export * from './passes/HBAO'
+export * from './passes/MotionBlur'
+export * from './passes/N8AO'
+export * from './passes/SSGI'
+export * from './passes/SSR'
+export * from './passes/TRAA'
+export * from './passes/useVelocityBuffer'
+
+export * from './Selection'
+export * from './EffectComposer'
+export * from './util'

src/passes/HBAO.tsx

@@ -0,0 +1,121 @@
+import { forwardRef, useContext, useEffect, useMemo } from 'react'
+import * as THREE from 'three'
+import { EffectComposer, EffectPass } from 'postprocessing'
+// @ts-ignore
+import { VelocityDepthNormalPass, HBAOEffect } from 'realism-effects'
+import { EffectComposerContext } from '../EffectComposer'
+import { useVelocityBuffer } from './useVelocityBuffer'
+
+export interface HBAOOptions {
+ // AO options
+ resolutionScale: number
+ spp: number
+ distance: number
+ distancePower: number
+ power: number
+ bias: number
+ thickness: number
+ color: THREE.Color
+ useNormalPass: boolean
+ velocityDepthNormalPass: VelocityDepthNormalPass | null
+ normalTexture: THREE.Texture | null
+ // Poisson blur options
+ iterations: number
+ radius: number
+ rings: number
+ lumaPhi: number
+ depthPhi: number
+ normalPhi: number
+ samples: number
+ // normalTexture: THREE.Texture | null
+}
+
+export class HBAOPass extends EffectPass {
+ constructor(composer: EffectComposer, camera: THREE.Camera, scene: THREE.Scene, options?: Partial<HBAOOptions>) {
+ super(camera, new HBAOEffect(composer, camera, scene, options))
+ }
+}
+
+export interface HBAOProps extends Omit<Partial<HBAOOptions>, 'velocityDepthNormalPass'>, Partial<HBAOPass> {}
+
+export const HBAO = forwardRef<HBAOPass, HBAOProps>(function HBAO(
+ {
+ // AO
+ resolutionScale = 1,
+ spp = 8,
+ distance = 2,
+ distancePower = 1,
+ power = 2,
+ bias = 40,
+ thickness = 0.075,
+ color = new THREE.Color('black'),
+ useNormalPass = false,
+ normalTexture = null,
+ // Poisson
+ iterations = 1,
+ radius = 8,
+ rings = 5.625,
+ lumaPhi = 10,
+ depthPhi = 2,
+ normalPhi = 3.25,
+ samples = 16,
+ ...props
+ },
+ ref
+) {
+ const velocityDepthNormalPass = useVelocityBuffer()
+ const { composer, camera, scene } = useContext(EffectComposerContext)
+ const effect = useMemo(
+ () =>
+ new HBAOPass(composer, camera, scene, {
+ resolutionScale,
+ spp,
+ distance,
+ distancePower,
+ power,
+ bias,
+ thickness,
+ color,
+ useNormalPass,
+ velocityDepthNormalPass,
+ normalTexture,
+ iterations,
+ radius,
+ rings,
+ lumaPhi,
+ depthPhi,
+ normalPhi,
+ samples,
+ }),
+ [
+ composer,
+ camera,
+ scene,
+ resolutionScale,
+ spp,
+ distance,
+ distancePower,
+ power,
+ bias,
+ thickness,
+ color,
+ useNormalPass,
+ velocityDepthNormalPass,
+ normalTexture,
+ iterations,
+ radius,
+ rings,
+ lumaPhi,
+ depthPhi,
+ normalPhi,
+ samples,
+ ]
+ )
+ useEffect(() => {
+ return () => {
+ effect.dispose()
+ }
+ }, [effect])
+
+ return <primitive {...props} ref={ref} object={effect} />
+})

src/passes/MotionBlur.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, useContext, useEffect, useMemo } from 'react'
+import { VelocityBuffer, useVelocityBuffer } from './useVelocityBuffer'
+import { EffectPass } from 'postprocessing'
+// @ts-ignore
+import { MotionBlurEffect } from 'realism-effects'
+import { EffectComposerContext } from '../EffectComposer'
+
+export class MotionBlurPass extends EffectPass {
+ constructor(camera: THREE.Camera, velocityBuffer: VelocityBuffer) {
+ super(camera, new MotionBlurEffect(velocityBuffer))
+ }
+}
+
+export interface MotionBlurProps extends Partial<MotionBlurPass> {}
+
+export const MotionBlur = forwardRef<MotionBlurPass, MotionBlurProps>(function MotionBlur(props, ref) {
+ const velocityBuffer = useVelocityBuffer()
+ const { camera } = useContext(EffectComposerContext)
+ const effect = useMemo(() => new MotionBlurPass(camera, velocityBuffer), [camera, velocityBuffer])
+ useEffect(() => {
+ return () => {
+ effect.dispose()
+ }
+ }, [effect])
+
+ return <primitive {...props} ref={ref} object={effect} />
+})