diff --git a/.changeset/config.json b/.changeset/config.json index ffe661473..e903e7764 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -5,7 +5,7 @@ "fixed": [], "linked": [ ["vfx-composer", "vfx-composer-r3f"], - ["shader-composer", "shader-composer-r3f"], + ["shader-composer", "shader-composer-*", "@shader-composer/*"], ["material-composer", "material-composer-r3f"] ], "access": "public", diff --git a/.changeset/curvy-llamas-pump.md b/.changeset/curvy-llamas-pump.md new file mode 100644 index 000000000..8239c60c1 --- /dev/null +++ b/.changeset/curvy-llamas-pump.md @@ -0,0 +1,14 @@ +--- +"shader-composer": minor +"@shader-composer/core": minor +--- + +**Breaking:** The casting helpers (eg. `$vec3()`, `$mat3()` etc.) have been renamed to `vec3()`, `mat3()` etc., and have had their signature changed. Where the old implementations were able to take any number of arguments, the new helpers will only ever take _a single argument_. (If you want to cast multiple arguments, you can pass an array.) + +```js +/* Before: */ +$vec3(1, 2, 3) + +/* After: */ +vec3([1, 2, 3]) +``` diff --git a/.changeset/olive-coats-perform.md b/.changeset/olive-coats-perform.md new file mode 100644 index 000000000..cfd8b7148 --- /dev/null +++ b/.changeset/olive-coats-perform.md @@ -0,0 +1,23 @@ +--- +"shader-composer": minor +"@shader-composer/core": minor +"@shader-composer/noise": minor +"@shader-composer/postprocessing": minor +"@shader-composer/r3f": minor +"@shader-composer/three": minor +"shader-composer-toybox": minor +--- + +**Breaking:** Shader Composer has received a new package structure! Its code is now spread across multiple smaller packages scoped within the `@shader-composer/*` organization, with the main `shader-composer` package acting as an umbrella package. + +The user can now choose between either picking the scoped packages they need, or just using the umbrella package, which provides additional entrypoints for specific frameworks and libraries. + +Example for working with individual scoped packages: + +```js +import { compileShader } from "@shader-composer/core" +import { setupThree } from "@shader-composer/three" +import { PostProcessingEffectMaster } from "@shader-composer/postprocessing" +``` + +TODO: finalize examples diff --git a/.changeset/spotty-students-lay.md b/.changeset/spotty-students-lay.md new file mode 100644 index 000000000..34290c215 --- /dev/null +++ b/.changeset/spotty-students-lay.md @@ -0,0 +1,10 @@ +--- +"material-composer": minor +"@material-composer/patch-material": minor +"material-composer-r3f": minor +"render-composer": minor +"vfx-composer": minor +"vfx-composer-r3f": minor +--- + +Upgraded to the new version of Shader Composer. diff --git a/.changeset/stale-moles-float.md b/.changeset/stale-moles-float.md new file mode 100644 index 000000000..bb7049301 --- /dev/null +++ b/.changeset/stale-moles-float.md @@ -0,0 +1,14 @@ +--- +"shader-composer": minor +"@shader-composer/core": minor +"@shader-composer/r3f": minor +"@shader-composer/three": minor +--- + +**Breaking:** The core Shader Composer package `@shader-composer/core` no longer requires Three.js as a peer dependency, and is now ready to be used together with other frameworks (or directly with WebGL.) + +Since some of the units provided within the standard library require framework-specific code to operate (like `CameraFar`, `CameraNear`, `Resolution` etc.), glue code needs to be created to use Shader Composer with other frameworks. + +The Three.js glue code lives in the `@shader-composer/three` package. + +TODO: example for usage diff --git a/.changeset/two-jokes-wait.md b/.changeset/two-jokes-wait.md new file mode 100644 index 000000000..d2ea83ac8 --- /dev/null +++ b/.changeset/two-jokes-wait.md @@ -0,0 +1,22 @@ +--- +"shader-composer": minor +"@shader-composer/core": minor +--- + +**New:** Arrays of specific lengths are now automatically casts to vectors and matrices; an array with 2 elements will be rendered as a `vec2`, an array with 3 elements will be rendered as a `vec3`, and so on. + +```js +/* Before, and this still works: */ +ScaleAndOffset(value, Vec2([0.5, 0.5]), Vec2([0.5, 0.5])) + +/* But now this is also possible: */ +ScaleAndOffset(value, [0.5, 0.5], [0.5, 0.5]) +``` + +If you want to cast an array to a specific type, you can use the `vec2()`, `vec3()` etc. helpers: + +```js +ScaleAndOffset(value, vec2([0.5, 0.5]), vec2([0.5, 0.5])) +``` + +Or wrap them in full units, like above. diff --git a/.changeset/yellow-pens-switch.md b/.changeset/yellow-pens-switch.md new file mode 100644 index 000000000..cb79118aa --- /dev/null +++ b/.changeset/yellow-pens-switch.md @@ -0,0 +1,5 @@ +--- +"shader-composer": minor +--- + +Removed Three-specific bits from `UpdateCallback` diff --git a/apps/material-composer-examples/package.json b/apps/material-composer-examples/package.json index 2212b8b21..468b28c06 100644 --- a/apps/material-composer-examples/package.json +++ b/apps/material-composer-examples/package.json @@ -24,7 +24,6 @@ "react-dom": "^18.2.0", "react-merge-refs": "^2.0.1", "shader-composer": "0.4.9", - "shader-composer-r3f": "^0.4.5", "shader-composer-toybox": "^0.1.3", "three": "^0.145.0", "timeline-composer": "^0.1.7", diff --git a/apps/material-composer-examples/src/examples/CombinedModules.tsx b/apps/material-composer-examples/src/examples/CombinedModules.tsx index e608295d6..b50ffb7cf 100644 --- a/apps/material-composer-examples/src/examples/CombinedModules.tsx +++ b/apps/material-composer-examples/src/examples/CombinedModules.tsx @@ -1,6 +1,6 @@ import { useControls } from "leva" import { composable, Layer, LayerProps, modules } from "material-composer-r3f" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { Color } from "three" export const ColorLayer = (props: LayerProps) => { diff --git a/apps/material-composer-examples/src/examples/HelloWorld.tsx b/apps/material-composer-examples/src/examples/HelloWorld.tsx index f67de75a8..5bd61a2e8 100644 --- a/apps/material-composer-examples/src/examples/HelloWorld.tsx +++ b/apps/material-composer-examples/src/examples/HelloWorld.tsx @@ -1,7 +1,7 @@ import { useControls } from "leva" import { composable, Layer, modules } from "material-composer-r3f" import { Description } from "r3f-stage" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" export default function HelloWorld() { const controls = useControls({ mix: { value: 0.5, min: 0, max: 1 } }) diff --git a/apps/material-composer-examples/src/examples/Memoization.tsx b/apps/material-composer-examples/src/examples/Memoization.tsx index 26d017d42..ff694c573 100644 --- a/apps/material-composer-examples/src/examples/Memoization.tsx +++ b/apps/material-composer-examples/src/examples/Memoization.tsx @@ -11,7 +11,7 @@ import { Time, VertexPosition } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { DoubleSide } from "three" import { Lava } from "./Fireball" import { Plasma } from "./PlasmaBall" diff --git a/apps/material-composer-examples/src/examples/Textures.tsx b/apps/material-composer-examples/src/examples/Textures.tsx index c55f68369..df2b35bb1 100644 --- a/apps/material-composer-examples/src/examples/Textures.tsx +++ b/apps/material-composer-examples/src/examples/Textures.tsx @@ -3,7 +3,7 @@ import { useControls } from "leva" import { composable, Layer, modules } from "material-composer-r3f" import { Description } from "r3f-stage" import { Mul, Time, UV } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import textureUrl from "./textures/hexgrid.jpeg" export default function Textures() { diff --git a/apps/material-composer-examples/src/examples/Vanilla.tsx b/apps/material-composer-examples/src/examples/Vanilla.tsx index f013ad04b..cc0cac792 100644 --- a/apps/material-composer-examples/src/examples/Vanilla.tsx +++ b/apps/material-composer-examples/src/examples/Vanilla.tsx @@ -78,7 +78,7 @@ const vanillaCode = ( /* Create mesh and add it to the scene. */ const stopLoop = loop((dt) => { - shaderMeta.update(dt, camera, scene, renderer) + shaderMeta.update(dt, { camera, scene, renderer }) }) return () => { diff --git a/apps/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json index 8c98c2fc7..e9976ee82 100644 --- a/apps/shader-composer-examples/package.json +++ b/apps/shader-composer-examples/package.json @@ -17,8 +17,7 @@ "r3f-stage": "^0.3.5", "react": "^18.2.0", "react-dom": "^18.2.0", - "shader-composer": "^0.4.9", - "shader-composer-r3f": "^0.4.5", + "shader-composer": "workspace:^0.4.9", "shader-composer-toybox": "^0.1.3", "three": "^0.145.0" }, diff --git a/apps/shader-composer-examples/src/examples/Billboarding.tsx b/apps/shader-composer-examples/src/examples/Billboarding.tsx index 0d82350f5..b3213c006 100644 --- a/apps/shader-composer-examples/src/examples/Billboarding.tsx +++ b/apps/shader-composer-examples/src/examples/Billboarding.tsx @@ -1,6 +1,6 @@ import { Description, FlatStage } from "r3f-stage" import { ShaderMaterialMaster, VertexPosition } from "shader-composer" -import { useShader } from "shader-composer-r3f" +import { useShader } from "shader-composer/r3f" import { Billboard } from "shader-composer-toybox" import { Color } from "three" @@ -21,8 +21,8 @@ export default function BillboardingExample() { - Use the Billboard unit to turn a mesh (like this plane) into a - billboard that is always facing the camera. + Use the Billboard unit to turn a mesh (like this plane) + into a billboard that is always facing the camera. ) diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx index d18d9e1cc..a632477f8 100644 --- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx +++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx @@ -14,8 +14,8 @@ import { Sub, VertexPosition } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" -import { PSRDNoise3D } from "shader-composer-toybox" +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" +import { PSRDNoise3D } from "shader-composer" import { Color, Mesh } from "three" export default function DiscoCube() { diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx index 54d65693a..4fafeba97 100644 --- a/apps/shader-composer-examples/src/examples/Dissolve.tsx +++ b/apps/shader-composer-examples/src/examples/Dissolve.tsx @@ -6,7 +6,7 @@ import { ShaderMaster, useShader, useUniformUnit -} from "shader-composer-r3f" +} from "shader-composer/r3f" import { Dissolve } from "shader-composer-toybox" import { Color, DoubleSide } from "three" diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx index 5ae8dee50..84fa6da5e 100644 --- a/apps/shader-composer-examples/src/examples/Fireball.tsx +++ b/apps/shader-composer-examples/src/examples/Fireball.tsx @@ -18,8 +18,8 @@ import { ShaderMaster, useShader, useUniformUnit -} from "shader-composer-r3f" -import { PSRDNoise3D, Turbulence3D } from "shader-composer-toybox" +} from "shader-composer/r3f" +import { PSRDNoise3D, Turbulence3D } from "shader-composer" import textureUrl from "./textures/explosion.png" export default function Fireball() { diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx index cf5abdec7..833c458d5 100644 --- a/apps/shader-composer-examples/src/examples/Flag.tsx +++ b/apps/shader-composer-examples/src/examples/Flag.tsx @@ -8,7 +8,7 @@ import { Vec3, VertexPosition } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" import { DoubleSide } from "three" import textureUrl from "./textures/shader-composer-logo.jpg" diff --git a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx index 3e6670b16..9896a3c67 100644 --- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx +++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx @@ -21,13 +21,14 @@ import { Vec2, Vec3 } from "shader-composer" +import { Displacement } from "shader-composer-toybox" +import { PSRDNoise2D } from "shader-composer" import { Shader, ShaderMaster, useShader, useUniformUnit -} from "shader-composer-r3f" -import { Displacement, PSRDNoise2D } from "shader-composer-toybox" +} from "shader-composer/r3f" import { Color, RGBADepthPacking, Vector2 } from "three" export default function FloatingIslandExample() { diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx index d5368a4f9..2deba5877 100644 --- a/apps/shader-composer-examples/src/examples/ForceField.tsx +++ b/apps/shader-composer-examples/src/examples/ForceField.tsx @@ -25,7 +25,7 @@ import { ShaderMaster, useShader, useUniformUnit -} from "shader-composer-r3f" +} from "shader-composer/r3f" import { Color } from "three" import { useRepeatingTexture } from "./helpers" diff --git a/apps/shader-composer-examples/src/examples/HelloWorld.tsx b/apps/shader-composer-examples/src/examples/HelloWorld.tsx index ef87f3cc3..3a2e8355e 100644 --- a/apps/shader-composer-examples/src/examples/HelloWorld.tsx +++ b/apps/shader-composer-examples/src/examples/HelloWorld.tsx @@ -11,7 +11,7 @@ import { Sin, VertexPosition } from "shader-composer" -import { useShader, useUniformUnit } from "shader-composer-r3f" +import { useShader, useUniformUnit } from "shader-composer/r3f" import { Color } from "three" export default function HelloWorld() { diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx index b35b91b49..5cad9fa9a 100644 --- a/apps/shader-composer-examples/src/examples/Planet.tsx +++ b/apps/shader-composer-examples/src/examples/Planet.tsx @@ -15,8 +15,8 @@ import { Vec3, VertexPosition } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" -import { Simplex3DNoise } from "shader-composer-toybox" +import { Simplex3DNoise } from "shader-composer" +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" import { Color } from "three" const getNoise = ( diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx index e180eec4a..49cba1e24 100644 --- a/apps/shader-composer-examples/src/examples/Rotation.tsx +++ b/apps/shader-composer-examples/src/examples/Rotation.tsx @@ -5,7 +5,7 @@ import { VertexNormal, VertexPosition } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" import { Vector3 } from "three" export default function MatrixTransformations() { diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx index c4f22ab8f..27e0164c2 100644 --- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx +++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx @@ -28,8 +28,8 @@ import { ShaderMaster, useShader, useUniformUnit -} from "shader-composer-r3f" -import { PSRDNoise2D, PSRDNoise3D } from "shader-composer-toybox" +} from "shader-composer/r3f" +import { PSRDNoise2D, PSRDNoise3D } from "shader-composer" import { Color } from "three" export default function StylizedWater() { diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx index 9c6c30e29..f7801a288 100644 --- a/apps/shader-composer-examples/src/examples/Textures.tsx +++ b/apps/shader-composer-examples/src/examples/Textures.tsx @@ -1,6 +1,6 @@ +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" import { $, - $vec2, Add, Fresnel, Mul, @@ -10,7 +10,6 @@ import { UniformUnit, UV } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" import { Color } from "three" import { useRepeatingTexture } from "./helpers" @@ -18,13 +17,13 @@ export default function Textures() { const texture = useRepeatingTexture("/textures/hexgrid.jpg") const shader = useShader(() => { - const offset = $vec2(Mul(Time(), 0.05), 0) + const offset = [Mul(Time(), 0.05), 0] /* Create a texture sampler */ const sampler2D = UniformUnit("sampler2D", texture) /* Get the texture information for the current fragment */ - const tex2d = Texture2D(sampler2D, ScaleAndOffset(UV, $vec2(2, 1), offset)) + const tex2d = Texture2D(sampler2D, ScaleAndOffset(UV, [2, 1], offset)) /* Define a color to tint the texture with */ const color = new Color("hotpink") diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx index f6e8e952d..28cefe151 100644 --- a/apps/shader-composer-examples/src/examples/Water.tsx +++ b/apps/shader-composer-examples/src/examples/Water.tsx @@ -1,9 +1,9 @@ import { Environment } from "@react-three/drei" import { pipe } from "fp-ts/function" -import { GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer" -import { Shader, ShaderMaster, useShader } from "shader-composer-r3f" -import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox" -import { add } from "shader-composer/fun" +import { Add, GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer" +import { Displacement } from "shader-composer-toybox" +import { FBMNoise, GerstnerWave } from "shader-composer" +import { Shader, ShaderMaster, useShader } from "shader-composer/r3f" import { Color, DoubleSide } from "three" const NormalizeNoise = (v: Input<"float">) => Remap(v, -1, 1, 0, 1) @@ -38,11 +38,13 @@ function Water() { return pipe( v, - add(Mul(GerstnerWave(xy, Vec2([1, 1]), 0.5, 20.0, time), 0.8)), - add(Mul(GerstnerWave(xy, Vec2([0.2, 1]), 0.2, 10, time), 0.8)), - add(Mul(GerstnerWave(xy, Vec2([0, -1]), 0.2, 5, time), 0.5)), - add(Mul(GerstnerWave(xy, Vec2([1, 1]), 0.2, 8, time), 0.3)) - // add(Mul(vec3(0, 0.005, 0), fbm)) + (v) => + Add(v, Mul(GerstnerWave(xy, Vec2([1, 1]), 0.5, 20.0, time), 0.8)), + (v) => + Add(v, Mul(GerstnerWave(xy, Vec2([0.2, 1]), 0.2, 10, time), 0.8)), + (v) => Add(v, Mul(GerstnerWave(xy, Vec2([0, -1]), 0.2, 5, time), 0.5)), + (v) => Add(v, Mul(GerstnerWave(xy, Vec2([1, 1]), 0.2, 8, time), 0.3)) + // (v) => Add(v, Mul(vec3(0, 0.005, 0), fbm)) ) }) diff --git a/apps/shader-composer-examples/src/examples/useRenderPass.ts b/apps/shader-composer-examples/src/examples/useRenderPass.ts index 80ce40460..2ae5cb74e 100644 --- a/apps/shader-composer-examples/src/examples/useRenderPass.ts +++ b/apps/shader-composer-examples/src/examples/useRenderPass.ts @@ -1,7 +1,7 @@ import { useFrame, useThree } from "@react-three/fiber" import { useLayoutEffect, useMemo, useRef } from "react" import { DepthTexture, WebGLRenderTarget } from "three" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" export type RenderPassOptions = { resolution?: number @@ -20,14 +20,21 @@ export const useRenderPass = ({ const renderTargets = useMemo( () => [ - new WebGLRenderTarget(256, 256, { depthTexture: new DepthTexture(256, 256) }), - new WebGLRenderTarget(256, 256, { depthTexture: new DepthTexture(256, 256) }) + new WebGLRenderTarget(256, 256, { + depthTexture: new DepthTexture(256, 256) + }), + new WebGLRenderTarget(256, 256, { + depthTexture: new DepthTexture(256, 256) + }) ], [] ) const texture = useUniformUnit("sampler2D", renderTargets[0].texture) - const depthTexture = useUniformUnit("sampler2D", renderTargets[0].depthTexture) + const depthTexture = useUniformUnit( + "sampler2D", + renderTargets[0].depthTexture + ) const cursor = useRef(0) useLayoutEffect(() => { diff --git a/apps/shader-composer-examples/vite.config.ts b/apps/shader-composer-examples/vite.config.ts index 0adf3e988..207bbe699 100644 --- a/apps/shader-composer-examples/vite.config.ts +++ b/apps/shader-composer-examples/vite.config.ts @@ -3,9 +3,13 @@ import react from "@vitejs/plugin-react" // https://vitejs.dev/config/ export default defineConfig({ - plugins: [react()], - optimizeDeps: { - exclude: ["shader-composer", "shader-composer-r3f", "shader-composer-toybox"], - include: ["react/jsx-runtime"] - } + plugins: [react()], + optimizeDeps: { + exclude: [ + "shader-composer", + "@shader-composer/r3f", + "shader-composer-toybox" + ], + include: ["react/jsx-runtime"] + } }) diff --git a/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs b/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs new file mode 100644 index 000000000..fe14d315b --- /dev/null +++ b/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs @@ -0,0 +1,16 @@ +// vite.config.ts +import { defineConfig } from "file:///Users/hmans/src/hmans/composer-suite/node_modules/.pnpm/vite@3.1.6/node_modules/vite/dist/node/index.js" +import react from "file:///Users/hmans/src/hmans/composer-suite/node_modules/.pnpm/@vitejs+plugin-react@2.1.0_vite@3.1.6/node_modules/@vitejs/plugin-react/dist/index.mjs" +var vite_config_default = defineConfig({ + plugins: [react()], + optimizeDeps: { + exclude: [ + "shader-composer", + "@shader-composer/r3f", + "shader-composer-toybox" + ], + include: ["react/jsx-runtime"] + } +}) +export { vite_config_default as default } +//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvaG1hbnMvc3JjL2htYW5zL2NvbXBvc2VyLXN1aXRlL2FwcHMvc2hhZGVyLWNvbXBvc2VyLWV4YW1wbGVzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCIvVXNlcnMvaG1hbnMvc3JjL2htYW5zL2NvbXBvc2VyLXN1aXRlL2FwcHMvc2hhZGVyLWNvbXBvc2VyLWV4YW1wbGVzL3ZpdGUuY29uZmlnLnRzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9Vc2Vycy9obWFucy9zcmMvaG1hbnMvY29tcG9zZXItc3VpdGUvYXBwcy9zaGFkZXItY29tcG9zZXItZXhhbXBsZXMvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tIFwidml0ZVwiXG5pbXBvcnQgcmVhY3QgZnJvbSBcIkB2aXRlanMvcGx1Z2luLXJlYWN0XCJcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG5cdHBsdWdpbnM6IFtyZWFjdCgpXSxcblx0b3B0aW1pemVEZXBzOiB7XG5cdFx0ZXhjbHVkZTogW1wic2hhZGVyLWNvbXBvc2VyXCIsIFwic2hhZGVyLWNvbXBvc2VyLXIzZlwiLCBcInNoYWRlci1jb21wb3Nlci10b3lib3hcIl0sXG5cdFx0aW5jbHVkZTogW1wicmVhY3QvanN4LXJ1bnRpbWVcIl1cblx0fVxufSlcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBMlgsU0FBUyxvQkFBb0I7QUFDeFosT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzNCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFBQSxFQUNqQixjQUFjO0FBQUEsSUFDYixTQUFTLENBQUMsbUJBQW1CLHVCQUF1Qix3QkFBd0I7QUFBQSxJQUM1RSxTQUFTLENBQUMsbUJBQW1CO0FBQUEsRUFDOUI7QUFDRCxDQUFDOyIsCiAgIm5hbWVzIjogW10KfQo= diff --git a/apps/spacerage/package.json b/apps/spacerage/package.json index 6996ece67..63cdb6a91 100644 --- a/apps/spacerage/package.json +++ b/apps/spacerage/package.json @@ -43,7 +43,7 @@ "react-merge-refs": "^1.1.0", "render-composer": "^0.2.8", "shader-composer": "workspace:^0.4.9", - "shader-composer-r3f": "^0.4.5", + "@shader-composer/r3f": "^0.4.5", "shader-composer-toybox": "^0.1.3", "state-composer": "^0.1.0", "statery": "^0.6.2", diff --git a/apps/spacerage/src/scenes/menu/vfx/Nebula.tsx b/apps/spacerage/src/scenes/menu/vfx/Nebula.tsx index 66c23db92..7a4a4ea4c 100644 --- a/apps/spacerage/src/scenes/menu/vfx/Nebula.tsx +++ b/apps/spacerage/src/scenes/menu/vfx/Nebula.tsx @@ -15,7 +15,7 @@ import { Sub, Vec3 } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "@shader-composer/r3f" import { Random } from "shader-composer-toybox" import { Color, TextureLoader } from "three" import { Emitter, InstancedParticles } from "vfx-composer-r3f" diff --git a/apps/vfx-composer-examples/package.json b/apps/vfx-composer-examples/package.json index a2575c31a..19fd2a970 100644 --- a/apps/vfx-composer-examples/package.json +++ b/apps/vfx-composer-examples/package.json @@ -25,7 +25,6 @@ "react-dom": "^18.2.0", "react-merge-refs": "^2.0.1", "shader-composer": "0.4.9", - "shader-composer-r3f": "0.4.5", "shader-composer-toybox": "^0.1.3", "statery": "0.6.2", "three": "^0.145.0", diff --git a/apps/vfx-composer-examples/src/examples/Asteroid.tsx b/apps/vfx-composer-examples/src/examples/Asteroid.tsx index c39936e2d..60a92e021 100644 --- a/apps/vfx-composer-examples/src/examples/Asteroid.tsx +++ b/apps/vfx-composer-examples/src/examples/Asteroid.tsx @@ -22,7 +22,7 @@ import { Vec2, Vec3 } from "shader-composer" -import { PSRDNoise2D } from "shader-composer-toybox" +import { PSRDNoise2D } from "shader-composer" import { Color, DoubleSide } from "three" import { Emitter, diff --git a/apps/vfx-composer-examples/src/examples/FogExample.tsx b/apps/vfx-composer-examples/src/examples/FogExample.tsx index 81374ceca..9e0468f12 100644 --- a/apps/vfx-composer-examples/src/examples/FogExample.tsx +++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx @@ -4,7 +4,7 @@ import { Composable, Modules } from "material-composer-r3f" import { FlatStage, Layers, useRenderPipeline } from "r3f-stage" import { between, plusMinus, upTo } from "randomish" import { Mul, Rotation3DZ, Time } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { Vector3 } from "three" import { Emitter, diff --git a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx index 53476dfc6..00dd4158f 100644 --- a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx +++ b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx @@ -3,7 +3,7 @@ import { composable, modules } from "material-composer-r3f" import { FlatStage, useRenderPipeline } from "r3f-stage" import { between, plusMinus } from "randomish" import { OneMinus } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { AdditiveBlending, Color, DoubleSide, Euler, Vector3 } from "three" import { Emitter, diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx index de39dc730..23efa435e 100644 --- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx +++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx @@ -2,15 +2,7 @@ import { sharedResource } from "@hmans/things" import { pipe } from "fp-ts/function" import { composable, modules } from "material-composer-r3f" import { between, insideSphere, plusMinus, upTo } from "randomish" -import { - Add, - $float, - GlobalTime, - InstanceID, - Mul, - Sin, - $vec3 -} from "shader-composer" +import { float, Add, GlobalTime, InstanceID, Mul, Sin } from "shader-composer" import { RGBADepthPacking, Vector3 } from "three" import { Emitter, @@ -68,10 +60,10 @@ const BlobMaterial = () => { metalness={0.5} roughness={0.6} > - + Add(time, v), (v) => Sin(v), (v) => Mul(v, 0.2), @@ -87,10 +79,10 @@ const BlobDepthMaterial = () => { return ( - + Add(time, v), (v) => Sin(v), (v) => Mul(v, 0.2), diff --git a/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx b/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx index f8bd6fbda..bb083ac3f 100644 --- a/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx +++ b/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx @@ -1,6 +1,6 @@ import { composable, modules } from "material-composer-r3f" import { FlatStage, Layers, useRenderPipeline } from "r3f-stage" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { Emitter, InstancedParticles } from "vfx-composer-r3f" export const SoftParticlesExample = () => { diff --git a/apps/vfx-composer-examples/src/examples/Vanilla.tsx b/apps/vfx-composer-examples/src/examples/Vanilla.tsx index 0cc5a7502..cfbaf3fe0 100644 --- a/apps/vfx-composer-examples/src/examples/Vanilla.tsx +++ b/apps/vfx-composer-examples/src/examples/Vanilla.tsx @@ -85,7 +85,7 @@ const vanillaCode = ( parent.add(particles2) const stopLoop = loop((dt) => { - shaderMeta.update(dt, camera, scene, renderer) + shaderMeta.update(dt, { camera, scene, renderer }) const { velocity, color } = variables diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx index 7eba85db0..f622900ef 100644 --- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx +++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx @@ -4,7 +4,6 @@ import { Layer, LayerArgs } from "material-composer" import { composable, moduleComponent } from "material-composer-r3f" import { Alpha, Gradient, SurfaceWobble } from "material-composer/modules" import { - $vec2, GlobalTime, GradientStops, Input, @@ -14,7 +13,7 @@ import { Unit, UV } from "shader-composer" -import { useUniformUnit } from "shader-composer-r3f" +import { useUniformUnit } from "shader-composer/r3f" import { DoubleSide, RepeatWrapping } from "three" import streamTextureUrl from "../textures/stream.png" import { NoiseMask } from "../units/NoiseMask" @@ -34,8 +33,8 @@ export const AuraLayerModule = ({ texture, wobble = 0, fullness = 0.5, - tiling = $vec2(3, 1), - offset = $vec2(0, 0), + tiling = [3, 1], + offset = [0, 0], time = GlobalTime, ...layerArgs }: AuraArgs) => { diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx index 5f038ae09..fc3c72680 100644 --- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx +++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx @@ -1,6 +1,5 @@ import { pipe } from "fp-ts/function" import { - $vec2, Add, Div, GlobalTime, @@ -15,7 +14,7 @@ import { Sub, UV } from "shader-composer" -import { PSRDNoise2D } from "shader-composer-toybox" +import { PSRDNoise2D } from "shader-composer" /* TODO: extract this into SC or SC-toybox or similar? */ @@ -25,7 +24,7 @@ export const NoiseMask = ( time: Input<"float"> = GlobalTime ) => { const noise = NormalizePlusMinusOne( - PSRDNoise2D(ScaleAndOffset(UV, $vec2(8, 8), $vec2(0, Negate(time)))) + PSRDNoise2D(ScaleAndOffset(UV, [8, 8], [0, Negate(time)])) ) return pipe( diff --git a/archive/react-game-starter/package.json b/archive/react-game-starter/package.json index 793fe349c..bc4699993 100644 --- a/archive/react-game-starter/package.json +++ b/archive/react-game-starter/package.json @@ -29,7 +29,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "shader-composer": "^0.4.5", - "shader-composer-r3f": "^0.4.5", + "@shader-composer/r3f": "^0.4.5", "shader-composer-toybox": "^0.1.3", "statery": "0.6.2", "three": "^0.145.0", diff --git a/archive/react-game-starter/src/Background.tsx b/archive/react-game-starter/src/Background.tsx index f9ecf98fe..41f69a193 100644 --- a/archive/react-game-starter/src/Background.tsx +++ b/archive/react-game-starter/src/Background.tsx @@ -7,7 +7,7 @@ import { Time, VertexPosition } from "shader-composer" -import { useShader } from "shader-composer-r3f" +import { useShader } from "@shader-composer/r3f" import { Simplex3DNoise } from "shader-composer-toybox" import { Color } from "three" diff --git a/archive/react-game-starter/src/scenes/Gameplay/Court.tsx b/archive/react-game-starter/src/scenes/Gameplay/Court.tsx index 2c00fd53a..6095c0ab7 100644 --- a/archive/react-game-starter/src/scenes/Gameplay/Court.tsx +++ b/archive/react-game-starter/src/scenes/Gameplay/Court.tsx @@ -10,7 +10,7 @@ import { vec3, VertexPosition } from "shader-composer" -import { useShader } from "shader-composer-r3f" +import { useShader } from "@shader-composer/r3f" import { Grid2D } from "shader-composer-toybox" import { Color, Mesh } from "three" import { courtHeight, courtWidth, wallColor } from "./configuration" diff --git a/packages/material-composer-patch-material/package.json b/packages/material-composer-patch-material/package.json index 0040f4924..ba9cd21b6 100644 --- a/packages/material-composer-patch-material/package.json +++ b/packages/material-composer-patch-material/package.json @@ -33,10 +33,10 @@ ] }, "devDependencies": { - "shader-composer": "workspace:^0.4.0" + "@shader-composer/core": "workspace:^0.4.9" }, "peerDependencies": { - "shader-composer": ">=0.3.4", + "@shader-composer/core": ">=0.4.9", "three": ">=0.141.0" }, "dependencies": { diff --git a/packages/material-composer-patch-material/src/master.ts b/packages/material-composer-patch-material/src/master.ts index a099b14dc..043cb933b 100644 --- a/packages/material-composer-patch-material/src/master.ts +++ b/packages/material-composer-patch-material/src/master.ts @@ -1,4 +1,4 @@ -import { $, Input, Master } from "shader-composer" +import { $, Input, Master } from "@shader-composer/core" export type PatchedMaterialMasterProps = { position?: Input<"vec3"> diff --git a/packages/material-composer-r3f/package.json b/packages/material-composer-r3f/package.json index 1bec963b3..4d99e7908 100644 --- a/packages/material-composer-r3f/package.json +++ b/packages/material-composer-r3f/package.json @@ -43,8 +43,7 @@ "@hmans/use-version": "^0.0.2", "@material-composer/patch-material": "^0.1.2", "@material-composer/patched": "^0.1.3", - "shader-composer": "^0.4.5", - "shader-composer-r3f": "^0.4.5" + "shader-composer": "^0.4.9" }, "peerDependencies": { "@react-three/fiber": ">=8.0.27", diff --git a/packages/material-composer-r3f/src/composable.tsx b/packages/material-composer-r3f/src/composable.tsx index 133428451..241b9105d 100644 --- a/packages/material-composer-r3f/src/composable.tsx +++ b/packages/material-composer-r3f/src/composable.tsx @@ -10,7 +10,7 @@ import React, { useRef } from "react" import { Unit } from "shader-composer" -import { useShader } from "shader-composer-r3f" +import { useShader } from "shader-composer/r3f" import { Material, RGBADepthPacking } from "three" import { ModuleRegistrationContext, diff --git a/packages/material-composer/src/modules/SurfaceWobble.ts b/packages/material-composer/src/modules/SurfaceWobble.ts index 21bcae9d5..d8481da0f 100644 --- a/packages/material-composer/src/modules/SurfaceWobble.ts +++ b/packages/material-composer/src/modules/SurfaceWobble.ts @@ -1,6 +1,6 @@ import { pipe } from "fp-ts/function" import { Add, Input, Mul } from "shader-composer" -import { PSRDNoise3D } from "shader-composer-toybox" +import { PSRDNoise3D } from "shader-composer" import { ModuleFactory } from ".." export type SurfaceWobbleProps = { diff --git a/packages/material-composer/src/units/experiments.ts b/packages/material-composer/src/units/experiments.ts index 89c258efe..5a155b2da 100644 --- a/packages/material-composer/src/units/experiments.ts +++ b/packages/material-composer/src/units/experiments.ts @@ -1,6 +1,6 @@ import { pipe } from "fp-ts/function" -import { Add, Clamp01, Input, Mul, Pow, $vec3 } from "shader-composer" -import { Turbulence3D } from "shader-composer-toybox" +import { Add, Clamp01, Input, Mul, Pow } from "shader-composer" +import { Turbulence3D } from "shader-composer" export type HeatOptions = { offset?: Input<"vec3" | "float"> @@ -11,7 +11,7 @@ export type HeatOptions = { export const Heat = ( v: Input<"vec3">, - { offset = $vec3(0, 0, 0), scale = 1, octaves = 5, power = 1 }: HeatOptions + { offset = [0, 0, 0], scale = 1, octaves = 5, power = 1 }: HeatOptions ) => pipe( v, diff --git a/packages/render-composer/package.json b/packages/render-composer/package.json index 997f9bc80..0e92fd075 100644 --- a/packages/render-composer/package.json +++ b/packages/render-composer/package.json @@ -45,7 +45,7 @@ "@hmans/use-nullable-state": "workspace:^0.0.1", "fp-ts": "^2.12.3", "shader-composer": "workspace:^0.4.4", - "shader-composer-postprocessing": "workspace:^0.0.1", + "@shader-composer/postprocessing": "workspace:^0.0.1", "test": "^3.2.1" } } diff --git a/packages/render-composer/src/effects/LensDirtEffect.tsx b/packages/render-composer/src/effects/LensDirtEffect.tsx index 55c9fe3b7..d612c99a5 100644 --- a/packages/render-composer/src/effects/LensDirtEffect.tsx +++ b/packages/render-composer/src/effects/LensDirtEffect.tsx @@ -13,7 +13,7 @@ import { PostProcessingEffectMaster, ShaderComposerEffect, UV -} from "shader-composer-postprocessing" +} from "shader-composer/postprocessing" import { Texture } from "three" import { usePostProcessingEffect } from "../lib/usePostProcessingEffect" diff --git a/packages/shader-composer-core/LICENSE.md b/packages/shader-composer-core/LICENSE.md new file mode 100644 index 000000000..614e75493 --- /dev/null +++ b/packages/shader-composer-core/LICENSE.md @@ -0,0 +1,20 @@ +Copyright (c) 2022 Hendrik Mans + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/shader-composer-core/README.md b/packages/shader-composer-core/README.md new file mode 100644 index 000000000..b420e06bc --- /dev/null +++ b/packages/shader-composer-core/README.md @@ -0,0 +1,30 @@ +# shader-composer-core + +## Introduction + +Shader Composer core functionality. + +## License + +``` +Copyright (c) 2022 Hendrik Mans + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +``` diff --git a/packages/shader-composer-core/package.json b/packages/shader-composer-core/package.json new file mode 100644 index 000000000..054900f78 --- /dev/null +++ b/packages/shader-composer-core/package.json @@ -0,0 +1,35 @@ +{ + "name": "@shader-composer/core", + "author": { + "name": "Hendrik Mans", + "email": "hendrik@mans.de", + "url": "https://hmans.co" + }, + "description": "", + "version": "0.4.9", + "main": "dist/shader-composer-core.cjs.js", + "module": "dist/shader-composer-core.esm.js", + "files": [ + "dist/**", + "LICENSE", + "README.md" + ], + "license": "MIT", + "sideEffects": true, + "scripts": { + "build": "preconstruct build" + }, + "babel": { + "presets": [ + "@babel/preset-env", + "@babel/preset-typescript" + ] + }, + "dependencies": { + "fp-ts": "^2.12.3" + }, + "devDependencies": { + "gl-matrix": "^3.4.3", + "three": ">=0.141.0" + } +} diff --git a/packages/shader-composer/src/compiler.ts b/packages/shader-composer-core/src/compiler.ts similarity index 97% rename from packages/shader-composer/src/compiler.ts rename to packages/shader-composer-core/src/compiler.ts index d18d9ed7c..46eb58913 100644 --- a/packages/shader-composer/src/compiler.ts +++ b/packages/shader-composer-core/src/compiler.ts @@ -1,4 +1,3 @@ -import { Camera, Scene, WebGLRenderer } from "three" import { DEBUG } from "./debug" import { Expression } from "./expressions" import { glslRepresentation } from "./glslRepresentation" @@ -246,12 +245,7 @@ export const compileShader = (root: Unit) => { /* STEP 6: Build per-frame update function. */ - const update = ( - dt: number, - camera: Camera, - scene: Scene, - gl: WebGLRenderer - ) => { + const update = (dt: number, payload?: any) => { const now = performance.now() for (const unit of unitsWithUpdates) { @@ -259,7 +253,7 @@ export const compileShader = (root: Unit) => { /* Only invoke the update callback once per frame. */ if (state.lastUpdateAt === undefined || state.lastUpdateAt < now) { - unit._unitConfig.update(dt, camera, scene, gl) + unit._unitConfig.update(dt, payload) state.lastUpdateAt = now } } diff --git a/packages/shader-composer/src/debug.ts b/packages/shader-composer-core/src/debug.ts similarity index 100% rename from packages/shader-composer/src/debug.ts rename to packages/shader-composer-core/src/debug.ts diff --git a/packages/shader-composer/src/expressions.ts b/packages/shader-composer-core/src/expressions.ts similarity index 100% rename from packages/shader-composer/src/expressions.ts rename to packages/shader-composer-core/src/expressions.ts diff --git a/packages/shader-composer-core/src/glslRepresentation.ts b/packages/shader-composer-core/src/glslRepresentation.ts new file mode 100644 index 000000000..20df898ac --- /dev/null +++ b/packages/shader-composer-core/src/glslRepresentation.ts @@ -0,0 +1,77 @@ +import { isExpression } from "./expressions" +import { isArrayWithLength, isObjectWithKeys } from "./glslType" +import { isSnippet } from "./snippets" +import { GLSLType, Input, isUnit, uniformName } from "./units" + +export const glslRepresentation = ( + value: Input | undefined, + typeHint?: GLSLType +): string => { + if (value === undefined) return "" + + if (isUnit(value)) + return value._unitConfig.uniform + ? uniformName(value) + : value._unitConfig.variableName + + if (isExpression(value)) return value.render() + + if (isSnippet(value)) return value.name + + if (typeof value === "string") return value + + if (typeof value === "boolean") return value ? "true" : "false" + + if (typeof value === "number") { + const s = value.toString() + return typeHint === "int" ? s : s.match(/[.e]/) ? s : `${s}.0` + } + + /* Number arrays. If we don't clone them into extra arrays, this code + will somehow get confused when they are TypedArrays. Have not been able + to figure out why. */ + + if (isArrayWithLength(value, 2)) + return `vec2(${[...value].map((n: Input) => g(n)).join(", ")})` + + if (isArrayWithLength(value, 3)) + return `vec3(${[...value].map((n: Input) => g(n)).join(", ")})` + + if (isArrayWithLength(value, 4)) + return `vec4(${[...value].map((n: Input) => g(n)).join(", ")})` + + if (isArrayWithLength(value, 9)) + return `mat3(${[...value].map((n: Input) => g(n)).join(", ")})` + + if (isArrayWithLength(value, 16)) + return `mat4(${[...value].map((n: Input) => g(n)).join(", ")})` + + if (isObjectWithKeys(value, "isMatrix3")) + return `mat3(${value + .toArray() + .map((n: Input) => g(n)) + .join(", ")})` + + if (isObjectWithKeys(value, "isMatrix4")) + return `mat4(${value + .toArray() + .map((n: Input) => g(n)) + .join(", ")})` + + if (isObjectWithKeys(value, "x", "y", "z", "w")) + return `vec4(${g(value.x)}, ${g(value.y)}, ${g(value.z)}, ${g(value.w)})` + + if (isObjectWithKeys(value, "x", "y", "z")) + return `vec3(${g(value.x)}, ${g(value.y)}, ${g(value.z)})` + + if (isObjectWithKeys(value, "r", "g", "b")) + return `vec3(${g(value.r)}, ${g(value.g)}, ${g(value.b)})` + + if (isObjectWithKeys(value, "x", "y")) + return `vec2(${g(value.x)}, ${g(value.y)})` + + /* Fail */ + throw new Error(`Could not render value to GLSL: ${JSON.stringify(value)}`) +} + +const g = glslRepresentation diff --git a/packages/shader-composer-core/src/glslType.ts b/packages/shader-composer-core/src/glslType.ts new file mode 100644 index 000000000..c2cd3bedd --- /dev/null +++ b/packages/shader-composer-core/src/glslType.ts @@ -0,0 +1,107 @@ +import { GLSLType, Input, isUnit } from "./units" + +export type Vector4 = { + x: Input<"float"> + y: Input<"float"> + z: Input<"float"> + w: Input<"float"> +} + +export type Vector3 = + | { x: Input<"float">; y: Input<"float">; z: Input<"float"> } + | { isVector3: true } + | [Input<"float">, Input<"float">, Input<"float">] + +export type Vector2 = + | { x: Input<"float">; y: Input<"float"> } + | { isVector2: true } + | [Input<"float">, Input<"float">] + +export type Color = { r: Input<"float">; g: Input<"float">; b: Input<"float"> } + +export type Matrix2 = [ + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float"> +] + +export type Matrix3 = [ + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float"> +] + +export type Matrix4 = [ + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float">, + Input<"float"> +] + +export type GLSLTypeFor = JSType extends number + ? "float" + : JSType extends boolean + ? "bool" + : JSType extends { isTexture: any } + ? "sampler2D" + : JSType extends Vector4 + ? "vec4" + : JSType extends Vector3 + ? "vec3" + : JSType extends Color + ? "vec3" + : JSType extends Vector2 + ? "vec2" + : JSType extends Matrix2 + ? "mat2" + : JSType extends Matrix3 + ? "mat3" + : JSType extends Matrix4 + ? "mat4" + : never + +export const glslType = (value: Input): T => { + if (isUnit(value)) return value._unitConfig.type as T + + if (typeof value === "number") return "float" as T + if (isObjectWithKeys(value, "x", "y", "z", "w")) return "vec4" as T + if (isObjectWithKeys(value, "r", "g", "b")) return "vec3" as T + if (isObjectWithKeys(value, "x", "y", "z")) return "vec3" as T + if (isObjectWithKeys(value, "x", "y")) return "vec2" as T + if (isArrayWithLength(value, 9)) return "mat3" as T + if (isArrayWithLength(value, 16)) return "mat4" as T + + /* Fail */ + throw new Error(`Could not render GLSL type for: ${value}`) +} + +export const type = glslType + +export function isArrayWithLength(obj: any, length: number) { + return ( + (obj instanceof Float32Array || Array.isArray(obj)) && obj.length === length + ) +} + +export function isObjectWithKeys(obj: any, ...keys: string[]) { + return keys.every((key) => obj[key] !== undefined) +} diff --git a/packages/shader-composer-core/src/index.ts b/packages/shader-composer-core/src/index.ts new file mode 100644 index 000000000..ae4646aaa --- /dev/null +++ b/packages/shader-composer-core/src/index.ts @@ -0,0 +1,8 @@ +export { compileShader } from "./compiler" +export { disableDebugging, enableDebugging } from "./debug" +export * from "./expressions" +export * from "./glslType" +export * from "./snippets" +export * from "./stdlib" +export * from "./tree" +export * from "./units" diff --git a/packages/shader-composer/src/snippets.ts b/packages/shader-composer-core/src/snippets.ts similarity index 100% rename from packages/shader-composer/src/snippets.ts rename to packages/shader-composer-core/src/snippets.ts diff --git a/packages/shader-composer/src/stdlib/artistic.ts b/packages/shader-composer-core/src/stdlib/artistic.ts similarity index 100% rename from packages/shader-composer/src/stdlib/artistic.ts rename to packages/shader-composer-core/src/stdlib/artistic.ts diff --git a/packages/shader-composer/src/stdlib/index.ts b/packages/shader-composer-core/src/stdlib/index.ts similarity index 100% rename from packages/shader-composer/src/stdlib/index.ts rename to packages/shader-composer-core/src/stdlib/index.ts diff --git a/packages/shader-composer/src/stdlib/logic.ts b/packages/shader-composer-core/src/stdlib/logic.ts similarity index 100% rename from packages/shader-composer/src/stdlib/logic.ts rename to packages/shader-composer-core/src/stdlib/logic.ts diff --git a/packages/shader-composer/src/stdlib/masters.ts b/packages/shader-composer-core/src/stdlib/masters.ts similarity index 95% rename from packages/shader-composer/src/stdlib/masters.ts rename to packages/shader-composer-core/src/stdlib/masters.ts index 1db48227f..980cac77f 100644 --- a/packages/shader-composer/src/stdlib/masters.ts +++ b/packages/shader-composer-core/src/stdlib/masters.ts @@ -1,8 +1,7 @@ -import { Color } from "three" import { $ } from "../expressions" import { Input } from "../units" import { VertexPosition } from "./variables" -import { Master } from "./values" +import { Master, Vec3 } from "./values" export type ShaderMaterialMasterProps = { color?: Input<"vec3"> @@ -11,7 +10,7 @@ export type ShaderMaterialMasterProps = { } export const ShaderMaterialMaster = ({ - color = new Color("red"), + color = Vec3([1, 0, 0]), alpha = 1, position = VertexPosition }: ShaderMaterialMasterProps = {}) => diff --git a/packages/shader-composer/src/stdlib/math.ts b/packages/shader-composer-core/src/stdlib/math.ts similarity index 100% rename from packages/shader-composer/src/stdlib/math.ts rename to packages/shader-composer-core/src/stdlib/math.ts diff --git a/packages/shader-composer/src/stdlib/rotation.ts b/packages/shader-composer-core/src/stdlib/rotation.ts similarity index 94% rename from packages/shader-composer/src/stdlib/rotation.ts rename to packages/shader-composer-core/src/stdlib/rotation.ts index f42fa0900..e0fec35b3 100644 --- a/packages/shader-composer/src/stdlib/rotation.ts +++ b/packages/shader-composer-core/src/stdlib/rotation.ts @@ -7,7 +7,7 @@ import { rotation3dZ } from "../vendor/glsl-rotate" import { Mul } from "./math" -import { $mat3, Mat3, Mat4 } from "./values" +import { mat3, Mat3, Mat4 } from "./values" /** * Generates a Shader Unit of type `mat4` representing a rotation around a specified @@ -42,7 +42,7 @@ export const Rotate3D = ( position: Input<"vec3">, axis: Input<"vec3">, angle: Input<"float"> -) => Mul(position, $mat3(Rotation3D(axis, angle))) +) => Mul(position, mat3(Rotation3D(axis, angle))) export const RotateX = (position: Input<"vec3">, angle: Input<"float">) => Mul(position, Rotation3DX(angle)) diff --git a/packages/shader-composer/src/stdlib/scene.ts b/packages/shader-composer-core/src/stdlib/scene.ts similarity index 100% rename from packages/shader-composer/src/stdlib/scene.ts rename to packages/shader-composer-core/src/stdlib/scene.ts diff --git a/packages/shader-composer/src/stdlib/spaces.ts b/packages/shader-composer-core/src/stdlib/spaces.ts similarity index 100% rename from packages/shader-composer/src/stdlib/spaces.ts rename to packages/shader-composer-core/src/stdlib/spaces.ts diff --git a/packages/shader-composer/src/stdlib/textures.ts b/packages/shader-composer-core/src/stdlib/textures.ts similarity index 100% rename from packages/shader-composer/src/stdlib/textures.ts rename to packages/shader-composer-core/src/stdlib/textures.ts diff --git a/packages/shader-composer/src/stdlib/values.test.ts b/packages/shader-composer-core/src/stdlib/values.test.ts similarity index 59% rename from packages/shader-composer/src/stdlib/values.test.ts rename to packages/shader-composer-core/src/stdlib/values.test.ts index 5721acdf1..5730ea29e 100644 --- a/packages/shader-composer/src/stdlib/values.test.ts +++ b/packages/shader-composer-core/src/stdlib/values.test.ts @@ -1,20 +1,11 @@ -import { Color, Vector2, Vector3 } from "three" +import { Vector4 } from "three" import { glslRepresentation } from "../glslRepresentation" -import { - $float, - $mat2, - $swizzle, - $vec2, - $vec3, - $vec4, - Int, - Vec3 -} from "./values" - -describe("$float", () => { +import { float, mat2, swizzle, vec3, vec4, Int, Vec3, Vec4 } from "./values" + +describe("float", () => { it("returns an expression that casts the given value to a float", () => { const value = Int(1) - const cast = $float(value) + const cast = float(value) expect(glslRepresentation(cast)).toEqual( `float(${glslRepresentation(value)})` @@ -22,54 +13,62 @@ describe("$float", () => { }) }) -describe("$vec3", () => { +describe("vec3", () => { it("returns an expression that casts the given value to a vec3", () => { - const cast = $vec3(new Color("red")) + const cast = vec3({ r: 1, g: 0, b: 0 }) expect(glslRepresentation(cast)).toEqual(`vec3(vec3(1.0, 0.0, 0.0))`) }) + it("casts another unit to a vec3", () => { + const unit = Vec4(new Vector4(1, 2, 3, 4)) + const cast = vec3(unit) + expect(glslRepresentation(cast)).toEqual( + `vec3(${glslRepresentation(unit)})` + ) + }) + it("casts a Vector3 to a vec3", () => { - const cast = $vec3(new Vector3(1, 0, 0)) + const cast = vec3({ x: 1, y: 0, z: 0 }) expect(glslRepresentation(cast)).toEqual(`vec3(vec3(1.0, 0.0, 0.0))`) }) it("casts multiple floats to a vec3", () => { - const cast = $vec3(1, 0, 0) - expect(glslRepresentation(cast)).toEqual(`vec3(1.0, 0.0, 0.0)`) + const cast = vec3([1, 0, 0]) + expect(glslRepresentation(cast)).toEqual(`vec3(vec3(1.0, 0.0, 0.0))`) }) it("casts multiple components to a vec3", () => { - const cast = $vec3(new Vector2(1, 2), 3) - expect(glslRepresentation(cast)).toEqual(`vec3(vec2(1.0, 2.0), 3.0)`) + const cast = vec3([{ x: 1, y: 2 }, 3]) + expect(glslRepresentation(cast)).toEqual(`vec3(vec2(vec2(1.0, 2.0), 3.0))`) }) }) -describe("$vec3", () => { +describe("vec4", () => { it("casts multiple components to a vec4", () => { - const cast = $vec4(new Vector2(1, 2), new Vector2(3, 4)) + const cast = vec4([{ x: 1, y: 2 }, [3, 4]]) expect(glslRepresentation(cast)).toEqual( - `vec4(vec2(1.0, 2.0), vec2(3.0, 4.0))` + `vec4(vec2(vec2(1.0, 2.0), vec2(3.0, 4.0)))` ) }) }) -describe("$mat2", () => { +describe("mat2", () => { it("casts float components to a mat2", () => { - const cast = $mat2(1, 2, 3, 4) - expect(glslRepresentation(cast)).toEqual(`mat2(1.0, 2.0, 3.0, 4.0)`) + const cast = mat2([1, 2, 3, 4]) + expect(glslRepresentation(cast)).toEqual(`mat2(vec4(1.0, 2.0, 3.0, 4.0))`) }) it("casts vector components to a mat2", () => { - const cast = $mat2(new Vector2(1, 2), $vec2(3, 4)) + const cast = mat2([{ x: 1, y: 2 }, [3, 4]]) expect(glslRepresentation(cast)).toEqual( - `mat2(vec2(1.0, 2.0), vec2(3.0, 4.0))` + `mat2(vec2(vec2(1.0, 2.0), vec2(3.0, 4.0)))` ) }) }) describe("Vec3", () => { it("value is a unit", () => { - const unit = Vec3(new Vector3(1, 2, 3)) + const unit = Vec3({ x: 1, y: 2, z: 3 }) const v = Vec3(unit) expect(glslRepresentation(v._unitConfig.value)).toEqual( `vec3(${glslRepresentation(unit)})` @@ -77,7 +76,7 @@ describe("Vec3", () => { }) it("value is a JS value with its own GLSL representation", () => { - const value = new Vector3(1, 2, 3) + const value = { x: 1, y: 2, z: 3 } const v = Vec3(value) expect(glslRepresentation(v._unitConfig.value)).toEqual( `vec3(vec3(1.0, 2.0, 3.0))` @@ -88,34 +87,34 @@ describe("Vec3", () => { const value = [1, 2, 3] const v = Vec3(value) expect(glslRepresentation(v._unitConfig.value)).toEqual( - `vec3(1.0, 2.0, 3.0)` + `vec3(vec3(1.0, 2.0, 3.0))` ) }) it("value is a 'nested' array. Well, kinda.", () => { const v = Vec3([1, ...[2, 3]]) expect(glslRepresentation(v._unitConfig.value)).toEqual( - `vec3(1.0, 2.0, 3.0)` + `vec3(vec3(1.0, 2.0, 3.0))` ) }) it("provides .x, .y, and .z accessors", () => { - const v = Vec3(new Vector3(), { variableName: "foo" }) + const v = Vec3({ x: 1, y: 2, z: 3 }, { variableName: "foo" }) expect(glslRepresentation(v.x._unitConfig.value)).toBe("foo.x") expect(glslRepresentation(v.y._unitConfig.value)).toBe("foo.y") expect(glslRepresentation(v.z._unitConfig.value)).toBe("foo.z") }) }) -describe("$swizzle", () => { +describe("swizzle", () => { it("swizzles a value", () => { - const swizzled = $swizzle(new Vector3(1, 2, 3), "xyy") + const swizzled = swizzle({ x: 1, y: 2, z: 3 }, "xyy") expect(glslRepresentation(swizzled)).toEqual("vec3(1.0, 2.0, 3.0).xyy") }) it("swizzles a unit", () => { - const v = Vec3(new Vector3(1, 2, 3)) - const swizzled = $swizzle(v, "xyy") + const v = Vec3({ x: 1, y: 2, z: 3 }) + const swizzled = swizzle(v, "xyy") expect(glslRepresentation(swizzled)).toEqual(`${glslRepresentation(v)}.xyy`) }) }) diff --git a/packages/shader-composer/src/stdlib/values.ts b/packages/shader-composer-core/src/stdlib/values.ts similarity index 60% rename from packages/shader-composer/src/stdlib/values.ts rename to packages/shader-composer-core/src/stdlib/values.ts index 5786719cd..7dd8890d2 100644 --- a/packages/shader-composer/src/stdlib/values.ts +++ b/packages/shader-composer-core/src/stdlib/values.ts @@ -10,47 +10,45 @@ import { GLSLType, Input, isUnit, Unit, UnitConfig } from "../units" * constructors, who will automatically cast the given values to the correct * type. */ -export type CastableInput = Input +export type CastableInput = any +/* NOTE: this will currently always allow any GLSL input. We may narrow it over time. */ -export type CastFunction = ( - ...values: CastableInput[] -) => Expression +export type CastFunction = (...values: CastableInput[]) => Expression /** * Returns an expression that casts the given values to a `float`. */ -export const $float = (...values: CastableInput<"float">[]) => - $`float(${values})` +export const float = (value: CastableInput) => $`float(${value})` /** * Returns an expression that casts the given values to a `vec2`. */ -export const $vec2 = (...values: CastableInput<"vec2">[]) => $`vec2(${values})` +export const vec2 = (value: CastableInput) => $`vec2(${value})` /** * Returns an expression that casts the given values to a `vec3`. */ -export const $vec3 = (...values: CastableInput<"vec3">[]) => $`vec3(${values})` +export const vec3 = (value: CastableInput) => $`vec3(${value})` /** * Returns an expression that casts the given values to a `vec4`. */ -export const $vec4 = (...values: CastableInput<"vec4">[]) => $`vec4(${values})` +export const vec4 = (value: CastableInput) => $`vec4(${value})` /** * Returns an expression that casts the given values to a `mat2`. */ -export const $mat2 = (...values: CastableInput<"mat2">[]) => $`mat2(${values})` +export const mat2 = (value: CastableInput) => $`mat2(${value})` /** * Returns an expression that casts the given values to a `mat3`. */ -export const $mat3 = (...values: CastableInput<"mat3">[]) => $`mat3(${values})` +export const mat3 = (value: CastableInput) => $`mat3(${value})` /** * Returns an expression that casts the given values to a `mat4`. */ -export const $mat4 = (...values: CastableInput<"mat4">[]) => $`mat4(${values})` +export const mat4 = (value: CastableInput) => $`mat4(${value})` /** * Returns an expression that swizzles the given value with the provided @@ -60,7 +58,7 @@ export const $mat4 = (...values: CastableInput<"mat4">[]) => $`mat4(${values})` * @param swizzle The swizzling components to use. * @returns An expression that swizzles the given value with the provided swizzle string. */ -export const $swizzle = (v: Input, swizzle: string) => $`${v}.${swizzle}` +export const swizzle = (v: Input, swizzle: string) => $`${v}.${swizzle}` export const unit = ( i: Input, @@ -85,19 +83,19 @@ const makeUnitFactory = Unit(type, v, extras) as Unit const makeCastableUnitFactory = - (type: T, castFunction: CastFunction) => - (v: CastableInput | CastableInput[], extras?: Partial>) => - Unit(type, castFunction(...(Array.isArray(v) ? v : [v])), extras) as Unit + (type: T, castFunction: CastFunction) => + (v: CastableInput, extras?: Partial>) => + Unit(type, castFunction(v), extras) as Unit -export const Float = makeCastableUnitFactory("float", $float) +export const Float = makeCastableUnitFactory("float", float) export const Int = makeUnitFactory("int") export const Bool = makeUnitFactory("bool") -export const Vec2 = makeCastableUnitFactory("vec2", $vec2) -export const Vec3 = makeCastableUnitFactory("vec3", $vec3) -export const Vec4 = makeCastableUnitFactory("vec4", $vec4) -export const Mat2 = makeCastableUnitFactory("mat2", $mat2) -export const Mat3 = makeCastableUnitFactory("mat3", $mat3) -export const Mat4 = makeCastableUnitFactory("mat4", $mat4) +export const Vec2 = makeCastableUnitFactory("vec2", vec2) +export const Vec3 = makeCastableUnitFactory("vec3", vec3) +export const Vec4 = makeCastableUnitFactory("vec4", vec4) +export const Mat2 = makeCastableUnitFactory("mat2", mat2) +export const Mat3 = makeCastableUnitFactory("mat3", mat3) +export const Mat4 = makeCastableUnitFactory("mat4", mat4) export const Master = (extras?: Partial>) => Bool(true, extras) diff --git a/packages/shader-composer/src/stdlib/variables.test.ts b/packages/shader-composer-core/src/stdlib/variables.test.ts similarity index 100% rename from packages/shader-composer/src/stdlib/variables.test.ts rename to packages/shader-composer-core/src/stdlib/variables.test.ts diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer-core/src/stdlib/variables.ts similarity index 90% rename from packages/shader-composer/src/stdlib/variables.ts rename to packages/shader-composer-core/src/stdlib/variables.ts index 57769fe55..a7df6f416 100644 --- a/packages/shader-composer/src/stdlib/variables.ts +++ b/packages/shader-composer-core/src/stdlib/variables.ts @@ -1,4 +1,3 @@ -import { PerspectiveCamera, Vector2 } from "three" import { $, Expression } from "../expressions" import { GLSLType, injectAPI, JSTypes, Unit, UnitConfig } from "../units" import { $localToViewSpace, $localToWorldSpace } from "./spaces" @@ -182,32 +181,35 @@ export const Time = (initial: number = 0) => { */ export const GlobalTime = Time() -export const Resolution = UniformUnit("vec2", new Vector2(0, 0), { - name: "Current Render Resolution", +export const Resolution = UniformUnit( + "vec2", + { x: 0, y: 0 }, + { + name: "Current Render Resolution", - update: (dt, camera, scene, gl) => { - Resolution.value.x = gl.domElement.width - Resolution.value.y = gl.domElement.height + update: () => { + "Please customize the Resolution unit with the relevant code for your environment." + } } -}) +) export const CameraNear = UniformUnit("float", 0 as number, { name: "Camera Near Plane", - update: (_, camera) => { - if (camera instanceof PerspectiveCamera) { - CameraNear.value = camera.near - } + update: () => { + console.warn( + "Please customize the CameraNear unit with the relevant code for your environment." + ) } }) export const CameraFar = UniformUnit("float", 0 as number, { name: "Camera Far Plane", - update: (_, camera) => { - if (camera instanceof PerspectiveCamera) { - CameraFar.value = camera.far - } + update: () => { + console.warn( + "Please customize the CameraNear unit with the relevant code for your environment." + ) } }) diff --git a/packages/shader-composer/src/stdlib/vectors.ts b/packages/shader-composer-core/src/stdlib/vectors.ts similarity index 100% rename from packages/shader-composer/src/stdlib/vectors.ts rename to packages/shader-composer-core/src/stdlib/vectors.ts diff --git a/packages/shader-composer/src/tree.ts b/packages/shader-composer-core/src/tree.ts similarity index 100% rename from packages/shader-composer/src/tree.ts rename to packages/shader-composer-core/src/tree.ts diff --git a/packages/shader-composer/src/units.ts b/packages/shader-composer-core/src/units.ts similarity index 95% rename from packages/shader-composer/src/units.ts rename to packages/shader-composer-core/src/units.ts index 45493d87d..1adb385a9 100644 --- a/packages/shader-composer/src/units.ts +++ b/packages/shader-composer-core/src/units.ts @@ -1,16 +1,13 @@ +import { $, Expression } from "./expressions" import { - Camera, Color, + Matrix2, Matrix3, Matrix4, - Scene, - Texture, Vector2, Vector3, - Vector4, - WebGLRenderer -} from "three" -import { $, Expression } from "./expressions" + Vector4 +} from "./glslType" import { identifier } from "./util/concatenator3000" export type Program = "vertex" | "fragment" @@ -37,20 +34,15 @@ export type JSTypes = { vec2: Vector2 vec3: Vector3 | Color vec4: Vector4 - mat2: [number, number, number, number] + mat2: Matrix2 mat3: Matrix3 mat4: Matrix4 - sampler2D: Texture + sampler2D: { isTexture: any } } export type Input = Expression | JSTypes[T] | Unit -export type UpdateCallback = ( - dt: number, - camera: Camera, - scene: Scene, - gl: WebGLRenderer -) => void +export type UpdateCallback = (dt: number, payload?: any) => void export type UnitConfig = { /** diff --git a/packages/shader-composer/src/util/concatenator3000.ts b/packages/shader-composer-core/src/util/concatenator3000.ts similarity index 100% rename from packages/shader-composer/src/util/concatenator3000.ts rename to packages/shader-composer-core/src/util/concatenator3000.ts diff --git a/packages/shader-composer/src/util/idGenerator.ts b/packages/shader-composer-core/src/util/idGenerator.ts similarity index 100% rename from packages/shader-composer/src/util/idGenerator.ts rename to packages/shader-composer-core/src/util/idGenerator.ts diff --git a/packages/shader-composer/src/vendor/glsl-rotate.ts b/packages/shader-composer-core/src/vendor/glsl-rotate.ts similarity index 100% rename from packages/shader-composer/src/vendor/glsl-rotate.ts rename to packages/shader-composer-core/src/vendor/glsl-rotate.ts diff --git a/packages/shader-composer/src/vendor/index.ts b/packages/shader-composer-core/src/vendor/index.ts similarity index 100% rename from packages/shader-composer/src/vendor/index.ts rename to packages/shader-composer-core/src/vendor/index.ts diff --git a/packages/shader-composer/src/__snapshots__/compiler.test.ts.snap b/packages/shader-composer-core/test/__snapshots__/compiler.test.ts.snap similarity index 100% rename from packages/shader-composer/src/__snapshots__/compiler.test.ts.snap rename to packages/shader-composer-core/test/__snapshots__/compiler.test.ts.snap diff --git a/packages/shader-composer/src/__snapshots__/units.test.ts.snap b/packages/shader-composer-core/test/__snapshots__/units.test.ts.snap similarity index 100% rename from packages/shader-composer/src/__snapshots__/units.test.ts.snap rename to packages/shader-composer-core/test/__snapshots__/units.test.ts.snap diff --git a/packages/shader-composer/src/compiler.test.ts b/packages/shader-composer-core/test/compiler.test.ts similarity index 96% rename from packages/shader-composer/src/compiler.test.ts rename to packages/shader-composer-core/test/compiler.test.ts index 4039865a3..b93750726 100644 --- a/packages/shader-composer/src/compiler.test.ts +++ b/packages/shader-composer-core/test/compiler.test.ts @@ -1,7 +1,7 @@ -import { compileShader } from "./compiler" -import { $, glsl } from "./expressions" -import { Snippet } from "./snippets" -import { Bool, Float, Int, Master } from "./stdlib" +import { compileShader } from "../src/compiler" +import { $, glsl } from "../src/expressions" +import { Snippet } from "../src/snippets" +import { Bool, Float, Int, Master } from "../src/stdlib" describe("compileShader", () => { it("compiles shader programs from the given unit", () => { diff --git a/packages/shader-composer/src/expressions.test.ts b/packages/shader-composer-core/test/expressions.test.ts similarity index 76% rename from packages/shader-composer/src/expressions.test.ts rename to packages/shader-composer-core/test/expressions.test.ts index 606ebb4e5..5680ac4d0 100644 --- a/packages/shader-composer/src/expressions.test.ts +++ b/packages/shader-composer-core/test/expressions.test.ts @@ -1,4 +1,4 @@ -import { $, glsl, isExpression } from "./expressions" +import { $, glsl, isExpression } from "../src/expressions" describe("glsl", () => { it("creates an Expression instance", () => { @@ -13,6 +13,6 @@ describe("glsl", () => { it("handles nested values", () => { const expr = $`foo = vec3(${[1, 2, 3]})` - expect(expr.render()).toBe("foo = vec3(1.0, 2.0, 3.0)") + expect(expr.render()).toBe("foo = vec3(vec3(1.0, 2.0, 3.0))") }) }) diff --git a/packages/shader-composer-core/test/glslRepresentation.test.ts b/packages/shader-composer-core/test/glslRepresentation.test.ts new file mode 100644 index 000000000..9bba393aa --- /dev/null +++ b/packages/shader-composer-core/test/glslRepresentation.test.ts @@ -0,0 +1,101 @@ +import { Matrix3, Matrix4 } from "three" +import { glslRepresentation } from "../src/glslRepresentation" +import * as glmatrix from "gl-matrix" + +describe("glslRepresentation", () => { + it("renders numbers as floats", () => { + expect(glslRepresentation(1)).toBe("1.0") + }) + + it("keeps decimal places", () => { + expect(glslRepresentation(1.2345)).toBe("1.2345") + }) + + it("keeps exponents", () => { + expect(glslRepresentation(0.0000000001)).toBe("1e-10") + }) + + it("renders an array with 9 elements to a mat3", () => { + expect(glslRepresentation([1, 2, 3, 4, 5, 6, 7, 8, 9])).toBe( + "mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0)" + ) + }) + + it("renders a Matrix3 instance to mat3", () => { + expect(glslRepresentation(new Matrix3())).toBe( + "mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0)" + ) + }) + + it("renders gl-matrix mat3 to a mat3", () => { + expect( + glslRepresentation( + glmatrix.mat3.set(glmatrix.mat3.create(), 1, 2, 3, 4, 5, 6, 7, 8, 9) + ) + ).toBe("mat3(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0)") + }) + + it("renders an array with 16 elements to a mat4", () => { + expect( + glslRepresentation([ + 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16 + ]) + ).toBe( + "mat4(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)" + ) + }) + + it("renders a Matrix4 instance to mat4", () => { + expect(glslRepresentation(new Matrix4())).toBe( + "mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0)" + ) + }) + + it("renders gl-matrix mat4 to a mat4", () => { + expect(glslRepresentation(glmatrix.mat4.create())).toBe( + "mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0)" + ) + }) + + it("renders vector2-like objects to vec2", () => { + expect(glslRepresentation({ x: 1, y: 2 })).toBe("vec2(1.0, 2.0)") + }) + + it("renders arrays with 2 numbers to vec2", () => { + expect(glslRepresentation([1, 2])).toBe("vec2(1.0, 2.0)") + }) + + it("renders gl-matrix vec2 to a vec2", () => { + expect(glslRepresentation(glmatrix.vec2.create())).toBe("vec2(0.0, 0.0)") + }) + + it("renders vector3-like objects to vec3", () => { + expect(glslRepresentation({ x: 1, y: 2, z: 3 })).toBe("vec3(1.0, 2.0, 3.0)") + }) + + it("renders arrays with 3 numbers to vec3", () => { + expect(glslRepresentation([1, 2, 3])).toBe("vec3(1.0, 2.0, 3.0)") + }) + + it("renders gl-matrix vec3 to a vec3", () => { + expect(glslRepresentation(glmatrix.vec3.create())).toBe( + "vec3(0.0, 0.0, 0.0)" + ) + }) + + it("renders vector4-like objects to vec4", () => { + expect(glslRepresentation({ x: 1, y: 2, z: 3, w: 4 })).toBe( + "vec4(1.0, 2.0, 3.0, 4.0)" + ) + }) + + it("renders arrays with 4 numbers to vec4", () => { + expect(glslRepresentation([1, 2, 3, 4])).toBe("vec4(1.0, 2.0, 3.0, 4.0)") + }) + + it("renders gl-matrix vec4 to a vec4", () => { + expect(glslRepresentation(glmatrix.vec4.create())).toBe( + "vec4(0.0, 0.0, 0.0, 0.0)" + ) + }) +}) diff --git a/packages/shader-composer/src/tree.test.ts b/packages/shader-composer-core/test/tree.test.ts similarity index 75% rename from packages/shader-composer/src/tree.test.ts rename to packages/shader-composer-core/test/tree.test.ts index 6e5e68bd3..36957d9b8 100644 --- a/packages/shader-composer/src/tree.test.ts +++ b/packages/shader-composer-core/test/tree.test.ts @@ -1,9 +1,8 @@ -import { Color } from "three" -import { $ } from "./expressions" -import { Snippet } from "./snippets" -import { Float, Master, Vec3 } from "./stdlib" -import { collectFromTree, Item, walkTree } from "./tree" -import { isUnit } from "./units" +import { $ } from "../src/expressions" +import { Snippet } from "../src/snippets" +import { Float, Master, Vec3 } from "../src/stdlib" +import { collectFromTree, Item, walkTree } from "../src/tree" +import { isUnit } from "../src/units" describe("walkTree", () => { it("walks a given node tree", () => { @@ -27,12 +26,12 @@ describe("walkTree", () => { }) it("includes constant values", () => { - const color = new Color() - const root = Vec3(color) + const a = 123 + const root = Vec3(a) const seen = new Array() walkTree(root, "any", (item) => seen.push(item)) - expect(seen).toEqual([color, root._unitConfig.value, root]) + expect(seen).toEqual([a, root._unitConfig.value, root]) }) describe("when a program is specified", () => { diff --git a/packages/shader-composer/src/units.test.ts b/packages/shader-composer-core/test/units.test.ts similarity index 89% rename from packages/shader-composer/src/units.test.ts rename to packages/shader-composer-core/test/units.test.ts index 048f87ec2..c5494c11c 100644 --- a/packages/shader-composer/src/units.test.ts +++ b/packages/shader-composer-core/test/units.test.ts @@ -1,9 +1,8 @@ -import { Vector2 } from "three" -import { compileShader } from "./compiler" -import { $ } from "./expressions" -import { glslRepresentation } from "./glslRepresentation" -import { Float, Vec2 } from "./stdlib" -import { Input, Unit } from "./units" +import { compileShader } from "../src/compiler" +import { $ } from "../src/expressions" +import { glslRepresentation } from "../src/glslRepresentation" +import { Float, Vec2 } from "../src/stdlib" +import { Input, Unit } from "../src/units" const glsl = glslRepresentation @@ -86,8 +85,8 @@ describe("Unit", () => { }) describe("Vec2", () => { - it("accepts a THREE.Vector2 as value", () => { - const vec2 = Vec2(new Vector2(1, 2)) + it("accepts a Vector2-like object as value", () => { + const vec2 = Vec2([1, 2]) expect(glsl(vec2._unitConfig.value)).toBe("vec2(vec2(1.0, 2.0))") }) }) diff --git a/packages/shader-composer-core/tsconfig.json b/packages/shader-composer-core/tsconfig.json new file mode 100644 index 000000000..52d43eaaa --- /dev/null +++ b/packages/shader-composer-core/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/shader-composer-noise/CHANGELOG.md b/packages/shader-composer-noise/CHANGELOG.md new file mode 100644 index 000000000..522263f39 --- /dev/null +++ b/packages/shader-composer-noise/CHANGELOG.md @@ -0,0 +1,129 @@ +# shader-composer-r3f + +## 0.4.5 + +### Patch Changes + +- d3e2b88: **New:** `shader-composer-r3f` now provides its own mechanism for patching Three.js materials through its new `ShaderMaster` master unit and `` React component: + + ```tsx + function MyShadedThingy() { + const shader = useShader(() => { + return ShaderMaster({ + color: /* ... */ + position: /* ... */ + /* etc. */ + }) + }, []) + + return ( + + + + + + + + ) + } + ``` + +- Updated dependencies [a962a31] + - shader-composer@0.4.5 + +## 0.4.0 + +### Minor Changes + +- c3dcb12: **Breaking Change:** Removed the `Custom.*` proxy for CustomShaderMaterial. (You were probably not using it, but who knows!) For a similar proxy-based system, please use `@material-composer/patched`. + +### Patch Changes + +- Updated dependencies [a92d0d3] +- Updated dependencies [433f93b] +- Updated dependencies [765b29d] +- Updated dependencies [9406986] +- Updated dependencies [6d99c19] +- Updated dependencies [765b29d] + - shader-composer@0.4.0 + +## 0.2.0 + +### Breaking Changes + +- 104be03: **Breaking Change:** `Uniform` is now called `UniformUnit`. The r3f package's `useUniform` is now `useUniformUnit`. + +### Minor Changes + +- a4739b1: `shader-composer-r3f` now includes `three-custom-shader-material` as a dependency. +- 7822988: Uses new `update` syntax from Shader Composer 0.3.0. +- 725ab24: Added a `` component that wraps all the available Three.js materials (making use of the [three-custom-shader-material](https://github.com/FarazzShaikh/THREE-CustomShaderMaterial) library), making it super-easy to create instances of these materials using your custom shaders: + + ```jsx + + + + + + + + ``` + +- a4739b1: Added `` for easy-as-pie custom depth materials. + +## 0.1.1 + +### Patch Changes + +- 91b74eb: **Added:** `useUniform` now allows the user to pass an optional third argument, `config`, which is the custom unit configuration to mix into the created uniform (analogous to the third argument of Shader Composer's `Uniform()`.) Among other things, this allows you to explicitly configure the uniform's GLSL name by passing a `uniformName` property as part of this object. + +## 0.1.0 + +### Minor Changes + +- 74e6d2a: **Breaking Change:** The return signature of `compileShader` has been changed. It now returns `[shader, meta]`, where `shader` is the object containing the shader properties (like before), and `meta` is an object containing the `update` function, and a `units` array containing all units used in the tree. + +## 0.0.5 + +### Patch Changes + +- b59783e: New hook, `useUniform`. Will create a uniform of the specified type, and effectfully update its value when the passed value changes. Example: + + ```js + const uniform = useUniform("float", 1) + ``` + +## 0.0.4 + +### Patch Changes + +- c2157ff: We're trying prereleases! Let's go! + +## 0.0.4-next.0 + +### Patch Changes + +- c2157ff: We're trying prereleases! Let's go! +- Updated dependencies [c2157ff] + - shader-composer@0.0.4-next.0 + +## 0.0.3 + +### Patch Changes + +- cc339f2: Bump version to fix changesets. :( +- Updated dependencies [cc339f2] + - shader-composer@0.0.3 + +## 0.0.2 + +### Patch Changes + +- 7e1d721: First release! +- Updated dependencies [7e1d721] + - shader-composer@0.0.2 diff --git a/packages/shader-composer-noise/LICENSE.md b/packages/shader-composer-noise/LICENSE.md new file mode 100644 index 000000000..614e75493 --- /dev/null +++ b/packages/shader-composer-noise/LICENSE.md @@ -0,0 +1,20 @@ +Copyright (c) 2022 Hendrik Mans + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/shader-composer-noise/README.md b/packages/shader-composer-noise/README.md new file mode 100644 index 000000000..7cc7851f4 --- /dev/null +++ b/packages/shader-composer-noise/README.md @@ -0,0 +1 @@ +# shader-composer-r3f diff --git a/packages/shader-composer-noise/package.json b/packages/shader-composer-noise/package.json new file mode 100644 index 000000000..a30e3e908 --- /dev/null +++ b/packages/shader-composer-noise/package.json @@ -0,0 +1,34 @@ +{ + "name": "@shader-composer/noise", + "author": { + "name": "Hendrik Mans", + "email": "hendrik@mans.de", + "url": "https://hmans.co" + }, + "description": "A collection of noise-generating Shader Composer units.", + "version": "0.4.9", + "main": "dist/shader-composer-noise.cjs.js", + "module": "dist/shader-composer-noise.esm.js", + "files": [ + "dist/**", + "LICENSE", + "README.md" + ], + "license": "MIT", + "sideEffects": false, + "scripts": { + "build": "preconstruct build" + }, + "babel": { + "presets": [ + "@babel/preset-env", + "@babel/preset-typescript" + ] + }, + "peerDependencies": { + "@shader-composer/core": "workspace:^0.4.9" + }, + "devDependencies": { + "@shader-composer/core": "workspace:^0.4.9" + } +} diff --git a/packages/shader-composer-toybox/src/noise/FBMNoise.ts b/packages/shader-composer-noise/src/FBMNoise.ts similarity index 78% rename from packages/shader-composer-toybox/src/noise/FBMNoise.ts rename to packages/shader-composer-noise/src/FBMNoise.ts index 214cd1997..6dec072b1 100644 --- a/packages/shader-composer-toybox/src/noise/FBMNoise.ts +++ b/packages/shader-composer-noise/src/FBMNoise.ts @@ -1,32 +1,32 @@ -import { $, Float, Input, Int, Snippet, type } from "shader-composer" +import { $, Float, Input, Int, Snippet, type } from "@shader-composer/core" import { pnoise } from "./PerlinNoise" export type FBMOptions = { - seed?: Input<"float"> - persistance?: Input<"float"> - lacunarity?: Input<"float"> - scale?: Input<"float"> - redistribution?: Input<"float"> - octaves?: Input<"int"> - turbulence?: Input<"bool"> - ridge?: Input<"bool"> + seed?: Input<"float"> + persistance?: Input<"float"> + lacunarity?: Input<"float"> + scale?: Input<"float"> + redistribution?: Input<"float"> + octaves?: Input<"int"> + turbulence?: Input<"bool"> + ridge?: Input<"bool"> } export const FBMNoise = ( - p: Input<"vec2" | "vec3">, - { - seed = 0, - persistance = 0, - lacunarity = 0, - scale = 1, - redistribution = 1, - octaves = Int(1), - turbulence = true, - ridge = true - }: FBMOptions = {} + p: Input<"vec2" | "vec3">, + { + seed = 0, + persistance = 0, + lacunarity = 0, + scale = 1, + redistribution = 1, + octaves = Int(1), + turbulence = true, + ridge = true + }: FBMOptions = {} ) => - Float( - $`${fbmNoise}(${p}, ${fbmNoise}Opts( + Float( + $`${fbmNoise}(${p}, ${fbmNoise}Opts( ${seed}, ${persistance}, ${lacunarity}, @@ -35,13 +35,13 @@ export const FBMNoise = ( ${octaves}, ${turbulence}, ${ridge}))`, - { - name: `FBMNoise ${type(p)}` - } - ) + { + name: `FBMNoise ${type(p)}` + } + ) const fbmNoise = Snippet( - (fbmNoise) => $` + (fbmNoise) => $` #define MAX_FBM_ITERATIONS 30 struct ${fbmNoise}Opts { diff --git a/packages/shader-composer-toybox/src/noise/GerstnerWave.ts b/packages/shader-composer-noise/src/GerstnerWave.ts similarity index 72% rename from packages/shader-composer-toybox/src/noise/GerstnerWave.ts rename to packages/shader-composer-noise/src/GerstnerWave.ts index 07e4c38fd..0f722952d 100644 --- a/packages/shader-composer-toybox/src/noise/GerstnerWave.ts +++ b/packages/shader-composer-noise/src/GerstnerWave.ts @@ -1,5 +1,4 @@ -import { $, Input, Snippet, Vec3 } from "shader-composer" -import { Vector2 } from "three" +import { $, Input, Snippet, Vec3 } from "@shader-composer/core" /* With many thanks to glNoise: @@ -22,11 +21,14 @@ export const gerstnerWave = Snippet( export const GerstnerWave = ( p: Input<"vec2">, - direction: Input<"vec2"> = new Vector2(1, 0), + direction: Input<"vec2"> = [1, 0], steepness: Input<"float"> = 1, wavelength: Input<"float"> = 1, offset: Input<"float"> = 0 ) => - Vec3($`${gerstnerWave}(${p}, ${direction}, ${steepness}, ${wavelength}, ${offset})`, { - name: "Gerstner Wave" - }) + Vec3( + $`${gerstnerWave}(${p}, ${direction}, ${steepness}, ${wavelength}, ${offset})`, + { + name: "Gerstner Wave" + } + ) diff --git a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts b/packages/shader-composer-noise/src/PSRDNoise.ts similarity index 99% rename from packages/shader-composer-toybox/src/noise/PSRDNoise.ts rename to packages/shader-composer-noise/src/PSRDNoise.ts index b6049e374..fec8be94a 100644 --- a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts +++ b/packages/shader-composer-noise/src/PSRDNoise.ts @@ -15,12 +15,9 @@ import { glsl, Input, Snippet, - Time, Vec2, - $vec2, - Vec3, - $vec3 -} from "shader-composer" + Vec3 +} from "@shader-composer/core" export const psrdnoise2 = Snippet( (psrdnoise2) => glsl` @@ -183,7 +180,7 @@ export const psrdnoise2 = Snippet( export const PSRDNoise2D = ( p: Input<"vec2">, - period: Input<"vec2"> = $vec2(0, 0), + period: Input<"vec2"> = [0, 0], alpha: Input<"float"> = 0 ) => { const gradient = Vec2([0, 0], { @@ -498,7 +495,7 @@ export const psrdnoise3 = Snippet( export const PSRDNoise3D = ( p: Input<"vec3">, - period: Input<"vec3"> = $vec3(0, 0, 0), + period: Input<"vec3"> = [0, 0, 0], alpha: Input<"float"> = 0 ) => { const gradient = Vec3([0, 0, 0], { diff --git a/packages/shader-composer-toybox/src/noise/PerlinNoise.ts b/packages/shader-composer-noise/src/PerlinNoise.ts similarity index 95% rename from packages/shader-composer-toybox/src/noise/PerlinNoise.ts rename to packages/shader-composer-noise/src/PerlinNoise.ts index 4385da82a..1b52c51a3 100644 --- a/packages/shader-composer-toybox/src/noise/PerlinNoise.ts +++ b/packages/shader-composer-noise/src/PerlinNoise.ts @@ -1,20 +1,20 @@ -import { Float, glsl, Input, Snippet, type } from "shader-composer" +import { Float, glsl, Input, Snippet, type } from "@shader-composer/core" import { permute } from "./permute" import { rand4 } from "./random" import { taylorInvSqrt } from "./taylorInvSqrt" export const PerlinNoise = (p: Input<"vec3" | "vec2">) => - Float(glsl`${pnoise}(${p})`, { name: `Perlin Noise (${type(p)})` }) + Float(glsl`${pnoise}(${p})`, { name: `Perlin Noise (${type(p)})` }) const fade = Snippet( - (fade) => glsl` + (fade) => glsl` vec2 ${fade}(vec2 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); } vec3 ${fade}(vec3 t) { return t * t * t * (t * (t * 6.0 - 15.0) + 10.0); } ` ) export const pnoise = Snippet( - (pnoise) => glsl` + (pnoise) => glsl` float ${pnoise}(vec2 P) { vec4 Pi = floor(P.xyxy) + vec4(0.0, 0.0, 1.0, 1.0); vec4 Pf = fract(P.xyxy) - vec4(0.0, 0.0, 1.0, 1.0); diff --git a/packages/shader-composer-toybox/src/noise/Simplex3DNoise.ts b/packages/shader-composer-noise/src/Simplex3DNoise.ts similarity index 91% rename from packages/shader-composer-toybox/src/noise/Simplex3DNoise.ts rename to packages/shader-composer-noise/src/Simplex3DNoise.ts index 15aabdf26..b11398b52 100644 --- a/packages/shader-composer-toybox/src/noise/Simplex3DNoise.ts +++ b/packages/shader-composer-noise/src/Simplex3DNoise.ts @@ -1,11 +1,12 @@ -import { Float, glsl, Input, Snippet } from "shader-composer" +import { Float, glsl, Input, Snippet } from "@shader-composer/core" import { permute } from "./permute" import { taylorInvSqrt } from "./taylorInvSqrt" -export const Simplex3DNoise = (p: Input<"vec3">) => Float(glsl`${simplex3Dnoise}(${p})`) +export const Simplex3DNoise = (p: Input<"vec3">) => + Float(glsl`${simplex3Dnoise}(${p})`) export const simplex3Dnoise = Snippet( - (name) => glsl` + (name) => glsl` float ${name}(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); diff --git a/packages/shader-composer-toybox/src/noise/index.ts b/packages/shader-composer-noise/src/index.ts similarity index 100% rename from packages/shader-composer-toybox/src/noise/index.ts rename to packages/shader-composer-noise/src/index.ts diff --git a/packages/shader-composer-toybox/src/noise/mod289.ts b/packages/shader-composer-noise/src/mod289.ts similarity index 74% rename from packages/shader-composer-toybox/src/noise/mod289.ts rename to packages/shader-composer-noise/src/mod289.ts index 89056cb14..33d3e9f1a 100644 --- a/packages/shader-composer-toybox/src/noise/mod289.ts +++ b/packages/shader-composer-noise/src/mod289.ts @@ -1,7 +1,7 @@ -import { glsl, Snippet } from "shader-composer" +import { glsl, Snippet } from "@shader-composer/core" export const mod289 = Snippet( - (name) => glsl` + (name) => glsl` vec3 ${name}(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; diff --git a/packages/shader-composer-toybox/src/noise/permute.ts b/packages/shader-composer-noise/src/permute.ts similarity index 66% rename from packages/shader-composer-toybox/src/noise/permute.ts rename to packages/shader-composer-noise/src/permute.ts index 574c9a998..5d100333d 100644 --- a/packages/shader-composer-toybox/src/noise/permute.ts +++ b/packages/shader-composer-noise/src/permute.ts @@ -1,9 +1,9 @@ -import { glsl, Snippet } from "shader-composer" +import { glsl, Snippet } from "@shader-composer/core" import { mod289 } from "./mod289" export const permute = Snippet( - (name) => - glsl` + (name) => + glsl` vec4 ${name}(vec4 x) { return ${mod289}(((x*34.0)+10.0)*x); diff --git a/packages/shader-composer-toybox/src/noise/random.ts b/packages/shader-composer-noise/src/random.ts similarity index 82% rename from packages/shader-composer-toybox/src/noise/random.ts rename to packages/shader-composer-noise/src/random.ts index 0dc69206d..44463b882 100644 --- a/packages/shader-composer-toybox/src/noise/random.ts +++ b/packages/shader-composer-noise/src/random.ts @@ -1,7 +1,7 @@ -import { glsl, Snippet } from "shader-composer" +import { glsl, Snippet } from "@shader-composer/core" export const rand = Snippet( - (rand) => glsl` + (rand) => glsl` float ${rand}(float n) { return fract(sin(n) * 1e4); } float ${rand}(vec2 p) { @@ -12,7 +12,7 @@ export const rand = Snippet( ) export const rand2 = Snippet( - (rand2) => glsl` + (rand2) => glsl` vec2 ${rand2}(vec2 p) { return fract( sin(vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)))) * 43758.5453 @@ -22,7 +22,7 @@ export const rand2 = Snippet( ) export const rand3 = Snippet( - (rand3) => glsl` + (rand3) => glsl` vec2 ${rand3}(vec3 p) { return mod(((p * 34.0) + 1.0) * p, 289.0); } @@ -30,7 +30,7 @@ export const rand3 = Snippet( ) export const rand4 = Snippet( - (rand4) => glsl` + (rand4) => glsl` vec4 ${rand4}(vec4 p) { return mod(((p * 34.0) + 1.0) * p, 289.0); } ` ) diff --git a/packages/shader-composer-toybox/src/noise/taylorInvSqrt.ts b/packages/shader-composer-noise/src/taylorInvSqrt.ts similarity index 65% rename from packages/shader-composer-toybox/src/noise/taylorInvSqrt.ts rename to packages/shader-composer-noise/src/taylorInvSqrt.ts index 8ee75b0f6..2924cac02 100644 --- a/packages/shader-composer-toybox/src/noise/taylorInvSqrt.ts +++ b/packages/shader-composer-noise/src/taylorInvSqrt.ts @@ -1,7 +1,7 @@ -import { glsl, Snippet } from "shader-composer" +import { glsl, Snippet } from "@shader-composer/core" export const taylorInvSqrt = Snippet( - (name) => glsl` + (name) => glsl` vec4 ${name}(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; diff --git a/packages/shader-composer-toybox/src/noise/turbulence.ts b/packages/shader-composer-noise/src/turbulence.ts similarity index 90% rename from packages/shader-composer-toybox/src/noise/turbulence.ts rename to packages/shader-composer-noise/src/turbulence.ts index ce40688f2..9632481ba 100644 --- a/packages/shader-composer-toybox/src/noise/turbulence.ts +++ b/packages/shader-composer-noise/src/turbulence.ts @@ -1,4 +1,4 @@ -import { $, Float, Input, Snippet } from "shader-composer" +import { $, Float, Input, Snippet } from "@shader-composer/core" import { psrdnoise3 } from "./PSRDNoise" export const turbulence3D = Snippet( @@ -9,7 +9,7 @@ export const turbulence3D = Snippet( float alpha = 0.0; vec3 period; vec3 gradient; - + for (float f = 1.0 ; f <= octaves; f++) { float power = pow(2.0, f); float noise = ${psrdnoise3}(vec3(power * p), period, alpha, gradient); diff --git a/packages/shader-composer-noise/tsconfig.json b/packages/shader-composer-noise/tsconfig.json new file mode 100644 index 000000000..52d43eaaa --- /dev/null +++ b/packages/shader-composer-noise/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/shader-composer-postprocessing/package.json b/packages/shader-composer-postprocessing/package.json index 2451458fd..50b1a526e 100644 --- a/packages/shader-composer-postprocessing/package.json +++ b/packages/shader-composer-postprocessing/package.json @@ -1,5 +1,5 @@ { - "name": "shader-composer-postprocessing", + "name": "@shader-composer/postprocessing", "author": { "name": "Hendrik Mans", "email": "hendrik@mans.de", @@ -22,22 +22,15 @@ "babel": { "presets": [ "@babel/preset-env", - "@babel/preset-react", - [ - "@babel/preset-typescript", - { - "isTSX": true, - "allExtensions": true - } - ] + "@babel/preset-typescript" ] }, "devDependencies": { - "shader-composer": "workspace:^0.4.3" + "@shader-composer/core": "workspace:^0.4.9" }, "peerDependencies": { "postprocessing": "^6.28.7", - "shader-composer": "^0.4.3", + "@shader-composer/core": "^0.4.9", "three": ">=0.141.0" } } diff --git a/packages/shader-composer-postprocessing/src/PostProcessingEffectMaster.ts b/packages/shader-composer-postprocessing/src/PostProcessingEffectMaster.ts index b217a48c1..e8c4f2787 100644 --- a/packages/shader-composer-postprocessing/src/PostProcessingEffectMaster.ts +++ b/packages/shader-composer-postprocessing/src/PostProcessingEffectMaster.ts @@ -1,4 +1,4 @@ -import { $, Input, Master } from "shader-composer" +import { $, Input, Master } from "@shader-composer/core" import { InputAlpha, InputColor } from "./units" export type PostProcessingEffectMasterProps = { diff --git a/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts b/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts index eb7043203..72b0f9140 100644 --- a/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts +++ b/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts @@ -1,5 +1,5 @@ import * as PP from "postprocessing" -import { compileShader } from "shader-composer" +import { compileShader } from "@shader-composer/core" import { WebGLRenderer, WebGLRenderTarget } from "three" import { PostProcessingEffectMaster } from "./PostProcessingEffectMaster" @@ -31,14 +31,8 @@ export class ShaderComposerEffect extends PP.Effect { this._shaderMeta = meta } - update( - renderer: WebGLRenderer, - inputBuffer: WebGLRenderTarget, - deltaTime: number - ) { - super.update(renderer, inputBuffer, deltaTime) - - // TODO: decide what to do with camera and scene. Do we really need it? - this._shaderMeta.update(deltaTime, undefined!, undefined!, renderer) + update(gl: WebGLRenderer, inputBuffer: WebGLRenderTarget, deltaTime: number) { + super.update(gl, inputBuffer, deltaTime) + this._shaderMeta.update(deltaTime, { gl }) } } diff --git a/packages/shader-composer-postprocessing/src/units.ts b/packages/shader-composer-postprocessing/src/units.ts index 5e68b99e5..eba003e90 100644 --- a/packages/shader-composer-postprocessing/src/units.ts +++ b/packages/shader-composer-postprocessing/src/units.ts @@ -1,4 +1,4 @@ -import { $, Float, Vec2, Vec3 } from "shader-composer" +import { $, Float, Vec2, Vec3 } from "@shader-composer/core" export const InputColor = Vec3($`inputColor.rgb`) export const InputAlpha = Float($`inputColor.a`) diff --git a/packages/shader-composer-r3f/package.json b/packages/shader-composer-r3f/package.json index cc229119e..bf325e279 100644 --- a/packages/shader-composer-r3f/package.json +++ b/packages/shader-composer-r3f/package.json @@ -1,5 +1,5 @@ { - "name": "shader-composer-r3f", + "name": "@shader-composer/r3f", "author": { "name": "Hendrik Mans", "email": "hendrik@mans.de", @@ -32,12 +32,9 @@ ] ] }, - "typedoc": { - "entryPoint": "./src/index.ts", - "readmeFile": "./README.md" - }, "peerDependencies": { "@react-three/fiber": "^8.2.0", + "@shader-composer/core": "workspace:^0.4.9", "react": "^18.2.0", "react-dom": "^18.2.0", "three": ">=0.143.0" @@ -45,6 +42,9 @@ "dependencies": { "@hmans/use-const": "^0.0.1", "@material-composer/patch-material": "workspace:^0.1.3", - "shader-composer": "^0.4.5" + "@shader-composer/three": "^0.4.9" + }, + "devDependencies": { + "@shader-composer/core": "workspace:^0.4.9" } } diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts index 6cb01c9aa..f6dfec669 100644 --- a/packages/shader-composer-r3f/src/hooks.ts +++ b/packages/shader-composer-r3f/src/hooks.ts @@ -1,5 +1,4 @@ import { useFrame } from "@react-three/fiber" -import { useEffect, useLayoutEffect, useMemo } from "react" import { compileShader, GLSLType, @@ -7,7 +6,8 @@ import { UniformUnit, Unit, UnitConfig -} from "shader-composer" +} from "@shader-composer/core" +import { useEffect, useLayoutEffect, useMemo } from "react" export const useShader = (ctor: () => Unit, deps?: any) => { const [shader, { update, dispose }] = useMemo( @@ -20,7 +20,7 @@ export const useShader = (ctor: () => Unit, deps?: any) => { /* Invoke the shader tree's update functions. */ useFrame(function useShaderUpdate({ camera, scene, gl }, dt) { - update(dt, camera, scene, gl) + update(dt, { camera, scene, gl }) }) return shader diff --git a/packages/shader-composer-r3f/src/index.ts b/packages/shader-composer-r3f/src/index.ts index 36ff9ae4c..c2edd7426 100644 --- a/packages/shader-composer-r3f/src/index.ts +++ b/packages/shader-composer-r3f/src/index.ts @@ -1,2 +1,3 @@ +import "@shader-composer/three" export * from "./hooks" export * from "./Shader" diff --git a/packages/shader-composer-three/LICENSE.md b/packages/shader-composer-three/LICENSE.md new file mode 100644 index 000000000..614e75493 --- /dev/null +++ b/packages/shader-composer-three/LICENSE.md @@ -0,0 +1,20 @@ +Copyright (c) 2022 Hendrik Mans + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/packages/shader-composer-three/README.md b/packages/shader-composer-three/README.md new file mode 100644 index 000000000..505cbac9e --- /dev/null +++ b/packages/shader-composer-three/README.md @@ -0,0 +1,32 @@ +# shader-composer-three + +## Introduction + +Three.js bindings for Shader Composer. + +## License + +``` +Copyright (c) 2022 Hendrik Mans + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. +``` + +[postprocessing]: https://github.com/pmndrs/postprocessing diff --git a/packages/shader-composer-three/package.json b/packages/shader-composer-three/package.json new file mode 100644 index 000000000..911c270b7 --- /dev/null +++ b/packages/shader-composer-three/package.json @@ -0,0 +1,42 @@ +{ + "name": "@shader-composer/three", + "author": { + "name": "Hendrik Mans", + "email": "hendrik@mans.de", + "url": "https://hmans.co" + }, + "description": "Build Three.js shaders using JavaScript.", + "version": "0.4.9", + "main": "dist/shader-composer-three.cjs.js", + "module": "dist/shader-composer-three.esm.js", + "files": [ + "dist/**", + "LICENSE", + "README.md" + ], + "license": "MIT", + "sideEffects": true, + "scripts": { + "build": "preconstruct build" + }, + "babel": { + "presets": [ + "@babel/preset-env", + "@babel/preset-react", + [ + "@babel/preset-typescript", + { + "isTSX": true, + "allExtensions": true + } + ] + ] + }, + "peerDependencies": { + "@shader-composer/core": "workspace:^0.4.9", + "three": ">=0.141.0" + }, + "devDependencies": { + "@shader-composer/core": "workspace:^0.4.9" + } +} diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts new file mode 100644 index 000000000..5977e9c11 --- /dev/null +++ b/packages/shader-composer-three/src/index.ts @@ -0,0 +1,34 @@ +/* Patch units with Three.js specific code */ +import * as SC from "@shader-composer/core" +import * as THREE from "three" + +export type UpdatePayload = { + camera: THREE.Camera + gl: THREE.WebGLRenderer + scene: THREE.Scene +} + +SC.CameraNear._unitConfig.update = (_, { camera }: UpdatePayload) => { + if (camera instanceof THREE.PerspectiveCamera) { + SC.CameraNear.value = camera.near + } +} + +SC.CameraFar._unitConfig.update = (_, { camera }: UpdatePayload) => { + if (camera instanceof THREE.PerspectiveCamera) { + SC.CameraFar.value = camera.far + } +} + +SC.Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => { + SC.Resolution.value.x = gl.domElement.width + SC.Resolution.value.y = gl.domElement.height +} + +SC.UsingInstancing._unitConfig.value = SC.$` + #ifdef USE_INSTANCING + true + #else + false + #endif +` diff --git a/packages/shader-composer-three/tsconfig.json b/packages/shader-composer-three/tsconfig.json new file mode 100644 index 000000000..52d43eaaa --- /dev/null +++ b/packages/shader-composer-three/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../tsconfig.json", + "include": ["src/**/*"] +} diff --git a/packages/shader-composer-toybox/README.md b/packages/shader-composer-toybox/README.md new file mode 100644 index 000000000..303fa1162 --- /dev/null +++ b/packages/shader-composer-toybox/README.md @@ -0,0 +1,3 @@ +# Shader Composer Toybox + +> **Warning** This package is deprecated. Its contents will be integrated into different `@shader-composer/*` packages over time. diff --git a/packages/shader-composer-toybox/package.json b/packages/shader-composer-toybox/package.json index c0b08bb41..53271bfa8 100644 --- a/packages/shader-composer-toybox/package.json +++ b/packages/shader-composer-toybox/package.json @@ -35,8 +35,5 @@ "dependencies": { "fp-ts": "^2.12.3", "shader-composer": "^0.4.0" - }, - "peerDependencies": { - "three": ">=0.141.0" } } diff --git a/packages/shader-composer-toybox/src/effects/Dissolve.ts b/packages/shader-composer-toybox/src/effects/Dissolve.ts index 0cf0c2eaa..45f5faed3 100644 --- a/packages/shader-composer-toybox/src/effects/Dissolve.ts +++ b/packages/shader-composer-toybox/src/effects/Dissolve.ts @@ -9,7 +9,7 @@ import { VertexPosition } from "shader-composer" import { pipe } from "fp-ts/function" -import { Simplex3DNoise } from "../noise/Simplex3DNoise" +import { Simplex3DNoise } from "shader-composer" export const Dissolve = ( visibility: Input<"float"> = 0.5, diff --git a/packages/shader-composer-toybox/src/index.ts b/packages/shader-composer-toybox/src/index.ts index 8c9f5ce81..96a5472d8 100644 --- a/packages/shader-composer-toybox/src/index.ts +++ b/packages/shader-composer-toybox/src/index.ts @@ -1,3 +1,2 @@ export * from "./effects" -export * from "./noise" export * from "./tools" diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json index 8c80c33cc..6bbb9e783 100644 --- a/packages/shader-composer/package.json +++ b/packages/shader-composer/package.json @@ -16,12 +16,18 @@ "preconstruct": { "entrypoints": [ "index.ts", - "fun.ts" + "fun.ts", + "postprocessing.ts", + "r3f.ts", + "three.ts" ] }, "files": [ - "fun/**", "dist/**", + "fun/**", + "postprocessing/**", + "r3f/**", + "three/**", "LICENSE", "README.md" ], @@ -35,19 +41,14 @@ "presets": [ "@babel/preset-env", "@babel/preset-react", - [ - "@babel/preset-typescript", - { - "isTSX": true, - "allExtensions": true - } - ] + "@babel/preset-typescript" ] }, - "peerDependencies": { - "three": ">=0.141.0" - }, "dependencies": { - "fp-ts": "^2.12.3" + "@shader-composer/core": "workspace:^0.4.9", + "@shader-composer/noise": "workspace:^0.4.9", + "@shader-composer/postprocessing": "workspace:^0.0.1", + "@shader-composer/r3f": "workspace:^0.4.5", + "@shader-composer/three": "workspace:^0.4.9" } } diff --git a/packages/shader-composer/postprocessing/package.json b/packages/shader-composer/postprocessing/package.json new file mode 100644 index 000000000..202267620 --- /dev/null +++ b/packages/shader-composer/postprocessing/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/shader-composer-postprocessing.cjs.js", + "module": "dist/shader-composer-postprocessing.esm.js" +} diff --git a/packages/shader-composer/r3f/package.json b/packages/shader-composer/r3f/package.json new file mode 100644 index 000000000..b56bdffa2 --- /dev/null +++ b/packages/shader-composer/r3f/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/shader-composer-r3f.cjs.js", + "module": "dist/shader-composer-r3f.esm.js" +} diff --git a/packages/shader-composer/src/fun.ts b/packages/shader-composer/src/fun.ts index 0513eeb03..6b10614ce 100644 --- a/packages/shader-composer/src/fun.ts +++ b/packages/shader-composer/src/fun.ts @@ -1,5 +1,5 @@ -import { Add, Div, Mix, Mul, Sub } from "./stdlib" -import { GLSLType, Input } from "./units" +import { Add, Div, Mix, Mul, Sub } from "@shader-composer/core" +import { GLSLType, Input } from "@shader-composer/core" export const mix = (b: Input, f: Input<"float">) => diff --git a/packages/shader-composer/src/glslRepresentation.test.ts b/packages/shader-composer/src/glslRepresentation.test.ts deleted file mode 100644 index d4acddd89..000000000 --- a/packages/shader-composer/src/glslRepresentation.test.ts +++ /dev/null @@ -1,29 +0,0 @@ -import { Matrix3, Matrix4 } from "three" -import { glsl } from "./expressions" -import { glslRepresentation } from "./glslRepresentation" - -describe("glslRepresentation", () => { - it("renders numbers as floats", () => { - expect(glslRepresentation(1)).toBe("1.0") - }) - - it("keeps decimal places", () => { - expect(glslRepresentation(1.2345)).toBe("1.2345") - }) - - it("keeps exponents", () => { - expect(glslRepresentation(0.0000000001)).toBe("1e-10") - }) - - it("renders mat3", () => { - expect(glslRepresentation(new Matrix3())).toBe( - "mat3(1.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 1.0)" - ) - }) - - it("renders mat4", () => { - expect(glslRepresentation(new Matrix4())).toBe( - "mat4(1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0)" - ) - }) -}) diff --git a/packages/shader-composer/src/glslRepresentation.ts b/packages/shader-composer/src/glslRepresentation.ts deleted file mode 100644 index 6ac5d4d95..000000000 --- a/packages/shader-composer/src/glslRepresentation.ts +++ /dev/null @@ -1,60 +0,0 @@ -import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from "three" -import { isExpression } from "./expressions" -import { isSnippet } from "./snippets" -import { GLSLType, isUnit, Input, uniformName } from "./units" - -export const glslRepresentation = ( - value: Input | undefined, - typeHint?: GLSLType -): string => { - if (value === undefined) return "" - - if (Array.isArray(value)) - return value.map((v) => glslRepresentation(v)).join(", ") - - if (isUnit(value)) - return value._unitConfig.uniform - ? uniformName(value) - : value._unitConfig.variableName - - if (isExpression(value)) return value.render() - - if (isSnippet(value)) return value.name - - if (typeof value === "string") return value - - if (typeof value === "boolean") return value ? "true" : "false" - - if (typeof value === "number") { - const s = value.toString() - return typeHint === "int" ? s : s.match(/[.e]/) ? s : `${s}.0` - } - - if (value instanceof Color) - return `vec3(${g(value.r)}, ${g(value.g)}, ${g(value.b)})` - - if (value instanceof Vector2) return `vec2(${g(value.x)}, ${g(value.y)})` - - if (value instanceof Vector3) - return `vec3(${g(value.x)}, ${g(value.y)}, ${g(value.z)})` - - if (value instanceof Vector4) - return `vec4(${g(value.x)}, ${g(value.y)}, ${g(value.z)}, ${g(value.w)})` - - if (value instanceof Matrix3) - return `mat3(${value - .toArray() - .map((n) => g(n)) - .join(", ")})` - - if (value instanceof Matrix4) - return `mat4(${value - .toArray() - .map((n) => g(n)) - .join(", ")})` - - /* Fail */ - throw new Error(`Could not render value to GLSL: ${JSON.stringify(value)}`) -} - -const g = glslRepresentation diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts deleted file mode 100644 index 20742bd37..000000000 --- a/packages/shader-composer/src/glslType.ts +++ /dev/null @@ -1,47 +0,0 @@ -import { - Color, - Matrix3, - Matrix4, - Texture, - Vector2, - Vector3, - Vector4 -} from "three" -import { GLSLType, isUnit, Input } from "./units" - -export type GLSLTypeFor = JSType extends number - ? "float" - : JSType extends boolean - ? "bool" - : JSType extends Texture - ? "sampler2D" - : JSType extends Vector2 - ? "vec2" - : JSType extends Vector3 - ? "vec3" - : JSType extends Vector4 - ? "vec4" - : JSType extends Color - ? "vec3" - : JSType extends Matrix3 - ? "mat3" - : JSType extends Matrix4 - ? "mat4" - : never - -export const glslType = (value: Input): T => { - if (isUnit(value)) return value._unitConfig.type - - if (typeof value === "number") return "float" as T - if (value instanceof Vector4) return "vec4" as T - if (value instanceof Vector3) return "vec3" as T - if (value instanceof Vector2) return "vec2" as T - if (value instanceof Matrix3) return "mat3" as T - if (value instanceof Matrix4) return "mat4" as T - if (value instanceof Color) return "vec3" as T - - /* Fail */ - throw new Error(`Could not render GLSL type for: ${value}`) -} - -export const type = glslType diff --git a/packages/shader-composer/src/index.ts b/packages/shader-composer/src/index.ts index ae4646aaa..ce6a221e1 100644 --- a/packages/shader-composer/src/index.ts +++ b/packages/shader-composer/src/index.ts @@ -1,8 +1,2 @@ -export { compileShader } from "./compiler" -export { disableDebugging, enableDebugging } from "./debug" -export * from "./expressions" -export * from "./glslType" -export * from "./snippets" -export * from "./stdlib" -export * from "./tree" -export * from "./units" +export * from "@shader-composer/core" +export * from "@shader-composer/noise" diff --git a/packages/shader-composer/src/postprocessing.ts b/packages/shader-composer/src/postprocessing.ts new file mode 100644 index 000000000..f8d316771 --- /dev/null +++ b/packages/shader-composer/src/postprocessing.ts @@ -0,0 +1 @@ +export * from "@shader-composer/postprocessing" diff --git a/packages/shader-composer/src/r3f.ts b/packages/shader-composer/src/r3f.ts new file mode 100644 index 000000000..4543701c3 --- /dev/null +++ b/packages/shader-composer/src/r3f.ts @@ -0,0 +1,4 @@ +export * from "@shader-composer/r3f" + +/* Make sure the Three.js initialization code is imported */ +import "@shader-composer/three" diff --git a/packages/shader-composer/src/three.ts b/packages/shader-composer/src/three.ts new file mode 100644 index 000000000..f673085b0 --- /dev/null +++ b/packages/shader-composer/src/three.ts @@ -0,0 +1 @@ +export * from "@shader-composer/three" diff --git a/packages/shader-composer/three/package.json b/packages/shader-composer/three/package.json new file mode 100644 index 000000000..a5f10d5a9 --- /dev/null +++ b/packages/shader-composer/three/package.json @@ -0,0 +1,4 @@ +{ + "main": "dist/shader-composer-three.cjs.js", + "module": "dist/shader-composer-three.esm.js" +} diff --git a/packages/vfx-composer-r3f/package.json b/packages/vfx-composer-r3f/package.json index 95b2b95f6..76d4d95bc 100644 --- a/packages/vfx-composer-r3f/package.json +++ b/packages/vfx-composer-r3f/package.json @@ -39,7 +39,6 @@ "material-composer-r3f": "^0.2.5", "miniplex": "2.0.0-beta.1", "shader-composer": "^0.4.5", - "shader-composer-r3f": "^0.4.5", "vfx-composer": "^0.4.0" }, "peerDependencies": { diff --git a/packages/vfx-composer/src/ParticleAttribute.ts b/packages/vfx-composer/src/ParticleAttribute.ts index 253615ef8..0db8eeb84 100644 --- a/packages/vfx-composer/src/ParticleAttribute.ts +++ b/packages/vfx-composer/src/ParticleAttribute.ts @@ -15,7 +15,7 @@ export type ParticleAttribute = ReturnType let nextAttributeId = 1 export const ParticleAttribute = < - J extends number | Vector2 | Vector3 | Color | Vector4, + J extends Vector4 | Vector3 | Vector2 | Vector3 | Color | number, T extends GLSLTypeFor >( initialValue: J diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cf2f9e023..e64a639b6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,7 +86,6 @@ importers: react-dom: ^18.2.0 react-merge-refs: ^2.0.1 shader-composer: 0.4.9 - shader-composer-r3f: ^0.4.5 shader-composer-toybox: ^0.1.3 three: ^0.145.0 timeline-composer: ^0.1.7 @@ -110,7 +109,6 @@ importers: react-dom: 18.2.0_react@18.2.0 react-merge-refs: 2.0.1 shader-composer: link:../../packages/shader-composer - shader-composer-r3f: link:../../packages/shader-composer-r3f shader-composer-toybox: link:../../packages/shader-composer-toybox three: 0.145.0 timeline-composer: link:../../packages/timeline-composer @@ -200,8 +198,7 @@ importers: r3f-stage: ^0.3.5 react: ^18.2.0 react-dom: ^18.2.0 - shader-composer: ^0.4.9 - shader-composer-r3f: ^0.4.5 + shader-composer: workspace:^0.4.9 shader-composer-toybox: ^0.1.3 three: ^0.145.0 typescript: ^4.9.3 @@ -216,7 +213,6 @@ importers: react: 18.2.0 react-dom: 18.2.0_react@18.2.0 shader-composer: link:../../packages/shader-composer - shader-composer-r3f: link:../../packages/shader-composer-r3f shader-composer-toybox: link:../../packages/shader-composer-toybox three: 0.145.0 devDependencies: @@ -238,6 +234,7 @@ importers: '@react-three/drei': ^9.34.3 '@react-three/fiber': ^8.8.9 '@react-three/rapier': ^0.7.6 + '@shader-composer/r3f': ^0.4.5 '@stitches/react': ^1.2.8 '@types/react': ^18.0.21 '@types/react-dom': ^18.0.6 @@ -259,7 +256,6 @@ importers: react-merge-refs: ^1.1.0 render-composer: ^0.2.8 shader-composer: workspace:^0.4.9 - shader-composer-r3f: ^0.4.5 shader-composer-toybox: ^0.1.3 state-composer: ^0.1.0 statery: ^0.6.2 @@ -284,6 +280,7 @@ importers: '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4 '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi '@react-three/rapier': 0.7.6_k5pegjx3tqnzostq4vmydzrkya + '@shader-composer/r3f': link:../../packages/shader-composer-r3f '@stitches/react': 1.2.8_react@18.2.0 audio-composer: link:../../packages/audio-composer camera-composer: link:../../packages/camera-composer @@ -301,7 +298,6 @@ importers: react-merge-refs: 1.1.0 render-composer: link:../../packages/render-composer shader-composer: link:../../packages/shader-composer - shader-composer-r3f: link:../../packages/shader-composer-r3f shader-composer-toybox: link:../../packages/shader-composer-toybox state-composer: link:../../packages/state-composer statery: 0.6.2_react@18.2.0 @@ -402,7 +398,6 @@ importers: react-dom: ^18.2.0 react-merge-refs: ^2.0.1 shader-composer: 0.4.9 - shader-composer-r3f: 0.4.5 shader-composer-toybox: ^0.1.3 statery: 0.6.2 three: ^0.145.0 @@ -431,7 +426,6 @@ importers: react-dom: 18.2.0_react@18.2.0 react-merge-refs: 2.0.1 shader-composer: link:../../packages/shader-composer - shader-composer-r3f: link:../../packages/shader-composer-r3f shader-composer-toybox: link:../../packages/shader-composer-toybox statery: 0.6.2_react@18.2.0 three: 0.145.0 @@ -493,13 +487,13 @@ importers: packages/material-composer-patch-material: specifiers: '@hmans/types': ^0.0.3 + '@shader-composer/core': workspace:^0.4.9 fp-ts: ^2.12.3 - shader-composer: workspace:^0.4.0 dependencies: '@hmans/types': 0.0.3 fp-ts: 2.12.3 devDependencies: - shader-composer: link:../shader-composer + '@shader-composer/core': link:../shader-composer-core packages/material-composer-patched: specifiers: @@ -523,8 +517,7 @@ importers: '@material-composer/patch-material': ^0.1.2 '@material-composer/patched': ^0.1.3 material-composer: workspace:* - shader-composer: ^0.4.5 - shader-composer-r3f: ^0.4.5 + shader-composer: ^0.4.9 dependencies: '@hmans/use-const': 0.0.1 '@hmans/use-list': 0.0.1 @@ -534,7 +527,6 @@ importers: '@material-composer/patch-material': link:../material-composer-patch-material '@material-composer/patched': link:../material-composer-patched shader-composer: link:../shader-composer - shader-composer-r3f: link:../shader-composer-r3f devDependencies: material-composer: link:../material-composer @@ -563,40 +555,74 @@ importers: '@hmans/use-const': ^0.0.1 '@hmans/use-mutable-list': workspace:^0.0.2 '@hmans/use-nullable-state': workspace:^0.0.1 + '@shader-composer/postprocessing': workspace:^0.0.1 fp-ts: ^2.12.3 shader-composer: workspace:^0.4.4 - shader-composer-postprocessing: workspace:^0.0.1 test: ^3.2.1 dependencies: '@hmans/use-const': 0.0.1 '@hmans/use-mutable-list': link:../hmans-use-mutable-list '@hmans/use-nullable-state': link:../hmans-use-nullable-state + '@shader-composer/postprocessing': link:../shader-composer-postprocessing fp-ts: 2.12.3 shader-composer: link:../shader-composer - shader-composer-postprocessing: link:../shader-composer-postprocessing test: 3.2.1 packages/shader-composer: + specifiers: + '@shader-composer/core': workspace:^0.4.9 + '@shader-composer/noise': workspace:^0.4.9 + '@shader-composer/postprocessing': workspace:^0.0.1 + '@shader-composer/r3f': workspace:^0.4.5 + '@shader-composer/three': workspace:^0.4.9 + dependencies: + '@shader-composer/core': link:../shader-composer-core + '@shader-composer/noise': link:../shader-composer-noise + '@shader-composer/postprocessing': link:../shader-composer-postprocessing + '@shader-composer/r3f': link:../shader-composer-r3f + '@shader-composer/three': link:../shader-composer-three + + packages/shader-composer-core: specifiers: fp-ts: ^2.12.3 + gl-matrix: ^3.4.3 + three: '>=0.141.0' dependencies: fp-ts: 2.12.3 + devDependencies: + gl-matrix: 3.4.3 + three: 0.145.0 + + packages/shader-composer-noise: + specifiers: + '@shader-composer/core': workspace:^0.4.9 + devDependencies: + '@shader-composer/core': link:../shader-composer-core packages/shader-composer-postprocessing: specifiers: - shader-composer: workspace:^0.4.3 + '@shader-composer/core': workspace:^0.4.9 devDependencies: - shader-composer: link:../shader-composer + '@shader-composer/core': link:../shader-composer-core packages/shader-composer-r3f: specifiers: '@hmans/use-const': ^0.0.1 '@material-composer/patch-material': workspace:^0.1.3 - shader-composer: ^0.4.5 + '@shader-composer/core': workspace:^0.4.9 + '@shader-composer/three': ^0.4.9 dependencies: '@hmans/use-const': 0.0.1 '@material-composer/patch-material': link:../material-composer-patch-material - shader-composer: link:../shader-composer + '@shader-composer/three': link:../shader-composer-three + devDependencies: + '@shader-composer/core': link:../shader-composer-core + + packages/shader-composer-three: + specifiers: + '@shader-composer/core': workspace:^0.4.9 + devDependencies: + '@shader-composer/core': link:../shader-composer-core packages/shader-composer-toybox: specifiers: @@ -648,7 +674,6 @@ importers: material-composer-r3f: ^0.2.5 miniplex: 2.0.0-beta.1 shader-composer: ^0.4.5 - shader-composer-r3f: ^0.4.5 vfx-composer: ^0.4.0 dependencies: '@hmans/use-const': 0.0.1 @@ -657,7 +682,6 @@ importers: material-composer-r3f: link:../material-composer-r3f miniplex: 2.0.0-beta.1 shader-composer: link:../shader-composer - shader-composer-r3f: link:../shader-composer-r3f vfx-composer: link:../vfx-composer packages: @@ -947,7 +971,6 @@ packages: /@babel/helper-plugin-utils/7.19.0: resolution: {integrity: sha512-40Ryx7I8mT+0gaNxm8JGTZFUITNqdLAgdg0hXzeVZxVD6nFsdhQvip6v8dqkRHzsz1VFpFAaOCHNn0vKBL7Czw==} engines: {node: '>=6.9.0'} - dev: true /@babel/helper-plugin-utils/7.20.2: resolution: {integrity: sha512-8RvlJG2mj4huQ4pZ+rU9lqKi9ZKiRmuvGuM2HlWmkmgOhbs6zEAw6IEiJ5cQqGbDzGZOhwuOQNtZMi/ENLjZoQ==} @@ -1412,7 +1435,7 @@ packages: '@babel/core': ^7.0.0-0 dependencies: '@babel/core': 7.20.5 - '@babel/helper-plugin-utils': 7.20.2 + '@babel/helper-plugin-utils': 7.18.9 dev: false /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.20.5: @@ -1868,9 +1891,9 @@ packages: '@babel/core': 7.20.5 '@babel/helper-annotate-as-pure': 7.18.6 '@babel/helper-module-imports': 7.18.6 - '@babel/helper-plugin-utils': 7.20.2 + '@babel/helper-plugin-utils': 7.19.0 '@babel/plugin-syntax-jsx': 7.18.6_@babel+core@7.20.5 - '@babel/types': 7.20.5 + '@babel/types': 7.19.3 dev: false /@babel/plugin-transform-react-pure-annotations/7.18.6_@babel+core@7.20.5: @@ -2206,7 +2229,6 @@ packages: '@babel/helper-string-parser': 7.18.10 '@babel/helper-validator-identifier': 7.19.1 to-fast-properties: 2.0.0 - dev: true /@babel/types/7.19.4: resolution: {integrity: sha512-M5LK7nAeS6+9j7hAq+b3fQs+pNfUtTGq+yFFfHnauFA8zQtLRfmuipmsKDKKLuyG+wC8ABW43A153YNawNTEtw==} @@ -5739,6 +5761,10 @@ packages: engines: {node: '>=0.10.0'} dev: false + /gl-matrix/3.4.3: + resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==} + dev: true + /glob-base/0.3.0: resolution: {integrity: sha512-ab1S1g1EbO7YzauaJLkgLp7DZVAqj9M/dvKlTt8DkXA2tiOIcSMrlVI2J1RZyB5iJVccEscjGn+kpOG9788MHA==} engines: {node: '>=0.10.0'} @@ -8605,7 +8631,6 @@ packages: /three/0.145.0: resolution: {integrity: sha512-EKoHQEtEJ4CB6b2BGMBgLZrfwLjXcSUfoI/MiIXUuRpeYsfK5aPWbYhdtIVWOH+x6X0TouldHKHBuc/LAiFzAw==} - dev: false /tiny-inflate/1.0.3: resolution: {integrity: sha512-pkY1fj1cKHb2seWDy0B16HeWyczlJA9/WW3u3c4z/NiWDsO3DOU5D7nhTLE9CF0yXv/QZFY7sEJmj24dK+Rrqw==}