Merge branch 'master' into fix/unpin-ssr

Author: CodyJasonBennett

package.json

@@ -34,31 +34,27 @@
     ]
   },
   "scripts": {
-    "prebuild": "rimraf dist && yarn typegen",
-    "build": "rollup -c",
+    "prebuild": "rimraf dist",
+    "build": "vite build && tsc --emitDeclarationOnly",
     "prepare": "yarn build",
     "eslint": "eslint . --fix --ext=js,ts,jsx,tsx",
     "eslint:ci": "eslint . --ext=js,ts,jsx,tsx",
     "test": "echo no tests yet",
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
-    "typegen": "tsc --emitDeclarationOnly || true",
+    "typecheck": "tsc --noEmit false --strict --jsx react",
     "release": "semantic-release",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
     "maath": "^0.5.3",
-    "n8ao": "^1.2.1",
-    "postprocessing": "^6.30.2",
+    "n8ao": "^1.4.2",
+    "postprocessing": "^6.31.0",
     "screen-space-reflections": "^2.5.0",
-    "three-stdlib": "^2.21.10"
+    "three-stdlib": "^2.23.4"
   },
   "devDependencies": {
     "@react-three/drei": "^9.68.2",
     "@react-three/fiber": "^8.13.0",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-typescript": "^11.1.0",
     "@storybook/addon-essentials": "^7.0.10",
     "@storybook/addon-interactions": "^7.0.10",
     "@storybook/addon-links": "^7.0.10",
@@ -85,8 +81,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.0",
-    "rollup": "^3.21.0",
-    "rollup-plugin-filesize": "^10.0.0",
     "semantic-release": "^21.0.2",
     "storybook": "^7.0.10",
     "three": "^0.151.3",

rollup.config.js

@@ -113,8 +113,11 @@ export const EffectComposer = React.memo(
       useFrame(
         (_, delta) => {
           if (enabled) {
+            const currentAutoClear = gl.autoClear
             gl.autoClear = autoClear
+            if (stencilBuffer && !autoClear) gl.clearStencil()
             composer.render(delta)
+            gl.autoClear = currentAutoClear
           }
         },
         enabled ? renderPriority : 0

src/EffectComposer.tsx

@@ -0,0 +1,123 @@
+// From: https://github.com/emilwidlund/ASCII
+// https://twitter.com/emilwidlund/status/1652386482420609024
+
+import { forwardRef, useMemo } from 'react'
+import { CanvasTexture, Color, NearestFilter, RepeatWrapping, Texture, Uniform } from 'three'
+import { Effect } from 'postprocessing'
+
+const fragment = `
+uniform sampler2D uCharacters;
+uniform float uCharactersCount;
+uniform float uCellSize;
+uniform bool uInvert;
+uniform vec3 uColor;
+
+const vec2 SIZE = vec2(16.);
+
+vec3 greyscale(vec3 color, float strength) {
+    float g = dot(color, vec3(0.299, 0.587, 0.114));
+    return mix(color, vec3(g), strength);
+}
+
+vec3 greyscale(vec3 color) {
+    return greyscale(color, 1.0);
+}
+
+void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+    vec2 cell = resolution / uCellSize;
+    vec2 grid = 1.0 / cell;
+    vec2 pixelizedUV = grid * (0.5 + floor(uv / grid));
+    vec4 pixelized = texture2D(inputBuffer, pixelizedUV);
+    float greyscaled = greyscale(pixelized.rgb).r;
+
+    if (uInvert) {
+        greyscaled = 1.0 - greyscaled;
+    }
+
+    float characterIndex = floor((uCharactersCount - 1.0) * greyscaled);
+    vec2 characterPosition = vec2(mod(characterIndex, SIZE.x), floor(characterIndex / SIZE.y));
+    vec2 offset = vec2(characterPosition.x, -characterPosition.y) / SIZE;
+    vec2 charUV = mod(uv * (cell / SIZE), 1.0 / SIZE) - vec2(0., 1.0 / SIZE) + offset;
+    vec4 asciiCharacter = texture2D(uCharacters, charUV);
+
+    asciiCharacter.rgb = uColor * asciiCharacter.r;
+    asciiCharacter.a = pixelized.a;
+    outputColor = asciiCharacter;
+}
+`
+
+interface IASCIIEffectProps {
+  characters?: string
+  fontSize?: number
+  cellSize?: number
+  color?: string
+  invert?: boolean
+}
+
+class ASCIIEffect extends Effect {
+  constructor({
+    characters = ` .:,'-^=*+?!|0#X%WM@`,
+    fontSize = 54,
+    cellSize = 16,
+    color = '#ffffff',
+    invert = false,
+  }: IASCIIEffectProps = {}) {
+    const uniforms = new Map<string, Uniform>([
+      ['uCharacters', new Uniform(new Texture())],
+      ['uCellSize', new Uniform(cellSize)],
+      ['uCharactersCount', new Uniform(characters.length)],
+      ['uColor', new Uniform(new Color(color))],
+      ['uInvert', new Uniform(invert)],
+    ])
+
+    super('ASCIIEffect', fragment, { uniforms })
+
+    const charactersTextureUniform = this.uniforms.get('uCharacters')
+
+    if (charactersTextureUniform) {
+      charactersTextureUniform.value = this.createCharactersTexture(characters, fontSize)
+    }
+  }
+
+  /** Draws the characters on a Canvas and returns a texture */
+  public createCharactersTexture(characters: string, fontSize: number): THREE.Texture {
+    const canvas = document.createElement('canvas')
+    const SIZE = 1024
+    const MAX_PER_ROW = 16
+    const CELL = SIZE / MAX_PER_ROW
+
+    canvas.width = canvas.height = SIZE
+    const texture = new CanvasTexture(canvas, undefined, RepeatWrapping, RepeatWrapping, NearestFilter, NearestFilter)
+    const context = canvas.getContext('2d')
+
+    if (!context) {
+      throw new Error('Context not available')
+    }
+
+    context.clearRect(0, 0, SIZE, SIZE)
+    context.font = `${fontSize}px arial`
+    context.textAlign = 'center'
+    context.textBaseline = 'middle'
+    context.fillStyle = '#fff'
+
+    for (let i = 0; i < characters.length; i++) {
+      const char = characters[i]
+      const x = i % MAX_PER_ROW
+      const y = Math.floor(i / MAX_PER_ROW)
+      context.fillText(char, x * CELL + CELL / 2, y * CELL + CELL / 2)
+    }
+
+    texture.needsUpdate = true
+    return texture
+  }
+}
+
+export const ASCII = forwardRef<ASCIIEffect, IASCIIEffectProps>(
+  ({ characters = ` .:,'-^=*+?!|0#X%WM@`, fontSize = 54, cellSize = 16, color = '#ffffff', invert = false }, fref) => {
+    const effect = useMemo(
+      () => new ASCIIEffect({ characters, fontSize, cellSize, color, invert }),
+      [characters, fontSize, cellSize, color, invert]
+    )
+    return <primitive ref={fref} object={effect} />
+  }
+)

src/effects/ASCII.tsx

@@ -0,0 +1,4 @@
+import { FXAAEffect } from 'postprocessing'
+import { wrapEffect } from '../util'
+
+export const FXAA = wrapEffect(FXAAEffect)

src/effects/FXAA.tsx

@@ -1,3 +1,4 @@
+import { Vector2 } from 'three'
 import { GlitchEffect, GlitchMode } from 'postprocessing'
 import { Ref, forwardRef, useMemo, useLayoutEffect } from 'react'
 import { ReactThreeFiber, useThree } from '@react-three/fiber'
@@ -21,9 +22,10 @@ export const Glitch = forwardRef<GlitchEffect, GlitchProps>(function Glitch(
   const delay = useVector2(props, 'delay')
   const duration = useVector2(props, 'duration')
   const strength = useVector2(props, 'strength')
+  const chromaticAberrationOffset = useVector2(props, 'chromaticAberrationOffset')
   const effect = useMemo(
-    () => new GlitchEffect({ ...props, delay, duration, strength }),
-    [delay, duration, props, strength]
+    () => new GlitchEffect({ ...props, delay, duration, strength, chromaticAberrationOffset }),
+    [delay, duration, props, strength, chromaticAberrationOffset]
   )
   useLayoutEffect(() => {
     effect.mode = active ? props.mode || GlitchMode.SPORADIC : GlitchMode.DISABLED

src/effects/Glitch.tsx

@@ -4,19 +4,52 @@
 import { Ref, forwardRef, useLayoutEffect, useMemo } from 'react'
 /* @ts-ignore */
 import { N8AOPostPass } from 'n8ao'
-import { useThree } from '@react-three/fiber'
+import { useThree, ReactThreeFiber, applyProps } from '@react-three/fiber'
 
 type N8AOProps = {
   aoRadius?: number
   distanceFalloff?: number
   intensity?: number
+  quality?: 'performance' | 'low' | 'medium' | 'high' | 'ultra'
+  aoSamples?: number
+  denoiseSamples?: number
+  denoiseRadius?: number
+  color?: ReactThreeFiber.Color
+  screenSpaceRadius?: boolean
 }
 
-export const N8AO = forwardRef<N8AOPostPass, N8AOProps>((props, ref: Ref<N8AOPostPass>) => {
-  const { camera, scene } = useThree()
-  const effect = useMemo(() => new N8AOPostPass(scene, camera), [])
-  useLayoutEffect(() => {
-    Object.assign(effect.configuration, props)
-  }, [props])
-  return <primitive ref={ref} object={effect} />
-})
+export const N8AO = forwardRef<N8AOPostPass, N8AOProps>(
+  (
+    {
+      screenSpaceRadius,
+      quality,
+      aoRadius = 5,
+      aoSamples = 16,
+      denoiseSamples = 4,
+      denoiseRadius = 12,
+      distanceFalloff = 1,
+      intensity = 1,
+      color,
+    },
+    ref: Ref<N8AOPostPass>
+  ) => {
+    const { camera, scene } = useThree()
+    const effect = useMemo(() => new N8AOPostPass(scene, camera), [])
+    useLayoutEffect(() => {
+      applyProps(effect.configuration, {
+        color,
+        aoRadius,
+        distanceFalloff,
+        intensity,
+        aoSamples,
+        denoiseSamples,
+        denoiseRadius,
+        screenSpaceRadius,
+      })
+    }, [screenSpaceRadius, color, aoRadius, distanceFalloff, intensity, aoSamples, denoiseSamples, denoiseRadius])
+    useLayoutEffect(() => {
+      if (quality) effect.setQualityMode(quality.charAt(0).toUpperCase() + quality.slice(1))
+    }, [quality])
+    return <primitive ref={ref} object={effect} />
+  }
+)

src/effects/N8AO.tsx

@@ -61,7 +61,6 @@ export const Outline = forwardRef(function Outline(
       hiddenEdgeColor,
       kernelSize,
       patternTexture,
-      props,
       pulseSpeed,
       scene,
       visibleEdgeColor,

src/effects/Outline.tsx

@@ -1,11 +1,15 @@
+export * from './Selection'
+export * from './EffectComposer'
+export * from './util'
+
 export * from './effects/Autofocus'
 export * from './effects/Bloom'
 export * from './effects/BrightnessContrast'
 export * from './effects/ChromaticAberration'
 export * from './effects/ColorAverage'
 export * from './effects/ColorDepth'
 export * from './effects/Depth'
-export { DepthOfField } from './effects/DepthOfField'
+export * from './effects/DepthOfField'
 export * from './effects/DotScreen'
 export * from './effects/Glitch'
 export * from './effects/GodRays'
@@ -18,19 +22,17 @@ export * from './effects/ScanlineEffect'
 export * from './effects/SelectiveBloom'
 export * from './effects/Sepia'
 export * from './effects/SSAO'
-export * from './effects/N8AO'
 export * from './effects/SMAA'
+export * from './effects/FXAA'
 export * from './effects/Texture'
 export * from './effects/ToneMapping'
 export * from './effects/Vignette'
 export * from './effects/ShockWave'
 export * from './effects/LUT'
 export * from './effects/TiltShift'
 export * from './effects/TiltShift2'
+export * from './effects/ASCII'
 
-// This is not an effect pass
+// These are not effect passes
 export * from './effects/SSR'
-
-export * from './Selection'
-export * from './EffectComposer'
-export * from './util'
+export * from './effects/N8AO'

src/index.tsx

@@ -0,0 +1,33 @@
+import * as path from 'node:path'
+import { defineConfig } from 'vite'
+
+const inline: string[] = ['n8ao']
+
+export default defineConfig({
+  build: {
+    minify: false,
+    target: 'es2018',
+    sourcemap: true,
+    lib: {
+      formats: ['es', 'cjs'],
+      entry: 'src/index.tsx',
+      fileName: '[name]',
+    },
+    rollupOptions: {
+      external: (id: string) => !id.startsWith('.') && !path.isAbsolute(id) && !inline.includes(id),
+    },
+  },
+  plugins: [
+    {
+      name: 'n8ao-fix',
+      generateBundle(_, bundle) {
+        for (const id in bundle) {
+          const asset = bundle[id]
+          if ('code' in asset) {
+            asset.code = asset.code.replace(/three\/(addons|examples)[^'"`]+/g, 'three-stdlib')
+          }
+        }
+      },
+    },
+  ],
+})