Restructure Shader Composer (#363)

- Restructure into indivdual scoped packages
- Remove Three.js dependencies
- QoL improvements

.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",

.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])
+```

.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

.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.

.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

.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.

.changeset/yellow-pens-switch.md

@@ -0,0 +1,5 @@
+---
+"shader-composer": minor
+---
+
+Removed Three-specific bits from `UpdateCallback`

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",

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) => {

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 } })

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"

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() {

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 () => {

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"
   },

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() {
       </mesh>
 
       <Description>
-        Use the <strong>Billboard</strong> unit to turn a mesh (like this plane) into a
-        billboard that is always facing the camera.
+        Use the <strong>Billboard</strong> unit to turn a mesh (like this plane)
+        into a billboard that is always facing the camera.
       </Description>
     </FlatStage>
   )

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() {

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"
 

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() {

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"
 

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() {

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"
 

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() {

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 = (

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() {

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() {

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,21 +10,20 @@ import {
   UniformUnit,
   UV
 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
 
 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")

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))
       )
     })
 

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(() => {