(
13 | ({ children, type = "allpass", frequency = 2000, Q }, ref) => {
14 | const node = useAudioNode((ctx) => ctx.createBiquadFilter(), ref)
15 |
16 | useLayoutEffect(() => {
17 | node.type = type
18 | }, [node, type])
19 |
20 | useLayoutEffect(() => {
21 | node.frequency.setTargetAtTime(frequency, node.context.currentTime, 0.1)
22 | }, [node, frequency])
23 |
24 | useLayoutEffect(() => {
25 | if (Q !== undefined) node.Q.value = Q
26 | }, [node, Q])
27 |
28 | return (
29 |
30 | {children}
31 |
32 | )
33 | }
34 | )
35 |
--------------------------------------------------------------------------------
/packages/audio-composer/src/Gain.tsx:
--------------------------------------------------------------------------------
1 | import React, { forwardRef, ReactNode, useLayoutEffect } from "react"
2 | import { AudioNodeContext } from "./AudioContext"
3 | import { useAudioNode } from "./hooks"
4 |
5 | export type GainProps = {
6 | children?: ReactNode
7 | volume?: number
8 | target?: string
9 | }
10 |
11 | export const Gain = forwardRef(
12 | ({ volume = 0.5, children, target }, ref) => {
13 | const node = useAudioNode((ctx) => ctx.createGain(), ref, target)
14 |
15 | useLayoutEffect(() => {
16 | node.gain.value = volume
17 | }, [volume])
18 |
19 | return (
20 |
21 | {children}
22 |
23 | )
24 | }
25 | )
26 |
--------------------------------------------------------------------------------
/packages/audio-composer/src/LinearRamp.tsx:
--------------------------------------------------------------------------------
1 | import { useLayoutEffect as useEffect } from "react"
2 | import { useAudioContext } from "./hooks"
3 |
4 | export type LinearRampProps = {
5 | property: string
6 | to: number
7 | duration: number
8 | }
9 |
10 | export const LinearRamp = ({ to, duration, property }: LinearRampProps) => {
11 | const parent = useAudioContext() as any
12 |
13 | useEffect(() => {
14 | if (!parent) return
15 |
16 | const time = parent.context.currentTime
17 | const prop = parent[property] as AudioParam
18 |
19 | if (!prop) {
20 | console.error("Invalid property", property)
21 | return
22 | }
23 |
24 | prop.setValueAtTime(prop.value, time)
25 | prop.linearRampToValueAtTime(to, time + duration)
26 | }, [parent])
27 |
28 | return null
29 | }
30 |
--------------------------------------------------------------------------------
/packages/audio-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./AudioContext"
2 | export * from "./AudioListener"
3 | export * from "./Compressor"
4 | export * from "./Filter"
5 | export * from "./Gain"
6 | export * from "./hooks"
7 | export * from "./LinearRamp"
8 | export * from "./Oscillator"
9 | export * from "./PositionalAudio"
10 | export * from "./Reverb"
11 |
--------------------------------------------------------------------------------
/packages/audio-composer/src/store.ts:
--------------------------------------------------------------------------------
1 | import { makeStore } from "statery"
2 | import * as THREE from "three"
3 |
4 | export const store = makeStore({
5 | listener: null as THREE.AudioListener | null
6 | })
7 |
--------------------------------------------------------------------------------
/packages/audio-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/camera-composer/README.md:
--------------------------------------------------------------------------------
1 | # Camera Composer
2 |
--------------------------------------------------------------------------------
/packages/camera-composer/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/camera-composer-react.cjs.js",
3 | "module": "dist/camera-composer-react.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/camera-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Camera } from "three"
2 |
3 | export const moveForward = (camera: Camera) => {
4 | camera.translateZ(-1)
5 | }
6 |
--------------------------------------------------------------------------------
/packages/camera-composer/src/react/index.ts:
--------------------------------------------------------------------------------
1 | export const react = "cool"
2 |
--------------------------------------------------------------------------------
/packages/camera-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/hmans-event/README.md:
--------------------------------------------------------------------------------
1 | # @hmans/event
2 |
--------------------------------------------------------------------------------
/packages/hmans-event/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@hmans/event",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.0.1",
10 | "main": "dist/hmans-event.cjs.js",
11 | "module": "dist/hmans-event.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | [
26 | "@babel/preset-typescript",
27 | {
28 | "isTSX": true,
29 | "allExtensions": true
30 | }
31 | ]
32 | ]
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/hmans-event/src/index.ts:
--------------------------------------------------------------------------------
1 | export type Listener = (payload: P) => void
2 |
3 | export class Event
{
4 | listeners = new Set>()
5 |
6 | constructor() {
7 | this.emit = this.emit.bind(this)
8 | }
9 |
10 | clear() {
11 | this.listeners.clear()
12 | }
13 |
14 | addListener(listener: Listener) {
15 | this.listeners.add(listener)
16 | return () => this.removeListener(listener)
17 | }
18 |
19 | removeListener(listener: Listener
) {
20 | this.listeners.delete(listener)
21 | }
22 |
23 | emit(payload: P) {
24 | for (const listener of this.listeners) {
25 | listener(payload)
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/hmans-event/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/hmans-r3f-create-loader/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @hmans/r3f-create-loader
2 |
3 | ## 0.0.3
4 |
5 | ### Patch Changes
6 |
7 | - cb0001d: **Fixed:** Improved typings.
8 |
9 | ## 0.0.2
10 |
11 | ### Patch Changes
12 |
13 | - 5218618: **Fixed:** Added a simple README :-)
14 |
--------------------------------------------------------------------------------
/packages/hmans-r3f-create-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@hmans/r3f-create-loader",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.0.3",
10 | "main": "dist/hmans-r3f-create-loader.cjs.js",
11 | "module": "dist/hmans-r3f-create-loader.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "@react-three/fiber": "^8.8.7"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/hmans-r3f-create-loader/src/index.ts:
--------------------------------------------------------------------------------
1 | import { LoaderResult, useLoader } from "@react-three/fiber"
2 |
3 | /**
4 | * Creates and returns a loader hook for the given asset, and immediately
5 | * queues the asset for preloading.
6 | *
7 | * @param loader The loader class to use for loading the asset.
8 | * @param url The URL of the asset.
9 | * @returns The loader hook you can use in your component to access the asset.
10 | */
11 | export const createLoader = (
12 | loader: new () => LoaderResult,
13 | url: string
14 | ) => {
15 | useLoader.preload(loader, url)
16 | return () => useLoader(loader, url)
17 | }
18 |
--------------------------------------------------------------------------------
/packages/hmans-r3f-create-loader/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/hmans-use-mutable-list/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @hmans/use-mutable-list
2 |
3 | ## 0.0.2
4 |
5 | ### Patch Changes
6 |
7 | - 2a56a89: The mutable list API now also contains a `useItem` hook that makes adding something to the list much more convenient.
8 |
--------------------------------------------------------------------------------
/packages/hmans-use-mutable-list/README.md:
--------------------------------------------------------------------------------
1 | # useMutableList
2 |
--------------------------------------------------------------------------------
/packages/hmans-use-mutable-list/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@hmans/use-mutable-list",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.0.2",
10 | "main": "dist/hmans-use-mutable-list.cjs.js",
11 | "module": "dist/hmans-use-mutable-list.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/hmans-use-mutable-list/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/hmans-use-nullable-state/README.md:
--------------------------------------------------------------------------------
1 | # useNullableState
2 |
--------------------------------------------------------------------------------
/packages/hmans-use-nullable-state/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@hmans/use-nullable-state",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.0.1",
10 | "main": "dist/hmans-use-nullable-state.cjs.js",
11 | "module": "dist/hmans-use-nullable-state.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/hmans-use-nullable-state/src/index.ts:
--------------------------------------------------------------------------------
1 | import { useState } from "react"
2 |
3 | export const useNullableState = (initialValue: T | (() => T) = null!) =>
4 | useState(initialValue)
5 |
--------------------------------------------------------------------------------
/packages/hmans-use-nullable-state/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/input-composer/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # input-composer
2 |
3 | ## 0.0.2
4 |
5 | ### Patch Changes
6 |
7 | - 362dac2: First release with some actual input composition bits. :-)
8 |
--------------------------------------------------------------------------------
/packages/input-composer/README.md:
--------------------------------------------------------------------------------
1 | # Input Composer
2 |
--------------------------------------------------------------------------------
/packages/input-composer/react/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/input-composer-react.cjs.js",
3 | "module": "dist/input-composer-react.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/input-composer/src/lib/event.ts:
--------------------------------------------------------------------------------
1 | export type Listener = (payload: P) => void
2 |
3 | export class Event
{
4 | listeners = new Set>()
5 |
6 | constructor() {
7 | this.emit = this.emit.bind(this)
8 | }
9 |
10 | clear() {
11 | this.listeners.clear()
12 | }
13 |
14 | addListener(listener: Listener) {
15 | this.listeners.add(listener)
16 | return () => this.removeListener(listener)
17 | }
18 |
19 | removeListener(listener: Listener
) {
20 | this.listeners.delete(listener)
21 | }
22 |
23 | emit(payload: P) {
24 | for (const listener of this.listeners) {
25 | listener(payload)
26 | }
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/packages/input-composer/src/react.tsx:
--------------------------------------------------------------------------------
1 | import { useFrame } from "@react-three/fiber"
2 | import { useEffect } from "react"
3 | import { Controller as ControllerImpl } from "./index"
4 |
5 | export const useController = (
6 | controller: ControllerImpl,
7 | renderPriority?: number
8 | ) => {
9 | useEffect(() => {
10 | controller.start()
11 | return () => controller.stop()
12 | })
13 |
14 | useFrame(() => {
15 | controller.update()
16 | }, renderPriority)
17 | }
18 |
19 | export const Controller = ({
20 | controller,
21 | updatePriority
22 | }: {
23 | controller: ControllerImpl
24 | updatePriority?: number
25 | }) => {
26 | useController(controller, updatePriority)
27 | return null
28 | }
29 |
--------------------------------------------------------------------------------
/packages/input-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer-patch-material/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@material-composer/patch-material",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hendrik.mans.de"
7 | },
8 | "description": "",
9 | "version": "0.1.3",
10 | "main": "dist/material-composer-patch-material.cjs.js",
11 | "module": "dist/material-composer-patch-material.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | "@babel/preset-typescript"
27 | ]
28 | },
29 | "devDependencies": {
30 | "@shader-composer/core": "workspace:^0.4.9"
31 | },
32 | "peerDependencies": {
33 | "@shader-composer/core": ">=0.4.9",
34 | "three": ">=0.141.0"
35 | },
36 | "dependencies": {
37 | "@hmans/types": "^0.0.3",
38 | "fp-ts": "^2.12.3"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/material-composer-patch-material/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./root"
2 | export * from "./patchMaterial"
3 |
--------------------------------------------------------------------------------
/packages/material-composer-patch-material/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer-patched/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./patched"
2 |
3 | /* TODO: remove legacy API in a future version */
4 | export { Patched as patched } from "./patched"
5 |
--------------------------------------------------------------------------------
/packages/material-composer-patched/src/lib/useManagedInstance.tsx:
--------------------------------------------------------------------------------
1 | import { DependencyList, useLayoutEffect, useMemo } from "react"
2 |
3 | export const useManagedPrimitive = (
4 | factory: () => T,
5 | deps: DependencyList = []
6 | ) => {
7 | const instance = useMemo(() => factory(), deps)
8 | useLayoutEffect(() => () => (instance as any).dispose?.(), [instance])
9 | return instance
10 | }
11 |
--------------------------------------------------------------------------------
/packages/material-composer-patched/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/README.md:
--------------------------------------------------------------------------------
1 | # material-composer-r3f
2 |
3 | ...needs a README :-)
4 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/src/Layer.tsx:
--------------------------------------------------------------------------------
1 | import { Layer as LayerImpl, LayerArgs } from "material-composer"
2 | import React, { ReactNode, useMemo } from "react"
3 | import { useDetectShallowChange } from "./lib/use-detect-shallow-change"
4 | import {
5 | ModuleRegistrationContext,
6 | provideModuleRegistration,
7 | useModuleRegistration
8 | } from "./moduleRegistration"
9 |
10 | export type LayerProps = LayerArgs & { children?: ReactNode }
11 |
12 | export const Layer = ({ children, ...props }: LayerProps) => {
13 | const modules = provideModuleRegistration()
14 |
15 | /* Recreate the layer every time the props or modules change */
16 | const layer = useMemo(() => {
17 | return LayerImpl({ ...props, modules: modules.list })
18 | }, [modules.version, useDetectShallowChange(props)])
19 |
20 | /* Register it with the parent */
21 | useModuleRegistration(layer)
22 |
23 | return (
24 |
25 | {children}
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "@material-composer/patch-material"
2 | export * from "@material-composer/patched"
3 | export * from "./composable"
4 | export * from "./Layer"
5 | export { moduleComponent, ModuleReactor as Modules } from "./reactor"
6 |
7 | /* Legacy */
8 | /* TODO: remove in future version */
9 | export { Composable as composable } from "./composable"
10 | export { ModuleReactor as modules } from "./reactor"
11 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/src/lib/use-detect-shallow-change.tsx:
--------------------------------------------------------------------------------
1 | import { useRef } from "react"
2 |
3 | export const useDetectShallowChange = (props: { [key: string]: any }) => {
4 | const version = useRef(0)
5 | const previousProps = useRef()
6 |
7 | const changed =
8 | /* If we don't have a previous state, we have a change! */
9 | !previousProps.current ||
10 | /* If the number of props has changed, we have a change! */
11 | Object.keys(props).length !== Object.keys(previousProps.current).length ||
12 | /* If any of the props have changed, we have a change! */
13 | Object.keys(props).some((key) => {
14 | return !Object.is(previousProps.current[key], props[key])
15 | })
16 |
17 | /* Remember the props for the next render. */
18 | previousProps.current = props
19 |
20 | return changed ? ++version.current : version
21 | }
22 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/src/moduleRegistration.tsx:
--------------------------------------------------------------------------------
1 | import { MutableListAPI, useMutableList } from "@hmans/use-mutable-list"
2 | import { Module } from "material-composer"
3 | import { createContext, useContext } from "react"
4 |
5 | export const ModuleRegistrationContext = createContext>(
6 | null!
7 | )
8 |
9 | export const provideModuleRegistration = () => useMutableList()
10 |
11 | export const useModuleRegistration = (module: Module) => {
12 | const api = useContext(ModuleRegistrationContext)
13 | api.useItem(module)
14 | }
15 |
--------------------------------------------------------------------------------
/packages/material-composer-r3f/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
--------------------------------------------------------------------------------
/packages/material-composer/modules/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/material-composer-modules.cjs.js",
3 | "module": "dist/material-composer-modules.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer/src/compileModules.ts:
--------------------------------------------------------------------------------
1 | import { PatchedMaterialRoot } from "@material-composer/patch-material"
2 | import { initialModuleState, Module, pipeModules } from "."
3 |
4 | /**
5 | * Compiles a list of Material Composer modules into a shader graph that
6 | * can be consumed by Shader Composer's `composeShader` function.
7 | *
8 | * @param modules A list of Material Composer modules (see `Module`)
9 | * @returns A shader root node that can be passed to `compileShader`
10 | */
11 | export const compileModules = (modules: Module[]) => {
12 | /* Transform state with given modules. */
13 | const state = pipeModules(initialModuleState(), ...modules)
14 |
15 | /* Construct a shader root unit */
16 | return PatchedMaterialRoot(state)
17 | }
18 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Acceleration.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/function"
2 | import { Input, Mul, Pow } from "shader-composer"
3 | import { ModuleFactory } from ".."
4 | import { Space, Translate } from "./Translate"
5 |
6 | export type AccelerationProps = {
7 | direction: Input<"vec3">
8 | time: Input<"float">
9 | space?: Space
10 | }
11 |
12 | export const Acceleration: ModuleFactory = ({
13 | direction,
14 | time,
15 | space = "world"
16 | }) =>
17 | Translate({
18 | space,
19 | offset: pipe(
20 | direction,
21 | (v) => Mul(v, Pow(time, 2)),
22 | (v) => Mul(v, 0.5)
23 | )
24 | })
25 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Billboard.ts:
--------------------------------------------------------------------------------
1 | import { ModuleFactory } from ".."
2 | import { Billboard as BillboardUnit } from "shader-composer-toybox"
3 |
4 | export const Billboard: ModuleFactory = () => (state) => ({
5 | ...state,
6 | position: BillboardUnit(state.position)
7 | })
8 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Fresnel.ts:
--------------------------------------------------------------------------------
1 | import { Fresnel as FresnelUnit, FresnelProps } from "shader-composer"
2 | import { ModuleFactory } from ".."
3 | import { Layer } from "../Layer"
4 | import { Color } from "./Color"
5 |
6 | export type FresnelArgs = FresnelProps
7 |
8 | export const Fresnel: ModuleFactory = (props) =>
9 | Layer({
10 | opacity: FresnelUnit(props),
11 | modules: [Color({ color: "white" })]
12 | })
13 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Lifetime.ts:
--------------------------------------------------------------------------------
1 | import { $, Input, Vec3 } from "shader-composer"
2 | import { ModuleFactory } from ".."
3 |
4 | export const Lifetime: ModuleFactory<{ progress: Input<"float"> }> = ({
5 | progress
6 | }) => (state) => ({
7 | ...state,
8 | color: Vec3(state.color, {
9 | fragment: {
10 | body: $`if (${progress} < 0.0 || ${progress} > 1.0) discard;`
11 | }
12 | })
13 | })
14 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Rotate.ts:
--------------------------------------------------------------------------------
1 | import { ModuleFactory } from ".."
2 | import { Input, Mat3, Mul } from "shader-composer"
3 |
4 | type RotateProps = {
5 | rotation: Input<"mat3" | "mat4">
6 | normal?: boolean
7 | }
8 |
9 | export const Rotate: ModuleFactory = ({ rotation, normal = true }) => (
10 | state
11 | ) => ({
12 | ...state,
13 | normal: normal ? Mul(state.normal, Mat3(rotation)) : state.normal,
14 | position: Mul(state.position, Mat3(rotation))
15 | })
16 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Scale.ts:
--------------------------------------------------------------------------------
1 | import { ModuleFactory } from ".."
2 | import { Input, Mul } from "shader-composer"
3 |
4 | type ScaleProps = {
5 | scale: Input<"float">
6 | }
7 |
8 | export const Scale: ModuleFactory = ({ scale = 1 }) => (state) => ({
9 | ...state,
10 | position: Mul(state.position, scale)
11 | })
12 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Softness.ts:
--------------------------------------------------------------------------------
1 | import { Input, Mul, Unit } from "shader-composer"
2 | import { Softness as SoftnessUnit } from "shader-composer-toybox"
3 | import { ModuleFactory } from ".."
4 |
5 | export const Softness: ModuleFactory<{
6 | softness: Input<"float">
7 | depthTexture: Unit<"sampler2D">
8 | }> = ({ softness, depthTexture }) => (state) => ({
9 | ...state,
10 | alpha: Mul(state.alpha, SoftnessUnit(softness, state.position, depthTexture))
11 | })
12 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/SurfaceWobble.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/function"
2 | import { Add, Input, Mul, PSRDNoise3D } from "shader-composer"
3 | import { ModuleFactory } from ".."
4 |
5 | export type SurfaceWobbleProps = {
6 | offset?: Input<"vec3" | "float">
7 | amplitude?: Input<"float">
8 | frequency?: Input<"float">
9 | }
10 |
11 | export const SurfaceWobble: ModuleFactory =
12 | ({ offset = 1, amplitude = 1, frequency = 1 }) =>
13 | (state) => {
14 | const displacement = pipe(
15 | state.position,
16 | (v) => Mul(v, frequency),
17 | (v) => Add(v, offset),
18 | (v) => PSRDNoise3D(v),
19 | (v) => Mul(v, amplitude)
20 | )
21 |
22 | const position = pipe(
23 | displacement,
24 | (v) => Mul(state.normal, v),
25 | (v) => Add(state.position, v)
26 | )
27 |
28 | return { ...state, position }
29 | }
30 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/Velocity.ts:
--------------------------------------------------------------------------------
1 | import { Input, Mul } from "shader-composer"
2 | import { Space, Translate } from "./Translate"
3 |
4 | type VelocityProps = {
5 | direction: Input<"vec3">
6 | time: Input<"float">
7 | space?: Space
8 | }
9 |
10 | export const Velocity = ({ direction, time, space = "world" }: VelocityProps) =>
11 | Translate({ offset: Mul(direction, time), space })
12 |
--------------------------------------------------------------------------------
/packages/material-composer/src/modules/index.ts:
--------------------------------------------------------------------------------
1 | import { Module } from ".."
2 |
3 | export * from "./Acceleration"
4 | export * from "./Alpha"
5 | export * from "./Billboard"
6 | export * from "./Color"
7 | export * from "./Fresnel"
8 | export * from "./Gradient"
9 | export * from "./Lifetime"
10 | export * from "./Rotate"
11 | export * from "./Scale"
12 | export * from "./Softness"
13 | export * from "./SurfaceWobble"
14 | export * from "./Texture"
15 | export * from "./Translate"
16 | export * from "./Velocity"
17 |
18 | export const CustomModule = ({ module }: { module: Module }): Module => module
19 |
--------------------------------------------------------------------------------
/packages/material-composer/src/units/experiments.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/function"
2 | import { Add, Clamp01, Input, Mul, Pow, Turbulence3D } from "shader-composer"
3 |
4 | export type HeatOptions = {
5 | offset?: Input<"vec3" | "float">
6 | scale?: Input<"float">
7 | octaves?: number
8 | power?: Input<"float">
9 | }
10 |
11 | export const Heat = (
12 | v: Input<"vec3">,
13 | { offset = [0, 0, 0], scale = 1, octaves = 5, power = 1 }: HeatOptions
14 | ) =>
15 | pipe(
16 | v,
17 | (v) => Add(v, offset),
18 | (v) => Mul(v, scale),
19 | (v) => Turbulence3D(v, octaves),
20 | (v) => Add(v, 0.5),
21 | (v) => Clamp01(v),
22 | (v) => Pow(v, power)
23 | )
24 |
--------------------------------------------------------------------------------
/packages/material-composer/src/units/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./experiments"
2 |
--------------------------------------------------------------------------------
/packages/material-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/material-composer/units/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/material-composer-units.cjs.js",
3 | "module": "dist/material-composer-units.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/Application.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC } from "react"
2 | import { ThreeApplication, ThreeApplicationProps } from "./ThreeApplication"
3 | import { UI } from "./ui/UI"
4 |
5 | export type ApplicationProps = {} & ThreeApplicationProps
6 |
7 | export const Application: FC = ({ ...props }) => {
8 | return (
9 | <>
10 |
11 |
12 |
13 | )
14 | }
15 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/Example.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode, Suspense } from "react"
2 | import { Link, Redirect, Route } from "wouter"
3 | import { Spinner } from "./Spinner"
4 | import { navigationTunnel } from "./ui/UI"
5 |
6 | export type ExampleProps = {
7 | children?: ReactNode
8 | path: string
9 | title?: string
10 | makeDefault?: boolean
11 | }
12 |
13 | export const Example = ({ children, path, title, makeDefault = false }: ExampleProps) => {
14 | const url = `/examples/${path}`
15 |
16 | return (
17 | <>
18 |
19 | {title || path}
20 |
21 |
22 |
23 | }>{children}
24 |
25 |
26 | {makeDefault && (
27 |
28 |
29 |
30 | )}
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/Spinner.tsx:
--------------------------------------------------------------------------------
1 | import { useFrame } from "@react-three/fiber"
2 | import React, { useRef } from "react"
3 | import { Mesh } from "three"
4 |
5 | export const Spinner = () => {
6 | const mesh = useRef(null!)
7 |
8 | useFrame(({ clock }, dt) => {
9 | const a = Math.pow((Math.sin(clock.elapsedTime * 7) + 2) * 0.5, 3)
10 | mesh.current.rotation.y += (1 + a) * dt
11 | })
12 |
13 | return (
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/index.ts:
--------------------------------------------------------------------------------
1 | export { Layers, useRenderPipeline } from "render-composer"
2 | export { Application } from "./Application"
3 | export * from "./Example"
4 | export * from "./stages"
5 | export * from "./ui/Description"
6 | export * from "./ui/Heading"
7 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/stages/FlatStage.tsx:
--------------------------------------------------------------------------------
1 | import { GroupProps } from "@react-three/fiber"
2 | import { ColorRepresentation } from "three"
3 | import React from "react"
4 |
5 | export type FlatStageProps = GroupProps & { color?: ColorRepresentation }
6 |
7 | export const FlatStage = ({ children, color = "#555", ...props }: FlatStageProps) => (
8 |
9 |
10 |
11 |
12 |
13 |
14 | {children}
15 |
16 | )
17 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/stages/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./FlatStage"
2 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/ui/Description.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import { descriptionTunnel } from "./UI"
3 |
4 | export type DescriptionProps = { children: React.ReactNode }
5 |
6 | export const Description = ({ children }: DescriptionProps) => {
7 | return {children}
8 | }
9 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/ui/Heading.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react"
2 | import { navigationTunnel } from "./UI"
3 |
4 | export type HeadingProps = {
5 | children: ReactNode
6 | }
7 |
8 | export const Heading = ({ children }: HeadingProps) => (
9 |
10 | {children}
11 |
12 | )
13 |
--------------------------------------------------------------------------------
/packages/r3f-stage/src/ui/UI.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | import tunnel from "../lib/tunnel-rat"
3 |
4 | export const descriptionTunnel = tunnel()
5 | export const navigationTunnel = tunnel()
6 |
7 | export const UI = () => {
8 | return (
9 | <>
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 | )
19 | }
20 |
--------------------------------------------------------------------------------
/packages/r3f-stage/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/render-composer/src/Canvas.tsx:
--------------------------------------------------------------------------------
1 | import * as R3F from "@react-three/fiber"
2 | import React, { StrictMode } from "react"
3 |
4 | export type CanvasProps = R3F.Props & {
5 | /** When true, enables React's StrictMode. */
6 | strict?: boolean
7 | }
8 |
9 | export const Canvas = ({ strict = false, children, ...props }: CanvasProps) => (
10 | {children} : children}
21 | {...props}
22 | />
23 | )
24 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/GodRaysEffect.tsx:
--------------------------------------------------------------------------------
1 | import { useThree } from "@react-three/fiber"
2 | import * as PP from "postprocessing"
3 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
4 |
5 | export type GodRaysEffectProps = {
6 | lightSource: ConstructorParameters[1]
7 | } & ConstructorParameters[2]
8 |
9 | export const GodRaysEffect = ({
10 | lightSource,
11 | ...props
12 | }: GodRaysEffectProps) => {
13 | const camera = useThree((s) => s.camera)
14 | usePostProcessingEffect(
15 | () => new PP.GodRaysEffect(camera, lightSource, props),
16 | { lightSource, ...props }
17 | )
18 | return null
19 | }
20 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/NoiseEffect.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
3 |
4 | export type NoiseEffectProps = ConstructorParameters<
5 | typeof PP.NoiseEffect
6 | >[0] & { opacity?: number }
7 |
8 | export const NoiseEffect = ({
9 | blendFunction = PP.BlendFunction.NORMAL,
10 | premultiply,
11 | opacity = 1
12 | }: NoiseEffectProps) => {
13 | usePostProcessingEffect(
14 | () => new PP.NoiseEffect({ blendFunction, premultiply }),
15 | { blendMode: new PP.BlendMode(blendFunction, opacity) }
16 | )
17 | return null
18 | }
19 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/SMAAEffect.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
3 |
4 | export const SMAAEffect = (
5 | props: ConstructorParameters[0]
6 | ) => {
7 | usePostProcessingEffect(() => new PP.SMAAEffect(props), props)
8 | return null
9 | }
10 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/SelectiveBloomEffect.tsx:
--------------------------------------------------------------------------------
1 | import { useThree } from "@react-three/fiber"
2 | import * as PP from "postprocessing"
3 | import { useLayoutEffect } from "react"
4 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
5 |
6 | export const SelectiveBloomEffect = (
7 | props: ConstructorParameters[2]
8 | ) => {
9 | const scene = useThree((s) => s.scene)
10 | const camera = useThree((s) => s.camera)
11 |
12 | const effect = usePostProcessingEffect(
13 | () =>
14 | new PP.SelectiveBloomEffect(scene, camera, {
15 | blendFunction: PP.BlendFunction.ADD,
16 | mipmapBlur: true,
17 | luminanceThreshold: 1,
18 | luminanceSmoothing: 0.2,
19 | intensity: 1,
20 | ...props
21 | }),
22 | props
23 | )
24 |
25 | useLayoutEffect(() => {
26 | effect.inverted = true
27 | }, [effect])
28 |
29 | return null
30 | }
31 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/TextureEffect.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
3 |
4 | export const TextureEffect = (
5 | props: ConstructorParameters[0]
6 | ) => {
7 | usePostProcessingEffect(() => new PP.TextureEffect(props), props)
8 | return null
9 | }
10 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/TiltShiftEffect.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
3 |
4 | export const TiltShiftEffect = (
5 | props: ConstructorParameters[0]
6 | ) => {
7 | usePostProcessingEffect(() => new PP.TiltShiftEffect(props), props)
8 | return null
9 | }
10 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/VignetteEffect.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { usePostProcessingEffect } from "../lib/usePostProcessingEffect"
3 |
4 | export const VignetteEffect = (
5 | props: ConstructorParameters[0]
6 | ) => {
7 | usePostProcessingEffect(() => new PP.VignetteEffect(props), props)
8 | return null
9 | }
10 |
--------------------------------------------------------------------------------
/packages/render-composer/src/effects/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./GodRaysEffect"
2 | export * from "./LensDirtEffect"
3 | export * from "./TiltShiftEffect"
4 | export * from "./NoiseEffect"
5 | export * from "./SelectiveBloomEffect"
6 | export * from "./SMAAEffect"
7 | export * from "./TextureEffect"
8 | export * from "./VignetteEffect"
9 |
--------------------------------------------------------------------------------
/packages/render-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Canvas"
2 | export * from "./EffectComposer"
3 | export * from "./effects"
4 | export * from "./lib/bitmask"
5 | export * from "./passes"
6 | export * from "./DefaultRenderPipeline"
7 |
8 | /* Temporary, until we have a better API */
9 | export { usePostProcessingEffect } from "./lib/usePostProcessingEffect"
10 |
--------------------------------------------------------------------------------
/packages/render-composer/src/lib/bitmask.ts:
--------------------------------------------------------------------------------
1 | export const bitmask = (...groups: number[]) =>
2 | groups.reduce((acc, layer) => acc | (1 << layer), 0)
3 |
4 | const not = (...groups: number[]) => ~bitmask(...groups)
5 |
6 | bitmask.not = not
7 |
--------------------------------------------------------------------------------
/packages/render-composer/src/lib/usePostProcessingEffect.tsx:
--------------------------------------------------------------------------------
1 | import { useThree } from "@react-three/fiber"
2 | import * as PP from "postprocessing"
3 | import { useContext, useLayoutEffect, useMemo } from "react"
4 | import { EffectPassContext } from "../passes/EffectPass"
5 |
6 | export const usePostProcessingEffect = (
7 | ctor: () => T,
8 | props: P
9 | ) => {
10 | /* Create effect */
11 | const effect = useMemo(ctor, [])
12 |
13 | /* Update props on rerender */
14 | useLayoutEffect(() => {
15 | Object.assign(effect, props)
16 | }, [effect, props])
17 |
18 | /* Handle resolution changes */
19 | const size = useThree((s) => s.size)
20 | useLayoutEffect(() => {
21 | effect.setSize(size.width, size.height)
22 | }, [effect, size.width, size.height])
23 |
24 | /* Register with the effect pass */
25 | useContext(EffectPassContext).useItem(effect)
26 |
27 | return effect
28 | }
29 |
--------------------------------------------------------------------------------
/packages/render-composer/src/passes/CopyPass.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { forwardRef, useContext, useImperativeHandle, useMemo } from "react"
3 | import { EffectComposerContext } from "../EffectComposer"
4 |
5 | export const CopyPass = forwardRef((_, ref) => {
6 | const pass = useMemo(() => new PP.CopyPass(), [])
7 | useContext(EffectComposerContext).useItem(pass)
8 | useImperativeHandle(ref, () => pass)
9 | return null
10 | })
11 |
--------------------------------------------------------------------------------
/packages/render-composer/src/passes/DepthCopyPass.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { forwardRef, useContext, useImperativeHandle, useMemo } from "react"
3 | import { BasicDepthPacking } from "three"
4 | import { EffectComposerContext } from "../EffectComposer"
5 |
6 | export const DepthCopyPass = forwardRef((_, ref) => {
7 | const pass = useMemo(
8 | () => new PP.DepthCopyPass({ depthPacking: BasicDepthPacking }),
9 | []
10 | )
11 |
12 | useImperativeHandle(ref, () => pass)
13 |
14 | useContext(EffectComposerContext).useItem(pass)
15 |
16 | return null
17 | })
18 |
--------------------------------------------------------------------------------
/packages/render-composer/src/passes/LambdaPass.tsx:
--------------------------------------------------------------------------------
1 | import * as PP from "postprocessing"
2 | import { forwardRef, useContext, useImperativeHandle, useMemo } from "react"
3 | import { EffectComposerContext } from "../EffectComposer"
4 |
5 | export type LambdaPassProps = {
6 | fun: Function
7 | }
8 |
9 | export const LambdaPass = forwardRef(
10 | ({ fun }, ref) => {
11 | const pass = useMemo(() => new PP.LambdaPass(fun), [])
12 | useContext(EffectComposerContext).useItem(pass)
13 | useImperativeHandle(ref, () => pass)
14 | return null
15 | }
16 | )
17 |
--------------------------------------------------------------------------------
/packages/render-composer/src/passes/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./CopyPass"
2 | export * from "./DepthCopyPass"
3 | export * from "./EffectPass"
4 | export * from "./LambdaPass"
5 | export * from "./LayerRenderPass"
6 | export * from "./RenderPass"
7 |
--------------------------------------------------------------------------------
/packages/render-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shader-composer/core",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.4.9",
10 | "main": "dist/shader-composer-core.cjs.js",
11 | "module": "dist/shader-composer-core.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": true,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-typescript"
26 | ]
27 | },
28 | "dependencies": {
29 | "fp-ts": "^2.12.3"
30 | },
31 | "devDependencies": {
32 | "gl-matrix": "^3.4.3",
33 | "three": ">=0.141.0"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/debug.ts:
--------------------------------------------------------------------------------
1 | export let DEBUG = false
2 |
3 | export const enableDebugging = () => {
4 | DEBUG = true
5 | }
6 |
7 | export const disableDebugging = () => {
8 | DEBUG = false
9 | }
10 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/expressions.ts:
--------------------------------------------------------------------------------
1 | import { glslRepresentation } from "./glslRepresentation"
2 |
3 | const zip = (a: TemplateStringsArray, b: any[]) => a.map((k, i) => [k, b[i]])
4 |
5 | export type Expression = {
6 | _: "Expression"
7 | values: any[]
8 | render: () => string
9 | toString: () => string
10 | }
11 |
12 | export const glsl = (strings: TemplateStringsArray, ...values: any[]): Expression => {
13 | const render = () =>
14 | zip(
15 | strings,
16 | values.map((v) => glslRepresentation(v))
17 | )
18 | .flat()
19 | .join("")
20 |
21 | return {
22 | _: "Expression",
23 | values,
24 | render,
25 | toString: render
26 | }
27 | }
28 |
29 | /** A shortcut for the `glsl` tagged template literal helper. */
30 | export const $ = glsl
31 |
32 | export function isExpression(v: any): v is Expression {
33 | return v && v._ === "Expression"
34 | }
35 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/index.ts:
--------------------------------------------------------------------------------
1 | export { compileShader } from "./compiler"
2 | export { disableDebugging, enableDebugging } from "./debug"
3 | export * from "./expressions"
4 | export * from "./glslType"
5 | export * from "./snippets"
6 | export * from "./stdlib"
7 | export * from "./ticker"
8 | export * from "./tree"
9 | export * from "./units"
10 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/snippets.ts:
--------------------------------------------------------------------------------
1 | import { Expression } from "./expressions"
2 |
3 | export type Snippet = {
4 | _: "Snippet"
5 | name: string
6 | render: (name: string) => Expression
7 | expression: Expression
8 | }
9 |
10 | export const Snippet = (render: (name: string) => Expression): Snippet => {
11 | /* Start with a randomized name. The compiler will assign a deterministic name in its prepare step. */
12 | const name = `uninitialized_snippet_${Math.floor(Math.random() * 1000000)}`
13 |
14 | return {
15 | _: "Snippet",
16 | name,
17 | render,
18 | expression: render(name)
19 | }
20 | }
21 |
22 | export const renameSnippet = (snippet: Snippet, name: string) => {
23 | snippet.name = name
24 | snippet.expression = snippet.render(name)
25 | }
26 |
27 | export function isSnippet(x: any): x is Snippet {
28 | return x && x._ === "Snippet"
29 | }
30 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/stdlib/index.ts:
--------------------------------------------------------------------------------
1 | /** @packageDocumentation
2 | * The `shader-composer/stdlib` module contains a core collection of Shader unit implementations.
3 | */
4 |
5 | export * from "./artistic"
6 | export * from "./logic"
7 | export * from "./math"
8 | export * from "./roots"
9 | export * from "./rotation"
10 | export * from "./scene"
11 | export * from "./spaces"
12 | export * from "./textures"
13 | export * from "./values"
14 | export * from "./variables"
15 | export * from "./vectors"
16 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/stdlib/logic.ts:
--------------------------------------------------------------------------------
1 | import { $ } from "../expressions"
2 | import { type } from "../glslType"
3 | import { GLSLType, Unit, Input } from "../units"
4 | import { Bool } from "./values"
5 |
6 | export const If = (
7 | expression: Input<"bool">,
8 | then: Input,
9 | else_: Input
10 | ) => Unit(type(then) as T, $`(${expression} ? ${then} : ${else_})`)
11 |
12 | export const GreaterOrEqual = (a: Input, b: Input) =>
13 | Bool($`(${a} >= ${b})`)
14 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/stdlib/textures.ts:
--------------------------------------------------------------------------------
1 | import { $ } from "../expressions"
2 | import { Input, Unit } from "../units"
3 | import { Float, Vec3, Vec4 } from "./values"
4 |
5 | export const Texture2D = (sampler2D: Unit<"sampler2D">, xy: Input<"vec2">) => {
6 | const texture2D = Vec4($`texture2D(${sampler2D}, ${xy})`, {
7 | name: "Texture2D"
8 | })
9 |
10 | return {
11 | ...texture2D,
12 |
13 | /** The color value sampled from the texture. */
14 | color: Vec3($`${texture2D}.rgb`, { name: "Texture2D Color" }),
15 |
16 | /** The alpha value sampled from the texture. */
17 | alpha: Float($`${texture2D}.a`, { name: "Texture2D Alpha" })
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/stdlib/variables.test.ts:
--------------------------------------------------------------------------------
1 | import { glslRepresentation } from "../glslRepresentation"
2 | import { UniformUnit } from "./variables"
3 |
4 | describe("Uniform", () => {
5 | it("uses its uniform name as its string representation", () => {
6 | const uniform = UniformUnit("float", 0, { variableName: "foo" })
7 | expect(glslRepresentation(uniform)).toBe("u_foo")
8 | })
9 |
10 | it("uses u_variableName as the default name if none other is given", () => {
11 | const uniform = UniformUnit("float", 0, { variableName: "foo123" })
12 | expect(glslRepresentation(uniform)).toBe("u_foo123")
13 | })
14 |
15 | it("allows the user to set a uniform name explicitly", () => {
16 | const uniform = UniformUnit("float", 0, {
17 | variableName: "foo",
18 | uniformName: "u_bar"
19 | })
20 | expect(glslRepresentation(uniform)).toBe("u_bar")
21 | })
22 | })
23 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/ticker.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * An object containing information about the current frame.
3 | */
4 | export const frame = {
5 | /**
6 | * The current frame time, in seconds. This value does not change
7 | * over the course of a single frame.
8 | */
9 | time: performance.now() / 1000,
10 |
11 | /**
12 | * The current frame count.
13 | */
14 | count: 0
15 | }
16 |
17 | function tick() {
18 | requestAnimationFrame(tick)
19 |
20 | frame.time = performance.now() / 1000
21 | frame.count++
22 | }
23 |
24 | requestAnimationFrame(tick)
25 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/util/concatenator3000.ts:
--------------------------------------------------------------------------------
1 | export type Part = any
2 |
3 | export const isPresent = (p: Part) => !!p
4 |
5 | export const concatenate = (...parts: Part[]): string =>
6 | parts
7 | .flat(Infinity)
8 | .filter(isPresent)
9 | .join("\n")
10 |
11 | export const identifier = (...parts: Part[]): string =>
12 | parts
13 | .filter(isPresent)
14 | .join("_")
15 | .replace(/_{2,}/g, "_")
16 |
17 | export const statement = (...parts: Part[]): string =>
18 | parts.filter(isPresent).join(" ") + ";"
19 |
20 | export const assignment = (...parts: Part[]): string => statement(parts.join(" = "))
21 |
22 | export const block = (...parts: Part[]): Part[] => [
23 | "{",
24 | concatenate(parts)
25 | .split("\n")
26 | .map((line) => " " + line)
27 | .join("\n"),
28 | "}"
29 | ]
30 |
31 | export const sluggify = (s: string) => s.replace(/[^a-zA-Z0-9]/g, "_")
32 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/util/idGenerator.ts:
--------------------------------------------------------------------------------
1 | export default (initial = 0) => () => ++initial
2 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/src/vendor/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./glsl-rotate"
2 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/test/expressions.test.ts:
--------------------------------------------------------------------------------
1 | import { $, glsl, isExpression } from "../src/expressions"
2 |
3 | describe("glsl", () => {
4 | it("creates an Expression instance", () => {
5 | const expr = glsl`foo = bar;`
6 | expect(isExpression(expr)).toBe(true)
7 | })
8 |
9 | it("renders to a string through the render() function", () => {
10 | const expr = glsl`foo = bar;`
11 | expect(expr.render()).toBe("foo = bar;")
12 | })
13 |
14 | it("handles nested values", () => {
15 | const expr = $`foo = vec3(${[1, 2, 3]})`
16 | expect(expr.render()).toBe("foo = vec3(vec3(1.0, 2.0, 3.0))")
17 | })
18 | })
19 |
--------------------------------------------------------------------------------
/packages/shader-composer-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/README.md:
--------------------------------------------------------------------------------
1 | # shader-composer-r3f
2 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shader-composer/noise",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "A collection of noise-generating Shader Composer units.",
9 | "version": "0.4.9",
10 | "main": "dist/shader-composer-noise.cjs.js",
11 | "module": "dist/shader-composer-noise.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-typescript"
26 | ]
27 | },
28 | "peerDependencies": {
29 | "@shader-composer/core": ">=0.4.9"
30 | },
31 | "devDependencies": {
32 | "@shader-composer/core": "workspace:^0.4.9"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./FBMNoise"
2 | export * from "./GerstnerWave"
3 | export * from "./PerlinNoise"
4 | export * from "./PSRDNoise"
5 | export * from "./Simplex3DNoise"
6 | export * from "./turbulence"
7 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/mod289.ts:
--------------------------------------------------------------------------------
1 | import { glsl, Snippet } from "@shader-composer/core"
2 |
3 | export const mod289 = Snippet(
4 | (name) => glsl`
5 | vec3 ${name}(vec3 x)
6 | {
7 | return x - floor(x * (1.0 / 289.0)) * 289.0;
8 | }
9 |
10 | vec4 ${name}(vec4 x)
11 | {
12 | return x - floor(x * (1.0 / 289.0)) * 289.0;
13 | }
14 | `
15 | )
16 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/permute.ts:
--------------------------------------------------------------------------------
1 | import { glsl, Snippet } from "@shader-composer/core"
2 | import { mod289 } from "./mod289"
3 |
4 | export const permute = Snippet(
5 | (name) =>
6 | glsl`
7 | vec4 ${name}(vec4 x)
8 | {
9 | return ${mod289}(((x*34.0)+10.0)*x);
10 | }
11 | `
12 | )
13 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/random.ts:
--------------------------------------------------------------------------------
1 | import { glsl, Snippet } from "@shader-composer/core"
2 |
3 | export const rand = Snippet(
4 | (rand) => glsl`
5 | float ${rand}(float n) { return fract(sin(n) * 1e4); }
6 |
7 | float ${rand}(vec2 p) {
8 | return fract(1e4 * sin(17.0 * p.x + p.y * 0.1) *
9 | (0.1 + abs(sin(p.y * 13.0 + p.x))));
10 | }
11 | `
12 | )
13 |
14 | export const rand2 = Snippet(
15 | (rand2) => glsl`
16 | vec2 ${rand2}(vec2 p) {
17 | return fract(
18 | sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453
19 | );
20 | }
21 | `
22 | )
23 |
24 | export const rand3 = Snippet(
25 | (rand3) => glsl`
26 | vec2 ${rand3}(vec3 p) {
27 | return mod(((p * 34.0) + 1.0) * p, 289.0);
28 | }
29 | `
30 | )
31 |
32 | export const rand4 = Snippet(
33 | (rand4) => glsl`
34 | vec4 ${rand4}(vec4 p) { return mod(((p * 34.0) + 1.0) * p, 289.0); }
35 | `
36 | )
37 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/taylorInvSqrt.ts:
--------------------------------------------------------------------------------
1 | import { glsl, Snippet } from "@shader-composer/core"
2 |
3 | export const taylorInvSqrt = Snippet(
4 | (name) => glsl`
5 | vec4 ${name}(vec4 r)
6 | {
7 | return 1.79284291400159 - 0.85373472095314 * r;
8 | }
9 | `
10 | )
11 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/src/turbulence.ts:
--------------------------------------------------------------------------------
1 | import { $, Float, Input, Snippet } from "@shader-composer/core"
2 | import { psrdnoise3 } from "./PSRDNoise"
3 |
4 | export const turbulence3D = Snippet(
5 | (turbulence3D) => $`
6 | float ${turbulence3D}(vec3 p, float octaves) {
7 | float t = -0.5;
8 |
9 | float alpha = 0.0;
10 | vec3 period;
11 | vec3 gradient;
12 |
13 | for (float f = 1.0 ; f <= octaves; f++) {
14 | float power = pow(2.0, f);
15 | float noise = ${psrdnoise3}(vec3(power * p), period, alpha, gradient);
16 | t += abs(noise / power);
17 | }
18 |
19 | return t;
20 | }
21 | `
22 | )
23 |
24 | export const Turbulence3D = (p: Input<"vec3">, octaves: Input<"float"> = 10) =>
25 | Float($`${turbulence3D}(${p}, ${octaves})`, { name: `Turbulence3D` })
26 |
--------------------------------------------------------------------------------
/packages/shader-composer-noise/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-postprocessing/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shader-composer/postprocessing",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "Build postprocessing effects using Shader Composer.",
9 | "version": "0.0.1",
10 | "main": "dist/shader-composer-postprocessing.cjs.js",
11 | "module": "dist/shader-composer-postprocessing.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-typescript"
26 | ]
27 | },
28 | "devDependencies": {
29 | "@shader-composer/core": "workspace:^0.4.9"
30 | },
31 | "peerDependencies": {
32 | "postprocessing": "^6.28.7",
33 | "@shader-composer/core": ">=0.4.9",
34 | "three": ">=0.141.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/shader-composer-postprocessing/src/PostProcessingEffectRoot.ts:
--------------------------------------------------------------------------------
1 | import { $, Input, Root } from "@shader-composer/core"
2 | import { InputAlpha, InputColor } from "./units"
3 |
4 | export type PostProcessingEffectRootProps = {
5 | color?: Input<"vec3">
6 | alpha?: Input<"float">
7 | }
8 |
9 | export const PostProcessingEffectRoot = ({
10 | color = InputColor,
11 | alpha = InputAlpha
12 | }: PostProcessingEffectRootProps) =>
13 | Root({
14 | fragment: {
15 | body: $`
16 | outputColor = vec4(${color}.rgb, ${alpha});
17 | `
18 | }
19 | })
20 |
--------------------------------------------------------------------------------
/packages/shader-composer-postprocessing/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./PostProcessingEffectRoot"
2 | export * from "./ShaderComposerEffect"
3 | export * from "./units"
4 |
--------------------------------------------------------------------------------
/packages/shader-composer-postprocessing/src/units.ts:
--------------------------------------------------------------------------------
1 | import { $, Float, Vec2, Vec3 } from "@shader-composer/core"
2 |
3 | export const InputColor = Vec3($`inputColor.rgb`)
4 | export const InputAlpha = Float($`inputColor.a`)
5 | export const UV = Vec2($`uv`)
6 |
--------------------------------------------------------------------------------
/packages/shader-composer-postprocessing/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-r3f/README.md:
--------------------------------------------------------------------------------
1 | # shader-composer-r3f
2 |
--------------------------------------------------------------------------------
/packages/shader-composer-r3f/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./hooks"
2 | export * from "./Shader"
3 |
4 | import setupThree from "@shader-composer/three"
5 | setupThree()
6 |
--------------------------------------------------------------------------------
/packages/shader-composer-r3f/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-three/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@shader-composer/three",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "Build Three.js shaders using JavaScript.",
9 | "version": "0.4.9",
10 | "main": "dist/shader-composer-three.cjs.js",
11 | "module": "dist/shader-composer-three.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | "@babel/preset-typescript"
27 | ]
28 | },
29 | "peerDependencies": {
30 | "@shader-composer/core": ">=0.4.9",
31 | "three": ">=0.141.0"
32 | },
33 | "devDependencies": {
34 | "@shader-composer/core": "workspace:^0.4.9"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/packages/shader-composer-three/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/README.md:
--------------------------------------------------------------------------------
1 | # Shader Composer Toybox
2 |
3 | > **Warning** This package is deprecated. Its contents will be integrated into different `@shader-composer/*` packages over time.
4 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "shader-composer-toybox",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "Assorted effects and units for shader-composer.",
9 | "version": "0.1.3",
10 | "main": "dist/shader-composer-toybox.cjs.js",
11 | "module": "dist/shader-composer-toybox.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | "@babel/preset-typescript"
27 | ]
28 | },
29 | "dependencies": {
30 | "fp-ts": "^2.12.3",
31 | "shader-composer": "^0.4.0"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/effects/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Dissolve"
2 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./effects"
2 | export * from "./tools"
3 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/tools/Billboard.ts:
--------------------------------------------------------------------------------
1 | import { $, Input, ModelMatrix, Snippet, Vec3, ViewMatrix } from "shader-composer"
2 |
3 | const billboard = Snippet(
4 | (name) => $`
5 | vec3 ${name}(vec2 v, mat4 view){
6 | vec3 up = vec3(view[0][1], view[1][1], view[2][1]);
7 | vec3 right = vec3(view[0][0], view[1][0], view[2][0]);
8 | vec3 p = right * v.x + up * v.y;
9 | return p;
10 | }
11 | `
12 | )
13 |
14 | export const Billboard = (position: Input<"vec3">) =>
15 | Vec3($`${billboard}(${position}.xy,
16 | ${ViewMatrix}
17 | * ${ModelMatrix}
18 | #ifdef USE_INSTANCING
19 | * instanceMatrix
20 | #endif
21 | )`)
22 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/tools/Grid2D.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/function"
2 | import { Float, Fract, Input, Mul, OneMinus, Step } from "shader-composer"
3 |
4 | export const Grid2D = (
5 | v: Input<"vec2">,
6 | scale: Input<"float"> = 1,
7 | thickness: Input<"float"> = 0.1
8 | ) => {
9 | const { x, y } = Mul(v, scale)
10 |
11 | const fx = Fract(x)
12 | const fy = Fract(y)
13 |
14 | const sx = Step(thickness, fx)
15 | const sy = Step(thickness, fy)
16 |
17 | return pipe(
18 | Mul(sx, sy),
19 | (v) => OneMinus(v),
20 | (v) => Float(v, { name: "Grid2D" })
21 | )
22 | }
23 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/tools/Random.ts:
--------------------------------------------------------------------------------
1 | import { Input, Float, $ } from "shader-composer"
2 |
3 | export const Random = (n: Input<"float">) =>
4 | Float($`fract(sin(${n}) * 1e4)`, { name: "Random (Float)" })
5 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/tools/Softness.ts:
--------------------------------------------------------------------------------
1 | import { pipe } from "fp-ts/function"
2 | import {
3 | Div,
4 | Float,
5 | Input,
6 | LocalToViewSpace,
7 | PerspectiveDepth,
8 | Saturate,
9 | ScreenUV,
10 | Sub,
11 | Unit,
12 | varying
13 | } from "shader-composer"
14 |
15 | export const Softness = (
16 | softness: Input<"float">,
17 | position: Input<"vec3">,
18 | depthTexture: Unit<"sampler2D">
19 | ) =>
20 | Float(
21 | pipe(
22 | position,
23 | /* Convert position to view space and grab depth */
24 | (v) => varying(LocalToViewSpace(v).z),
25 | /* Subtract from the existing scene depth at the fragment coordinate */
26 | (v) => Sub(v, PerspectiveDepth(ScreenUV, depthTexture)),
27 | /* Divide by softness factor */
28 | (v) => Div(v, softness),
29 | /* Clamp between 0 and 1 */
30 | (v) => Saturate(v)
31 | ),
32 |
33 | { name: "Soft Particle" }
34 | )
35 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/src/tools/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Billboard"
2 | export * from "./Displacement"
3 | export * from "./Grid2D"
4 | export * from "./Random"
5 | export * from "./Softness"
6 |
--------------------------------------------------------------------------------
/packages/shader-composer-toybox/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/fun/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/shader-composer-fun.cjs.js",
3 | "module": "dist/shader-composer-fun.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/postprocessing/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/shader-composer-postprocessing.cjs.js",
3 | "module": "dist/shader-composer-postprocessing.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/r3f/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/shader-composer-r3f.cjs.js",
3 | "module": "dist/shader-composer-r3f.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/src/fun.ts:
--------------------------------------------------------------------------------
1 | import { Add, Div, Mix, Mul, Sub } from "@shader-composer/core"
2 | import { GLSLType, Input } from "@shader-composer/core"
3 |
4 | export const mix =
5 | (b: Input, f: Input<"float">) =>
6 | (a: Input) =>
7 | Mix(a, b, f)
8 |
9 | export const add =
10 | (b: Input) =>
11 | (a: Input) =>
12 | Add(a, b)
13 |
14 | export const sub =
15 | (b: Input) =>
16 | (a: Input) =>
17 | Sub(a, b)
18 |
19 | export const mul =
20 | (b: Input) =>
21 | (a: Input) =>
22 | Mul(a, b)
23 |
24 | export const div =
25 | (b: Input) =>
26 | (a: Input) =>
27 | Div(a, b)
28 |
--------------------------------------------------------------------------------
/packages/shader-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "@shader-composer/core"
2 | export * from "@shader-composer/noise"
3 |
--------------------------------------------------------------------------------
/packages/shader-composer/src/postprocessing.ts:
--------------------------------------------------------------------------------
1 | export * from "@shader-composer/postprocessing"
2 |
--------------------------------------------------------------------------------
/packages/shader-composer/src/r3f.ts:
--------------------------------------------------------------------------------
1 | export * from "@shader-composer/r3f"
2 |
3 | /* Make sure the Three.js initialization code is imported */
4 | import "@shader-composer/three"
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/src/three.ts:
--------------------------------------------------------------------------------
1 | export * from "@shader-composer/three"
2 |
--------------------------------------------------------------------------------
/packages/shader-composer/three/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "main": "dist/shader-composer-three.cjs.js",
3 | "module": "dist/shader-composer-three.esm.js"
4 | }
5 |
--------------------------------------------------------------------------------
/packages/shader-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/state-composer/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # state-composer
2 |
3 | ## 0.1.0
4 |
5 | ### Minor Changes
6 |
7 | - 567d19a: First release! There's even a README! Incredible!
8 |
--------------------------------------------------------------------------------
/packages/state-composer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "state-composer",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.1.0",
10 | "main": "dist/state-composer.cjs.js",
11 | "module": "dist/state-composer.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0",
37 | "react-dom": "^18.2.0"
38 | },
39 | "dependencies": {
40 | "statery": "0.6.2"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/state-composer/src/createStateMachine.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react"
2 | import { makeStore, useStore } from "statery"
3 |
4 | export const createStateMachine = (initialState: S) => {
5 | const store = makeStore({
6 | state: initialState as S
7 | })
8 |
9 | const matchesState = (state: S, other: S | S[]) =>
10 | Array.isArray(other) ? other.includes(state) : state === other
11 |
12 | const Match = ({
13 | state,
14 | children
15 | }: {
16 | state: S | S[]
17 | children?: ReactNode
18 | }) => {
19 | const { state: currentState } = useStore(store)
20 |
21 | return matchesState(currentState, state) ? <>{children} : null
22 | }
23 |
24 | const enter = (state: S) => {
25 | const { state: currentState } = store.state
26 |
27 | if (state && state !== currentState) {
28 | store.set({ state })
29 | }
30 | }
31 |
32 | const is = (state: S | S[]) => matchesState(store.state.state, state)
33 |
34 | return {
35 | Match,
36 | enter,
37 | is
38 | }
39 | }
40 |
--------------------------------------------------------------------------------
/packages/state-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./createStateMachine"
2 |
--------------------------------------------------------------------------------
/packages/state-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/timeline-composer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "timeline-composer",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "Composable timelines for React.",
9 | "version": "0.1.7",
10 | "main": "dist/timeline-composer.cjs.js",
11 | "module": "dist/timeline-composer.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0",
37 | "react-dom": "^18.2.0"
38 | },
39 | "dependencies": {
40 | "@hmans/use-animation-frame": "^0.0.2"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/timeline-composer/src/Delay.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, ReactNode, useRef, useState } from "react"
2 | import { useAnimationFrame } from "@hmans/use-animation-frame"
3 |
4 | type DelayProps = {
5 | children?: ReactNode
6 | seconds: number
7 | onComplete?: () => void
8 | }
9 |
10 | export const Delay: FC = ({ seconds, onComplete, children }) => {
11 | const ready = useDelay(seconds, onComplete)
12 | return ready ? <>{children} : null
13 | }
14 |
15 | export const useDelay = (seconds: number, onComplete?: () => void) => {
16 | const [ready, setReady] = useState(false)
17 | const timeRemaining = useRef(seconds)
18 |
19 | useAnimationFrame((dt) => {
20 | if (ready) return
21 |
22 | timeRemaining.current -= dt
23 |
24 | if (timeRemaining.current <= 0) {
25 | onComplete?.()
26 | setReady(true)
27 | }
28 | })
29 |
30 | return ready
31 | }
32 |
--------------------------------------------------------------------------------
/packages/timeline-composer/src/Lifetime.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, ReactNode } from "react"
2 | import { useDelay } from "./Delay"
3 |
4 | type LifetimeProps = {
5 | children?: ReactNode
6 | seconds: number
7 | }
8 |
9 | export const Lifetime: FC = ({ children, seconds }) => {
10 | const ready = useDelay(seconds)
11 |
12 | return ready ? null : <>{children}
13 | }
14 |
--------------------------------------------------------------------------------
/packages/timeline-composer/src/Repeat.tsx:
--------------------------------------------------------------------------------
1 | import React, { FC, Fragment, ReactNode, useState } from "react"
2 | import { Delay } from "./Delay"
3 |
4 | type RepeatProps = { children: ReactNode; times?: number; seconds?: number }
5 |
6 | const Wrap = ({ children }: { children: ReactNode }) => <>{children}
7 |
8 | export const Repeat: FC = ({
9 | children,
10 | times = Infinity,
11 | seconds = 1
12 | }) => {
13 | const [iteration, setIteration] = useState(1)
14 |
15 | return (
16 |
17 | {iteration < times && (
18 | {
22 | setIteration((i) => i + 1)
23 | }}
24 | />
25 | )}
26 |
27 | {/* To my surprise, React.Fragment with a key did not work here. */}
28 | {children}
29 |
30 | )
31 | }
32 |
--------------------------------------------------------------------------------
/packages/timeline-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./Delay"
2 | export * from "./Lifetime"
3 | export * from "./Repeat"
4 |
--------------------------------------------------------------------------------
/packages/timeline-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/ts-module-docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ts-module-docs",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "",
9 | "version": "0.0.1",
10 | "main": "dist/ts-module-docs.cjs.js",
11 | "module": "dist/ts-module-docs.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build",
21 | "test": "jest"
22 | },
23 | "babel": {
24 | "presets": [
25 | "@babel/preset-env",
26 | "@babel/preset-react",
27 | [
28 | "@babel/preset-typescript",
29 | {
30 | "isTSX": true,
31 | "allExtensions": true
32 | }
33 | ]
34 | ]
35 | },
36 | "dependencies": {
37 | "@microsoft/tsdoc": "^0.14.2",
38 | "ts-morph": "^16.0.0"
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/packages/ts-module-docs/test/mock/mock.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Adds two numbers and returns the result.
3 | *
4 | * It's pretty basic, but it's nice!
5 | *
6 | * @param a The first number to add.
7 | * @param b The second number to add. This comment is
8 | * intentially spanning multiple lines.
9 | *
10 | * @returns The sum of `a` and `b`. Exciting!
11 | */
12 | export const add = (a: number, b: number) => a + b
13 |
--------------------------------------------------------------------------------
/packages/ts-module-docs/test/mock/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "declaration": true,
7 | "strict": true,
8 | "jsx": "react",
9 | "allowSyntheticDefaultImports": true,
10 | "esModuleInterop": true,
11 | "isolatedModules": true,
12 | "skipLibCheck": true
13 | },
14 | "include": ["*.ts"]
15 | }
16 |
--------------------------------------------------------------------------------
/packages/ts-module-docs/test/ts-module-docs.test.ts:
--------------------------------------------------------------------------------
1 | import { extractModuleDocumentation } from "../src"
2 |
3 | describe("extractModuleDocumentation", () => {
4 | const extractDocs = () =>
5 | extractModuleDocumentation(
6 | __dirname + "/mock/tsconfig.json",
7 | __dirname + "/mock/mock.ts"
8 | )
9 |
10 | it("extracts name and description", () => {
11 | const docs = extractDocs()
12 |
13 | const first = docs.symbols[0]
14 |
15 | expect(first.name).toMatchInlineSnapshot(`"add"`)
16 |
17 | expect(first.description).toMatchInlineSnapshot(`
18 | "Adds two numbers and returns the result.
19 |
20 | It's pretty basic, but it's nice!
21 |
22 | "
23 | `)
24 | })
25 | })
26 |
--------------------------------------------------------------------------------
/packages/ts-module-docs/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/ui-composer/README.md:
--------------------------------------------------------------------------------
1 | # ui-composer
2 |
--------------------------------------------------------------------------------
/packages/ui-composer/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ui-composer",
3 | "author": {
4 | "name": "Hendrik Mans",
5 | "email": "hendrik@mans.de",
6 | "url": "https://hmans.co"
7 | },
8 | "description": "Composable UI for games built with React.",
9 | "version": "0.0.1",
10 | "main": "dist/ui-composer.cjs.js",
11 | "module": "dist/ui-composer.esm.js",
12 | "files": [
13 | "dist/**",
14 | "LICENSE",
15 | "README.md"
16 | ],
17 | "license": "MIT",
18 | "sideEffects": false,
19 | "scripts": {
20 | "build": "preconstruct build"
21 | },
22 | "babel": {
23 | "presets": [
24 | "@babel/preset-env",
25 | "@babel/preset-react",
26 | [
27 | "@babel/preset-typescript",
28 | {
29 | "isTSX": true,
30 | "allExtensions": true
31 | }
32 | ]
33 | ]
34 | },
35 | "peerDependencies": {
36 | "react": "^18.2.0",
37 | "react-dom": "^18.2.0"
38 | },
39 | "dependencies": {
40 | "@stitches/react": "^1.2.8"
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/BooleanControl.tsx:
--------------------------------------------------------------------------------
1 | import React, { useState } from "react"
2 | import { styled } from "../styles"
3 |
4 | export type BooleanControlProps = {
5 | description?: string
6 | checked?: boolean
7 | onChange?: (checked: boolean) => void
8 | }
9 |
10 | export const BooleanControl = ({
11 | description,
12 | onChange,
13 | checked: initialChecked = false
14 | }: BooleanControlProps) => {
15 | const [checked, setChecked] = useState(initialChecked)
16 |
17 | return (
18 | <>
19 | {
23 | onChange?.(e.target.checked)
24 | setChecked(e.target.checked)
25 | }}
26 | />
27 | {description && {description}}
28 |
29 | )
30 | }
31 |
32 | const Description = styled("span", {
33 | marginLeft: "0.25rem"
34 | })
35 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/Button.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const Button = styled("button", {
4 | width: "100%",
5 | padding: "6px 8px 5px 8px",
6 | borderRadius: "5px",
7 | boxShadow:
8 | "1px 1px 1px 0 rgba(0, 0, 0, 0.1), inset 1px 1px 0 0 rgba(255, 255, 255, 0.1)",
9 | border: "1px solid rgba(0, 0, 0, 0.8)",
10 | borderWidth: "1px 1px 3px 1px",
11 |
12 | outline: "none",
13 |
14 | font: "inherit",
15 | backgroundColor: "#555",
16 | color: "rgba(255, 255, 255, 0.7)",
17 | cursor: "pointer",
18 | textShadow: "rgba(0, 0, 0, 0.2) 1px 2px 1px",
19 |
20 | "&:hover": {
21 | backgroundColor: "#666"
22 | },
23 |
24 | "&:active": {
25 | borderWidth: "2px 0 2px 2px"
26 | }
27 | })
28 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/Heading.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const Heading = styled("h3", {
4 | font: "inherit",
5 | fontWeight: "bold",
6 | textShadow: "rgba(0, 0, 0, 0.5) 2px 2px 1px",
7 | color: "$headings",
8 | margin: "1.5rem 0 0.5rem 0"
9 | })
10 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/HorizontalGroup.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const HorizontalGroup = styled("div", {
4 | display: "flex",
5 | flexDirection: "row",
6 | justifyContent: "space-between",
7 | width: "100%",
8 |
9 | variants: {
10 | align: {
11 | start: { alignItems: "flex-start" },
12 | center: { alignItems: "center" },
13 | end: { alignItems: "flex-end" }
14 | },
15 |
16 | gap: {
17 | true: {
18 | gap: "0.25rem"
19 | }
20 | }
21 | }
22 | })
23 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/HorizontalResizer.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 | import React from "react"
3 |
4 | export const HorizontalResizer = () => {
5 | const [dragging, setDragging] = React.useState(false)
6 |
7 | const handleMouseDown = React.useCallback(() => {
8 | setDragging(true)
9 | }, [])
10 |
11 | const handleMouseUp = React.useCallback(() => {
12 | setDragging(false)
13 | }, [])
14 |
15 | return (
16 |
20 | )
21 | }
22 |
23 | const HorizontalResizerDiv = styled("div", {
24 | backgroundColor: "#000",
25 | transition: "background-color 0.15s",
26 | width: 5,
27 | cursor: "col-resize",
28 | "&:hover": {
29 | backgroundColor: "hotpink"
30 | }
31 | })
32 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/Input.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const Input = styled("input", {
4 | font: "inherit",
5 | color: "inherit",
6 | backgroundColor: "inherit",
7 | border: "0",
8 | background: "#222",
9 | padding: "5px 8px",
10 | outline: "none",
11 | caretColor: "hotpink",
12 | borderRadius: "5px",
13 | boxShadow:
14 | "inset 1px 1px 2px 0 rgba(0, 0, 0, 0.5), inset -1px -1px 2px 0 rgba(255, 255, 255, 0.2)",
15 | "&::selection": {
16 | backgroundColor: "hotpink",
17 | color: "white"
18 | },
19 | width: "100%"
20 | })
21 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/Root.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const Root = styled("div", {
4 | font: "14px/1.5 Inter, sans-serif",
5 | backgroundColor: "#111",
6 | width: "100%",
7 | height: "100%",
8 | display: "flex",
9 | userSelect: "none"
10 | })
11 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/VerticalGroup.tsx:
--------------------------------------------------------------------------------
1 | import { styled } from "../styles"
2 |
3 | export const VerticalGroup = styled("div", {
4 | display: "flex",
5 | flexDirection: "column",
6 | gap: 4,
7 | padding: 4
8 | })
9 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/components/index.ts:
--------------------------------------------------------------------------------
1 | import { collapseChildren, styled } from "../styles"
2 |
3 | export * from "./BooleanControl"
4 | export * from "./Button"
5 | export * from "./Heading"
6 | export * from "./HorizontalGroup"
7 | export * from "./HorizontalResizer"
8 | export * from "./Input"
9 | export * from "./Root"
10 | export * from "./VerticalGroup"
11 |
12 | export const Panel = styled("div", collapseChildren, {
13 | backgroundColor: "$panelBackground",
14 | borderRadius: 5,
15 |
16 | color: "$panelText",
17 | textShadow: "rgba(0, 0, 0, 0.2) 1px 2px 1px",
18 | padding: "1rem"
19 | })
20 |
21 | export const Control = styled("div", {
22 | display: "flex",
23 | alignItems: "center",
24 | minHeight: "2rem",
25 | margin: "0.25rem 0"
26 | })
27 |
28 | export const Label = styled("div", {
29 | flex: "0 0 30%"
30 | })
31 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./components"
2 |
--------------------------------------------------------------------------------
/packages/ui-composer/src/styles.tsx:
--------------------------------------------------------------------------------
1 | import { createStitches } from "@stitches/react"
2 |
3 | /* Palette: https://coolors.co/palette/22223b-4a4e69-9a8c98-c9ada7-f2e9e4 */
4 | export const { styled, css, globalCss } = createStitches({
5 | theme: {
6 | colors: {
7 | panelBackground: "#333",
8 | panelText: "#dcc",
9 | headings: "#F2E9E4"
10 | }
11 | }
12 | })
13 |
14 | export const collapseChildren = css({
15 | "*:first-child": { marginTop: 0 },
16 | "*:last-child": { marginBottom: 0 }
17 | })
18 |
19 | const globalStyles = globalCss({
20 | "@import": ["https://rsms.me/inter/inter.css"],
21 | "*": {
22 | boxSizing: "border-box"
23 | },
24 | body: {
25 | margin: 0,
26 | padding: 0,
27 | height: "100%",
28 | width: "100%",
29 | overflow: "hidden",
30 | font: "14px/1.5 Inter, sans-serif"
31 | },
32 | "div#root": {
33 | width: "100vw",
34 | height: "100vh"
35 | }
36 | })
37 |
38 | globalStyles()
39 |
--------------------------------------------------------------------------------
/packages/ui-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vfx-composer-r3f/src/context.ts:
--------------------------------------------------------------------------------
1 | import { World } from "miniplex"
2 | import { createContext, useContext } from "react"
3 | import { InstancedParticles } from "vfx-composer"
4 | import { Entity } from "./InstancedParticles"
5 |
6 | export const createParticlesContext = () =>
7 | createContext<{
8 | particles: InstancedParticles
9 | ecs: World
10 | }>(null!)
11 |
12 | export type ParticlesContext = ReturnType
13 |
14 | export const DefaultContext = createParticlesContext()
15 |
--------------------------------------------------------------------------------
/packages/vfx-composer-r3f/src/hooks/particles.ts:
--------------------------------------------------------------------------------
1 | import { useConst } from "@hmans/use-const"
2 | import { createParticleLifetime, ParticleAttribute } from "vfx-composer"
3 |
4 | export const useParticleLifetime = () =>
5 | useConst(() => createParticleLifetime())
6 |
7 | export const useParticleAttribute = <
8 | T extends Parameters[0]
9 | >(
10 | ctor: () => T
11 | ) => useConst(() => ParticleAttribute(ctor()))
12 |
--------------------------------------------------------------------------------
/packages/vfx-composer-r3f/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./context"
2 | export * from "./Emitter"
3 | export * from "./hooks/particles"
4 | export * from "./InstancedParticles"
5 | export * from "./Particle"
6 |
--------------------------------------------------------------------------------
/packages/vfx-composer-r3f/src/lib/useFrameEffect.ts:
--------------------------------------------------------------------------------
1 | import { useFrame } from "@react-three/fiber"
2 | import { useRef } from "react"
3 |
4 | /* TODO: Extract this into hmans/things or similar */
5 |
6 | export function useFrameEffect(
7 | dependencyCallback: () => T,
8 | callback: (args: T) => void,
9 | renderPriority = 0
10 | ) {
11 | const value = useRef(null!)
12 |
13 | useFrame(function useFrameEffectUpdate() {
14 | const newValue = dependencyCallback()
15 |
16 | if (value.current !== newValue) {
17 | value.current = newValue
18 | callback(newValue)
19 | }
20 | }, renderPriority)
21 | }
22 |
--------------------------------------------------------------------------------
/packages/vfx-composer-r3f/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/packages/vfx-composer/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./createParticleLifetime"
2 | export * from "./ParticleAttribute"
3 | export * from "./InstancedParticles"
4 |
5 | import setupThree from "@shader-composer/three"
6 | setupThree()
7 |
--------------------------------------------------------------------------------
/packages/vfx-composer/src/util/makeAttribute.ts:
--------------------------------------------------------------------------------
1 | import { InstancedBufferAttribute } from "three"
2 |
3 | export const makeAttribute = (count: number, itemSize: number) =>
4 | new InstancedBufferAttribute(new Float32Array(count * itemSize), itemSize)
5 |
--------------------------------------------------------------------------------
/packages/vfx-composer/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "include": ["src/**/*"]
4 | }
5 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - "packages/*"
3 | - "apps/*"
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "esnext",
4 | "module": "esnext",
5 | "moduleResolution": "node",
6 | "declaration": true,
7 | "strict": true,
8 | "jsx": "react",
9 | "allowSyntheticDefaultImports": true,
10 | "esModuleInterop": true,
11 | "isolatedModules": true,
12 | "skipLibCheck": true
13 | },
14 | "include": ["packages/*/src/**/*"],
15 | "exclude": ["**/node_modules/**/*", "**/*.spec.ts", "**/*.test.ts"]
16 | }
17 |
--------------------------------------------------------------------------------
/turbo.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://turbo.build/schema.json",
3 | "pipeline": {
4 | "//#dev:link": {
5 | "cache": false
6 | },
7 |
8 | "dev": {
9 | "dependsOn": ["//#dev:link"],
10 | "cache": false
11 | },
12 |
13 | "build": {
14 | "dependsOn": ["^build"],
15 | "outputs": ["dist/**", "*/dist/**"],
16 | "outputMode": "new-only"
17 | },
18 |
19 | "test": {
20 | "dependsOn": ["^test"],
21 | "outputs": [],
22 | "inputs": ["src/**/*.tsx", "src/**/*.ts", "test/**/*.ts", "test/**/*.tsx"]
23 | }
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [{ "source": "/(.*)", "destination": "/" }],
3 | "github": {
4 | "silent": true
5 | }
6 | }
7 |
--------------------------------------------------------------------------------