first commit

src/components/three/postprocessing/pass/Base.ts

@@ -0,0 +1,44 @@
+import { createRef } from 'react';
+import * as THREE from 'three';
+import { Pass, ShaderPass } from 'three-stdlib';
+
+export abstract class BasePass<T extends Pass> {
+	public ref
+
+	constructor() {
+		this.ref = createRef<T>()
+	}
+
+	protected abstract _initController: () => void
+	abstract update: (...args: any) => void
+
+	protected get pass() {
+		return this.ref.current
+	}
+
+	protected validatedPass = (enabled = true) => {
+		if (!this.pass) return null
+		this.pass.enabled = enabled
+		return enabled ? this.pass : null
+	}
+}
+
+export abstract class BaseShader extends BasePass<ShaderPass> {
+	public shader: THREE.Shader
+
+	constructor(shader: THREE.Shader) {
+		super()
+		this.shader = shader
+	}
+}
+
+export abstract class BaseCustomShader extends BaseShader {
+	constructor(uniforms: { [uniform: string]: THREE.IUniform<any> }, vertexShader: string, fragmentShader: string) {
+		const shader = {
+			uniforms: THREE.UniformsUtils.merge([{ tDiffuse: { value: null } }, uniforms]),
+			vertexShader,
+			fragmentShader
+		}
+		super(shader)
+	}
+}

src/components/three/postprocessing/pass/FXAA.ts

@@ -0,0 +1,20 @@
+import { FXAAShader } from 'three-stdlib';
+import { Size } from '@react-three/fiber';
+import { BaseShader } from './Base';
+
+export class FXAA extends BaseShader {
+	constructor() {
+		super(FXAAShader)
+	}
+
+	protected _initController = () => {}
+
+	update = (size: Size) => {
+		// validate pass
+		const pass = this.validatedPass()
+		if (!pass) return
+
+		// update uniforms
+		pass.uniforms.resolution.value.set(1 / size.width, 1 / size.height)
+	}
+}