@octanejs/drei 0.0.1

package/src/materials/MeshTransmissionMaterial.ts

@@ -0,0 +1,182 @@
+import * as THREE from 'three';
+
+interface Uniform<T> {
+	value: T;
+}
+interface Shader {
+	uniforms: Record<string, Uniform<any>>;
+	defines: Record<string, string>;
+	vertexShader: string;
+	fragmentShader: string;
+}
+
+export class MeshTransmissionMaterialImpl extends THREE.MeshPhysicalMaterial {
+	uniforms: Record<string, Uniform<any>>;
+
+	constructor(samples = 6, transmissionSampler = false) {
+		super();
+		this.uniforms = {
+			chromaticAberration: { value: 0.05 },
+			transmission: { value: 0 },
+			_transmission: { value: 1 },
+			transmissionMap: { value: null },
+			roughness: { value: 0 },
+			thickness: { value: 0 },
+			thicknessMap: { value: null },
+			attenuationDistance: { value: Infinity },
+			attenuationColor: { value: new THREE.Color('white') },
+			anisotropicBlur: { value: 0.1 },
+			time: { value: 0 },
+			distortion: { value: 0 },
+			distortionScale: { value: 0.5 },
+			temporalDistortion: { value: 0 },
+			buffer: { value: null },
+		};
+		this.onBeforeCompile = (parameters) => {
+			const shader = parameters as unknown as Shader;
+			shader.defines ||= {};
+			shader.uniforms = { ...shader.uniforms, ...this.uniforms };
+			if ((this as any).anisotropy > 0) shader.defines.USE_ANISOTROPY = '';
+			if (transmissionSampler) shader.defines.USE_SAMPLER = '';
+			else shader.defines.USE_TRANSMISSION = '';
+			shader.fragmentShader =
+				`
+				uniform float chromaticAberration;
+				uniform float anisotropicBlur;
+				uniform float time;
+				uniform float distortion;
+				uniform float distortionScale;
+				uniform float temporalDistortion;
+				uniform sampler2D buffer;
+				vec3 random3(vec3 c) {
+					float j = 4096.0*sin(dot(c,vec3(17.0, 59.4, 15.0)));
+					vec3 r; r.z = fract(512.0*j); j *= .125; r.x = fract(512.0*j); j *= .125; r.y = fract(512.0*j); return r-0.5;
+				}
+				uint hash(uint x) { x += (x << 10u); x ^= (x >> 6u); x += (x << 3u); x ^= (x >> 11u); x += (x << 15u); return x; }
+				uint hash(uvec2 v) { return hash(v.x ^ hash(v.y)); }
+				uint hash(uvec3 v) { return hash(v.x ^ hash(v.y) ^ hash(v.z)); }
+				uint hash(uvec4 v) { return hash(v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w)); }
+				float floatConstruct(uint m) {
+					const uint ieeeMantissa = 0x007FFFFFu; const uint ieeeOne = 0x3F800000u;
+					m &= ieeeMantissa; m |= ieeeOne; float f = uintBitsToFloat(m); return f - 1.0;
+				}
+				float randomBase(float x) { return floatConstruct(hash(floatBitsToUint(x))); }
+				float randomBase(vec2 v) { return floatConstruct(hash(floatBitsToUint(v))); }
+				float randomBase(vec3 v) { return floatConstruct(hash(floatBitsToUint(v))); }
+				float randomBase(vec4 v) { return floatConstruct(hash(floatBitsToUint(v))); }
+				float rand(float seed) { return randomBase(vec3(gl_FragCoord.xy, seed)); }
+				const float F3 = 0.3333333; const float G3 = 0.1666667;
+				float snoise(vec3 p) {
+					vec3 s = floor(p + dot(p, vec3(F3))); vec3 x = p - s + dot(s, vec3(G3)); vec3 e = step(vec3(0.0), x - x.yzx);
+					vec3 i1 = e*(1.0 - e.zxy); vec3 i2 = 1.0 - e.zxy*(1.0 - e); vec3 x1 = x - i1 + G3; vec3 x2 = x - i2 + 2.0*G3; vec3 x3 = x - 1.0 + 3.0*G3;
+					vec4 w, d; w.x = dot(x, x); w.y = dot(x1, x1); w.z = dot(x2, x2); w.w = dot(x3, x3); w = max(0.6 - w, 0.0);
+					d.x = dot(random3(s), x); d.y = dot(random3(s + i1), x1); d.z = dot(random3(s + i2), x2); d.w = dot(random3(s + 1.0), x3);
+					w *= w; w *= w; d *= w; return dot(d, vec4(52.0));
+				}
+				float snoiseFractal(vec3 m) { return 0.5333333*snoise(m) + 0.2666667*snoise(2.0*m) + 0.1333333*snoise(4.0*m) + 0.0666667*snoise(8.0*m); }
+			` + shader.fragmentShader;
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <transmission_pars_fragment>',
+				`
+				#ifdef USE_TRANSMISSION
+					uniform float _transmission;
+					uniform float thickness;
+					uniform float attenuationDistance;
+					uniform vec3 attenuationColor;
+					#ifdef USE_TRANSMISSIONMAP
+						uniform sampler2D transmissionMap;
+					#endif
+					#ifdef USE_THICKNESSMAP
+						uniform sampler2D thicknessMap;
+					#endif
+					uniform vec2 transmissionSamplerSize;
+					uniform sampler2D transmissionSamplerMap;
+					uniform mat4 modelMatrix;
+					uniform mat4 projectionMatrix;
+					varying vec3 vWorldPosition;
+					vec3 getVolumeTransmissionRay(const in vec3 n, const in vec3 v, const in float thickness, const in float ior, const in mat4 modelMatrix) {
+						vec3 refractionVector = refract(-v, normalize(n), 1.0 / ior);
+						vec3 modelScale; modelScale.x = length(vec3(modelMatrix[0].xyz)); modelScale.y = length(vec3(modelMatrix[1].xyz)); modelScale.z = length(vec3(modelMatrix[2].xyz));
+						return normalize(refractionVector) * thickness * modelScale;
+					}
+					float applyIorToRoughness(const in float roughness, const in float ior) { return roughness * clamp(ior * 2.0 - 2.0, 0.0, 1.0); }
+					vec4 getTransmissionSample(const in vec2 fragCoord, const in float roughness, const in float ior) {
+						float framebufferLod = log2(transmissionSamplerSize.x) * applyIorToRoughness(roughness, ior);
+						#ifdef USE_SAMPLER
+							#ifdef texture2DLodEXT
+								return texture2DLodEXT(transmissionSamplerMap, fragCoord.xy, framebufferLod);
+							#else
+								return texture2D(transmissionSamplerMap, fragCoord.xy, framebufferLod);
+							#endif
+						#else
+							return texture2D(buffer, fragCoord.xy);
+						#endif
+					}
+					vec3 applyVolumeAttenuation(const in vec3 radiance, const in float transmissionDistance, const in vec3 attenuationColor, const in float attenuationDistance) {
+						if (isinf(attenuationDistance)) return radiance;
+						vec3 attenuationCoefficient = -log(attenuationColor) / attenuationDistance;
+						vec3 transmittance = exp(-attenuationCoefficient * transmissionDistance);
+						return transmittance * radiance;
+					}
+					vec4 getIBLVolumeRefraction(const in vec3 n, const in vec3 v, const in float roughness, const in vec3 diffuseColor,
+						const in vec3 specularColor, const in float specularF90, const in vec3 position, const in mat4 modelMatrix,
+						const in mat4 viewMatrix, const in mat4 projMatrix, const in float ior, const in float thickness,
+						const in vec3 attenuationColor, const in float attenuationDistance) {
+						vec3 transmissionRay = getVolumeTransmissionRay(n, v, thickness, ior, modelMatrix);
+						vec3 refractedRayExit = position + transmissionRay;
+						vec4 ndcPos = projMatrix * viewMatrix * vec4(refractedRayExit, 1.0);
+						vec2 refractionCoords = ndcPos.xy / ndcPos.w; refractionCoords += 1.0; refractionCoords /= 2.0;
+						vec4 transmittedLight = getTransmissionSample(refractionCoords, roughness, ior);
+						vec3 attenuatedColor = applyVolumeAttenuation(transmittedLight.rgb, length(transmissionRay), attenuationColor, attenuationDistance);
+						vec3 F = EnvironmentBRDF(n, v, specularColor, specularF90, roughness);
+						return vec4((1.0 - F) * attenuatedColor * diffuseColor, transmittedLight.a);
+					}
+				#endif
+			`,
+			);
+			shader.fragmentShader = shader.fragmentShader.replace(
+				'#include <transmission_fragment>',
+				`
+				material.transmission = _transmission;
+				material.transmissionAlpha = 1.0;
+				material.thickness = thickness;
+				material.attenuationDistance = attenuationDistance;
+				material.attenuationColor = attenuationColor;
+				#ifdef USE_TRANSMISSIONMAP
+					material.transmission *= texture2D(transmissionMap, vUv).r;
+				#endif
+				#ifdef USE_THICKNESSMAP
+					material.thickness *= texture2D(thicknessMap, vUv).g;
+				#endif
+				vec3 pos = vWorldPosition;
+				float runningSeed = 0.0;
+				vec3 v = normalize(cameraPosition - pos);
+				vec3 n = inverseTransformDirection(normal, viewMatrix);
+				vec3 transmission = vec3(0.0);
+				float transmissionR, transmissionB, transmissionG;
+				float randomCoords = rand(runningSeed++);
+				float thickness_smear = thickness * max(pow(roughnessFactor, 0.33), anisotropicBlur);
+				vec3 distortionNormal = vec3(0.0);
+				vec3 temporalOffset = vec3(time, -time, -time) * temporalDistortion;
+				if (distortion > 0.0) distortionNormal = distortion * vec3(snoiseFractal(vec3(pos * distortionScale + temporalOffset)), snoiseFractal(vec3(pos.zxy * distortionScale - temporalOffset)), snoiseFractal(vec3(pos.yxz * distortionScale + temporalOffset)));
+				for (float i = 0.0; i < ${samples}.0; i++) {
+					vec3 sampleNorm = normalize(n + roughnessFactor * roughnessFactor * 2.0 * normalize(vec3(rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5, rand(runningSeed++) - 0.5)) * pow(rand(runningSeed++), 0.33) + distortionNormal);
+					transmissionR = getIBLVolumeRefraction(sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90, pos, modelMatrix, viewMatrix, projectionMatrix, material.ior, material.thickness + thickness_smear * (i + randomCoords) / float(${samples}), material.attenuationColor, material.attenuationDistance).r;
+					transmissionG = getIBLVolumeRefraction(sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90, pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + chromaticAberration * (i + randomCoords) / float(${samples})), material.thickness + thickness_smear * (i + randomCoords) / float(${samples}), material.attenuationColor, material.attenuationDistance).g;
+					transmissionB = getIBLVolumeRefraction(sampleNorm, v, material.roughness, material.diffuseColor, material.specularColor, material.specularF90, pos, modelMatrix, viewMatrix, projectionMatrix, material.ior * (1.0 + 2.0 * chromaticAberration * (i + randomCoords) / float(${samples})), material.thickness + thickness_smear * (i + randomCoords) / float(${samples}), material.attenuationColor, material.attenuationDistance).b;
+					transmission.r += transmissionR; transmission.g += transmissionG; transmission.b += transmissionB;
+				}
+				transmission /= ${samples}.0;
+				totalDiffuse = mix(totalDiffuse, transmission.rgb, material.transmission);
+			`,
+			);
+		};
+		for (const name of Object.keys(this.uniforms))
+			Object.defineProperty(this, name, {
+				get: () => this.uniforms[name].value,
+				set: (value) => {
+					this.uniforms[name].value = value;
+				},
+			});
+	}
+}

package/src/materials/PortalMaterial.ts

@@ -0,0 +1,38 @@
+import * as THREE from 'three';
+import { shaderMaterial } from '../core/shaderMaterial.js';
+
+export const PortalMaterialImpl = shaderMaterial(
+	{ blur: 0, map: null, sdf: null, blend: 0, size: 0, resolution: new THREE.Vector2() },
+	`varying vec2 vUv;
+	void main() {
+		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+		vUv = uv;
+	}`,
+	`uniform sampler2D sdf;
+	uniform sampler2D map;
+	uniform float blur;
+	uniform float size;
+	uniform float time;
+	uniform vec2 resolution;
+	varying vec2 vUv;
+	#include <packing>
+	void main() {
+		vec2 uv = gl_FragCoord.xy / resolution.xy;
+		vec4 t = texture2D(map, uv);
+		float k = blur;
+		float d = texture2D(sdf, vUv).r/size;
+		float alpha = 1.0 - smoothstep(0.0, 1.0, clamp(d/k + 1.0, 0.0, 1.0));
+		gl_FragColor = vec4(t.rgb, blur == 0.0 ? t.a : t.a * alpha);
+		#include <tonemapping_fragment>
+		#include <colorspace_fragment>
+	}`,
+);
+
+export type PortalMaterialInstance = InstanceType<typeof PortalMaterialImpl> & {
+	blur: number;
+	blend: number;
+	size: number;
+	resolution: THREE.Vector2;
+	sdf: THREE.Texture | null;
+	map: THREE.Texture | null;
+};

package/src/materials/WireframeMaterial.ts

@@ -0,0 +1,241 @@
+import { useEffect } from '@octanejs/three/renderer';
+import * as THREE from 'three';
+import { shaderMaterial } from '../core/shaderMaterial.js';
+
+export interface WireframeMaterialProps extends THREE.ShaderMaterialParameters {
+	fillOpacity?: number;
+	fillMix?: number;
+	strokeOpacity?: number;
+	thickness?: number;
+	colorBackfaces?: boolean;
+	dashInvert?: boolean;
+	dash?: boolean;
+	dashRepeats?: number;
+	dashLength?: number;
+	squeeze?: boolean;
+	squeezeMin?: number;
+	squeezeMax?: number;
+	stroke?: THREE.ColorRepresentation;
+	backfaceStroke?: THREE.ColorRepresentation;
+	fill?: THREE.ColorRepresentation;
+}
+
+export const WireframeMaterialShaders = {
+	uniforms: {
+		strokeOpacity: 1,
+		fillOpacity: 0.25,
+		fillMix: 0,
+		thickness: 0.05,
+		colorBackfaces: false,
+		dashInvert: true,
+		dash: false,
+		dashRepeats: 4,
+		dashLength: 0.5,
+		squeeze: false,
+		squeezeMin: 0.2,
+		squeezeMax: 1,
+		stroke: new THREE.Color('#ff0000'),
+		backfaceStroke: new THREE.Color('#0000ff'),
+		fill: new THREE.Color('#00ff00'),
+	},
+	vertex: `
+		attribute vec3 barycentric;
+		varying vec3 v_edges_Barycentric;
+		varying vec3 v_edges_Position;
+		void initWireframe() {
+			v_edges_Barycentric = barycentric;
+			v_edges_Position = position.xyz;
+		}
+	`,
+	fragment: `
+		#ifndef PI
+			#define PI 3.1415926535897932384626433832795
+		#endif
+		varying vec3 v_edges_Barycentric;
+		varying vec3 v_edges_Position;
+		uniform float strokeOpacity;
+		uniform float fillOpacity;
+		uniform float fillMix;
+		uniform float thickness;
+		uniform bool colorBackfaces;
+		// Dash
+		uniform bool dashInvert;
+		uniform bool dash;
+		uniform bool dashOnly;
+		uniform float dashRepeats;
+		uniform float dashLength;
+		// Squeeze
+		uniform bool squeeze;
+		uniform float squeezeMin;
+		uniform float squeezeMax;
+		// Colors
+		uniform vec3 stroke;
+		uniform vec3 backfaceStroke;
+		uniform vec3 fill;
+		// This is like
+		float wireframe_aastep(float threshold, float dist) {
+			float afwidth = fwidth(dist) * 0.5;
+			return smoothstep(threshold - afwidth, threshold + afwidth, dist);
+		}
+		float wireframe_map(float value, float min1, float max1, float min2, float max2) {
+			return min2 + (value - min1) * (max2 - min2) / (max1 - min1);
+		}
+		float getWireframe() {
+			vec3 barycentric = v_edges_Barycentric;
+			// Distance from center of each triangle to its edges.
+			float d = min(min(barycentric.x, barycentric.y), barycentric.z);
+			// for dashed rendering, we can use this to get the 0 .. 1 value of the line length
+			float positionAlong = max(barycentric.x, barycentric.y);
+			if (barycentric.y < barycentric.x && barycentric.y < barycentric.z) {
+				positionAlong = 1.0 - positionAlong;
+			}
+			// the thickness of the stroke
+			float computedThickness = wireframe_map(thickness, 0.0, 1.0, 0.0, 0.34);
+			// if we want to shrink the thickness toward the center of the line segment
+			if (squeeze) {
+				computedThickness *= mix(squeezeMin, squeezeMax, (1.0 - sin(positionAlong * PI)));
+			}
+			// Create dash pattern
+			if (dash) {
+				// here we offset the stroke position depending on whether it
+				// should overlap or not
+				float offset = 1.0 / dashRepeats * dashLength / 2.0;
+				if (!dashInvert) {
+					offset += 1.0 / dashRepeats / 2.0;
+				}
+				// if we should animate the dash or not
+				// if (dashAnimate) {
+				// 	offset += time * 0.22;
+				// }
+				// create the repeating dash pattern
+				float pattern = fract((positionAlong + offset) * dashRepeats);
+				computedThickness *= 1.0 - wireframe_aastep(dashLength, pattern);
+			}
+			// compute the anti-aliased stroke edge
+			float edge = 1.0 - wireframe_aastep(computedThickness, d);
+			return edge;
+		}
+	`,
+};
+
+export const WireframeMaterial = shaderMaterial(
+	WireframeMaterialShaders.uniforms,
+	WireframeMaterialShaders.vertex +
+		`
+		void main() {
+			initWireframe();
+			gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+		}
+	`,
+	WireframeMaterialShaders.fragment +
+		`
+		void main () {
+			float edge = getWireframe();
+			vec4 colorStroke = vec4(stroke, edge);
+			#ifdef FLIP_SIDED
+				colorStroke.rgb = backfaceStroke;
+			#endif
+			vec4 colorFill = vec4(fill, fillOpacity);
+			vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
+			gl_FragColor = outColor;
+		}
+	`,
+);
+
+export function setWireframeOverride(
+	material: THREE.Material,
+	uniforms: Record<string, THREE.IUniform>,
+) {
+	material.onBeforeCompile = (shader) => {
+		shader.uniforms = { ...shader.uniforms, ...uniforms };
+		shader.vertexShader = shader.vertexShader.replace(
+			'void main() {',
+			`${WireframeMaterialShaders.vertex}\nvoid main() {\ninitWireframe();`,
+		);
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'void main() {',
+			`${WireframeMaterialShaders.fragment}\nvoid main() {`,
+		);
+		shader.fragmentShader = shader.fragmentShader.replace(
+			'#include <color_fragment>',
+			`
+			#include <color_fragment>
+			float edge = getWireframe();
+			vec4 colorStroke = vec4(stroke, edge);
+			#ifdef FLIP_SIDED
+				colorStroke.rgb = backfaceStroke;
+			#endif
+			vec4 colorFill = vec4(mix(diffuseColor.rgb, fill, fillMix), mix(diffuseColor.a, fillOpacity, fillMix));
+			vec4 outColor = mix(colorFill, colorStroke, edge * strokeOpacity);
+			diffuseColor.rgb = outColor.rgb;
+			diffuseColor.a *= outColor.a;
+		`,
+		);
+	};
+	material.side = THREE.DoubleSide;
+	material.transparent = true;
+}
+
+export function useWireframeUniforms(
+	uniforms: Record<string, THREE.IUniform>,
+	props: WireframeMaterialProps,
+) {
+	useEffect(
+		() => void (uniforms.fillOpacity.value = props.fillOpacity ?? uniforms.fillOpacity.value),
+		[props.fillOpacity],
+	);
+	useEffect(
+		() => void (uniforms.fillMix.value = props.fillMix ?? uniforms.fillMix.value),
+		[props.fillMix],
+	);
+	useEffect(
+		() => void (uniforms.strokeOpacity.value = props.strokeOpacity ?? uniforms.strokeOpacity.value),
+		[props.strokeOpacity],
+	);
+	useEffect(
+		() => void (uniforms.thickness.value = props.thickness ?? uniforms.thickness.value),
+		[props.thickness],
+	);
+	useEffect(
+		() => void (uniforms.colorBackfaces.value = !!props.colorBackfaces),
+		[props.colorBackfaces],
+	);
+	useEffect(() => void (uniforms.dash.value = !!props.dash), [props.dash]);
+	useEffect(() => void (uniforms.dashInvert.value = !!props.dashInvert), [props.dashInvert]);
+	useEffect(
+		() => void (uniforms.dashRepeats.value = props.dashRepeats ?? uniforms.dashRepeats.value),
+		[props.dashRepeats],
+	);
+	useEffect(
+		() => void (uniforms.dashLength.value = props.dashLength ?? uniforms.dashLength.value),
+		[props.dashLength],
+	);
+	useEffect(() => void (uniforms.squeeze.value = !!props.squeeze), [props.squeeze]);
+	useEffect(
+		() => void (uniforms.squeezeMin.value = props.squeezeMin ?? uniforms.squeezeMin.value),
+		[props.squeezeMin],
+	);
+	useEffect(
+		() => void (uniforms.squeezeMax.value = props.squeezeMax ?? uniforms.squeezeMax.value),
+		[props.squeezeMax],
+	);
+	useEffect(
+		() =>
+			void (uniforms.stroke.value = props.stroke
+				? new THREE.Color(props.stroke)
+				: uniforms.stroke.value),
+		[props.stroke],
+	);
+	useEffect(
+		() =>
+			void (uniforms.fill.value = props.fill ? new THREE.Color(props.fill) : uniforms.fill.value),
+		[props.fill],
+	);
+	useEffect(
+		() =>
+			void (uniforms.backfaceStroke.value = props.backfaceStroke
+				? new THREE.Color(props.backfaceStroke)
+				: uniforms.backfaceStroke.value),
+		[props.backfaceStroke],
+	);
+}

package/src/materials/makeSDFGenerator.ts

@@ -0,0 +1,155 @@
+import * as THREE from 'three';
+import { FullScreenQuad } from 'three-stdlib';
+
+type Quad = { material: THREE.ShaderMaterial; render(renderer: any): void };
+const quad = (material: THREE.ShaderMaterial) =>
+	new FullScreenQuad(material as any) as unknown as Quad;
+
+export function makeSDFGenerator(clientWidth: number, clientHeight: number, renderer: any) {
+	const finalTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.LinearMipmapLinearFilter,
+		magFilter: THREE.LinearFilter,
+		type: THREE.FloatType,
+		format: THREE.RedFormat,
+		generateMipmaps: true,
+	});
+	const outsideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+	});
+	const insideRenderTarget = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+	});
+	const outsideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+	});
+	const insideRenderTarget2 = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+	});
+	const outsideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+		type: THREE.FloatType,
+		format: THREE.RedFormat,
+	});
+	const insideRenderTargetFinal = new THREE.WebGLRenderTarget(clientWidth, clientHeight, {
+		minFilter: THREE.NearestFilter,
+		magFilter: THREE.NearestFilter,
+		type: THREE.FloatType,
+		format: THREE.RedFormat,
+	});
+	const vertexShader = `varying vec2 vUv;
+		void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); }`;
+	const uvRender = quad(
+		new THREE.ShaderMaterial({
+			uniforms: { tex: { value: null } },
+			vertexShader,
+			fragmentShader: `uniform sampler2D tex; varying vec2 vUv; #include <packing>
+			void main() { gl_FragColor = pack2HalfToRGBA(vUv * (round(texture2D(tex, vUv).x))); }`,
+		}),
+	);
+	const uvRenderInside = quad(
+		new THREE.ShaderMaterial({
+			uniforms: { tex: { value: null } },
+			vertexShader,
+			fragmentShader: `uniform sampler2D tex; varying vec2 vUv; #include <packing>
+			void main() { gl_FragColor = pack2HalfToRGBA(vUv * (1.0 - round(texture2D(tex, vUv).x))); }`,
+		}),
+	);
+	const jumpFloodRender = quad(
+		new THREE.ShaderMaterial({
+			uniforms: {
+				tex: { value: null },
+				offset: { value: 0 },
+				level: { value: 0 },
+				maxSteps: { value: 0 },
+			},
+			vertexShader,
+			fragmentShader: `varying vec2 vUv; uniform sampler2D tex; uniform float offset; uniform float level; uniform float maxSteps; #include <packing>
+			void main() {
+				float closestDist = 9999999.9; vec2 closestPos = vec2(0.0);
+				for (float x = -1.0; x <= 1.0; x += 1.0) {
+					for (float y = -1.0; y <= 1.0; y += 1.0) {
+						vec2 voffset = vUv; voffset += vec2(x, y) * vec2(${1 / clientWidth}, ${1 / clientHeight}) * offset;
+						vec2 pos = unpackRGBATo2Half(texture2D(tex, voffset)); float dist = distance(pos.xy, vUv);
+						if(pos.x != 0.0 && pos.y != 0.0 && dist < closestDist) { closestDist = dist; closestPos = pos; }
+					}
+				}
+				gl_FragColor = pack2HalfToRGBA(closestPos);
+			}`,
+		}),
+	);
+	const distanceFieldRender = quad(
+		new THREE.ShaderMaterial({
+			uniforms: {
+				tex: { value: null },
+				size: { value: new THREE.Vector2(clientWidth, clientHeight) },
+			},
+			vertexShader,
+			fragmentShader: `varying vec2 vUv; uniform sampler2D tex; uniform vec2 size; #include <packing>
+			void main() { gl_FragColor = vec4(distance(size * unpackRGBATo2Half(texture2D(tex, vUv)), size * vUv), 0.0, 0.0, 0.0); }`,
+		}),
+	);
+	const compositeRender = quad(
+		new THREE.ShaderMaterial({
+			uniforms: {
+				inside: { value: insideRenderTargetFinal.texture },
+				outside: { value: outsideRenderTargetFinal.texture },
+				tex: { value: null },
+			},
+			vertexShader,
+			fragmentShader: `varying vec2 vUv; uniform sampler2D inside; uniform sampler2D outside; uniform sampler2D tex; #include <packing>
+			void main() {
+				float i = texture2D(inside, vUv).x; float o = texture2D(outside, vUv).x;
+				if (texture2D(tex, vUv).x == 0.0) gl_FragColor = vec4(o, 0.0, 0.0, 0.0);
+				else gl_FragColor = vec4(-i, 0.0, 0.0, 0.0);
+			}`,
+		}),
+	);
+	const runJumpFlood = (
+		initialTarget: THREE.WebGLRenderTarget,
+		alternateTarget: THREE.WebGLRenderTarget,
+	) => {
+		const passes = Math.ceil(Math.log(Math.max(clientWidth, clientHeight)) / Math.log(2));
+		let lastTarget = initialTarget;
+		let target = initialTarget;
+		for (let index = 0; index < passes; index++) {
+			const offset = Math.pow(2, passes - index - 1);
+			target = lastTarget === initialTarget ? alternateTarget : initialTarget;
+			jumpFloodRender.material.uniforms.level.value = index;
+			jumpFloodRender.material.uniforms.maxSteps.value = passes;
+			jumpFloodRender.material.uniforms.offset.value = offset;
+			jumpFloodRender.material.uniforms.tex.value = lastTarget.texture;
+			renderer.setRenderTarget(target);
+			jumpFloodRender.render(renderer);
+			lastTarget = target;
+		}
+		return target;
+	};
+	return (image: THREE.Texture) => {
+		image.minFilter = THREE.NearestFilter;
+		image.magFilter = THREE.NearestFilter;
+		uvRender.material.uniforms.tex.value = image;
+		renderer.setRenderTarget(outsideRenderTarget);
+		uvRender.render(renderer);
+		let target = runJumpFlood(outsideRenderTarget, outsideRenderTarget2);
+		renderer.setRenderTarget(outsideRenderTargetFinal);
+		distanceFieldRender.material.uniforms.tex.value = target.texture;
+		distanceFieldRender.render(renderer);
+		uvRenderInside.material.uniforms.tex.value = image;
+		renderer.setRenderTarget(insideRenderTarget);
+		uvRenderInside.render(renderer);
+		target = runJumpFlood(insideRenderTarget, insideRenderTarget2);
+		renderer.setRenderTarget(insideRenderTargetFinal);
+		distanceFieldRender.material.uniforms.tex.value = target.texture;
+		distanceFieldRender.render(renderer);
+		renderer.setRenderTarget(finalTarget);
+		compositeRender.material.uniforms.tex.value = image;
+		compositeRender.render(renderer);
+		renderer.setRenderTarget(null);
+		return finalTarget;
+	};
+}

package/src/troika-three-text.d.ts

@@ -0,0 +1,19 @@
+declare module 'troika-three-text' {
+	import { Mesh } from 'three';
+
+	export class Text extends Mesh {
+		font?: string;
+		text: string;
+		anchorX: number | string;
+		anchorY: number | string;
+		fontSize: number;
+		sdfGlyphSize: number;
+		sync(callback?: () => void): void;
+		dispose(): void;
+	}
+
+	export function preloadFont(
+		options: { font?: string; characters?: string },
+		callback: () => void,
+	): void;
+}