From f9c770f50cb782f8765baebfecf9a15c956ac3b4 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:20:41 +0100
Subject: [PATCH 01/55] Add shader-composer-three package

---
 packages/shader-composer-three/LICENSE.md    | 20 ++++++++++
 packages/shader-composer-three/README.md     | 32 +++++++++++++++
 packages/shader-composer-three/package.json  | 41 ++++++++++++++++++++
 packages/shader-composer-three/src/index.ts  |  2 +
 packages/shader-composer-three/tsconfig.json |  4 ++
 pnpm-lock.yaml                               | 14 ++++---
 6 files changed, 108 insertions(+), 5 deletions(-)
 create mode 100644 packages/shader-composer-three/LICENSE.md
 create mode 100644 packages/shader-composer-three/README.md
 create mode 100644 packages/shader-composer-three/package.json
 create mode 100644 packages/shader-composer-three/src/index.ts
 create mode 100644 packages/shader-composer-three/tsconfig.json

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..057499984
--- /dev/null
+++ b/packages/shader-composer-three/package.json
@@ -0,0 +1,41 @@
+{
+  "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.0.1",
+  "main": "dist/shader-composer-three.cjs.js",
+  "module": "dist/shader-composer-three.esm.js",
+  "files": [
+    "dist/**",
+    "LICENSE",
+    "README.md"
+  ],
+  "license": "MIT",
+  "sideEffects": false,
+  "scripts": {
+    "build": "preconstruct build"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      [
+        "@babel/preset-typescript",
+        {
+          "isTSX": true,
+          "allExtensions": true
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "shader-composer": "workspace:^0.4.3"
+  },
+  "peerDependencies": {
+    "three": ">=0.141.0"
+  }
+}
diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
new file mode 100644
index 000000000..54c0d5e99
--- /dev/null
+++ b/packages/shader-composer-three/src/index.ts
@@ -0,0 +1,2 @@
+/* Re-export everything from Shader Composer */
+export * from "shader-composer"
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/pnpm-lock.yaml b/pnpm-lock.yaml
index cf2f9e023..5b720570a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -598,6 +598,12 @@ importers:
       '@material-composer/patch-material': link:../material-composer-patch-material
       shader-composer: link:../shader-composer
 
+  packages/shader-composer-three:
+    specifiers:
+      shader-composer: workspace:^0.4.3
+    dependencies:
+      shader-composer: link:../shader-composer
+
   packages/shader-composer-toybox:
     specifiers:
       fp-ts: ^2.12.3
@@ -947,7 +953,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 +1417,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 +1873,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 +2211,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==}

From a01ef8b9f16505b5b5a598ddd4a1defabef24508 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:26:13 +0100
Subject: [PATCH 02/55] Update examples

---
 .changeset/config.json                        |  2 +-
 apps/shader-composer-examples/package.json    |  2 +-
 .../src/examples/Billboarding.tsx             |  6 ++---
 .../src/examples/DiscoCube.tsx                |  2 +-
 .../src/examples/Dissolve.tsx                 |  2 +-
 .../src/examples/Fireball.tsx                 |  2 +-
 .../src/examples/Flag.tsx                     |  2 +-
 .../src/examples/FloatingIsland.tsx           |  2 +-
 .../src/examples/ForceField.tsx               |  2 +-
 .../src/examples/HelloWorld.tsx               |  2 +-
 .../src/examples/Planet.tsx                   |  2 +-
 .../src/examples/Rotation.tsx                 |  2 +-
 .../src/examples/StylizedWater.tsx            |  2 +-
 .../src/examples/Textures.tsx                 |  2 +-
 .../src/examples/Water.tsx                    | 23 +++++++++++++------
 packages/shader-composer-three/package.json   |  2 +-
 pnpm-lock.yaml                                |  4 ++--
 17 files changed, 35 insertions(+), 26 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index ffe661473..b0fd8c617 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-*"],
     ["material-composer", "material-composer-r3f"]
   ],
   "access": "public",
diff --git a/apps/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json
index 8c98c2fc7..654fa9e6c 100644
--- a/apps/shader-composer-examples/package.json
+++ b/apps/shader-composer-examples/package.json
@@ -17,7 +17,7 @@
     "r3f-stage": "^0.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "shader-composer": "^0.4.9",
+    "shader-composer-three": "workspace:^0.4.9",
     "shader-composer-r3f": "^0.4.5",
     "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..00ce4de98 100644
--- a/apps/shader-composer-examples/src/examples/Billboarding.tsx
+++ b/apps/shader-composer-examples/src/examples/Billboarding.tsx
@@ -1,5 +1,5 @@
 import { Description, FlatStage } from "r3f-stage"
-import { ShaderMaterialMaster, VertexPosition } from "shader-composer"
+import { ShaderMaterialMaster, VertexPosition } from "shader-composer-three"
 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>
   )
diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index d18d9e1cc..5d6f50201 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -13,7 +13,7 @@ import {
   OneMinus,
   Sub,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx
index 54d65693a..2cfafc885 100644
--- a/apps/shader-composer-examples/src/examples/Dissolve.tsx
+++ b/apps/shader-composer-examples/src/examples/Dissolve.tsx
@@ -1,6 +1,6 @@
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
-import { Mix } from "shader-composer"
+import { Mix } from "shader-composer-three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx
index 5ae8dee50..78717e91c 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -12,7 +12,7 @@ import {
   Vec3,
   VertexNormal,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx
index cf5abdec7..44f1b46e5 100644
--- a/apps/shader-composer-examples/src/examples/Flag.tsx
+++ b/apps/shader-composer-examples/src/examples/Flag.tsx
@@ -7,7 +7,7 @@ import {
   UV,
   Vec3,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 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..79d915266 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -20,7 +20,7 @@ import {
   varying,
   Vec2,
   Vec3
-} from "shader-composer"
+} from "shader-composer-three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx
index d5368a4f9..ba496b871 100644
--- a/apps/shader-composer-examples/src/examples/ForceField.tsx
+++ b/apps/shader-composer-examples/src/examples/ForceField.tsx
@@ -19,7 +19,7 @@ import {
   UV,
   Vec2,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/HelloWorld.tsx b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
index ef87f3cc3..d1b59b463 100644
--- a/apps/shader-composer-examples/src/examples/HelloWorld.tsx
+++ b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
@@ -10,7 +10,7 @@ import {
   ShaderMaterialMaster,
   Sin,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx
index b35b91b49..c9e0f9395 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -14,7 +14,7 @@ import {
   Time,
   Vec3,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx
index e180eec4a..348c33787 100644
--- a/apps/shader-composer-examples/src/examples/Rotation.tsx
+++ b/apps/shader-composer-examples/src/examples/Rotation.tsx
@@ -4,7 +4,7 @@ import {
   Time,
   VertexNormal,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Vector3 } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
index c4f22ab8f..7a95f5a4a 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -22,7 +22,7 @@ import {
   Vec2,
   VertexNormal,
   VertexPosition
-} from "shader-composer"
+} from "shader-composer-three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index 9c6c30e29..b8f106d47 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -9,7 +9,7 @@ import {
   Time,
   UniformUnit,
   UV
-} from "shader-composer"
+} from "shader-composer-three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index f6e8e952d..5dd63bf3d 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -1,9 +1,16 @@
 import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
-import { GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer"
+import {
+  Add,
+  GlobalTime,
+  Input,
+  Int,
+  Mul,
+  Remap,
+  Vec2
+} from "shader-composer-three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox"
-import { add } from "shader-composer/fun"
 import { Color, DoubleSide } from "three"
 
 const NormalizeNoise = (v: Input<"float">) => Remap(v, -1, 1, 0, 1)
@@ -38,11 +45,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/packages/shader-composer-three/package.json b/packages/shader-composer-three/package.json
index 057499984..2974eb1a1 100644
--- a/packages/shader-composer-three/package.json
+++ b/packages/shader-composer-three/package.json
@@ -6,7 +6,7 @@
     "url": "https://hmans.co"
   },
   "description": "Build Three.js shaders using JavaScript.",
-  "version": "0.0.1",
+  "version": "0.4.9",
   "main": "dist/shader-composer-three.cjs.js",
   "module": "dist/shader-composer-three.esm.js",
   "files": [
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5b720570a..d2a97a291 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -200,8 +200,8 @@ 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-three: workspace:^0.4.9
       shader-composer-toybox: ^0.1.3
       three: ^0.145.0
       typescript: ^4.9.3
@@ -215,8 +215,8 @@ importers:
       r3f-stage: link:../../packages/r3f-stage
       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-three: link:../../packages/shader-composer-three
       shader-composer-toybox: link:../../packages/shader-composer-toybox
       three: 0.145.0
     devDependencies:

From c501094f82d7facd6b0e13a14a8bb5726d6a6aae Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:30:42 +0100
Subject: [PATCH 03/55] Change default color in ShaderMaterialMaster

---
 packages/shader-composer/src/stdlib/masters.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/shader-composer/src/stdlib/masters.ts b/packages/shader-composer/src/stdlib/masters.ts
index 1db48227f..980cac77f 100644
--- a/packages/shader-composer/src/stdlib/masters.ts
+++ b/packages/shader-composer/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 = {}) =>

From 75756bd1d65aa84f7a917f35096ae1f47bd994da Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:32:44 +0100
Subject: [PATCH 04/55] Remove three dependency from test

---
 packages/shader-composer/src/tree.test.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/shader-composer/src/tree.test.ts b/packages/shader-composer/src/tree.test.ts
index 6e5e68bd3..4129ed490 100644
--- a/packages/shader-composer/src/tree.test.ts
+++ b/packages/shader-composer/src/tree.test.ts
@@ -1,4 +1,3 @@
-import { Color } from "three"
 import { $ } from "./expressions"
 import { Snippet } from "./snippets"
 import { Float, Master, Vec3 } from "./stdlib"
@@ -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<Item>()
     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", () => {

From 58c0c7d39f4795f3b8d525a77eca8dc6d84a1598 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:35:16 +0100
Subject: [PATCH 05/55] Remove 3.js bits from UpdateCallback

---
 .changeset/yellow-pens-switch.md      |  5 +++++
 packages/shader-composer/src/units.ts | 12 ++----------
 2 files changed, 7 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/yellow-pens-switch.md

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/packages/shader-composer/src/units.ts b/packages/shader-composer/src/units.ts
index 45493d87d..472a05c35 100644
--- a/packages/shader-composer/src/units.ts
+++ b/packages/shader-composer/src/units.ts
@@ -1,14 +1,11 @@
 import {
-  Camera,
   Color,
   Matrix3,
   Matrix4,
-  Scene,
   Texture,
   Vector2,
   Vector3,
-  Vector4,
-  WebGLRenderer
+  Vector4
 } from "three"
 import { $, Expression } from "./expressions"
 import { identifier } from "./util/concatenator3000"
@@ -45,12 +42,7 @@ export type JSTypes = {
 
 export type Input<T extends GLSLType = any> = Expression | JSTypes[T] | Unit<T>
 
-export type UpdateCallback = (
-  dt: number,
-  camera: Camera,
-  scene: Scene,
-  gl: WebGLRenderer
-) => void
+export type UpdateCallback = (dt: number) => void
 
 export type UnitConfig<T extends GLSLType> = {
   /**

From 6da86a344cbaf9e0b1d094d0ff4e4d629f4d98a0 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:40:21 +0100
Subject: [PATCH 06/55] Update update API

---
 packages/shader-composer-r3f/src/hooks.ts |  4 ++--
 packages/shader-composer/src/compiler.ts  | 10 ++--------
 2 files changed, 4 insertions(+), 10 deletions(-)

diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts
index 6cb01c9aa..78ce19fec 100644
--- a/packages/shader-composer-r3f/src/hooks.ts
+++ b/packages/shader-composer-r3f/src/hooks.ts
@@ -19,8 +19,8 @@ export const useShader = (ctor: () => Unit, deps?: any) => {
   useEffect(() => () => dispose(), deps)
 
   /* Invoke the shader tree's update functions. */
-  useFrame(function useShaderUpdate({ camera, scene, gl }, dt) {
-    update(dt, camera, scene, gl)
+  useFrame(function useShaderUpdate(_, dt) {
+    update(dt)
   })
 
   return shader
diff --git a/packages/shader-composer/src/compiler.ts b/packages/shader-composer/src/compiler.ts
index d18d9ed7c..b21b43e76 100644
--- a/packages/shader-composer/src/compiler.ts
+++ b/packages/shader-composer/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) => {
     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)
         state.lastUpdateAt = now
       }
     }

From 1bdb4a8f9103618d10b375aeb4188fe7a4b6847f Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 07:59:57 +0100
Subject: [PATCH 07/55] Update payloads

---
 packages/shader-composer-r3f/src/hooks.ts        | 4 ++--
 packages/shader-composer/src/compiler.ts         | 4 ++--
 packages/shader-composer/src/stdlib/variables.ts | 4 ++--
 packages/shader-composer/src/units.ts            | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts
index 78ce19fec..7675f04f9 100644
--- a/packages/shader-composer-r3f/src/hooks.ts
+++ b/packages/shader-composer-r3f/src/hooks.ts
@@ -19,8 +19,8 @@ export const useShader = (ctor: () => Unit, deps?: any) => {
   useEffect(() => () => dispose(), deps)
 
   /* Invoke the shader tree's update functions. */
-  useFrame(function useShaderUpdate(_, dt) {
-    update(dt)
+  useFrame(function useShaderUpdate({ camera, scene, gl }, dt) {
+    update(dt, { camera, scene, gl })
   })
 
   return shader
diff --git a/packages/shader-composer/src/compiler.ts b/packages/shader-composer/src/compiler.ts
index b21b43e76..46eb58913 100644
--- a/packages/shader-composer/src/compiler.ts
+++ b/packages/shader-composer/src/compiler.ts
@@ -245,7 +245,7 @@ export const compileShader = (root: Unit) => {
   /*
   STEP 6: Build per-frame update function.
   */
-  const update = (dt: number) => {
+  const update = (dt: number, payload?: any) => {
     const now = performance.now()
 
     for (const unit of unitsWithUpdates) {
@@ -253,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)
+        unit._unitConfig.update(dt, payload)
         state.lastUpdateAt = now
       }
     }
diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer/src/stdlib/variables.ts
index 57769fe55..d2fad2252 100644
--- a/packages/shader-composer/src/stdlib/variables.ts
+++ b/packages/shader-composer/src/stdlib/variables.ts
@@ -1,4 +1,4 @@
-import { PerspectiveCamera, Vector2 } from "three"
+import { PerspectiveCamera, Vector2, WebGLRenderer } from "three"
 import { $, Expression } from "../expressions"
 import { GLSLType, injectAPI, JSTypes, Unit, UnitConfig } from "../units"
 import { $localToViewSpace, $localToWorldSpace } from "./spaces"
@@ -185,7 +185,7 @@ export const GlobalTime = Time()
 export const Resolution = UniformUnit("vec2", new Vector2(0, 0), {
   name: "Current Render Resolution",
 
-  update: (dt, camera, scene, gl) => {
+  update: (dt, { gl }: { gl: WebGLRenderer }) => {
     Resolution.value.x = gl.domElement.width
     Resolution.value.y = gl.domElement.height
   }
diff --git a/packages/shader-composer/src/units.ts b/packages/shader-composer/src/units.ts
index 472a05c35..21b22d312 100644
--- a/packages/shader-composer/src/units.ts
+++ b/packages/shader-composer/src/units.ts
@@ -42,7 +42,7 @@ export type JSTypes = {
 
 export type Input<T extends GLSLType = any> = Expression | JSTypes[T] | Unit<T>
 
-export type UpdateCallback = (dt: number) => void
+export type UpdateCallback = (dt: number, payload?: any) => void
 
 export type UnitConfig<T extends GLSLType> = {
   /**

From a60bba2a2772ca439e239c1499523fe7e0b41aed Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 08:33:32 +0100
Subject: [PATCH 08/55] Change sc-r3d dependency to sc-three

---
 packages/shader-composer-r3f/package.json | 2 +-
 packages/shader-composer-r3f/src/hooks.ts | 2 +-
 pnpm-lock.yaml                            | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/shader-composer-r3f/package.json b/packages/shader-composer-r3f/package.json
index cc229119e..163d52bda 100644
--- a/packages/shader-composer-r3f/package.json
+++ b/packages/shader-composer-r3f/package.json
@@ -45,6 +45,6 @@
   "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"
   }
 }
diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts
index 7675f04f9..72e32be9f 100644
--- a/packages/shader-composer-r3f/src/hooks.ts
+++ b/packages/shader-composer-r3f/src/hooks.ts
@@ -7,7 +7,7 @@ import {
   UniformUnit,
   Unit,
   UnitConfig
-} from "shader-composer"
+} from "shader-composer-three"
 
 export const useShader = (ctor: () => Unit, deps?: any) => {
   const [shader, { update, dispose }] = useMemo(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d2a97a291..ad20934e9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -592,11 +592,11 @@ importers:
     specifiers:
       '@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
     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
 
   packages/shader-composer-three:
     specifiers:

From ade00a8a45c6b7a1ea83784a6a0ad1cde0985afd Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 08:37:43 +0100
Subject: [PATCH 09/55] Fix render-composer

---
 packages/shader-composer-postprocessing/package.json          | 4 ++--
 .../src/PostProcessingEffectMaster.ts                         | 2 +-
 .../src/ShaderComposerEffect.ts                               | 4 ++--
 packages/shader-composer-postprocessing/src/units.ts          | 2 +-
 pnpm-lock.yaml                                                | 4 ++--
 5 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/shader-composer-postprocessing/package.json b/packages/shader-composer-postprocessing/package.json
index 2451458fd..756bca491 100644
--- a/packages/shader-composer-postprocessing/package.json
+++ b/packages/shader-composer-postprocessing/package.json
@@ -33,11 +33,11 @@
     ]
   },
   "devDependencies": {
-    "shader-composer": "workspace:^0.4.3"
+    "shader-composer-three": "workspace:^0.4.9"
   },
   "peerDependencies": {
     "postprocessing": "^6.28.7",
-    "shader-composer": "^0.4.3",
+    "shader-composer-three": "^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..4a68f843a 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-three"
 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..2a27f7366 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-three"
 import { WebGLRenderer, WebGLRenderTarget } from "three"
 import { PostProcessingEffectMaster } from "./PostProcessingEffectMaster"
 
@@ -39,6 +39,6 @@ export class ShaderComposerEffect extends PP.Effect {
     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)
+    this._shaderMeta.update(deltaTime, { gl: renderer })
   }
 }
diff --git a/packages/shader-composer-postprocessing/src/units.ts b/packages/shader-composer-postprocessing/src/units.ts
index 5e68b99e5..dbef33747 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-three"
 
 export const InputColor = Vec3($`inputColor.rgb`)
 export const InputAlpha = Float($`inputColor.a`)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ad20934e9..bc527f808 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -584,9 +584,9 @@ importers:
 
   packages/shader-composer-postprocessing:
     specifiers:
-      shader-composer: workspace:^0.4.3
+      shader-composer-three: workspace:^0.4.9
     devDependencies:
-      shader-composer: link:../shader-composer
+      shader-composer-three: link:../shader-composer-three
 
   packages/shader-composer-r3f:
     specifiers:

From 9e7a9a75437c4ab91597f405d60452e752e50944 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 08:42:39 +0100
Subject: [PATCH 10/55] Fix MC examples

---
 apps/material-composer-examples/src/examples/Vanilla.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

From 50de88ad4c6184d52c1cf463a2d9a2cf4edd8b87 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 10:19:42 +0100
Subject: [PATCH 11/55] Fix CameraNear and CameraFar

---
 packages/shader-composer/src/stdlib/variables.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer/src/stdlib/variables.ts
index d2fad2252..e09787954 100644
--- a/packages/shader-composer/src/stdlib/variables.ts
+++ b/packages/shader-composer/src/stdlib/variables.ts
@@ -194,7 +194,7 @@ export const Resolution = UniformUnit("vec2", new Vector2(0, 0), {
 export const CameraNear = UniformUnit("float", 0 as number, {
   name: "Camera Near Plane",
 
-  update: (_, camera) => {
+  update: (_, { camera }) => {
     if (camera instanceof PerspectiveCamera) {
       CameraNear.value = camera.near
     }
@@ -204,7 +204,7 @@ export const CameraNear = UniformUnit("float", 0 as number, {
 export const CameraFar = UniformUnit("float", 0 as number, {
   name: "Camera Far Plane",
 
-  update: (_, camera) => {
+  update: (_, { camera }) => {
     if (camera instanceof PerspectiveCamera) {
       CameraFar.value = camera.far
     }

From 0ac12fd6081045465dd68d9ca1f4b5b47d2c58d2 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 10:19:58 +0100
Subject: [PATCH 12/55] Cleanup

---
 .../src/ShaderComposerEffect.ts                      | 12 +++---------
 1 file changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts b/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts
index 2a27f7366..e1baf88c7 100644
--- a/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts
+++ b/packages/shader-composer-postprocessing/src/ShaderComposerEffect.ts
@@ -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, { gl: renderer })
+  update(gl: WebGLRenderer, inputBuffer: WebGLRenderTarget, deltaTime: number) {
+    super.update(gl, inputBuffer, deltaTime)
+    this._shaderMeta.update(deltaTime, { gl })
   }
 }

From 6623f845a52582671b23da93a926e4924339ff23 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 10:43:36 +0100
Subject: [PATCH 13/55] Patch CameraNear and CameraFar

---
 packages/shader-composer-three/src/index.ts   | 16 +++++++++++++++
 .../shader-composer/src/stdlib/variables.ts   | 20 +++++++++----------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index 54c0d5e99..a5622a148 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -1,2 +1,18 @@
 /* Re-export everything from Shader Composer */
 export * from "shader-composer"
+
+/* Patch units with Three.js specific code */
+import { CameraFar, CameraNear } from "shader-composer"
+import { PerspectiveCamera } from "three"
+
+CameraNear._unitConfig.update = (_, { camera }) => {
+  if (camera instanceof PerspectiveCamera) {
+    CameraNear.value = camera.near
+  }
+}
+
+CameraFar._unitConfig.update = (_, { camera }) => {
+  if (camera instanceof PerspectiveCamera) {
+    CameraFar.value = camera.far
+  }
+}
diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer/src/stdlib/variables.ts
index e09787954..6b625b453 100644
--- a/packages/shader-composer/src/stdlib/variables.ts
+++ b/packages/shader-composer/src/stdlib/variables.ts
@@ -1,4 +1,4 @@
-import { PerspectiveCamera, Vector2, WebGLRenderer } from "three"
+import { Vector2, WebGLRenderer } from "three"
 import { $, Expression } from "../expressions"
 import { GLSLType, injectAPI, JSTypes, Unit, UnitConfig } from "../units"
 import { $localToViewSpace, $localToWorldSpace } from "./spaces"
@@ -185,7 +185,7 @@ export const GlobalTime = Time()
 export const Resolution = UniformUnit("vec2", new Vector2(0, 0), {
   name: "Current Render Resolution",
 
-  update: (dt, { gl }: { gl: WebGLRenderer }) => {
+  update: (_, { gl }: { gl: WebGLRenderer }) => {
     Resolution.value.x = gl.domElement.width
     Resolution.value.y = gl.domElement.height
   }
@@ -194,20 +194,20 @@ export const Resolution = UniformUnit("vec2", new Vector2(0, 0), {
 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."
+    )
   }
 })
 

From cdc8b1f46ad4d2ebf13b6074c192b30951895c1d Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 10:59:02 +0100
Subject: [PATCH 14/55] Resolution

---
 packages/shader-composer-three/src/index.ts   | 31 +++++++++++++++----
 .../shader-composer/src/stdlib/variables.ts   |  7 ++---
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index a5622a148..0c9a807a0 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -2,17 +2,36 @@
 export * from "shader-composer"
 
 /* Patch units with Three.js specific code */
-import { CameraFar, CameraNear } from "shader-composer"
-import { PerspectiveCamera } from "three"
+import {
+  $,
+  CameraFar,
+  CameraNear,
+  CameraPosition,
+  Resolution
+} from "shader-composer"
+import * as THREE from "three"
 
-CameraNear._unitConfig.update = (_, { camera }) => {
-  if (camera instanceof PerspectiveCamera) {
+export type UpdatePayload = {
+  camera: THREE.Camera
+  gl: THREE.WebGLRenderer
+  scene: THREE.Scene
+}
+
+CameraNear._unitConfig.update = (_, { camera }: UpdatePayload) => {
+  if (camera instanceof THREE.PerspectiveCamera) {
     CameraNear.value = camera.near
   }
 }
 
-CameraFar._unitConfig.update = (_, { camera }) => {
-  if (camera instanceof PerspectiveCamera) {
+CameraFar._unitConfig.update = (_, { camera }: UpdatePayload) => {
+  if (camera instanceof THREE.PerspectiveCamera) {
     CameraFar.value = camera.far
   }
 }
+
+CameraPosition._unitConfig.value = $`cameraPosition`
+
+Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => {
+  Resolution.value.x = gl.domElement.width
+  Resolution.value.y = gl.domElement.height
+}
diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer/src/stdlib/variables.ts
index 6b625b453..418a5f012 100644
--- a/packages/shader-composer/src/stdlib/variables.ts
+++ b/packages/shader-composer/src/stdlib/variables.ts
@@ -1,4 +1,4 @@
-import { Vector2, WebGLRenderer } from "three"
+import { Vector2 } from "three"
 import { $, Expression } from "../expressions"
 import { GLSLType, injectAPI, JSTypes, Unit, UnitConfig } from "../units"
 import { $localToViewSpace, $localToWorldSpace } from "./spaces"
@@ -185,9 +185,8 @@ export const GlobalTime = Time()
 export const Resolution = UniformUnit("vec2", new Vector2(0, 0), {
   name: "Current Render Resolution",
 
-  update: (_, { gl }: { gl: WebGLRenderer }) => {
-    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."
   }
 })
 

From 2a341d67fede01d417847170904baacaba4e7c9d Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 10:59:29 +0100
Subject: [PATCH 15/55] Don't need to change the default

---
 packages/shader-composer-three/src/index.ts | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index 0c9a807a0..d751ae8d3 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -2,13 +2,7 @@
 export * from "shader-composer"
 
 /* Patch units with Three.js specific code */
-import {
-  $,
-  CameraFar,
-  CameraNear,
-  CameraPosition,
-  Resolution
-} from "shader-composer"
+import { CameraFar, CameraNear, Resolution } from "shader-composer"
 import * as THREE from "three"
 
 export type UpdatePayload = {
@@ -29,8 +23,6 @@ CameraFar._unitConfig.update = (_, { camera }: UpdatePayload) => {
   }
 }
 
-CameraPosition._unitConfig.value = $`cameraPosition`
-
 Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => {
   Resolution.value.x = gl.domElement.width
   Resolution.value.y = gl.domElement.height

From 0b4187d049283f2df62bc8622326fd0c2cc0cb9b Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 11:03:20 +0100
Subject: [PATCH 16/55] Configure UsingInstancing

---
 packages/shader-composer-three/src/index.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index d751ae8d3..3094fbf3a 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -2,7 +2,13 @@
 export * from "shader-composer"
 
 /* Patch units with Three.js specific code */
-import { CameraFar, CameraNear, Resolution } from "shader-composer"
+import {
+  $,
+  CameraFar,
+  CameraNear,
+  Resolution,
+  UsingInstancing
+} from "shader-composer"
 import * as THREE from "three"
 
 export type UpdatePayload = {
@@ -27,3 +33,11 @@ Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => {
   Resolution.value.x = gl.domElement.width
   Resolution.value.y = gl.domElement.height
 }
+
+UsingInstancing._unitConfig.value = $`
+  #ifdef USE_INSTANCING
+    true
+  #else
+    false
+  #endif
+`

From 99329ae6e377509d9bffa3f09beb88c94370bf9d Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 11:03:58 +0100
Subject: [PATCH 17/55] Cleanup

---
 packages/shader-composer-three/src/index.ts | 24 ++++++++-------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index 3094fbf3a..c67baa251 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -2,13 +2,7 @@
 export * from "shader-composer"
 
 /* Patch units with Three.js specific code */
-import {
-  $,
-  CameraFar,
-  CameraNear,
-  Resolution,
-  UsingInstancing
-} from "shader-composer"
+import * as SC from "shader-composer"
 import * as THREE from "three"
 
 export type UpdatePayload = {
@@ -17,24 +11,24 @@ export type UpdatePayload = {
   scene: THREE.Scene
 }
 
-CameraNear._unitConfig.update = (_, { camera }: UpdatePayload) => {
+SC.CameraNear._unitConfig.update = (_, { camera }: UpdatePayload) => {
   if (camera instanceof THREE.PerspectiveCamera) {
-    CameraNear.value = camera.near
+    SC.CameraNear.value = camera.near
   }
 }
 
-CameraFar._unitConfig.update = (_, { camera }: UpdatePayload) => {
+SC.CameraFar._unitConfig.update = (_, { camera }: UpdatePayload) => {
   if (camera instanceof THREE.PerspectiveCamera) {
-    CameraFar.value = camera.far
+    SC.CameraFar.value = camera.far
   }
 }
 
-Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => {
-  Resolution.value.x = gl.domElement.width
-  Resolution.value.y = gl.domElement.height
+SC.Resolution._unitConfig.update = (_, { gl }: UpdatePayload) => {
+  SC.Resolution.value.x = gl.domElement.width
+  SC.Resolution.value.y = gl.domElement.height
 }
 
-UsingInstancing._unitConfig.value = $`
+SC.UsingInstancing._unitConfig.value = SC.$`
   #ifdef USE_INSTANCING
     true
   #else

From 95002720c05dc2b6bc90cca5e71f951325bf185e Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 11:18:59 +0100
Subject: [PATCH 18/55] Remove three dependencies from glslType

---
 packages/shader-composer/src/glslType.ts | 66 ++++++++++++++++--------
 1 file changed, 44 insertions(+), 22 deletions(-)

diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index 20742bd37..e9bd57a9a 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,31 +1,45 @@
-import {
-  Color,
-  Matrix3,
-  Matrix4,
-  Texture,
-  Vector2,
-  Vector3,
-  Vector4
-} from "three"
 import { GLSLType, isUnit, Input } from "./units"
 
 export type GLSLTypeFor<JSType> = JSType extends number
   ? "float"
   : JSType extends boolean
   ? "bool"
-  : JSType extends Texture
+  : JSType extends { isTexture: any }
   ? "sampler2D"
-  : JSType extends Vector2
+  : JSType extends { x: number; y: number }
   ? "vec2"
-  : JSType extends Vector3
+  : JSType extends { x: number; y: number; z: number }
   ? "vec3"
-  : JSType extends Vector4
+  : JSType extends { x: number; y: number; z: number; w: number }
   ? "vec4"
-  : JSType extends Color
+  : JSType extends { r: number; g: number; b: number }
   ? "vec3"
-  : JSType extends Matrix3
+  : JSType extends [
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number
+    ]
   ? "mat3"
-  : JSType extends Matrix4
+  : JSType extends [
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number,
+      number
+    ]
   ? "mat4"
   : never
 
@@ -33,15 +47,23 @@ export const glslType = <T extends GLSLType>(value: Input<T>): 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
+  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}`)
 }
 
+function isArrayWithLength(obj: any, length: number) {
+  return Array.isArray(obj) && obj.length === length
+}
+
+function isObjectWithKeys(obj: any, ...keys: string[]) {
+  return keys.every((key) => obj.hasOwnProperty(key))
+}
+
 export const type = glslType

From dc611b8fa2863fb8f2af00add44405cdb781ae89 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 11:23:22 +0100
Subject: [PATCH 19/55] Clean up, make proper types

---
 packages/shader-composer/src/glslType.ts | 76 ++++++++++++++----------
 1 file changed, 45 insertions(+), 31 deletions(-)

diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index e9bd57a9a..05a87016b 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,45 +1,59 @@
 import { GLSLType, isUnit, Input } from "./units"
 
+export type Vector2 = { x: number; y: number }
+export type Vector3 = { x: number; y: number; z: number }
+export type Vector4 = { x: number; y: number; z: number; w: number }
+export type Color = { r: number; g: number; b: number }
+export type Matrix2 = [number, number, number, number]
+export type Matrix3 = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+]
+export type Matrix4 = [
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number,
+  number
+]
+
 export type GLSLTypeFor<JSType> = JSType extends number
   ? "float"
   : JSType extends boolean
   ? "bool"
   : JSType extends { isTexture: any }
   ? "sampler2D"
-  : JSType extends { x: number; y: number }
+  : JSType extends Vector2
   ? "vec2"
-  : JSType extends { x: number; y: number; z: number }
+  : JSType extends Vector3
   ? "vec3"
-  : JSType extends { x: number; y: number; z: number; w: number }
+  : JSType extends Vector4
   ? "vec4"
-  : JSType extends { r: number; g: number; b: number }
+  : JSType extends Color
   ? "vec3"
-  : JSType extends [
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number
-    ]
+  : JSType extends Matrix2
+  ? "mat2"
+  : JSType extends Matrix3
   ? "mat3"
-  : JSType extends [
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number,
-      number
-    ]
+  : JSType extends Matrix4
   ? "mat4"
   : never
 
@@ -58,6 +72,8 @@ export const glslType = <T extends GLSLType>(value: Input<T>): T => {
   throw new Error(`Could not render GLSL type for: ${value}`)
 }
 
+export const type = glslType
+
 function isArrayWithLength(obj: any, length: number) {
   return Array.isArray(obj) && obj.length === length
 }
@@ -65,5 +81,3 @@ function isArrayWithLength(obj: any, length: number) {
 function isObjectWithKeys(obj: any, ...keys: string[]) {
   return keys.every((key) => obj.hasOwnProperty(key))
 }
-
-export const type = glslType

From 43ace1f23c9968c378550f046ab5524424582276 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 11:36:03 +0100
Subject: [PATCH 20/55] Typesssss

---
 .changeset/two-jokes-wait.md                  |  7 ++
 packages/shader-composer/src/glslType.ts      | 82 ++++++++++++-------
 packages/shader-composer/src/stdlib/values.ts |  2 +-
 packages/shader-composer/src/units.test.ts    |  7 +-
 packages/shader-composer/src/units.ts         | 10 +--
 5 files changed, 67 insertions(+), 41 deletions(-)
 create mode 100644 .changeset/two-jokes-wait.md

diff --git a/.changeset/two-jokes-wait.md b/.changeset/two-jokes-wait.md
new file mode 100644
index 000000000..67369c9c3
--- /dev/null
+++ b/.changeset/two-jokes-wait.md
@@ -0,0 +1,7 @@
+---
+"shader-composer": minor
+---
+
+You can now pass Vector-like objects into Vec3 et al
+
+massive improvements to value typings
diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index 05a87016b..f0a30e064 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,38 +1,58 @@
 import { GLSLType, isUnit, Input } from "./units"
 
-export type Vector2 = { x: number; y: number }
-export type Vector3 = { x: number; y: number; z: number }
-export type Vector4 = { x: number; y: number; z: number; w: number }
-export type Color = { r: number; g: number; b: number }
-export type Matrix2 = [number, number, number, number]
+export type Vector2 =
+  | { x: Input<"float">; y: Input<"float"> }
+  | [Input<"float">, Input<"float">]
+
+export type Vector3 =
+  | { x: Input<"float">; y: Input<"float">; z: Input<"float"> }
+  | [Input<"float">, Input<"float">, Input<"float">]
+
+export type Vector4 = {
+  x: Input<"float">
+  y: Input<"float">
+  z: Input<"float">
+  w: 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 = [
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">,
+  Input<"float">
 ]
+
 export type Matrix4 = [
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number,
-  number
+  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> = JSType extends number
@@ -58,7 +78,7 @@ export type GLSLTypeFor<JSType> = JSType extends number
   : never
 
 export const glslType = <T extends GLSLType>(value: Input<T>): T => {
-  if (isUnit(value)) return value._unitConfig.type
+  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
diff --git a/packages/shader-composer/src/stdlib/values.ts b/packages/shader-composer/src/stdlib/values.ts
index 5786719cd..872ddc5d3 100644
--- a/packages/shader-composer/src/stdlib/values.ts
+++ b/packages/shader-composer/src/stdlib/values.ts
@@ -10,7 +10,7 @@ import { GLSLType, Input, isUnit, Unit, UnitConfig } from "../units"
  * constructors, who will automatically cast the given values to the correct
  * type.
  */
-export type CastableInput<T extends GLSLType> = Input<GLSLType>
+export type CastableInput<T extends GLSLType> = Input<T>
 
 export type CastFunction<T extends GLSLType> = (
   ...values: CastableInput<T>[]
diff --git a/packages/shader-composer/src/units.test.ts b/packages/shader-composer/src/units.test.ts
index 048f87ec2..73497632c 100644
--- a/packages/shader-composer/src/units.test.ts
+++ b/packages/shader-composer/src/units.test.ts
@@ -1,4 +1,3 @@
-import { Vector2 } from "three"
 import { compileShader } from "./compiler"
 import { $ } from "./expressions"
 import { glslRepresentation } from "./glslRepresentation"
@@ -86,8 +85,8 @@ describe("Unit", () => {
 })
 
 describe("Vec2", () => {
-  it("accepts a THREE.Vector2 as value", () => {
-    const vec2 = Vec2(new Vector2(1, 2))
-    expect(glsl(vec2._unitConfig.value)).toBe("vec2(vec2(1.0, 2.0))")
+  it("accepts a Vector2-like object as value", () => {
+    const vec2 = Vec2([1, 2])
+    expect(glsl(vec2._unitConfig.value)).toBe("vec2(1.0, 2.0)")
   })
 })
diff --git a/packages/shader-composer/src/units.ts b/packages/shader-composer/src/units.ts
index 21b22d312..1adb385a9 100644
--- a/packages/shader-composer/src/units.ts
+++ b/packages/shader-composer/src/units.ts
@@ -1,13 +1,13 @@
+import { $, Expression } from "./expressions"
 import {
   Color,
+  Matrix2,
   Matrix3,
   Matrix4,
-  Texture,
   Vector2,
   Vector3,
   Vector4
-} from "three"
-import { $, Expression } from "./expressions"
+} from "./glslType"
 import { identifier } from "./util/concatenator3000"
 
 export type Program = "vertex" | "fragment"
@@ -34,10 +34,10 @@ 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<T extends GLSLType = any> = Expression | JSTypes[T] | Unit<T>

From b95786713bebc0a63120ff7041c897d07a99d00b Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 13:13:12 +0100
Subject: [PATCH 21/55] Note

---
 packages/shader-composer/src/stdlib/values.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/shader-composer/src/stdlib/values.ts b/packages/shader-composer/src/stdlib/values.ts
index 872ddc5d3..bd8200446 100644
--- a/packages/shader-composer/src/stdlib/values.ts
+++ b/packages/shader-composer/src/stdlib/values.ts
@@ -10,7 +10,8 @@ import { GLSLType, Input, isUnit, Unit, UnitConfig } from "../units"
  * constructors, who will automatically cast the given values to the correct
  * type.
  */
-export type CastableInput<T extends GLSLType> = Input<T>
+export type CastableInput<T extends GLSLType> = Input<GLSLType>
+/* NOTE: this will currently always allow any GLSL input. We may narrow it over time. */
 
 export type CastFunction<T extends GLSLType> = (
   ...values: CastableInput<T>[]

From d0e35fe23eb54affdcb9d77eb8a465ba4103cfaf Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:04:54 +0100
Subject: [PATCH 22/55] REWORK OMG

---
 .changeset/curvy-llamas-pump.md               |  5 ++
 .../src/examples/Textures.tsx                 |  4 +-
 .../shader-composer/src/expressions.test.ts   |  2 +-
 .../src/glslRepresentation.test.ts            | 27 +++++++++-
 .../shader-composer/src/glslRepresentation.ts | 50 ++++++++++++-------
 packages/shader-composer/src/glslType.ts      |  6 +--
 .../shader-composer/src/stdlib/values.test.ts | 50 ++++++++-----------
 packages/shader-composer/src/stdlib/values.ts | 23 ++++-----
 packages/shader-composer/src/units.test.ts    |  2 +-
 9 files changed, 100 insertions(+), 69 deletions(-)
 create mode 100644 .changeset/curvy-llamas-pump.md

diff --git a/.changeset/curvy-llamas-pump.md b/.changeset/curvy-llamas-pump.md
new file mode 100644
index 000000000..36ef87443
--- /dev/null
+++ b/.changeset/curvy-llamas-pump.md
@@ -0,0 +1,5 @@
+---
+"shader-composer": minor
+---
+
+Siganture of $foo() changed, now just 1 argument, needs array, eg. `$vec2([1, 2])`
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index b8f106d47..c192d912a 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -18,13 +18,13 @@ export default function Textures() {
   const texture = useRepeatingTexture("/textures/hexgrid.jpg")
 
   const shader = useShader(() => {
-    const offset = $vec2(Mul(Time(), 0.05), 0)
+    const offset = $vec2([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/packages/shader-composer/src/expressions.test.ts b/packages/shader-composer/src/expressions.test.ts
index 606ebb4e5..9165a2c07 100644
--- a/packages/shader-composer/src/expressions.test.ts
+++ b/packages/shader-composer/src/expressions.test.ts
@@ -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/src/glslRepresentation.test.ts b/packages/shader-composer/src/glslRepresentation.test.ts
index d4acddd89..bf7387707 100644
--- a/packages/shader-composer/src/glslRepresentation.test.ts
+++ b/packages/shader-composer/src/glslRepresentation.test.ts
@@ -1,5 +1,4 @@
 import { Matrix3, Matrix4 } from "three"
-import { glsl } from "./expressions"
 import { glslRepresentation } from "./glslRepresentation"
 
 describe("glslRepresentation", () => {
@@ -26,4 +25,30 @@ describe("glslRepresentation", () => {
       "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 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 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)")
+  })
 })
diff --git a/packages/shader-composer/src/glslRepresentation.ts b/packages/shader-composer/src/glslRepresentation.ts
index 6ac5d4d95..01aba6c46 100644
--- a/packages/shader-composer/src/glslRepresentation.ts
+++ b/packages/shader-composer/src/glslRepresentation.ts
@@ -1,7 +1,8 @@
 import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from "three"
 import { isExpression } from "./expressions"
+import { isArrayWithLength, isObjectWithKeys } from "./glslType"
 import { isSnippet } from "./snippets"
-import { GLSLType, isUnit, Input, uniformName } from "./units"
+import { GLSLType, Input, isUnit, uniformName } from "./units"
 
 export const glslRepresentation = (
   value: Input | undefined,
@@ -9,9 +10,6 @@ export const glslRepresentation = (
 ): 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)
@@ -30,29 +28,43 @@ export const glslRepresentation = (
     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)
+  if (isObjectWithKeys(value, "isMatrix3"))
     return `mat3(${value
       .toArray()
-      .map((n) => g(n))
+      .map((n: Input) => g(n))
       .join(", ")})`
 
-  if (value instanceof Matrix4)
+  if (isObjectWithKeys(value, "isMatrix4"))
     return `mat4(${value
       .toArray()
-      .map((n) => g(n))
+      .map((n: Input) => g(n))
       .join(", ")})`
 
+  if (isArrayWithLength(value, 4))
+    return `vec4(${g(value[0])}, ${g(value[1])}, ${g(value[2])}, ${g(
+      value[3]
+    )})`
+
+  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 (isArrayWithLength(value, 3))
+    return `vec3(${g(value[0])}, ${g(value[1])}, ${g(value[2])})`
+
+  if (isObjectWithKeys(value, "r", "g", "b"))
+    return `vec3(${g(value.r)}, ${g(value.g)}, ${g(value.b)})`
+
+  if (isArrayWithLength(value, 2)) return `vec2(${g(value[0])}, ${g(value[1])})`
+
+  if (isObjectWithKeys(value, "x", "y"))
+    return `vec2(${g(value.x)}, ${g(value.y)})`
+
+  // if (Array.isArray(value))
+  //   return value.map((v) => glslRepresentation(v)).join(", ")
+
   /* Fail */
   throw new Error(`Could not render value to GLSL: ${JSON.stringify(value)}`)
 }
diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index f0a30e064..a0756d246 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -94,10 +94,10 @@ export const glslType = <T extends GLSLType>(value: Input<T>): T => {
 
 export const type = glslType
 
-function isArrayWithLength(obj: any, length: number) {
+export function isArrayWithLength(obj: any, length: number) {
   return Array.isArray(obj) && obj.length === length
 }
 
-function isObjectWithKeys(obj: any, ...keys: string[]) {
-  return keys.every((key) => obj.hasOwnProperty(key))
+export function isObjectWithKeys(obj: any, ...keys: string[]) {
+  return keys.every((key) => obj[key] !== undefined)
 }
diff --git a/packages/shader-composer/src/stdlib/values.test.ts b/packages/shader-composer/src/stdlib/values.test.ts
index 5721acdf1..4317972b3 100644
--- a/packages/shader-composer/src/stdlib/values.test.ts
+++ b/packages/shader-composer/src/stdlib/values.test.ts
@@ -1,15 +1,5 @@
-import { Color, Vector2, Vector3 } from "three"
 import { glslRepresentation } from "../glslRepresentation"
-import {
-  $float,
-  $mat2,
-  $swizzle,
-  $vec2,
-  $vec3,
-  $vec4,
-  Int,
-  Vec3
-} from "./values"
+import { $float, $mat2, $swizzle, $vec3, $vec4, Int, Vec3 } from "./values"
 
 describe("$float", () => {
   it("returns an expression that casts the given value to a float", () => {
@@ -24,52 +14,52 @@ describe("$float", () => {
 
 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 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", () => {
   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", () => {
   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 +67,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,19 +78,19 @@ 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")
@@ -109,12 +99,12 @@ describe("Vec3", () => {
 
 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 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/src/stdlib/values.ts
index bd8200446..22415e080 100644
--- a/packages/shader-composer/src/stdlib/values.ts
+++ b/packages/shader-composer/src/stdlib/values.ts
@@ -10,48 +10,47 @@ import { GLSLType, Input, isUnit, Unit, UnitConfig } from "../units"
  * constructors, who will automatically cast the given values to the correct
  * type.
  */
-export type CastableInput<T extends GLSLType> = Input<GLSLType>
+export type CastableInput = any
 /* NOTE: this will currently always allow any GLSL input. We may narrow it over time. */
 
 export type CastFunction<T extends GLSLType> = (
-  ...values: CastableInput<T>[]
+  ...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
@@ -87,8 +86,8 @@ const makeUnitFactory =
 
 const makeCastableUnitFactory =
   <T extends GLSLType>(type: T, castFunction: CastFunction<T>) =>
-  (v: CastableInput<T> | CastableInput<T>[], extras?: Partial<UnitConfig<T>>) =>
-    Unit(type, castFunction(...(Array.isArray(v) ? v : [v])), extras) as Unit<T>
+  (v: CastableInput, extras?: Partial<UnitConfig<T>>) =>
+    Unit(type, castFunction(v), extras) as Unit<T>
 
 export const Float = makeCastableUnitFactory("float", $float)
 export const Int = makeUnitFactory("int")
diff --git a/packages/shader-composer/src/units.test.ts b/packages/shader-composer/src/units.test.ts
index 73497632c..29d5cd116 100644
--- a/packages/shader-composer/src/units.test.ts
+++ b/packages/shader-composer/src/units.test.ts
@@ -87,6 +87,6 @@ describe("Unit", () => {
 describe("Vec2", () => {
   it("accepts a Vector2-like object as value", () => {
     const vec2 = Vec2([1, 2])
-    expect(glsl(vec2._unitConfig.value)).toBe("vec2(1.0, 2.0)")
+    expect(glsl(vec2._unitConfig.value)).toBe("vec2(vec2(1.0, 2.0))")
   })
 })

From c04f936d94b72d26851b7326b09f3a9bfefddadc Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:42:30 +0100
Subject: [PATCH 23/55] glmatrix support

---
 packages/shader-composer/package.json         |  3 ++
 .../src/glslRepresentation.test.ts            | 51 ++++++++++++++++++-
 .../shader-composer/src/glslRepresentation.ts | 33 +++++++-----
 packages/shader-composer/src/glslType.ts      |  5 +-
 .../shader-composer/src/stdlib/values.test.ts |  2 +-
 pnpm-lock.yaml                                |  7 +++
 6 files changed, 83 insertions(+), 18 deletions(-)

diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index 8c80c33cc..0728e31af 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -49,5 +49,8 @@
   },
   "dependencies": {
     "fp-ts": "^2.12.3"
+  },
+  "devDependencies": {
+    "gl-matrix": "^3.4.3"
   }
 }
diff --git a/packages/shader-composer/src/glslRepresentation.test.ts b/packages/shader-composer/src/glslRepresentation.test.ts
index bf7387707..dc7d6c1b3 100644
--- a/packages/shader-composer/src/glslRepresentation.test.ts
+++ b/packages/shader-composer/src/glslRepresentation.test.ts
@@ -1,5 +1,6 @@
 import { Matrix3, Matrix4 } from "three"
 import { glslRepresentation } from "./glslRepresentation"
+import * as glmatrix from "gl-matrix"
 
 describe("glslRepresentation", () => {
   it("renders numbers as floats", () => {
@@ -14,18 +15,48 @@ describe("glslRepresentation", () => {
     expect(glslRepresentation(0.0000000001)).toBe("1e-10")
   })
 
-  it("renders mat3", () => {
+  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 mat4", () => {
+  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)")
   })
@@ -34,6 +65,10 @@ describe("glslRepresentation", () => {
     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)")
   })
@@ -42,6 +77,12 @@ describe("glslRepresentation", () => {
     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)"
@@ -51,4 +92,10 @@ describe("glslRepresentation", () => {
   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/glslRepresentation.ts b/packages/shader-composer/src/glslRepresentation.ts
index 01aba6c46..20df898ac 100644
--- a/packages/shader-composer/src/glslRepresentation.ts
+++ b/packages/shader-composer/src/glslRepresentation.ts
@@ -1,4 +1,3 @@
-import { Color, Matrix3, Matrix4, Vector2, Vector3, Vector4 } from "three"
 import { isExpression } from "./expressions"
 import { isArrayWithLength, isObjectWithKeys } from "./glslType"
 import { isSnippet } from "./snippets"
@@ -28,6 +27,25 @@ export const glslRepresentation = (
     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()
@@ -40,31 +58,18 @@ export const glslRepresentation = (
       .map((n: Input) => g(n))
       .join(", ")})`
 
-  if (isArrayWithLength(value, 4))
-    return `vec4(${g(value[0])}, ${g(value[1])}, ${g(value[2])}, ${g(
-      value[3]
-    )})`
-
   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 (isArrayWithLength(value, 3))
-    return `vec3(${g(value[0])}, ${g(value[1])}, ${g(value[2])})`
-
   if (isObjectWithKeys(value, "r", "g", "b"))
     return `vec3(${g(value.r)}, ${g(value.g)}, ${g(value.b)})`
 
-  if (isArrayWithLength(value, 2)) return `vec2(${g(value[0])}, ${g(value[1])})`
-
   if (isObjectWithKeys(value, "x", "y"))
     return `vec2(${g(value.x)}, ${g(value.y)})`
 
-  // if (Array.isArray(value))
-  //   return value.map((v) => glslRepresentation(v)).join(", ")
-
   /* Fail */
   throw new Error(`Could not render value to GLSL: ${JSON.stringify(value)}`)
 }
diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index a0756d246..dd411c708 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,3 +1,4 @@
+import { Float } from "./stdlib"
 import { GLSLType, isUnit, Input } from "./units"
 
 export type Vector2 =
@@ -95,7 +96,9 @@ export const glslType = <T extends GLSLType>(value: Input<T>): T => {
 export const type = glslType
 
 export function isArrayWithLength(obj: any, length: number) {
-  return Array.isArray(obj) && obj.length === length
+  return (
+    (obj instanceof Float32Array || Array.isArray(obj)) && obj.length === length
+  )
 }
 
 export function isObjectWithKeys(obj: any, ...keys: string[]) {
diff --git a/packages/shader-composer/src/stdlib/values.test.ts b/packages/shader-composer/src/stdlib/values.test.ts
index 4317972b3..45f452443 100644
--- a/packages/shader-composer/src/stdlib/values.test.ts
+++ b/packages/shader-composer/src/stdlib/values.test.ts
@@ -34,7 +34,7 @@ describe("$vec3", () => {
   })
 })
 
-describe("$vec3", () => {
+describe("$vec4", () => {
   it("casts multiple components to a vec4", () => {
     const cast = $vec4([{ x: 1, y: 2 }, [3, 4]])
     expect(glslRepresentation(cast)).toEqual(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bc527f808..e50c9a640 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -579,8 +579,11 @@ importers:
   packages/shader-composer:
     specifiers:
       fp-ts: ^2.12.3
+      gl-matrix: ^3.4.3
     dependencies:
       fp-ts: 2.12.3
+    devDependencies:
+      gl-matrix: 3.4.3
 
   packages/shader-composer-postprocessing:
     specifiers:
@@ -5743,6 +5746,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'}

From c4b6ece7493961d14915b2531402bea750a982a4 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:44:16 +0100
Subject: [PATCH 24/55] Cleanup

---
 packages/shader-composer/src/glslType.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index dd411c708..83d0da48b 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,5 +1,4 @@
-import { Float } from "./stdlib"
-import { GLSLType, isUnit, Input } from "./units"
+import { GLSLType, Input, isUnit } from "./units"
 
 export type Vector2 =
   | { x: Input<"float">; y: Input<"float"> }

From 63238500a32822e0e80e6d162343ddf9fc29b9a4 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:46:31 +0100
Subject: [PATCH 25/55] Cleanup

---
 packages/shader-composer/src/stdlib/values.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/shader-composer/src/stdlib/values.ts b/packages/shader-composer/src/stdlib/values.ts
index 22415e080..88f25d603 100644
--- a/packages/shader-composer/src/stdlib/values.ts
+++ b/packages/shader-composer/src/stdlib/values.ts
@@ -13,9 +13,7 @@ import { GLSLType, Input, isUnit, Unit, UnitConfig } from "../units"
 export type CastableInput = any
 /* NOTE: this will currently always allow any GLSL input. We may narrow it over time. */
 
-export type CastFunction<T extends GLSLType> = (
-  ...values: CastableInput[]
-) => Expression
+export type CastFunction = (...values: CastableInput[]) => Expression
 
 /**
  * Returns an expression that casts the given values to a `float`.
@@ -85,7 +83,7 @@ const makeUnitFactory =
     Unit(type, v, extras) as Unit<T>
 
 const makeCastableUnitFactory =
-  <T extends GLSLType>(type: T, castFunction: CastFunction<T>) =>
+  <T extends GLSLType>(type: T, castFunction: CastFunction) =>
   (v: CastableInput, extras?: Partial<UnitConfig<T>>) =>
     Unit(type, castFunction(v), extras) as Unit<T>
 

From f1d720f1a7751d745a134db5d081f27c5697ef72 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:54:41 +0100
Subject: [PATCH 26/55] Fix

---
 .../src/examples/Vanilla.tsx                  |  2 +-
 packages/shader-composer/src/glslType.ts      | 26 ++++++++++---------
 .../vfx-composer/src/ParticleAttribute.ts     |  2 +-
 3 files changed, 16 insertions(+), 14 deletions(-)

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/packages/shader-composer/src/glslType.ts b/packages/shader-composer/src/glslType.ts
index 83d0da48b..c2cd3bedd 100644
--- a/packages/shader-composer/src/glslType.ts
+++ b/packages/shader-composer/src/glslType.ts
@@ -1,13 +1,5 @@
 import { GLSLType, Input, isUnit } from "./units"
 
-export type Vector2 =
-  | { x: Input<"float">; y: Input<"float"> }
-  | [Input<"float">, Input<"float">]
-
-export type Vector3 =
-  | { x: Input<"float">; y: Input<"float">; z: Input<"float"> }
-  | [Input<"float">, Input<"float">, Input<"float">]
-
 export type Vector4 = {
   x: Input<"float">
   y: Input<"float">
@@ -15,6 +7,16 @@ export type Vector4 = {
   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 = [
@@ -61,14 +63,14 @@ export type GLSLTypeFor<JSType> = JSType extends number
   ? "bool"
   : JSType extends { isTexture: any }
   ? "sampler2D"
-  : JSType extends Vector2
-  ? "vec2"
-  : JSType extends Vector3
-  ? "vec3"
   : JSType extends Vector4
   ? "vec4"
+  : JSType extends Vector3
+  ? "vec3"
   : JSType extends Color
   ? "vec3"
+  : JSType extends Vector2
+  ? "vec2"
   : JSType extends Matrix2
   ? "mat2"
   : JSType extends Matrix3
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<typeof ParticleAttribute>
 let nextAttributeId = 1
 
 export const ParticleAttribute = <
-  J extends number | Vector2 | Vector3 | Color | Vector4,
+  J extends Vector4 | Vector3 | Vector2 | Vector3 | Color | number,
   T extends GLSLTypeFor<J>
 >(
   initialValue: J

From 076b0e1ff2218cac3f7b5e1f74cf5d0e9192dcfd Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 14:58:50 +0100
Subject: [PATCH 27/55] More fixes

---
 .../vite.config.ts.timestamp-1669730134853.mjs     | 14 ++++++++++++++
 .../src/examples/SharedResourceExample.tsx         |  4 ++--
 .../src/examples/effects/Aura.tsx                  |  4 ++--
 .../src/examples/units/NoiseMask.tsx               |  3 +--
 4 files changed, 19 insertions(+), 6 deletions(-)
 create mode 100644 apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs

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..dee17223d
--- /dev/null
+++ b/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs
@@ -0,0 +1,14 @@
+// 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/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index de39dc730..74231e33b 100644
--- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
@@ -68,7 +68,7 @@ const BlobMaterial = () => {
       metalness={0.5}
       roughness={0.6}
     >
-      <modules.Translate offset={$vec3(1, 0, 0)} />
+      <modules.Translate offset={[1, 0, 0]} />
       <modules.Scale
         scale={pipe(
           $float(InstanceID),
@@ -87,7 +87,7 @@ const BlobDepthMaterial = () => {
 
   return (
     <composable.meshDepthMaterial depthPacking={RGBADepthPacking}>
-      <modules.Translate offset={$vec3(1, 0, 0)} />
+      <modules.Translate offset={[1, 0, 0]} />
       <modules.Scale
         scale={pipe(
           $float(InstanceID),
diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index 7eba85db0..fc2abf829 100644
--- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
+++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
@@ -34,8 +34,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..fb7a581a1 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,
@@ -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(

From 863503f2c5635524a3a4a94e82a41dbe69139028 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:02:33 +0100
Subject: [PATCH 28/55] Fixes

---
 packages/material-composer/src/units/experiments.ts   |  2 +-
 .../shader-composer-toybox/src/noise/PSRDNoise.ts     | 11 +++++------
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/material-composer/src/units/experiments.ts b/packages/material-composer/src/units/experiments.ts
index 89c258efe..6d095e77d 100644
--- a/packages/material-composer/src/units/experiments.ts
+++ b/packages/material-composer/src/units/experiments.ts
@@ -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/shader-composer-toybox/src/noise/PSRDNoise.ts b/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
index b6049e374..cada5c8f9 100644
--- a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
+++ b/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
@@ -11,15 +11,14 @@ Original license notices are included with the functions.
 
 import {
   $,
+  $vec2,
+  $vec3,
   Float,
   glsl,
   Input,
   Snippet,
-  Time,
   Vec2,
-  $vec2,
-  Vec3,
-  $vec3
+  Vec3
 } from "shader-composer"
 
 export const psrdnoise2 = Snippet(
@@ -183,7 +182,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 +497,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], {

From f22e053aa7a457bf595eed2886c666796d1a8810 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:04:43 +0100
Subject: [PATCH 29/55] Clean up examples

---
 .../src/examples/Textures.tsx                        |  5 ++---
 .../src/examples/SharedResourceExample.tsx           | 10 +---------
 .../src/examples/effects/Aura.tsx                    |  1 -
 packages/material-composer/src/units/experiments.ts  |  2 +-
 .../shader-composer-toybox/src/noise/PSRDNoise.ts    | 12 +-----------
 5 files changed, 5 insertions(+), 25 deletions(-)

diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index c192d912a..763a41d6a 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-three"
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
 
@@ -18,7 +17,7 @@ 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)
diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index 74231e33b..4218db0e1 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,
diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index fc2abf829..796fe719f 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,
diff --git a/packages/material-composer/src/units/experiments.ts b/packages/material-composer/src/units/experiments.ts
index 6d095e77d..d21defc9e 100644
--- a/packages/material-composer/src/units/experiments.ts
+++ b/packages/material-composer/src/units/experiments.ts
@@ -1,5 +1,5 @@
 import { pipe } from "fp-ts/function"
-import { Add, Clamp01, Input, Mul, Pow, $vec3 } from "shader-composer"
+import { Add, Clamp01, Input, Mul, Pow } from "shader-composer"
 import { Turbulence3D } from "shader-composer-toybox"
 
 export type HeatOptions = {
diff --git a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts b/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
index cada5c8f9..bbc695aee 100644
--- a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
+++ b/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
@@ -9,17 +9,7 @@ Original license notices are included with the functions.
 
 */
 
-import {
-  $,
-  $vec2,
-  $vec3,
-  Float,
-  glsl,
-  Input,
-  Snippet,
-  Vec2,
-  Vec3
-} from "shader-composer"
+import { $, Float, glsl, Input, Snippet, Vec2, Vec3 } from "shader-composer"
 
 export const psrdnoise2 = Snippet(
   (psrdnoise2) => glsl`

From 93113e69f6905a3ad8aed2b6cc929038b69b5e2d Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:18:10 +0100
Subject: [PATCH 30/55] $vec3 -> vec3 etc.

---
 .changeset/curvy-llamas-pump.md               |  2 +-
 .../src/examples/SharedResourceExample.tsx    |  6 ++--
 .../shader-composer/src/stdlib/rotation.ts    |  4 +--
 .../shader-composer/src/stdlib/values.test.ts | 32 +++++++++----------
 packages/shader-composer/src/stdlib/values.ts | 30 ++++++++---------
 5 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/.changeset/curvy-llamas-pump.md b/.changeset/curvy-llamas-pump.md
index 36ef87443..c6c3ceb8f 100644
--- a/.changeset/curvy-llamas-pump.md
+++ b/.changeset/curvy-llamas-pump.md
@@ -2,4 +2,4 @@
 "shader-composer": minor
 ---
 
-Siganture of $foo() changed, now just 1 argument, needs array, eg. `$vec2([1, 2])`
+Siganture of $foo() changed, now just 1 argument, needs array, eg. `vec2([1, 2])`
diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index 4218db0e1..23efa435e 100644
--- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
@@ -2,7 +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 { $float, Add, GlobalTime, InstanceID, Mul, Sin } from "shader-composer"
+import { float, Add, GlobalTime, InstanceID, Mul, Sin } from "shader-composer"
 import { RGBADepthPacking, Vector3 } from "three"
 import {
   Emitter,
@@ -63,7 +63,7 @@ const BlobMaterial = () => {
       <modules.Translate offset={[1, 0, 0]} />
       <modules.Scale
         scale={pipe(
-          $float(InstanceID),
+          float(InstanceID),
           (v) => Add(time, v),
           (v) => Sin(v),
           (v) => Mul(v, 0.2),
@@ -82,7 +82,7 @@ const BlobDepthMaterial = () => {
       <modules.Translate offset={[1, 0, 0]} />
       <modules.Scale
         scale={pipe(
-          $float(InstanceID),
+          float(InstanceID),
           (v) => Add(time, v),
           (v) => Sin(v),
           (v) => Mul(v, 0.2),
diff --git a/packages/shader-composer/src/stdlib/rotation.ts b/packages/shader-composer/src/stdlib/rotation.ts
index f42fa0900..e0fec35b3 100644
--- a/packages/shader-composer/src/stdlib/rotation.ts
+++ b/packages/shader-composer/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/values.test.ts b/packages/shader-composer/src/stdlib/values.test.ts
index 45f452443..43751a966 100644
--- a/packages/shader-composer/src/stdlib/values.test.ts
+++ b/packages/shader-composer/src/stdlib/values.test.ts
@@ -1,10 +1,10 @@
 import { glslRepresentation } from "../glslRepresentation"
-import { $float, $mat2, $swizzle, $vec3, $vec4, Int, Vec3 } from "./values"
+import { float, mat2, swizzle, vec3, vec4, Int, Vec3 } from "./values"
 
-describe("$float", () => {
+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)})`
@@ -12,45 +12,45 @@ describe("$float", () => {
   })
 })
 
-describe("$vec3", () => {
+describe("vec3", () => {
   it("returns an expression that casts the given value to a vec3", () => {
-    const cast = $vec3({ r: 1, g: 0, b: 0 })
+    const cast = vec3({ r: 1, g: 0, b: 0 })
     expect(glslRepresentation(cast)).toEqual(`vec3(vec3(1.0, 0.0, 0.0))`)
   })
 
   it("casts a Vector3 to a vec3", () => {
-    const cast = $vec3({ x: 1, y: 0, z: 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])
+    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([{ x: 1, y: 2 }, 3])
+    const cast = vec3([{ x: 1, y: 2 }, 3])
     expect(glslRepresentation(cast)).toEqual(`vec3(vec2(vec2(1.0, 2.0), 3.0))`)
   })
 })
 
-describe("$vec4", () => {
+describe("vec4", () => {
   it("casts multiple components to a vec4", () => {
-    const cast = $vec4([{ x: 1, y: 2 }, [3, 4]])
+    const cast = vec4([{ x: 1, y: 2 }, [3, 4]])
     expect(glslRepresentation(cast)).toEqual(
       `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])
+    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([{ x: 1, y: 2 }, [3, 4]])
+    const cast = mat2([{ x: 1, y: 2 }, [3, 4]])
     expect(glslRepresentation(cast)).toEqual(
       `mat2(vec2(vec2(1.0, 2.0), vec2(3.0, 4.0)))`
     )
@@ -97,15 +97,15 @@ describe("Vec3", () => {
   })
 })
 
-describe("$swizzle", () => {
+describe("swizzle", () => {
   it("swizzles a value", () => {
-    const swizzled = $swizzle({ x: 1, y: 2, z: 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({ x: 1, y: 2, z: 3 })
-    const swizzled = $swizzle(v, "xyy")
+    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/src/stdlib/values.ts
index 88f25d603..7dd8890d2 100644
--- a/packages/shader-composer/src/stdlib/values.ts
+++ b/packages/shader-composer/src/stdlib/values.ts
@@ -18,37 +18,37 @@ export type CastFunction = (...values: CastableInput[]) => Expression
 /**
  * Returns an expression that casts the given values to a `float`.
  */
-export const $float = (value: CastableInput) => $`float(${value})`
+export const float = (value: CastableInput) => $`float(${value})`
 
 /**
  * Returns an expression that casts the given values to a `vec2`.
  */
-export const $vec2 = (value: CastableInput) => $`vec2(${value})`
+export const vec2 = (value: CastableInput) => $`vec2(${value})`
 
 /**
  * Returns an expression that casts the given values to a `vec3`.
  */
-export const $vec3 = (value: CastableInput) => $`vec3(${value})`
+export const vec3 = (value: CastableInput) => $`vec3(${value})`
 
 /**
  * Returns an expression that casts the given values to a `vec4`.
  */
-export const $vec4 = (value: CastableInput) => $`vec4(${value})`
+export const vec4 = (value: CastableInput) => $`vec4(${value})`
 
 /**
  * Returns an expression that casts the given values to a `mat2`.
  */
-export const $mat2 = (value: CastableInput) => $`mat2(${value})`
+export const mat2 = (value: CastableInput) => $`mat2(${value})`
 
 /**
  * Returns an expression that casts the given values to a `mat3`.
  */
-export const $mat3 = (value: CastableInput) => $`mat3(${value})`
+export const mat3 = (value: CastableInput) => $`mat3(${value})`
 
 /**
  * Returns an expression that casts the given values to a `mat4`.
  */
-export const $mat4 = (value: CastableInput) => $`mat4(${value})`
+export const mat4 = (value: CastableInput) => $`mat4(${value})`
 
 /**
  * Returns an expression that swizzles the given value with the provided
@@ -58,7 +58,7 @@ export const $mat4 = (value: CastableInput) => $`mat4(${value})`
  * @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<any>, swizzle: string) => $`${v}.${swizzle}`
+export const swizzle = (v: Input<any>, swizzle: string) => $`${v}.${swizzle}`
 
 export const unit = <T extends GLSLType>(
   i: Input<T>,
@@ -87,15 +87,15 @@ const makeCastableUnitFactory =
   (v: CastableInput, extras?: Partial<UnitConfig<T>>) =>
     Unit(type, castFunction(v), extras) as Unit<T>
 
-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<UnitConfig<"bool">>) =>
   Bool(true, extras)

From fa83ca6440ad6a314a268c71cad7b64654c279ff Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:23:43 +0100
Subject: [PATCH 31/55] Remove the last three reference

---
 packages/shader-composer/src/stdlib/variables.ts | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/packages/shader-composer/src/stdlib/variables.ts b/packages/shader-composer/src/stdlib/variables.ts
index 418a5f012..a7df6f416 100644
--- a/packages/shader-composer/src/stdlib/variables.ts
+++ b/packages/shader-composer/src/stdlib/variables.ts
@@ -1,4 +1,3 @@
-import { Vector2 } from "three"
 import { $, Expression } from "../expressions"
 import { GLSLType, injectAPI, JSTypes, Unit, UnitConfig } from "../units"
 import { $localToViewSpace, $localToWorldSpace } from "./spaces"
@@ -182,13 +181,17 @@ 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: () => {
-    "Please customize the Resolution unit with the relevant code for your environment."
+    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",

From 4071059fb973b55ebdead790eef5bc33e3f22ebf Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:24:25 +0100
Subject: [PATCH 32/55] Move three into peerdeps

---
 packages/shader-composer/package.json | 6 ++----
 pnpm-lock.yaml                        | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index 0728e31af..67ae46192 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -44,13 +44,11 @@
       ]
     ]
   },
-  "peerDependencies": {
-    "three": ">=0.141.0"
-  },
   "dependencies": {
     "fp-ts": "^2.12.3"
   },
   "devDependencies": {
-    "gl-matrix": "^3.4.3"
+    "gl-matrix": "^3.4.3",
+    "three": ">=0.141.0"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e50c9a640..3e102554e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -580,10 +580,12 @@ importers:
     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-postprocessing:
     specifiers:
@@ -8616,7 +8618,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==}

From 821349b6df3861443b9f5732cb370f9adaf939aa Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:36:43 +0100
Subject: [PATCH 33/55] Use shader-composer-three in vfx-composer-examples

---
 apps/vfx-composer-examples/package.json                  | 2 +-
 apps/vfx-composer-examples/src/examples/Asteroid.tsx     | 2 +-
 .../src/examples/FireflyExample.tsx                      | 2 +-
 apps/vfx-composer-examples/src/examples/FogExample.tsx   | 2 +-
 .../src/examples/MagicWellExample.tsx                    | 2 +-
 apps/vfx-composer-examples/src/examples/Playground.tsx   | 2 +-
 .../src/examples/SharedResourceExample.tsx               | 9 ++++++++-
 apps/vfx-composer-examples/src/examples/Simple.tsx       | 2 +-
 apps/vfx-composer-examples/src/examples/Stress.tsx       | 2 +-
 apps/vfx-composer-examples/src/examples/Vanilla.tsx      | 2 +-
 apps/vfx-composer-examples/src/examples/effects/Aura.tsx | 2 +-
 apps/vfx-composer-examples/src/examples/modules/Lava.ts  | 2 +-
 .../src/examples/units/NoiseMask.tsx                     | 2 +-
 pnpm-lock.yaml                                           | 4 ++--
 14 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/apps/vfx-composer-examples/package.json b/apps/vfx-composer-examples/package.json
index a2575c31a..cbf9a7f57 100644
--- a/apps/vfx-composer-examples/package.json
+++ b/apps/vfx-composer-examples/package.json
@@ -24,8 +24,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.0.1",
-    "shader-composer": "0.4.9",
     "shader-composer-r3f": "0.4.5",
+    "shader-composer-three": "0.4.9",
     "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..00e3dbb38 100644
--- a/apps/vfx-composer-examples/src/examples/Asteroid.tsx
+++ b/apps/vfx-composer-examples/src/examples/Asteroid.tsx
@@ -21,7 +21,7 @@ import {
   UV,
   Vec2,
   Vec3
-} from "shader-composer"
+} from "shader-composer-three"
 import { PSRDNoise2D } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
index 86fcfd3f6..10ca8c5cf 100644
--- a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
@@ -3,7 +3,7 @@ import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { chance, upTo } from "randomish"
 import { useRef } from "react"
-import { OneMinus } from "shader-composer"
+import { OneMinus } from "shader-composer-three"
 import { Color, Mesh, NormalBlending, Vector3 } 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..430110c08 100644
--- a/apps/vfx-composer-examples/src/examples/FogExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx
@@ -3,7 +3,7 @@ import { useTexture } from "@react-three/drei"
 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 { Mul, Rotation3DZ, Time } from "shader-composer-three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { Vector3 } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
index 53476dfc6..30ed13c68 100644
--- a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
@@ -2,7 +2,7 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "shader-composer"
+import { OneMinus } from "shader-composer-three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { AdditiveBlending, Color, DoubleSide, Euler, Vector3 } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/Playground.tsx b/apps/vfx-composer-examples/src/examples/Playground.tsx
index 7822c362c..c58e9a873 100644
--- a/apps/vfx-composer-examples/src/examples/Playground.tsx
+++ b/apps/vfx-composer-examples/src/examples/Playground.tsx
@@ -1,5 +1,5 @@
 import { composable, modules } from "material-composer-r3f"
-import { Mul, Time } from "shader-composer"
+import { Mul, Time } from "shader-composer-three"
 import { Color } from "three"
 
 export default function Playground() {
diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index 23efa435e..e6f784675 100644
--- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
@@ -2,7 +2,14 @@ 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 { float, Add, GlobalTime, InstanceID, Mul, Sin } from "shader-composer"
+import {
+  float,
+  Add,
+  GlobalTime,
+  InstanceID,
+  Mul,
+  Sin
+} from "shader-composer-three"
 import { RGBADepthPacking, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Simple.tsx b/apps/vfx-composer-examples/src/examples/Simple.tsx
index af8f666f8..1ff1e21c3 100644
--- a/apps/vfx-composer-examples/src/examples/Simple.tsx
+++ b/apps/vfx-composer-examples/src/examples/Simple.tsx
@@ -2,7 +2,7 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "shader-composer"
+import { OneMinus } from "shader-composer-three"
 import { AdditiveBlending, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Stress.tsx b/apps/vfx-composer-examples/src/examples/Stress.tsx
index 00928bf03..bf686b768 100644
--- a/apps/vfx-composer-examples/src/examples/Stress.tsx
+++ b/apps/vfx-composer-examples/src/examples/Stress.tsx
@@ -1,6 +1,6 @@
 import { composable, modules } from "material-composer-r3f"
 import { between, plusMinus, upTo } from "randomish"
-import { OneMinus } from "shader-composer"
+import { OneMinus } from "shader-composer-three"
 import { Color, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Vanilla.tsx b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
index cfbaf3fe0..355e48b8c 100644
--- a/apps/vfx-composer-examples/src/examples/Vanilla.tsx
+++ b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
@@ -4,7 +4,7 @@ import * as Modules from "material-composer/modules"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus, upTo } from "randomish"
 import { useEffect, useRef } from "react"
-import { compileShader, OneMinus } from "shader-composer"
+import { compileShader, OneMinus } from "shader-composer-three"
 import {
   BoxGeometry,
   Color,
diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index 796fe719f..8a40c15b8 100644
--- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
+++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
@@ -12,7 +12,7 @@ import {
   Texture2D,
   Unit,
   UV
-} from "shader-composer"
+} from "shader-composer-three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { DoubleSide, RepeatWrapping } from "three"
 import streamTextureUrl from "../textures/stream.png"
diff --git a/apps/vfx-composer-examples/src/examples/modules/Lava.ts b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
index 1ed5d3e87..b20ee5f3a 100644
--- a/apps/vfx-composer-examples/src/examples/modules/Lava.ts
+++ b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
@@ -1,7 +1,7 @@
 import { ModuleFactory } from "material-composer"
 import { moduleComponent } from "material-composer-r3f"
 import { Heat, HeatOptions } from "material-composer/units"
-import { Gradient } from "shader-composer"
+import { Gradient } from "shader-composer-three"
 import { Color } from "three"
 
 export type LavaProps = HeatOptions
diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
index fb7a581a1..e6324bee5 100644
--- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
+++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
@@ -13,7 +13,7 @@ import {
   Smoothstep,
   Sub,
   UV
-} from "shader-composer"
+} from "shader-composer-three"
 import { PSRDNoise2D } from "shader-composer-toybox"
 
 /* TODO: extract this into SC or SC-toybox or similar? */
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3e102554e..067e3c34e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -401,8 +401,8 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       react-merge-refs: ^2.0.1
-      shader-composer: 0.4.9
       shader-composer-r3f: 0.4.5
+      shader-composer-three: 0.4.9
       shader-composer-toybox: ^0.1.3
       statery: 0.6.2
       three: ^0.145.0
@@ -430,8 +430,8 @@ importers:
       react: 18.2.0
       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-three: link:../../packages/shader-composer-three
       shader-composer-toybox: link:../../packages/shader-composer-toybox
       statery: 0.6.2_react@18.2.0
       three: 0.145.0

From b9fd98ddea0e3c7e905b4b09bedee2dab78e29ba Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 15:55:21 +0100
Subject: [PATCH 34/55] Mark sc-three package as sideEffectful

---
 packages/shader-composer-three/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shader-composer-three/package.json b/packages/shader-composer-three/package.json
index 2974eb1a1..2bf42484b 100644
--- a/packages/shader-composer-three/package.json
+++ b/packages/shader-composer-three/package.json
@@ -15,7 +15,7 @@
     "README.md"
   ],
   "license": "MIT",
-  "sideEffects": false,
+  "sideEffects": true,
   "scripts": {
     "build": "preconstruct build"
   },

From 8ce4e6af6f27198134a1ebda32699dd8c735fc91 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 16:01:42 +0100
Subject: [PATCH 35/55] Remove three dependency from toybox

---
 .changeset/stale-moles-float.md                      |  5 +++++
 packages/shader-composer-toybox/package.json         |  3 ---
 .../shader-composer-toybox/src/noise/GerstnerWave.ts | 12 +++++++-----
 3 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/stale-moles-float.md

diff --git a/.changeset/stale-moles-float.md b/.changeset/stale-moles-float.md
new file mode 100644
index 000000000..3ffb668c2
--- /dev/null
+++ b/.changeset/stale-moles-float.md
@@ -0,0 +1,5 @@
+---
+"shader-composer-toybox": patch
+---
+
+This package no longer requires `three` as a peer dependency.
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/noise/GerstnerWave.ts b/packages/shader-composer-toybox/src/noise/GerstnerWave.ts
index 07e4c38fd..cb18849d7 100644
--- a/packages/shader-composer-toybox/src/noise/GerstnerWave.ts
+++ b/packages/shader-composer-toybox/src/noise/GerstnerWave.ts
@@ -1,5 +1,4 @@
 import { $, Input, Snippet, Vec3 } from "shader-composer"
-import { Vector2 } from "three"
 
 /*
 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"
+    }
+  )

From 913a41389dbe8452eaf87aef2393449ed8e45d60 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 16:49:38 +0100
Subject: [PATCH 36/55] shader-composer as peerdep

---
 packages/shader-composer-three/package.json | 7 ++++---
 packages/shader-composer-three/src/index.ts | 3 ---
 pnpm-lock.yaml                              | 4 ++--
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/shader-composer-three/package.json b/packages/shader-composer-three/package.json
index 2bf42484b..4d567cee7 100644
--- a/packages/shader-composer-three/package.json
+++ b/packages/shader-composer-three/package.json
@@ -32,10 +32,11 @@
       ]
     ]
   },
-  "dependencies": {
-    "shader-composer": "workspace:^0.4.3"
-  },
   "peerDependencies": {
+    "shader-composer": "workspace:^0.4.9",
     "three": ">=0.141.0"
+  },
+  "devDependencies": {
+    "shader-composer": "workspace:^0.4.9"
   }
 }
diff --git a/packages/shader-composer-three/src/index.ts b/packages/shader-composer-three/src/index.ts
index c67baa251..87305cda2 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -1,6 +1,3 @@
-/* Re-export everything from Shader Composer */
-export * from "shader-composer"
-
 /* Patch units with Three.js specific code */
 import * as SC from "shader-composer"
 import * as THREE from "three"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 067e3c34e..267b8b85e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -605,8 +605,8 @@ importers:
 
   packages/shader-composer-three:
     specifiers:
-      shader-composer: workspace:^0.4.3
-    dependencies:
+      shader-composer: workspace:^0.4.9
+    devDependencies:
       shader-composer: link:../shader-composer
 
   packages/shader-composer-toybox:

From 58bfe6964903261b32e477b4d355d1837be79c97 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 16:58:27 +0100
Subject: [PATCH 37/55] Rename to @shader-composer/three

---
 .changeset/config.json                      | 2 +-
 packages/shader-composer-three/package.json | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/config.json b/.changeset/config.json
index b0fd8c617..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-*"],
+    ["shader-composer", "shader-composer-*", "@shader-composer/*"],
     ["material-composer", "material-composer-r3f"]
   ],
   "access": "public",
diff --git a/packages/shader-composer-three/package.json b/packages/shader-composer-three/package.json
index 4d567cee7..903c8b008 100644
--- a/packages/shader-composer-three/package.json
+++ b/packages/shader-composer-three/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "shader-composer-three",
+  "name": "@shader-composer/three",
   "author": {
     "name": "Hendrik Mans",
     "email": "hendrik@mans.de",

From cec3909a2b7bf9f5cbcf1889ab574e91e477da80 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:09:14 +0100
Subject: [PATCH 38/55] @shader-composer/three and @shader-composer/core

---
 apps/shader-composer-examples/package.json    |  2 +-
 .../src/examples/Billboarding.tsx             |  2 +-
 .../src/examples/DiscoCube.tsx                |  2 +-
 .../src/examples/Dissolve.tsx                 |  2 +-
 .../src/examples/Fireball.tsx                 |  2 +-
 .../src/examples/Flag.tsx                     |  2 +-
 .../src/examples/FloatingIsland.tsx           |  2 +-
 .../src/examples/ForceField.tsx               |  2 +-
 .../src/examples/HelloWorld.tsx               |  2 +-
 .../src/examples/Planet.tsx                   |  2 +-
 .../src/examples/Rotation.tsx                 |  2 +-
 .../src/examples/StylizedWater.tsx            |  2 +-
 .../src/examples/Textures.tsx                 |  2 +-
 .../src/examples/Water.tsx                    |  2 +-
 apps/vfx-composer-examples/package.json       |  2 +-
 .../src/examples/Asteroid.tsx                 |  2 +-
 .../src/examples/FireflyExample.tsx           |  2 +-
 .../src/examples/FogExample.tsx               |  2 +-
 .../src/examples/MagicWellExample.tsx         |  2 +-
 .../src/examples/Playground.tsx               |  2 +-
 .../src/examples/SharedResourceExample.tsx    |  2 +-
 .../src/examples/Simple.tsx                   |  2 +-
 .../src/examples/Stress.tsx                   |  2 +-
 .../src/examples/Vanilla.tsx                  |  2 +-
 .../src/examples/effects/Aura.tsx             |  2 +-
 .../src/examples/modules/Lava.ts              |  2 +-
 .../src/examples/units/NoiseMask.tsx          |  2 +-
 packages/shader-composer-core/LICENSE.md      | 20 +++++++++++
 packages/shader-composer-core/README.md       | 30 ++++++++++++++++
 packages/shader-composer-core/package.json    | 35 +++++++++++++++++++
 .../src/__snapshots__/compiler.test.ts.snap   |  0
 .../src/__snapshots__/units.test.ts.snap      |  0
 .../src/compiler.test.ts                      |  0
 .../src/compiler.ts                           |  0
 .../src/debug.ts                              |  0
 .../src/expressions.test.ts                   |  0
 .../src/expressions.ts                        |  0
 .../src/glslRepresentation.test.ts            |  0
 .../src/glslRepresentation.ts                 |  0
 .../src/glslType.ts                           |  0
 packages/shader-composer-core/src/index.ts    |  8 +++++
 .../src/snippets.ts                           |  0
 .../src/stdlib/artistic.ts                    |  0
 .../src/stdlib/index.ts                       |  0
 .../src/stdlib/logic.ts                       |  0
 .../src/stdlib/masters.ts                     |  0
 .../src/stdlib/math.ts                        |  0
 .../src/stdlib/rotation.ts                    |  0
 .../src/stdlib/scene.ts                       |  0
 .../src/stdlib/spaces.ts                      |  0
 .../src/stdlib/textures.ts                    |  0
 .../src/stdlib/values.test.ts                 |  0
 .../src/stdlib/values.ts                      |  0
 .../src/stdlib/variables.test.ts              |  0
 .../src/stdlib/variables.ts                   |  0
 .../src/stdlib/vectors.ts                     |  0
 .../src/tree.test.ts                          |  0
 .../src/tree.ts                               |  0
 .../src/units.test.ts                         |  0
 .../src/units.ts                              |  0
 .../src/util/concatenator3000.ts              |  0
 .../src/util/idGenerator.ts                   |  0
 .../src/vendor/glsl-rotate.ts                 |  0
 .../src/vendor/index.ts                       |  0
 packages/shader-composer-core/tsconfig.json   |  8 +++++
 .../package.json                              |  4 +--
 .../src/PostProcessingEffectMaster.ts         |  2 +-
 .../src/ShaderComposerEffect.ts               |  2 +-
 .../src/units.ts                              |  2 +-
 packages/shader-composer-r3f/package.json     |  2 +-
 packages/shader-composer-r3f/src/hooks.ts     |  2 +-
 packages/shader-composer/package.json         | 11 +++---
 packages/shader-composer/src/fun.ts           |  4 +--
 packages/shader-composer/src/index.ts         |  9 +----
 packages/shader-composer/src/three.ts         |  1 +
 packages/shader-composer/three/package.json   |  4 +++
 pnpm-lock.yaml                                | 24 ++++++++-----
 77 files changed, 164 insertions(+), 58 deletions(-)
 create mode 100644 packages/shader-composer-core/LICENSE.md
 create mode 100644 packages/shader-composer-core/README.md
 create mode 100644 packages/shader-composer-core/package.json
 rename packages/{shader-composer => shader-composer-core}/src/__snapshots__/compiler.test.ts.snap (100%)
 rename packages/{shader-composer => shader-composer-core}/src/__snapshots__/units.test.ts.snap (100%)
 rename packages/{shader-composer => shader-composer-core}/src/compiler.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/compiler.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/debug.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/expressions.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/expressions.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/glslRepresentation.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/glslRepresentation.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/glslType.ts (100%)
 create mode 100644 packages/shader-composer-core/src/index.ts
 rename packages/{shader-composer => shader-composer-core}/src/snippets.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/artistic.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/index.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/logic.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/masters.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/math.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/rotation.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/scene.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/spaces.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/textures.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/values.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/values.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/variables.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/variables.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/stdlib/vectors.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/tree.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/tree.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/units.test.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/units.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/util/concatenator3000.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/util/idGenerator.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/vendor/glsl-rotate.ts (100%)
 rename packages/{shader-composer => shader-composer-core}/src/vendor/index.ts (100%)
 create mode 100644 packages/shader-composer-core/tsconfig.json
 create mode 100644 packages/shader-composer/src/three.ts
 create mode 100644 packages/shader-composer/three/package.json

diff --git a/apps/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json
index 654fa9e6c..dbd35767b 100644
--- a/apps/shader-composer-examples/package.json
+++ b/apps/shader-composer-examples/package.json
@@ -17,7 +17,7 @@
     "r3f-stage": "^0.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "shader-composer-three": "workspace:^0.4.9",
+    "@shader-composer/three": "workspace:^0.4.9",
     "shader-composer-r3f": "^0.4.5",
     "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 00ce4de98..9f8f19e97 100644
--- a/apps/shader-composer-examples/src/examples/Billboarding.tsx
+++ b/apps/shader-composer-examples/src/examples/Billboarding.tsx
@@ -1,5 +1,5 @@
 import { Description, FlatStage } from "r3f-stage"
-import { ShaderMaterialMaster, VertexPosition } from "shader-composer-three"
+import { ShaderMaterialMaster, VertexPosition } from "@shader-composer/three"
 import { useShader } from "shader-composer-r3f"
 import { Billboard } from "shader-composer-toybox"
 import { Color } from "three"
diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index 5d6f50201..2751df1c3 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -13,7 +13,7 @@ import {
   OneMinus,
   Sub,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx
index 2cfafc885..e5a2b2b61 100644
--- a/apps/shader-composer-examples/src/examples/Dissolve.tsx
+++ b/apps/shader-composer-examples/src/examples/Dissolve.tsx
@@ -1,6 +1,6 @@
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
-import { Mix } from "shader-composer-three"
+import { Mix } from "@shader-composer/three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx
index 78717e91c..c6eb28d34 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -12,7 +12,7 @@ import {
   Vec3,
   VertexNormal,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx
index 44f1b46e5..6866d3dcf 100644
--- a/apps/shader-composer-examples/src/examples/Flag.tsx
+++ b/apps/shader-composer-examples/src/examples/Flag.tsx
@@ -7,7 +7,7 @@ import {
   UV,
   Vec3,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 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 79d915266..b708607c2 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -20,7 +20,7 @@ import {
   varying,
   Vec2,
   Vec3
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx
index ba496b871..2bdee33d9 100644
--- a/apps/shader-composer-examples/src/examples/ForceField.tsx
+++ b/apps/shader-composer-examples/src/examples/ForceField.tsx
@@ -19,7 +19,7 @@ import {
   UV,
   Vec2,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/HelloWorld.tsx b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
index d1b59b463..2d4ee765d 100644
--- a/apps/shader-composer-examples/src/examples/HelloWorld.tsx
+++ b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
@@ -10,7 +10,7 @@ import {
   ShaderMaterialMaster,
   Sin,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx
index c9e0f9395..50561fd45 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -14,7 +14,7 @@ import {
   Time,
   Vec3,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx
index 348c33787..4c8a7c356 100644
--- a/apps/shader-composer-examples/src/examples/Rotation.tsx
+++ b/apps/shader-composer-examples/src/examples/Rotation.tsx
@@ -4,7 +4,7 @@ import {
   Time,
   VertexNormal,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Vector3 } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
index 7a95f5a4a..81aa45353 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -22,7 +22,7 @@ import {
   Vec2,
   VertexNormal,
   VertexPosition
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index 763a41d6a..8225aec17 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -9,7 +9,7 @@ import {
   Time,
   UniformUnit,
   UV
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
 
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index 5dd63bf3d..5dfee366f 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -8,7 +8,7 @@ import {
   Mul,
   Remap,
   Vec2
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
diff --git a/apps/vfx-composer-examples/package.json b/apps/vfx-composer-examples/package.json
index cbf9a7f57..d1415eb12 100644
--- a/apps/vfx-composer-examples/package.json
+++ b/apps/vfx-composer-examples/package.json
@@ -25,7 +25,7 @@
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.0.1",
     "shader-composer-r3f": "0.4.5",
-    "shader-composer-three": "0.4.9",
+    "@shader-composer/three": "0.4.9",
     "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 00e3dbb38..53e71d8f3 100644
--- a/apps/vfx-composer-examples/src/examples/Asteroid.tsx
+++ b/apps/vfx-composer-examples/src/examples/Asteroid.tsx
@@ -21,7 +21,7 @@ import {
   UV,
   Vec2,
   Vec3
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { PSRDNoise2D } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
index 10ca8c5cf..90d8a78e9 100644
--- a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
@@ -3,7 +3,7 @@ import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { chance, upTo } from "randomish"
 import { useRef } from "react"
-import { OneMinus } from "shader-composer-three"
+import { OneMinus } from "@shader-composer/three"
 import { Color, Mesh, NormalBlending, Vector3 } 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 430110c08..2d01eec14 100644
--- a/apps/vfx-composer-examples/src/examples/FogExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx
@@ -3,7 +3,7 @@ import { useTexture } from "@react-three/drei"
 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-three"
+import { Mul, Rotation3DZ, Time } from "@shader-composer/three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { Vector3 } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
index 30ed13c68..8a70d0dbf 100644
--- a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
@@ -2,7 +2,7 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "shader-composer-three"
+import { OneMinus } from "@shader-composer/three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { AdditiveBlending, Color, DoubleSide, Euler, Vector3 } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/Playground.tsx b/apps/vfx-composer-examples/src/examples/Playground.tsx
index c58e9a873..343ec9bab 100644
--- a/apps/vfx-composer-examples/src/examples/Playground.tsx
+++ b/apps/vfx-composer-examples/src/examples/Playground.tsx
@@ -1,5 +1,5 @@
 import { composable, modules } from "material-composer-r3f"
-import { Mul, Time } from "shader-composer-three"
+import { Mul, Time } from "@shader-composer/three"
 import { Color } from "three"
 
 export default function Playground() {
diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index e6f784675..ec2eb7cd2 100644
--- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
@@ -9,7 +9,7 @@ import {
   InstanceID,
   Mul,
   Sin
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { RGBADepthPacking, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Simple.tsx b/apps/vfx-composer-examples/src/examples/Simple.tsx
index 1ff1e21c3..546afb517 100644
--- a/apps/vfx-composer-examples/src/examples/Simple.tsx
+++ b/apps/vfx-composer-examples/src/examples/Simple.tsx
@@ -2,7 +2,7 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "shader-composer-three"
+import { OneMinus } from "@shader-composer/three"
 import { AdditiveBlending, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Stress.tsx b/apps/vfx-composer-examples/src/examples/Stress.tsx
index bf686b768..73a9c64b0 100644
--- a/apps/vfx-composer-examples/src/examples/Stress.tsx
+++ b/apps/vfx-composer-examples/src/examples/Stress.tsx
@@ -1,6 +1,6 @@
 import { composable, modules } from "material-composer-r3f"
 import { between, plusMinus, upTo } from "randomish"
-import { OneMinus } from "shader-composer-three"
+import { OneMinus } from "@shader-composer/three"
 import { Color, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Vanilla.tsx b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
index 355e48b8c..57cd96e01 100644
--- a/apps/vfx-composer-examples/src/examples/Vanilla.tsx
+++ b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
@@ -4,7 +4,7 @@ import * as Modules from "material-composer/modules"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus, upTo } from "randomish"
 import { useEffect, useRef } from "react"
-import { compileShader, OneMinus } from "shader-composer-three"
+import { compileShader, OneMinus } from "@shader-composer/three"
 import {
   BoxGeometry,
   Color,
diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index 8a40c15b8..e301b0f19 100644
--- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
+++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
@@ -12,7 +12,7 @@ import {
   Texture2D,
   Unit,
   UV
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { useUniformUnit } from "shader-composer-r3f"
 import { DoubleSide, RepeatWrapping } from "three"
 import streamTextureUrl from "../textures/stream.png"
diff --git a/apps/vfx-composer-examples/src/examples/modules/Lava.ts b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
index b20ee5f3a..c37d265e1 100644
--- a/apps/vfx-composer-examples/src/examples/modules/Lava.ts
+++ b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
@@ -1,7 +1,7 @@
 import { ModuleFactory } from "material-composer"
 import { moduleComponent } from "material-composer-r3f"
 import { Heat, HeatOptions } from "material-composer/units"
-import { Gradient } from "shader-composer-three"
+import { Gradient } from "@shader-composer/three"
 import { Color } from "three"
 
 export type LavaProps = HeatOptions
diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
index e6324bee5..fef7e930f 100644
--- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
+++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
@@ -13,7 +13,7 @@ import {
   Smoothstep,
   Sub,
   UV
-} from "shader-composer-three"
+} from "@shader-composer/three"
 import { PSRDNoise2D } from "shader-composer-toybox"
 
 /* TODO: extract this into SC or SC-toybox or similar? */
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/__snapshots__/compiler.test.ts.snap b/packages/shader-composer-core/src/__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/src/__snapshots__/compiler.test.ts.snap
diff --git a/packages/shader-composer/src/__snapshots__/units.test.ts.snap b/packages/shader-composer-core/src/__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/src/__snapshots__/units.test.ts.snap
diff --git a/packages/shader-composer/src/compiler.test.ts b/packages/shader-composer-core/src/compiler.test.ts
similarity index 100%
rename from packages/shader-composer/src/compiler.test.ts
rename to packages/shader-composer-core/src/compiler.test.ts
diff --git a/packages/shader-composer/src/compiler.ts b/packages/shader-composer-core/src/compiler.ts
similarity index 100%
rename from packages/shader-composer/src/compiler.ts
rename to packages/shader-composer-core/src/compiler.ts
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.test.ts b/packages/shader-composer-core/src/expressions.test.ts
similarity index 100%
rename from packages/shader-composer/src/expressions.test.ts
rename to packages/shader-composer-core/src/expressions.test.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/src/glslRepresentation.test.ts b/packages/shader-composer-core/src/glslRepresentation.test.ts
similarity index 100%
rename from packages/shader-composer/src/glslRepresentation.test.ts
rename to packages/shader-composer-core/src/glslRepresentation.test.ts
diff --git a/packages/shader-composer/src/glslRepresentation.ts b/packages/shader-composer-core/src/glslRepresentation.ts
similarity index 100%
rename from packages/shader-composer/src/glslRepresentation.ts
rename to packages/shader-composer-core/src/glslRepresentation.ts
diff --git a/packages/shader-composer/src/glslType.ts b/packages/shader-composer-core/src/glslType.ts
similarity index 100%
rename from packages/shader-composer/src/glslType.ts
rename to packages/shader-composer-core/src/glslType.ts
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 100%
rename from packages/shader-composer/src/stdlib/masters.ts
rename to packages/shader-composer-core/src/stdlib/masters.ts
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 100%
rename from packages/shader-composer/src/stdlib/rotation.ts
rename to packages/shader-composer-core/src/stdlib/rotation.ts
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 100%
rename from packages/shader-composer/src/stdlib/values.test.ts
rename to packages/shader-composer-core/src/stdlib/values.test.ts
diff --git a/packages/shader-composer/src/stdlib/values.ts b/packages/shader-composer-core/src/stdlib/values.ts
similarity index 100%
rename from packages/shader-composer/src/stdlib/values.ts
rename to packages/shader-composer-core/src/stdlib/values.ts
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 100%
rename from packages/shader-composer/src/stdlib/variables.ts
rename to packages/shader-composer-core/src/stdlib/variables.ts
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.test.ts b/packages/shader-composer-core/src/tree.test.ts
similarity index 100%
rename from packages/shader-composer/src/tree.test.ts
rename to packages/shader-composer-core/src/tree.test.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.test.ts b/packages/shader-composer-core/src/units.test.ts
similarity index 100%
rename from packages/shader-composer/src/units.test.ts
rename to packages/shader-composer-core/src/units.test.ts
diff --git a/packages/shader-composer/src/units.ts b/packages/shader-composer-core/src/units.ts
similarity index 100%
rename from packages/shader-composer/src/units.ts
rename to packages/shader-composer-core/src/units.ts
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-core/tsconfig.json b/packages/shader-composer-core/tsconfig.json
new file mode 100644
index 000000000..8e0419ca7
--- /dev/null
+++ b/packages/shader-composer-core/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.json",
+  "include": [
+    "src/**/*",
+    "../shader-composer/src/fun.ts",
+    "../shader-composer/src/three.ts"
+  ]
+}
diff --git a/packages/shader-composer-postprocessing/package.json b/packages/shader-composer-postprocessing/package.json
index 756bca491..6777246ec 100644
--- a/packages/shader-composer-postprocessing/package.json
+++ b/packages/shader-composer-postprocessing/package.json
@@ -33,11 +33,11 @@
     ]
   },
   "devDependencies": {
-    "shader-composer-three": "workspace:^0.4.9"
+    "@shader-composer/three": "workspace:^0.4.9"
   },
   "peerDependencies": {
     "postprocessing": "^6.28.7",
-    "shader-composer-three": "^0.4.9",
+    "@shader-composer/three": "^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 4a68f843a..70733f9e9 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-three"
+import { $, Input, Master } from "@shader-composer/three"
 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 e1baf88c7..282ea5264 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-three"
+import { compileShader } from "@shader-composer/three"
 import { WebGLRenderer, WebGLRenderTarget } from "three"
 import { PostProcessingEffectMaster } from "./PostProcessingEffectMaster"
 
diff --git a/packages/shader-composer-postprocessing/src/units.ts b/packages/shader-composer-postprocessing/src/units.ts
index dbef33747..becd92d79 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-three"
+import { $, Float, Vec2, Vec3 } from "@shader-composer/three"
 
 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 163d52bda..655035abf 100644
--- a/packages/shader-composer-r3f/package.json
+++ b/packages/shader-composer-r3f/package.json
@@ -45,6 +45,6 @@
   "dependencies": {
     "@hmans/use-const": "^0.0.1",
     "@material-composer/patch-material": "workspace:^0.1.3",
-    "shader-composer-three": "^0.4.9"
+    "@shader-composer/three": "^0.4.9"
   }
 }
diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts
index 72e32be9f..7e77f6795 100644
--- a/packages/shader-composer-r3f/src/hooks.ts
+++ b/packages/shader-composer-r3f/src/hooks.ts
@@ -7,7 +7,7 @@ import {
   UniformUnit,
   Unit,
   UnitConfig
-} from "shader-composer-three"
+} from "@shader-composer/three"
 
 export const useShader = (ctor: () => Unit, deps?: any) => {
   const [shader, { update, dispose }] = useMemo(
diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index 67ae46192..7e447d326 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -16,11 +16,13 @@
   "preconstruct": {
     "entrypoints": [
       "index.ts",
-      "fun.ts"
+      "fun.ts",
+      "three.ts"
     ]
   },
   "files": [
     "fun/**",
+    "three/**",
     "dist/**",
     "LICENSE",
     "README.md"
@@ -45,10 +47,7 @@
     ]
   },
   "dependencies": {
-    "fp-ts": "^2.12.3"
-  },
-  "devDependencies": {
-    "gl-matrix": "^3.4.3",
-    "three": ">=0.141.0"
+    "@shader-composer/core": "workspace:^0.4.9",
+    "@shader-composer/three": "workspace:^0.4.9"
   }
 }
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 =
   <T extends GLSLType>(b: Input<T>, f: Input<"float">) =>
diff --git a/packages/shader-composer/src/index.ts b/packages/shader-composer/src/index.ts
index ae4646aaa..cc5dd83a9 100644
--- a/packages/shader-composer/src/index.ts
+++ b/packages/shader-composer/src/index.ts
@@ -1,8 +1 @@
-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"
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/pnpm-lock.yaml b/pnpm-lock.yaml
index 267b8b85e..0c74ddae8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,6 +191,7 @@ importers:
       '@hmans/r3f-animate': ^0.0.5
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
+      '@shader-composer/three': workspace:^0.4.9
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -201,7 +202,6 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       shader-composer-r3f: ^0.4.5
-      shader-composer-three: workspace:^0.4.9
       shader-composer-toybox: ^0.1.3
       three: ^0.145.0
       typescript: ^4.9.3
@@ -210,13 +210,13 @@ importers:
       '@hmans/r3f-animate': 0.0.5_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
+      '@shader-composer/three': link:../../packages/shader-composer-three
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       r3f-stage: link:../../packages/r3f-stage
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       shader-composer-r3f: link:../../packages/shader-composer-r3f
-      shader-composer-three: link:../../packages/shader-composer-three
       shader-composer-toybox: link:../../packages/shader-composer-toybox
       three: 0.145.0
     devDependencies:
@@ -387,6 +387,7 @@ importers:
       '@hmans/use-version': ^0.0.2
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
+      '@shader-composer/three': 0.4.9
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -402,7 +403,6 @@ importers:
       react-dom: ^18.2.0
       react-merge-refs: ^2.0.1
       shader-composer-r3f: 0.4.5
-      shader-composer-three: 0.4.9
       shader-composer-toybox: ^0.1.3
       statery: 0.6.2
       three: ^0.145.0
@@ -421,6 +421,7 @@ importers:
       '@hmans/use-version': 0.0.2_react@18.2.0
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
+      '@shader-composer/three': link:../../packages/shader-composer-three
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       material-composer: link:../../packages/material-composer
@@ -431,7 +432,6 @@ importers:
       react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 2.0.1
       shader-composer-r3f: link:../../packages/shader-composer-r3f
-      shader-composer-three: link:../../packages/shader-composer-three
       shader-composer-toybox: link:../../packages/shader-composer-toybox
       statery: 0.6.2_react@18.2.0
       three: 0.145.0
@@ -577,6 +577,14 @@ importers:
       test: 3.2.1
 
   packages/shader-composer:
+    specifiers:
+      '@shader-composer/core': workspace:^0.4.9
+      '@shader-composer/three': workspace:^0.4.9
+    dependencies:
+      '@shader-composer/core': link:../shader-composer-core
+      '@shader-composer/three': link:../shader-composer-three
+
+  packages/shader-composer-core:
     specifiers:
       fp-ts: ^2.12.3
       gl-matrix: ^3.4.3
@@ -589,19 +597,19 @@ importers:
 
   packages/shader-composer-postprocessing:
     specifiers:
-      shader-composer-three: workspace:^0.4.9
+      '@shader-composer/three': workspace:^0.4.9
     devDependencies:
-      shader-composer-three: link:../shader-composer-three
+      '@shader-composer/three': link:../shader-composer-three
 
   packages/shader-composer-r3f:
     specifiers:
       '@hmans/use-const': ^0.0.1
       '@material-composer/patch-material': workspace:^0.1.3
-      shader-composer-three: ^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-three: link:../shader-composer-three
+      '@shader-composer/three': link:../shader-composer-three
 
   packages/shader-composer-three:
     specifiers:

From 8583bb8b1187e740ca645118d7f03502d7b3135e Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:11:03 +0100
Subject: [PATCH 39/55] Move tests

---
 .../{src => test}/__snapshots__/compiler.test.ts.snap  |  0
 .../{src => test}/__snapshots__/units.test.ts.snap     |  0
 .../{src => test}/compiler.test.ts                     |  8 ++++----
 .../{src => test}/expressions.test.ts                  |  2 +-
 .../{src => test}/glslRepresentation.test.ts           |  2 +-
 .../shader-composer-core/{src => test}/tree.test.ts    | 10 +++++-----
 .../shader-composer-core/{src => test}/units.test.ts   | 10 +++++-----
 packages/shader-composer-core/tsconfig.json            |  6 +-----
 8 files changed, 17 insertions(+), 21 deletions(-)
 rename packages/shader-composer-core/{src => test}/__snapshots__/compiler.test.ts.snap (100%)
 rename packages/shader-composer-core/{src => test}/__snapshots__/units.test.ts.snap (100%)
 rename packages/shader-composer-core/{src => test}/compiler.test.ts (96%)
 rename packages/shader-composer-core/{src => test}/expressions.test.ts (88%)
 rename packages/shader-composer-core/{src => test}/glslRepresentation.test.ts (97%)
 rename packages/shader-composer-core/{src => test}/tree.test.ts (84%)
 rename packages/shader-composer-core/{src => test}/units.test.ts (92%)

diff --git a/packages/shader-composer-core/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-core/src/__snapshots__/compiler.test.ts.snap
rename to packages/shader-composer-core/test/__snapshots__/compiler.test.ts.snap
diff --git a/packages/shader-composer-core/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-core/src/__snapshots__/units.test.ts.snap
rename to packages/shader-composer-core/test/__snapshots__/units.test.ts.snap
diff --git a/packages/shader-composer-core/src/compiler.test.ts b/packages/shader-composer-core/test/compiler.test.ts
similarity index 96%
rename from packages/shader-composer-core/src/compiler.test.ts
rename to packages/shader-composer-core/test/compiler.test.ts
index 4039865a3..b93750726 100644
--- a/packages/shader-composer-core/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-core/src/expressions.test.ts b/packages/shader-composer-core/test/expressions.test.ts
similarity index 88%
rename from packages/shader-composer-core/src/expressions.test.ts
rename to packages/shader-composer-core/test/expressions.test.ts
index 9165a2c07..5680ac4d0 100644
--- a/packages/shader-composer-core/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", () => {
diff --git a/packages/shader-composer-core/src/glslRepresentation.test.ts b/packages/shader-composer-core/test/glslRepresentation.test.ts
similarity index 97%
rename from packages/shader-composer-core/src/glslRepresentation.test.ts
rename to packages/shader-composer-core/test/glslRepresentation.test.ts
index dc7d6c1b3..9bba393aa 100644
--- a/packages/shader-composer-core/src/glslRepresentation.test.ts
+++ b/packages/shader-composer-core/test/glslRepresentation.test.ts
@@ -1,5 +1,5 @@
 import { Matrix3, Matrix4 } from "three"
-import { glslRepresentation } from "./glslRepresentation"
+import { glslRepresentation } from "../src/glslRepresentation"
 import * as glmatrix from "gl-matrix"
 
 describe("glslRepresentation", () => {
diff --git a/packages/shader-composer-core/src/tree.test.ts b/packages/shader-composer-core/test/tree.test.ts
similarity index 84%
rename from packages/shader-composer-core/src/tree.test.ts
rename to packages/shader-composer-core/test/tree.test.ts
index 4129ed490..36957d9b8 100644
--- a/packages/shader-composer-core/src/tree.test.ts
+++ b/packages/shader-composer-core/test/tree.test.ts
@@ -1,8 +1,8 @@
-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", () => {
diff --git a/packages/shader-composer-core/src/units.test.ts b/packages/shader-composer-core/test/units.test.ts
similarity index 92%
rename from packages/shader-composer-core/src/units.test.ts
rename to packages/shader-composer-core/test/units.test.ts
index 29d5cd116..c5494c11c 100644
--- a/packages/shader-composer-core/src/units.test.ts
+++ b/packages/shader-composer-core/test/units.test.ts
@@ -1,8 +1,8 @@
-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
 
diff --git a/packages/shader-composer-core/tsconfig.json b/packages/shader-composer-core/tsconfig.json
index 8e0419ca7..52d43eaaa 100644
--- a/packages/shader-composer-core/tsconfig.json
+++ b/packages/shader-composer-core/tsconfig.json
@@ -1,8 +1,4 @@
 {
   "extends": "../../tsconfig.json",
-  "include": [
-    "src/**/*",
-    "../shader-composer/src/fun.ts",
-    "../shader-composer/src/three.ts"
-  ]
+  "include": ["src/**/*"]
 }

From c003c75c60885be5f31f3ea44f2af88f0fe259e3 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:21:21 +0100
Subject: [PATCH 40/55] Rewire

---
 apps/shader-composer-examples/package.json        |  2 +-
 .../src/examples/Billboarding.tsx                 |  2 +-
 .../src/examples/DiscoCube.tsx                    |  2 +-
 .../src/examples/Dissolve.tsx                     |  2 +-
 .../src/examples/Fireball.tsx                     |  2 +-
 .../src/examples/Flag.tsx                         |  2 +-
 .../src/examples/FloatingIsland.tsx               |  2 +-
 .../src/examples/ForceField.tsx                   |  2 +-
 .../src/examples/HelloWorld.tsx                   |  2 +-
 .../src/examples/Planet.tsx                       |  2 +-
 .../src/examples/Rotation.tsx                     |  2 +-
 .../src/examples/StylizedWater.tsx                |  2 +-
 .../src/examples/Textures.tsx                     |  2 +-
 .../src/examples/Water.tsx                        | 10 +---------
 .../shader-composer-postprocessing/package.json   |  4 ++--
 .../src/PostProcessingEffectMaster.ts             |  2 +-
 .../src/ShaderComposerEffect.ts                   |  2 +-
 .../shader-composer-postprocessing/src/units.ts   |  2 +-
 packages/shader-composer-r3f/package.json         |  4 ++++
 packages/shader-composer-r3f/src/hooks.ts         |  2 +-
 packages/shader-composer-r3f/src/index.ts         |  1 +
 packages/shader-composer-three/package.json       |  4 ++--
 packages/shader-composer-three/src/index.ts       |  2 +-
 pnpm-lock.yaml                                    | 15 +++++++++------
 24 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/apps/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json
index dbd35767b..ff5cec454 100644
--- a/apps/shader-composer-examples/package.json
+++ b/apps/shader-composer-examples/package.json
@@ -17,7 +17,7 @@
     "r3f-stage": "^0.3.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@shader-composer/three": "workspace:^0.4.9",
+    "shader-composer": "workspace:^0.4.9",
     "shader-composer-r3f": "^0.4.5",
     "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 9f8f19e97..e9d1ac28f 100644
--- a/apps/shader-composer-examples/src/examples/Billboarding.tsx
+++ b/apps/shader-composer-examples/src/examples/Billboarding.tsx
@@ -1,5 +1,5 @@
 import { Description, FlatStage } from "r3f-stage"
-import { ShaderMaterialMaster, VertexPosition } from "@shader-composer/three"
+import { ShaderMaterialMaster, VertexPosition } from "shader-composer"
 import { useShader } from "shader-composer-r3f"
 import { Billboard } from "shader-composer-toybox"
 import { Color } from "three"
diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index 2751df1c3..d18d9e1cc 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -13,7 +13,7 @@ import {
   OneMinus,
   Sub,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx
index e5a2b2b61..54d65693a 100644
--- a/apps/shader-composer-examples/src/examples/Dissolve.tsx
+++ b/apps/shader-composer-examples/src/examples/Dissolve.tsx
@@ -1,6 +1,6 @@
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
-import { Mix } from "@shader-composer/three"
+import { Mix } from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx
index c6eb28d34..5ae8dee50 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -12,7 +12,7 @@ import {
   Vec3,
   VertexNormal,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx
index 6866d3dcf..cf5abdec7 100644
--- a/apps/shader-composer-examples/src/examples/Flag.tsx
+++ b/apps/shader-composer-examples/src/examples/Flag.tsx
@@ -7,7 +7,7 @@ import {
   UV,
   Vec3,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 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 b708607c2..3e6670b16 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -20,7 +20,7 @@ import {
   varying,
   Vec2,
   Vec3
-} from "@shader-composer/three"
+} from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx
index 2bdee33d9..d5368a4f9 100644
--- a/apps/shader-composer-examples/src/examples/ForceField.tsx
+++ b/apps/shader-composer-examples/src/examples/ForceField.tsx
@@ -19,7 +19,7 @@ import {
   UV,
   Vec2,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/HelloWorld.tsx b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
index 2d4ee765d..ef87f3cc3 100644
--- a/apps/shader-composer-examples/src/examples/HelloWorld.tsx
+++ b/apps/shader-composer-examples/src/examples/HelloWorld.tsx
@@ -10,7 +10,7 @@ import {
   ShaderMaterialMaster,
   Sin,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx
index 50561fd45..b35b91b49 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -14,7 +14,7 @@ import {
   Time,
   Vec3,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx
index 4c8a7c356..e180eec4a 100644
--- a/apps/shader-composer-examples/src/examples/Rotation.tsx
+++ b/apps/shader-composer-examples/src/examples/Rotation.tsx
@@ -4,7 +4,7 @@ import {
   Time,
   VertexNormal,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
 import { Vector3 } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
index 81aa45353..c4f22ab8f 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -22,7 +22,7 @@ import {
   Vec2,
   VertexNormal,
   VertexPosition
-} from "@shader-composer/three"
+} from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index 8225aec17..9cb0f7c07 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -9,7 +9,7 @@ import {
   Time,
   UniformUnit,
   UV
-} from "@shader-composer/three"
+} from "shader-composer"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
 
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index 5dfee366f..e86d4d95d 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -1,14 +1,6 @@
 import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
-import {
-  Add,
-  GlobalTime,
-  Input,
-  Int,
-  Mul,
-  Remap,
-  Vec2
-} from "@shader-composer/three"
+import { Add, 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 { Color, DoubleSide } from "three"
diff --git a/packages/shader-composer-postprocessing/package.json b/packages/shader-composer-postprocessing/package.json
index 6777246ec..122d5a10f 100644
--- a/packages/shader-composer-postprocessing/package.json
+++ b/packages/shader-composer-postprocessing/package.json
@@ -33,11 +33,11 @@
     ]
   },
   "devDependencies": {
-    "@shader-composer/three": "workspace:^0.4.9"
+    "@shader-composer/core": "workspace:^0.4.9"
   },
   "peerDependencies": {
     "postprocessing": "^6.28.7",
-    "@shader-composer/three": "^0.4.9",
+    "@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 70733f9e9..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/three"
+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 282ea5264..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/three"
+import { compileShader } from "@shader-composer/core"
 import { WebGLRenderer, WebGLRenderTarget } from "three"
 import { PostProcessingEffectMaster } from "./PostProcessingEffectMaster"
 
diff --git a/packages/shader-composer-postprocessing/src/units.ts b/packages/shader-composer-postprocessing/src/units.ts
index becd92d79..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/three"
+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 655035abf..d510e1094 100644
--- a/packages/shader-composer-r3f/package.json
+++ b/packages/shader-composer-r3f/package.json
@@ -40,11 +40,15 @@
     "@react-three/fiber": "^8.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "shader-composer": "workspace:^0.4.9",
     "three": ">=0.143.0"
   },
   "dependencies": {
     "@hmans/use-const": "^0.0.1",
     "@material-composer/patch-material": "workspace:^0.1.3",
     "@shader-composer/three": "^0.4.9"
+  },
+  "devDependencies": {
+    "shader-composer": "workspace:^0.4.9"
   }
 }
diff --git a/packages/shader-composer-r3f/src/hooks.ts b/packages/shader-composer-r3f/src/hooks.ts
index 7e77f6795..7675f04f9 100644
--- a/packages/shader-composer-r3f/src/hooks.ts
+++ b/packages/shader-composer-r3f/src/hooks.ts
@@ -7,7 +7,7 @@ import {
   UniformUnit,
   Unit,
   UnitConfig
-} from "@shader-composer/three"
+} from "shader-composer"
 
 export const useShader = (ctor: () => Unit, deps?: any) => {
   const [shader, { update, dispose }] = useMemo(
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/package.json b/packages/shader-composer-three/package.json
index 903c8b008..911c270b7 100644
--- a/packages/shader-composer-three/package.json
+++ b/packages/shader-composer-three/package.json
@@ -33,10 +33,10 @@
     ]
   },
   "peerDependencies": {
-    "shader-composer": "workspace:^0.4.9",
+    "@shader-composer/core": "workspace:^0.4.9",
     "three": ">=0.141.0"
   },
   "devDependencies": {
-    "shader-composer": "workspace:^0.4.9"
+    "@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
index 87305cda2..5977e9c11 100644
--- a/packages/shader-composer-three/src/index.ts
+++ b/packages/shader-composer-three/src/index.ts
@@ -1,5 +1,5 @@
 /* Patch units with Three.js specific code */
-import * as SC from "shader-composer"
+import * as SC from "@shader-composer/core"
 import * as THREE from "three"
 
 export type UpdatePayload = {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0c74ddae8..ca7013515 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,7 +191,6 @@ importers:
       '@hmans/r3f-animate': ^0.0.5
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
-      '@shader-composer/three': workspace:^0.4.9
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -201,6 +200,7 @@ importers:
       r3f-stage: ^0.3.5
       react: ^18.2.0
       react-dom: ^18.2.0
+      shader-composer: workspace:^0.4.9
       shader-composer-r3f: ^0.4.5
       shader-composer-toybox: ^0.1.3
       three: ^0.145.0
@@ -210,12 +210,12 @@ importers:
       '@hmans/r3f-animate': 0.0.5_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
-      '@shader-composer/three': link:../../packages/shader-composer-three
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       r3f-stage: link:../../packages/r3f-stage
       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
@@ -597,25 +597,28 @@ importers:
 
   packages/shader-composer-postprocessing:
     specifiers:
-      '@shader-composer/three': workspace:^0.4.9
+      '@shader-composer/core': workspace:^0.4.9
     devDependencies:
-      '@shader-composer/three': link:../shader-composer-three
+      '@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/three': ^0.4.9
+      shader-composer: workspace:^0.4.9
     dependencies:
       '@hmans/use-const': 0.0.1
       '@material-composer/patch-material': link:../material-composer-patch-material
       '@shader-composer/three': link:../shader-composer-three
+    devDependencies:
+      shader-composer: link:../shader-composer
 
   packages/shader-composer-three:
     specifiers:
-      shader-composer: workspace:^0.4.9
+      '@shader-composer/core': workspace:^0.4.9
     devDependencies:
-      shader-composer: link:../shader-composer
+      '@shader-composer/core': link:../shader-composer-core
 
   packages/shader-composer-toybox:
     specifiers:

From 9fe9e8ac08c8c22ffaae41a598b1fdf2a606c975 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:48:09 +0100
Subject: [PATCH 41/55] @shader-composer/r3f

---
 apps/material-composer-examples/package.json  |  2 +-
 .../src/examples/CombinedModules.tsx          |  2 +-
 .../src/examples/HelloWorld.tsx               |  2 +-
 .../src/examples/Memoization.tsx              |  2 +-
 .../src/examples/Textures.tsx                 |  2 +-
 apps/shader-composer-examples/package.json    |  2 +-
 .../src/examples/Billboarding.tsx             |  2 +-
 .../src/examples/DiscoCube.tsx                |  2 +-
 .../src/examples/Dissolve.tsx                 |  2 +-
 .../src/examples/Fireball.tsx                 |  2 +-
 .../src/examples/Flag.tsx                     |  2 +-
 .../src/examples/FloatingIsland.tsx           |  2 +-
 .../src/examples/ForceField.tsx               |  2 +-
 .../src/examples/HelloWorld.tsx               |  2 +-
 .../src/examples/Planet.tsx                   |  2 +-
 .../src/examples/Rotation.tsx                 |  2 +-
 .../src/examples/StylizedWater.tsx            |  2 +-
 .../src/examples/Textures.tsx                 |  2 +-
 .../src/examples/Water.tsx                    |  2 +-
 .../src/examples/useRenderPass.ts             | 15 +++++++---
 apps/shader-composer-examples/vite.config.ts  | 14 ++++++----
 ...vite.config.ts.timestamp-1669730134853.mjs | 16 ++++++-----
 apps/spacerage/package.json                   |  2 +-
 apps/spacerage/src/scenes/menu/vfx/Nebula.tsx |  2 +-
 apps/vfx-composer-examples/package.json       |  2 +-
 .../src/examples/FogExample.tsx               |  2 +-
 .../src/examples/MagicWellExample.tsx         |  2 +-
 .../src/examples/SoftParticlesExample.tsx     |  2 +-
 .../src/examples/effects/Aura.tsx             |  2 +-
 archive/react-game-starter/package.json       |  2 +-
 archive/react-game-starter/src/Background.tsx |  2 +-
 .../src/scenes/Gameplay/Court.tsx             |  2 +-
 packages/material-composer-r3f/package.json   |  2 +-
 .../material-composer-r3f/src/composable.tsx  |  2 +-
 packages/shader-composer-r3f/package.json     | 10 ++-----
 packages/shader-composer-r3f/src/hooks.ts     |  4 +--
 packages/vfx-composer-r3f/package.json        |  2 +-
 pnpm-lock.yaml                                | 28 +++++++++----------
 38 files changed, 80 insertions(+), 71 deletions(-)

diff --git a/apps/material-composer-examples/package.json b/apps/material-composer-examples/package.json
index 2212b8b21..53c761809 100644
--- a/apps/material-composer-examples/package.json
+++ b/apps/material-composer-examples/package.json
@@ -24,7 +24,7 @@
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.0.1",
     "shader-composer": "0.4.9",
-    "shader-composer-r3f": "^0.4.5",
+    "@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..e02b61dfe 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..1fc53cda1 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..799a0735f 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..3d7a577c2 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/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json
index ff5cec454..b0e378310 100644
--- a/apps/shader-composer-examples/package.json
+++ b/apps/shader-composer-examples/package.json
@@ -18,7 +18,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shader-composer": "workspace:^0.4.9",
-    "shader-composer-r3f": "^0.4.5",
+    "@shader-composer/r3f": "^0.4.5",
     "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 e9d1ac28f..bbf868108 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"
 
diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index d18d9e1cc..50599493e 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -14,7 +14,7 @@ import {
   Sub,
   VertexPosition
 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
+import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx
index 54d65693a..50ff627b8 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..710ea0f8a 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -18,7 +18,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "shader-composer-r3f"
+} from "@shader-composer/r3f"
 import { PSRDNoise3D, Turbulence3D } from "shader-composer-toybox"
 import textureUrl from "./textures/explosion.png"
 
diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx
index cf5abdec7..57d673cb8 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..16cba2a86 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -26,7 +26,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "shader-composer-r3f"
+} from "@shader-composer/r3f"
 import { Displacement, PSRDNoise2D } from "shader-composer-toybox"
 import { Color, RGBADepthPacking, Vector2 } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx
index d5368a4f9..33c682cd3 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..73c22d335 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..e95fe4bb3 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -15,7 +15,7 @@ import {
   Vec3,
   VertexPosition
 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
+import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx
index e180eec4a..dd4951842 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..8a18350f3 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -28,7 +28,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "shader-composer-r3f"
+} from "@shader-composer/r3f"
 import { PSRDNoise2D, PSRDNoise3D } from "shader-composer-toybox"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index 9cb0f7c07..79f3a432c 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -1,4 +1,4 @@
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
+import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
 import {
   $,
   Add,
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index e86d4d95d..cd9f912d6 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -1,7 +1,7 @@
 import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { Add, GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "shader-composer-r3f"
+import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
 import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/useRenderPass.ts b/apps/shader-composer-examples/src/examples/useRenderPass.ts
index 80ce40460..2e0e7da23 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
index dee17223d..fe14d315b 100644
--- a/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs
+++ b/apps/shader-composer-examples/vite.config.ts.timestamp-1669730134853.mjs
@@ -1,14 +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";
+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"],
+    exclude: [
+      "shader-composer",
+      "@shader-composer/r3f",
+      "shader-composer-toybox"
+    ],
     include: ["react/jsx-runtime"]
   }
-});
-export {
-  vite_config_default as default
-};
+})
+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 d1415eb12..078e89895 100644
--- a/apps/vfx-composer-examples/package.json
+++ b/apps/vfx-composer-examples/package.json
@@ -24,7 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.0.1",
-    "shader-composer-r3f": "0.4.5",
+    "@shader-composer/r3f": "0.4.5",
     "@shader-composer/three": "0.4.9",
     "shader-composer-toybox": "^0.1.3",
     "statery": "0.6.2",
diff --git a/apps/vfx-composer-examples/src/examples/FogExample.tsx b/apps/vfx-composer-examples/src/examples/FogExample.tsx
index 2d01eec14..8db30f372 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/three"
-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 8a70d0dbf..2d06ae4d9 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/three"
-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/SoftParticlesExample.tsx b/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx
index f8bd6fbda..6885e4c8e 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/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index e301b0f19..c9c180011 100644
--- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
+++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
@@ -13,7 +13,7 @@ import {
   Unit,
   UV
 } from "@shader-composer/three"
-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"
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-r3f/package.json b/packages/material-composer-r3f/package.json
index 1bec963b3..62183d6f4 100644
--- a/packages/material-composer-r3f/package.json
+++ b/packages/material-composer-r3f/package.json
@@ -44,7 +44,7 @@
     "@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/r3f": "^0.4.5"
   },
   "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..92f878d96 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/shader-composer-r3f/package.json b/packages/shader-composer-r3f/package.json
index d510e1094..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,15 +32,11 @@
       ]
     ]
   },
-  "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",
-    "shader-composer": "workspace:^0.4.9",
     "three": ">=0.143.0"
   },
   "dependencies": {
@@ -49,6 +45,6 @@
     "@shader-composer/three": "^0.4.9"
   },
   "devDependencies": {
-    "shader-composer": "workspace:^0.4.9"
+    "@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 7675f04f9..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(
diff --git a/packages/vfx-composer-r3f/package.json b/packages/vfx-composer-r3f/package.json
index 95b2b95f6..cea816471 100644
--- a/packages/vfx-composer-r3f/package.json
+++ b/packages/vfx-composer-r3f/package.json
@@ -39,7 +39,7 @@
     "material-composer-r3f": "^0.2.5",
     "miniplex": "2.0.0-beta.1",
     "shader-composer": "^0.4.5",
-    "shader-composer-r3f": "^0.4.5",
+    "@shader-composer/r3f": "^0.4.5",
     "vfx-composer": "^0.4.0"
   },
   "peerDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ca7013515..0e6267e8b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,6 +72,7 @@ importers:
       '@material-composer/patch-material': ^0.1.3
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
+      '@shader-composer/r3f': ^0.4.5
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -86,7 +87,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
@@ -101,6 +101,7 @@ importers:
       '@material-composer/patch-material': link:../../packages/material-composer-patch-material
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
+      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       material-composer: link:../../packages/material-composer
       material-composer-r3f: link:../../packages/material-composer-r3f
@@ -110,7 +111,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
@@ -191,6 +191,7 @@ importers:
       '@hmans/r3f-animate': ^0.0.5
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
+      '@shader-composer/r3f': ^0.4.5
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -201,7 +202,6 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       shader-composer: workspace:^0.4.9
-      shader-composer-r3f: ^0.4.5
       shader-composer-toybox: ^0.1.3
       three: ^0.145.0
       typescript: ^4.9.3
@@ -210,13 +210,13 @@ importers:
       '@hmans/r3f-animate': 0.0.5_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
+      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       r3f-stage: link:../../packages/r3f-stage
       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 +238,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 +260,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 +284,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 +302,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
@@ -387,6 +387,7 @@ importers:
       '@hmans/use-version': ^0.0.2
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
+      '@shader-composer/r3f': 0.4.5
       '@shader-composer/three': 0.4.9
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
@@ -402,7 +403,6 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       react-merge-refs: ^2.0.1
-      shader-composer-r3f: 0.4.5
       shader-composer-toybox: ^0.1.3
       statery: 0.6.2
       three: ^0.145.0
@@ -421,6 +421,7 @@ importers:
       '@hmans/use-version': 0.0.2_react@18.2.0
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
+      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
       '@shader-composer/three': link:../../packages/shader-composer-three
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
@@ -431,7 +432,6 @@ importers:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 2.0.1
-      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
@@ -522,9 +522,9 @@ importers:
       '@hmans/use-version': ^0.0.2
       '@material-composer/patch-material': ^0.1.2
       '@material-composer/patched': ^0.1.3
+      '@shader-composer/r3f': ^0.4.5
       material-composer: workspace:*
       shader-composer: ^0.4.5
-      shader-composer-r3f: ^0.4.5
     dependencies:
       '@hmans/use-const': 0.0.1
       '@hmans/use-list': 0.0.1
@@ -533,8 +533,8 @@ importers:
       '@hmans/use-version': 0.0.2
       '@material-composer/patch-material': link:../material-composer-patch-material
       '@material-composer/patched': link:../material-composer-patched
+      '@shader-composer/r3f': link:../shader-composer-r3f
       shader-composer: link:../shader-composer
-      shader-composer-r3f: link:../shader-composer-r3f
     devDependencies:
       material-composer: link:../material-composer
 
@@ -605,14 +605,14 @@ importers:
     specifiers:
       '@hmans/use-const': ^0.0.1
       '@material-composer/patch-material': workspace:^0.1.3
+      '@shader-composer/core': workspace:^0.4.9
       '@shader-composer/three': ^0.4.9
-      shader-composer: workspace:^0.4.9
     dependencies:
       '@hmans/use-const': 0.0.1
       '@material-composer/patch-material': link:../material-composer-patch-material
       '@shader-composer/three': link:../shader-composer-three
     devDependencies:
-      shader-composer: link:../shader-composer
+      '@shader-composer/core': link:../shader-composer-core
 
   packages/shader-composer-three:
     specifiers:
@@ -667,19 +667,19 @@ importers:
       '@hmans/use-const': ^0.0.1
       '@hmans/use-rerender': ^0.0.2
       '@hmans/use-version': ^0.0.2
+      '@shader-composer/r3f': ^0.4.5
       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
       '@hmans/use-rerender': 0.0.2
       '@hmans/use-version': 0.0.2
+      '@shader-composer/r3f': link:../shader-composer-r3f
       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:

From f0a79abf89e7588c7a348b1f25d93c6f9ebcf745 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:54:33 +0100
Subject: [PATCH 42/55] @shader-composer/r3f

---
 .../material-composer-patch-material/package.json     |  4 ++--
 .../material-composer-patch-material/src/master.ts    |  2 +-
 packages/shader-composer/package.json                 | 11 ++++-------
 packages/shader-composer/r3f/package.json             |  4 ++++
 packages/shader-composer/src/r3f.ts                   |  1 +
 pnpm-lock.yaml                                        |  6 ++++--
 6 files changed, 16 insertions(+), 12 deletions(-)
 create mode 100644 packages/shader-composer/r3f/package.json
 create mode 100644 packages/shader-composer/src/r3f.ts

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/shader-composer/package.json b/packages/shader-composer/package.json
index 7e447d326..6ed70ebc5 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -17,11 +17,13 @@
     "entrypoints": [
       "index.ts",
       "fun.ts",
+      "r3f.ts",
       "three.ts"
     ]
   },
   "files": [
     "fun/**",
+    "r3f/**",
     "three/**",
     "dist/**",
     "LICENSE",
@@ -37,17 +39,12 @@
     "presets": [
       "@babel/preset-env",
       "@babel/preset-react",
-      [
-        "@babel/preset-typescript",
-        {
-          "isTSX": true,
-          "allExtensions": true
-        }
-      ]
+      "@babel/preset-typescript"
     ]
   },
   "dependencies": {
     "@shader-composer/core": "workspace:^0.4.9",
+    "@shader-composer/r3f": "workspace:^0.4.5",
     "@shader-composer/three": "workspace:^0.4.9"
   }
 }
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/r3f.ts b/packages/shader-composer/src/r3f.ts
new file mode 100644
index 000000000..93c29330e
--- /dev/null
+++ b/packages/shader-composer/src/r3f.ts
@@ -0,0 +1 @@
+export * from "@shader-composer/r3f"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e6267e8b..659731438 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -493,13 +493,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:
@@ -579,9 +579,11 @@ importers:
   packages/shader-composer:
     specifiers:
       '@shader-composer/core': workspace:^0.4.9
+      '@shader-composer/r3f': workspace:^0.4.5
       '@shader-composer/three': workspace:^0.4.9
     dependencies:
       '@shader-composer/core': link:../shader-composer-core
+      '@shader-composer/r3f': link:../shader-composer-r3f
       '@shader-composer/three': link:../shader-composer-three
 
   packages/shader-composer-core:

From 5ad3193af37ac44498192694fb491931456cc291 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 17:56:42 +0100
Subject: [PATCH 43/55] Amend examples

---
 apps/shader-composer-examples/package.json                    | 1 -
 apps/shader-composer-examples/src/examples/Billboarding.tsx   | 2 +-
 apps/shader-composer-examples/src/examples/DiscoCube.tsx      | 2 +-
 apps/shader-composer-examples/src/examples/Dissolve.tsx       | 2 +-
 apps/shader-composer-examples/src/examples/Fireball.tsx       | 2 +-
 apps/shader-composer-examples/src/examples/Flag.tsx           | 2 +-
 apps/shader-composer-examples/src/examples/FloatingIsland.tsx | 2 +-
 apps/shader-composer-examples/src/examples/ForceField.tsx     | 2 +-
 apps/shader-composer-examples/src/examples/HelloWorld.tsx     | 2 +-
 apps/shader-composer-examples/src/examples/Planet.tsx         | 2 +-
 apps/shader-composer-examples/src/examples/Rotation.tsx       | 2 +-
 apps/shader-composer-examples/src/examples/StylizedWater.tsx  | 2 +-
 apps/shader-composer-examples/src/examples/Textures.tsx       | 2 +-
 apps/shader-composer-examples/src/examples/Water.tsx          | 2 +-
 apps/shader-composer-examples/src/examples/useRenderPass.ts   | 2 +-
 pnpm-lock.yaml                                                | 2 --
 16 files changed, 14 insertions(+), 17 deletions(-)

diff --git a/apps/shader-composer-examples/package.json b/apps/shader-composer-examples/package.json
index b0e378310..e9976ee82 100644
--- a/apps/shader-composer-examples/package.json
+++ b/apps/shader-composer-examples/package.json
@@ -18,7 +18,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "shader-composer": "workspace:^0.4.9",
-    "@shader-composer/r3f": "^0.4.5",
     "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 bbf868108..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"
 
diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index 50599493e..9780247b1 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -14,7 +14,7 @@ import {
   Sub,
   VertexPosition
 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
+import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Dissolve.tsx b/apps/shader-composer-examples/src/examples/Dissolve.tsx
index 50ff627b8..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 710ea0f8a..cf0e7f829 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -18,7 +18,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "@shader-composer/r3f"
+} from "shader-composer/r3f"
 import { PSRDNoise3D, Turbulence3D } from "shader-composer-toybox"
 import textureUrl from "./textures/explosion.png"
 
diff --git a/apps/shader-composer-examples/src/examples/Flag.tsx b/apps/shader-composer-examples/src/examples/Flag.tsx
index 57d673cb8..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 16cba2a86..53405f940 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -26,7 +26,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "@shader-composer/r3f"
+} from "shader-composer/r3f"
 import { Displacement, PSRDNoise2D } from "shader-composer-toybox"
 import { Color, RGBADepthPacking, Vector2 } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/ForceField.tsx b/apps/shader-composer-examples/src/examples/ForceField.tsx
index 33c682cd3..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 73c22d335..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 e95fe4bb3..abcbd3394 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -15,7 +15,7 @@ import {
   Vec3,
   VertexPosition
 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
+import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Rotation.tsx b/apps/shader-composer-examples/src/examples/Rotation.tsx
index dd4951842..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 8a18350f3..17d357ecc 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -28,7 +28,7 @@ import {
   ShaderMaster,
   useShader,
   useUniformUnit
-} from "@shader-composer/r3f"
+} from "shader-composer/r3f"
 import { PSRDNoise2D, PSRDNoise3D } from "shader-composer-toybox"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/Textures.tsx b/apps/shader-composer-examples/src/examples/Textures.tsx
index 79f3a432c..f7801a288 100644
--- a/apps/shader-composer-examples/src/examples/Textures.tsx
+++ b/apps/shader-composer-examples/src/examples/Textures.tsx
@@ -1,4 +1,4 @@
-import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
+import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import {
   $,
   Add,
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index cd9f912d6..f7adfcaa3 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -1,7 +1,7 @@
 import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { Add, GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer"
-import { Shader, ShaderMaster, useShader } from "@shader-composer/r3f"
+import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/useRenderPass.ts b/apps/shader-composer-examples/src/examples/useRenderPass.ts
index 2e0e7da23..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
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 659731438..13f2ea9f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -191,7 +191,6 @@ importers:
       '@hmans/r3f-animate': ^0.0.5
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
-      '@shader-composer/r3f': ^0.4.5
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -210,7 +209,6 @@ importers:
       '@hmans/r3f-animate': 0.0.5_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
-      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       r3f-stage: link:../../packages/r3f-stage

From 7ce33fcf90935cd0efaa8f2e58096aa7cda7271c Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:09:55 +0100
Subject: [PATCH 44/55] @shader-composer/postprocessing

---
 packages/render-composer/package.json                 |  2 +-
 .../render-composer/src/effects/LensDirtEffect.tsx    |  2 +-
 packages/shader-composer-postprocessing/package.json  | 11 ++---------
 packages/shader-composer/package.json                 |  3 +++
 packages/shader-composer/postprocessing/package.json  |  4 ++++
 packages/shader-composer/src/postprocessing.ts        |  1 +
 pnpm-lock.yaml                                        |  6 ++++--
 7 files changed, 16 insertions(+), 13 deletions(-)
 create mode 100644 packages/shader-composer/postprocessing/package.json
 create mode 100644 packages/shader-composer/src/postprocessing.ts

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-postprocessing/package.json b/packages/shader-composer-postprocessing/package.json
index 122d5a10f..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,14 +22,7 @@
   "babel": {
     "presets": [
       "@babel/preset-env",
-      "@babel/preset-react",
-      [
-        "@babel/preset-typescript",
-        {
-          "isTSX": true,
-          "allExtensions": true
-        }
-      ]
+      "@babel/preset-typescript"
     ]
   },
   "devDependencies": {
diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index 6ed70ebc5..f2a1a3a30 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -17,12 +17,14 @@
     "entrypoints": [
       "index.ts",
       "fun.ts",
+      "postprocessing.ts",
       "r3f.ts",
       "three.ts"
     ]
   },
   "files": [
     "fun/**",
+    "postprocessing/**",
     "r3f/**",
     "three/**",
     "dist/**",
@@ -44,6 +46,7 @@
   },
   "dependencies": {
     "@shader-composer/core": "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/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/pnpm-lock.yaml b/pnpm-lock.yaml
index 13f2ea9f1..a0feea452 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -561,26 +561,28 @@ 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/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/postprocessing': link:../shader-composer-postprocessing
       '@shader-composer/r3f': link:../shader-composer-r3f
       '@shader-composer/three': link:../shader-composer-three
 

From 1511edfa590107f36ad430b1f12f7f62369b3bba Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:15:59 +0100
Subject: [PATCH 45/55] Fix material-composer

---
 apps/material-composer-examples/package.json                | 1 -
 .../src/examples/CombinedModules.tsx                        | 2 +-
 apps/material-composer-examples/src/examples/HelloWorld.tsx | 2 +-
 .../material-composer-examples/src/examples/Memoization.tsx | 2 +-
 apps/material-composer-examples/src/examples/Textures.tsx   | 2 +-
 packages/material-composer-r3f/package.json                 | 3 +--
 packages/material-composer-r3f/src/composable.tsx           | 2 +-
 pnpm-lock.yaml                                              | 6 +-----
 8 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/apps/material-composer-examples/package.json b/apps/material-composer-examples/package.json
index 53c761809..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 e02b61dfe..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 1fc53cda1..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 799a0735f..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 3d7a577c2..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/packages/material-composer-r3f/package.json b/packages/material-composer-r3f/package.json
index 62183d6f4..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 92f878d96..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/pnpm-lock.yaml b/pnpm-lock.yaml
index a0feea452..f11e0827c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -72,7 +72,6 @@ importers:
       '@material-composer/patch-material': ^0.1.3
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
-      '@shader-composer/r3f': ^0.4.5
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -101,7 +100,6 @@ importers:
       '@material-composer/patch-material': link:../../packages/material-composer-patch-material
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
-      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       material-composer: link:../../packages/material-composer
       material-composer-r3f: link:../../packages/material-composer-r3f
@@ -520,9 +518,8 @@ importers:
       '@hmans/use-version': ^0.0.2
       '@material-composer/patch-material': ^0.1.2
       '@material-composer/patched': ^0.1.3
-      '@shader-composer/r3f': ^0.4.5
       material-composer: workspace:*
-      shader-composer: ^0.4.5
+      shader-composer: ^0.4.9
     dependencies:
       '@hmans/use-const': 0.0.1
       '@hmans/use-list': 0.0.1
@@ -531,7 +528,6 @@ importers:
       '@hmans/use-version': 0.0.2
       '@material-composer/patch-material': link:../material-composer-patch-material
       '@material-composer/patched': link:../material-composer-patched
-      '@shader-composer/r3f': link:../shader-composer-r3f
       shader-composer: link:../shader-composer
     devDependencies:
       material-composer: link:../material-composer

From 7a1cec7a1b2d8371ade4f7b2298aea9fda8b050e Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:20:53 +0100
Subject: [PATCH 46/55] Fix vfx composer

---
 apps/vfx-composer-examples/package.json                  | 3 +--
 apps/vfx-composer-examples/src/examples/Asteroid.tsx     | 2 +-
 .../src/examples/FireflyExample.tsx                      | 2 +-
 apps/vfx-composer-examples/src/examples/FogExample.tsx   | 4 ++--
 .../src/examples/MagicWellExample.tsx                    | 4 ++--
 apps/vfx-composer-examples/src/examples/Playground.tsx   | 2 +-
 .../src/examples/SharedResourceExample.tsx               | 9 +--------
 apps/vfx-composer-examples/src/examples/Simple.tsx       | 2 +-
 .../src/examples/SoftParticlesExample.tsx                | 2 +-
 apps/vfx-composer-examples/src/examples/Stress.tsx       | 2 +-
 apps/vfx-composer-examples/src/examples/Vanilla.tsx      | 2 +-
 apps/vfx-composer-examples/src/examples/effects/Aura.tsx | 4 ++--
 apps/vfx-composer-examples/src/examples/modules/Lava.ts  | 2 +-
 .../src/examples/units/NoiseMask.tsx                     | 2 +-
 packages/vfx-composer-r3f/package.json                   | 1 -
 pnpm-lock.yaml                                           | 8 ++------
 16 files changed, 19 insertions(+), 32 deletions(-)

diff --git a/apps/vfx-composer-examples/package.json b/apps/vfx-composer-examples/package.json
index 078e89895..19fd2a970 100644
--- a/apps/vfx-composer-examples/package.json
+++ b/apps/vfx-composer-examples/package.json
@@ -24,8 +24,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-merge-refs": "^2.0.1",
-    "@shader-composer/r3f": "0.4.5",
-    "@shader-composer/three": "0.4.9",
+    "shader-composer": "0.4.9",
     "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 53e71d8f3..c39936e2d 100644
--- a/apps/vfx-composer-examples/src/examples/Asteroid.tsx
+++ b/apps/vfx-composer-examples/src/examples/Asteroid.tsx
@@ -21,7 +21,7 @@ import {
   UV,
   Vec2,
   Vec3
-} from "@shader-composer/three"
+} from "shader-composer"
 import { PSRDNoise2D } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 import {
diff --git a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
index 90d8a78e9..86fcfd3f6 100644
--- a/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FireflyExample.tsx
@@ -3,7 +3,7 @@ import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { chance, upTo } from "randomish"
 import { useRef } from "react"
-import { OneMinus } from "@shader-composer/three"
+import { OneMinus } from "shader-composer"
 import { Color, Mesh, NormalBlending, Vector3 } 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 8db30f372..9e0468f12 100644
--- a/apps/vfx-composer-examples/src/examples/FogExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx
@@ -3,8 +3,8 @@ import { useTexture } from "@react-three/drei"
 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/three"
-import { useUniformUnit } from "@shader-composer/r3f"
+import { Mul, Rotation3DZ, Time } from "shader-composer"
+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 2d06ae4d9..00dd4158f 100644
--- a/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/MagicWellExample.tsx
@@ -2,8 +2,8 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage, useRenderPipeline } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "@shader-composer/three"
-import { useUniformUnit } from "@shader-composer/r3f"
+import { OneMinus } from "shader-composer"
+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/Playground.tsx b/apps/vfx-composer-examples/src/examples/Playground.tsx
index 343ec9bab..7822c362c 100644
--- a/apps/vfx-composer-examples/src/examples/Playground.tsx
+++ b/apps/vfx-composer-examples/src/examples/Playground.tsx
@@ -1,5 +1,5 @@
 import { composable, modules } from "material-composer-r3f"
-import { Mul, Time } from "@shader-composer/three"
+import { Mul, Time } from "shader-composer"
 import { Color } from "three"
 
 export default function Playground() {
diff --git a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
index ec2eb7cd2..23efa435e 100644
--- a/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/SharedResourceExample.tsx
@@ -2,14 +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 {
-  float,
-  Add,
-  GlobalTime,
-  InstanceID,
-  Mul,
-  Sin
-} from "@shader-composer/three"
+import { float, Add, GlobalTime, InstanceID, Mul, Sin } from "shader-composer"
 import { RGBADepthPacking, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Simple.tsx b/apps/vfx-composer-examples/src/examples/Simple.tsx
index 546afb517..af8f666f8 100644
--- a/apps/vfx-composer-examples/src/examples/Simple.tsx
+++ b/apps/vfx-composer-examples/src/examples/Simple.tsx
@@ -2,7 +2,7 @@ import { useTexture } from "@react-three/drei"
 import { composable, modules } from "material-composer-r3f"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus } from "randomish"
-import { OneMinus } from "@shader-composer/three"
+import { OneMinus } from "shader-composer"
 import { AdditiveBlending, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx b/apps/vfx-composer-examples/src/examples/SoftParticlesExample.tsx
index 6885e4c8e..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/Stress.tsx b/apps/vfx-composer-examples/src/examples/Stress.tsx
index 73a9c64b0..00928bf03 100644
--- a/apps/vfx-composer-examples/src/examples/Stress.tsx
+++ b/apps/vfx-composer-examples/src/examples/Stress.tsx
@@ -1,6 +1,6 @@
 import { composable, modules } from "material-composer-r3f"
 import { between, plusMinus, upTo } from "randomish"
-import { OneMinus } from "@shader-composer/three"
+import { OneMinus } from "shader-composer"
 import { Color, Vector3 } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/Vanilla.tsx b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
index 57cd96e01..cfbaf3fe0 100644
--- a/apps/vfx-composer-examples/src/examples/Vanilla.tsx
+++ b/apps/vfx-composer-examples/src/examples/Vanilla.tsx
@@ -4,7 +4,7 @@ import * as Modules from "material-composer/modules"
 import { FlatStage } from "r3f-stage"
 import { between, plusMinus, upTo } from "randomish"
 import { useEffect, useRef } from "react"
-import { compileShader, OneMinus } from "@shader-composer/three"
+import { compileShader, OneMinus } from "shader-composer"
 import {
   BoxGeometry,
   Color,
diff --git a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
index c9c180011..f622900ef 100644
--- a/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
+++ b/apps/vfx-composer-examples/src/examples/effects/Aura.tsx
@@ -12,8 +12,8 @@ import {
   Texture2D,
   Unit,
   UV
-} from "@shader-composer/three"
-import { useUniformUnit } from "@shader-composer/r3f"
+} from "shader-composer"
+import { useUniformUnit } from "shader-composer/r3f"
 import { DoubleSide, RepeatWrapping } from "three"
 import streamTextureUrl from "../textures/stream.png"
 import { NoiseMask } from "../units/NoiseMask"
diff --git a/apps/vfx-composer-examples/src/examples/modules/Lava.ts b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
index c37d265e1..1ed5d3e87 100644
--- a/apps/vfx-composer-examples/src/examples/modules/Lava.ts
+++ b/apps/vfx-composer-examples/src/examples/modules/Lava.ts
@@ -1,7 +1,7 @@
 import { ModuleFactory } from "material-composer"
 import { moduleComponent } from "material-composer-r3f"
 import { Heat, HeatOptions } from "material-composer/units"
-import { Gradient } from "@shader-composer/three"
+import { Gradient } from "shader-composer"
 import { Color } from "three"
 
 export type LavaProps = HeatOptions
diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
index fef7e930f..fb7a581a1 100644
--- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
+++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
@@ -13,7 +13,7 @@ import {
   Smoothstep,
   Sub,
   UV
-} from "@shader-composer/three"
+} from "shader-composer"
 import { PSRDNoise2D } from "shader-composer-toybox"
 
 /* TODO: extract this into SC or SC-toybox or similar? */
diff --git a/packages/vfx-composer-r3f/package.json b/packages/vfx-composer-r3f/package.json
index cea816471..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/pnpm-lock.yaml b/pnpm-lock.yaml
index f11e0827c..0d051217c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -383,8 +383,6 @@ importers:
       '@hmans/use-version': ^0.0.2
       '@react-three/drei': ^9.34.3
       '@react-three/fiber': ^8.8.9
-      '@shader-composer/r3f': 0.4.5
-      '@shader-composer/three': 0.4.9
       '@types/react': ^18.0.21
       '@types/react-dom': ^18.0.6
       '@types/three': ^0.144.0
@@ -399,6 +397,7 @@ importers:
       react: ^18.2.0
       react-dom: ^18.2.0
       react-merge-refs: ^2.0.1
+      shader-composer: 0.4.9
       shader-composer-toybox: ^0.1.3
       statery: 0.6.2
       three: ^0.145.0
@@ -417,8 +416,6 @@ importers:
       '@hmans/use-version': 0.0.2_react@18.2.0
       '@react-three/drei': 9.34.3_zoourtuqs6jpz5hshrv5fac7t4
       '@react-three/fiber': 8.8.9_ee34sidbpuk5ebd4phepfgxxdi
-      '@shader-composer/r3f': link:../../packages/shader-composer-r3f
-      '@shader-composer/three': link:../../packages/shader-composer-three
       fp-ts: 2.12.3
       leva: 0.9.31_biqbaboplfbrettd7655fr4n2y
       material-composer: link:../../packages/material-composer
@@ -428,6 +425,7 @@ importers:
       react: 18.2.0
       react-dom: 18.2.0_react@18.2.0
       react-merge-refs: 2.0.1
+      shader-composer: link:../../packages/shader-composer
       shader-composer-toybox: link:../../packages/shader-composer-toybox
       statery: 0.6.2_react@18.2.0
       three: 0.145.0
@@ -665,7 +663,6 @@ importers:
       '@hmans/use-const': ^0.0.1
       '@hmans/use-rerender': ^0.0.2
       '@hmans/use-version': ^0.0.2
-      '@shader-composer/r3f': ^0.4.5
       material-composer-r3f: ^0.2.5
       miniplex: 2.0.0-beta.1
       shader-composer: ^0.4.5
@@ -674,7 +671,6 @@ importers:
       '@hmans/use-const': 0.0.1
       '@hmans/use-rerender': 0.0.2
       '@hmans/use-version': 0.0.2
-      '@shader-composer/r3f': link:../shader-composer-r3f
       material-composer-r3f: link:../material-composer-r3f
       miniplex: 2.0.0-beta.1
       shader-composer: link:../shader-composer

From e19b8e4e615130cd7102b00475d7993616b55ada Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:44:38 +0100
Subject: [PATCH 47/55] Noise

---
 .../src/examples/DiscoCube.tsx                |   2 +-
 .../src/examples/Fireball.tsx                 |   2 +-
 .../src/examples/FloatingIsland.tsx           |   3 +-
 .../src/examples/Planet.tsx                   |   2 +-
 .../src/examples/StylizedWater.tsx            |   2 +-
 .../src/examples/Water.tsx                    |   3 +-
 .../src/examples/Asteroid.tsx                 |   2 +-
 .../src/examples/units/NoiseMask.tsx          |   2 +-
 .../src/modules/SurfaceWobble.ts              |   2 +-
 .../src/units/experiments.ts                  |   2 +-
 packages/shader-composer-noise/CHANGELOG.md   | 129 ++++++++++++++++++
 packages/shader-composer-noise/LICENSE.md     |  20 +++
 packages/shader-composer-noise/README.md      |   1 +
 packages/shader-composer-noise/package.json   |  34 +++++
 .../src}/FBMNoise.ts                          |  54 ++++----
 .../src}/GerstnerWave.ts                      |   2 +-
 .../src}/PSRDNoise.ts                         |  10 +-
 .../src}/PerlinNoise.ts                       |   8 +-
 .../src}/Simplex3DNoise.ts                    |   7 +-
 .../src}/index.ts                             |   0
 .../src}/mod289.ts                            |   4 +-
 .../src}/permute.ts                           |   6 +-
 .../src}/random.ts                            |  10 +-
 .../src}/taylorInvSqrt.ts                     |   4 +-
 .../src}/turbulence.ts                        |   4 +-
 packages/shader-composer-noise/tsconfig.json  |   4 +
 .../src/effects/Dissolve.ts                   |   2 +-
 packages/shader-composer-toybox/src/index.ts  |   1 -
 packages/shader-composer/noise/package.json   |   4 +
 packages/shader-composer/package.json         |   5 +-
 packages/shader-composer/src/noise.ts         |   1 +
 pnpm-lock.yaml                                |   8 ++
 32 files changed, 277 insertions(+), 63 deletions(-)
 create mode 100644 packages/shader-composer-noise/CHANGELOG.md
 create mode 100644 packages/shader-composer-noise/LICENSE.md
 create mode 100644 packages/shader-composer-noise/README.md
 create mode 100644 packages/shader-composer-noise/package.json
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/FBMNoise.ts (78%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/GerstnerWave.ts (93%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/PSRDNoise.ts (99%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/PerlinNoise.ts (95%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/Simplex3DNoise.ts (91%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/index.ts (100%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/mod289.ts (74%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/permute.ts (66%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/random.ts (82%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/taylorInvSqrt.ts (65%)
 rename packages/{shader-composer-toybox/src/noise => shader-composer-noise/src}/turbulence.ts (90%)
 create mode 100644 packages/shader-composer-noise/tsconfig.json
 create mode 100644 packages/shader-composer/noise/package.json
 create mode 100644 packages/shader-composer/src/noise.ts

diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index 9780247b1..d20b56e9d 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -15,7 +15,7 @@ import {
   VertexPosition
 } from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
-import { PSRDNoise3D } from "shader-composer-toybox"
+import { PSRDNoise3D } from "shader-composer/noise"
 import { Color, Mesh } from "three"
 
 export default function DiscoCube() {
diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx
index cf0e7f829..7222dc8aa 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -19,7 +19,7 @@ import {
   useShader,
   useUniformUnit
 } from "shader-composer/r3f"
-import { PSRDNoise3D, Turbulence3D } from "shader-composer-toybox"
+import { PSRDNoise3D, Turbulence3D } from "shader-composer/noise"
 import textureUrl from "./textures/explosion.png"
 
 export default function Fireball() {
diff --git a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
index 53405f940..d974bfd04 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/noise"
 import {
   Shader,
   ShaderMaster,
   useShader,
   useUniformUnit
 } from "shader-composer/r3f"
-import { Displacement, PSRDNoise2D } from "shader-composer-toybox"
 import { Color, RGBADepthPacking, Vector2 } from "three"
 
 export default function FloatingIslandExample() {
diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx
index abcbd3394..a362c9f8c 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 { Simplex3DNoise } from "shader-composer/noise"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
-import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
 
 const getNoise = (
diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
index 17d357ecc..fd48e0e43 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -29,7 +29,7 @@ import {
   useShader,
   useUniformUnit
 } from "shader-composer/r3f"
-import { PSRDNoise2D, PSRDNoise3D } from "shader-composer-toybox"
+import { PSRDNoise2D, PSRDNoise3D } from "shader-composer/noise"
 import { Color } from "three"
 
 export default function StylizedWater() {
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index f7adfcaa3..c16a68c01 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -1,8 +1,9 @@
 import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { Add, GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer"
+import { Displacement } from "shader-composer-toybox"
+import { FBMNoise, GerstnerWave } from "shader-composer/noise"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
-import { Displacement, FBMNoise, GerstnerWave } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 
 const NormalizeNoise = (v: Input<"float">) => Remap(v, -1, 1, 0, 1)
diff --git a/apps/vfx-composer-examples/src/examples/Asteroid.tsx b/apps/vfx-composer-examples/src/examples/Asteroid.tsx
index c39936e2d..2cdace996 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/noise"
 import { Color, DoubleSide } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
index fb7a581a1..663e67e55 100644
--- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
+++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
@@ -14,7 +14,7 @@ import {
   Sub,
   UV
 } from "shader-composer"
-import { PSRDNoise2D } from "shader-composer-toybox"
+import { PSRDNoise2D } from "shader-composer/noise"
 
 /* TODO: extract this into SC or SC-toybox or similar? */
 
diff --git a/packages/material-composer/src/modules/SurfaceWobble.ts b/packages/material-composer/src/modules/SurfaceWobble.ts
index 21bcae9d5..39b668f67 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/noise"
 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 d21defc9e..ed77911a4 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 } from "shader-composer"
-import { Turbulence3D } from "shader-composer-toybox"
+import { Turbulence3D } from "shader-composer/noise"
 
 export type HeatOptions = {
   offset?: Input<"vec3" | "float">
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 `<Shader>` React component:
+
+  ```tsx
+  function MyShadedThingy() {
+    const shader = useShader(() => {
+      return ShaderMaster({
+        color: /* ... */
+        position: /* ... */
+        /* etc. */
+      })
+    }, [])
+
+    return (
+      <mesh>
+        <boxGeometry />
+
+        <meshStandardMaterial>
+          <Shader {...shader} />
+        </meshStandardMaterial>
+      </mesh>
+    )
+  }
+  ```
+
+- 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 `<Custom.* />` 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
+  <mesh castShadow receiveShadow>
+    <dodecahedronGeometry args={[2, 5]} />
+
+    <Custom.MeshStandardMaterial
+      {...shader}
+      flatShading
+      metalness={0.5}
+      roughness={0.5}
+    />
+
+    <Custom.MeshDepthMaterial {...depthShader} />
+  </mesh>
+  ```
+
+- a4739b1: Added `<CustomDepthMaterial>` 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 93%
rename from packages/shader-composer-toybox/src/noise/GerstnerWave.ts
rename to packages/shader-composer-noise/src/GerstnerWave.ts
index cb18849d7..0f722952d 100644
--- a/packages/shader-composer-toybox/src/noise/GerstnerWave.ts
+++ b/packages/shader-composer-noise/src/GerstnerWave.ts
@@ -1,4 +1,4 @@
-import { $, Input, Snippet, Vec3 } from "shader-composer"
+import { $, Input, Snippet, Vec3 } from "@shader-composer/core"
 
 /*
 With many thanks to glNoise:
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 bbc695aee..fec8be94a 100644
--- a/packages/shader-composer-toybox/src/noise/PSRDNoise.ts
+++ b/packages/shader-composer-noise/src/PSRDNoise.ts
@@ -9,7 +9,15 @@ Original license notices are included with the functions.
 
 */
 
-import { $, Float, glsl, Input, Snippet, Vec2, Vec3 } from "shader-composer"
+import {
+  $,
+  Float,
+  glsl,
+  Input,
+  Snippet,
+  Vec2,
+  Vec3
+} from "@shader-composer/core"
 
 export const psrdnoise2 = Snippet(
   (psrdnoise2) => glsl`
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-toybox/src/effects/Dissolve.ts b/packages/shader-composer-toybox/src/effects/Dissolve.ts
index 0cf0c2eaa..6aed10c28 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/noise"
 
 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/noise/package.json b/packages/shader-composer/noise/package.json
new file mode 100644
index 000000000..f709111e6
--- /dev/null
+++ b/packages/shader-composer/noise/package.json
@@ -0,0 +1,4 @@
+{
+  "main": "dist/shader-composer-noise.cjs.js",
+  "module": "dist/shader-composer-noise.esm.js"
+}
diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index f2a1a3a30..66d2fb759 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -17,17 +17,19 @@
     "entrypoints": [
       "index.ts",
       "fun.ts",
+      "noise.ts",
       "postprocessing.ts",
       "r3f.ts",
       "three.ts"
     ]
   },
   "files": [
+    "dist/**",
     "fun/**",
+    "noise/**",
     "postprocessing/**",
     "r3f/**",
     "three/**",
-    "dist/**",
     "LICENSE",
     "README.md"
   ],
@@ -46,6 +48,7 @@
   },
   "dependencies": {
     "@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/src/noise.ts b/packages/shader-composer/src/noise.ts
new file mode 100644
index 000000000..5242baf2d
--- /dev/null
+++ b/packages/shader-composer/src/noise.ts
@@ -0,0 +1 @@
+export * from "@shader-composer/noise"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0d051217c..e64a639b6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -571,11 +571,13 @@ importers:
   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
@@ -591,6 +593,12 @@ importers:
       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/core': workspace:^0.4.9

From b7abf9dec8bd29ee3ad28b56f54cd3ef4b9f514e Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:48:11 +0100
Subject: [PATCH 48/55] Directly export noise units

---
 apps/shader-composer-examples/src/examples/DiscoCube.tsx      | 2 +-
 apps/shader-composer-examples/src/examples/Fireball.tsx       | 2 +-
 apps/shader-composer-examples/src/examples/FloatingIsland.tsx | 2 +-
 apps/shader-composer-examples/src/examples/Planet.tsx         | 2 +-
 apps/shader-composer-examples/src/examples/StylizedWater.tsx  | 2 +-
 apps/shader-composer-examples/src/examples/Water.tsx          | 2 +-
 apps/vfx-composer-examples/src/examples/Asteroid.tsx          | 2 +-
 apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx   | 2 +-
 packages/material-composer/src/modules/SurfaceWobble.ts       | 2 +-
 packages/material-composer/src/units/experiments.ts           | 2 +-
 packages/shader-composer-toybox/src/effects/Dissolve.ts       | 2 +-
 packages/shader-composer/noise/package.json                   | 4 ----
 packages/shader-composer/package.json                         | 2 --
 packages/shader-composer/src/index.ts                         | 1 +
 packages/shader-composer/src/noise.ts                         | 1 -
 15 files changed, 12 insertions(+), 18 deletions(-)
 delete mode 100644 packages/shader-composer/noise/package.json
 delete mode 100644 packages/shader-composer/src/noise.ts

diff --git a/apps/shader-composer-examples/src/examples/DiscoCube.tsx b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
index d20b56e9d..a632477f8 100644
--- a/apps/shader-composer-examples/src/examples/DiscoCube.tsx
+++ b/apps/shader-composer-examples/src/examples/DiscoCube.tsx
@@ -15,7 +15,7 @@ import {
   VertexPosition
 } from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
-import { PSRDNoise3D } from "shader-composer/noise"
+import { PSRDNoise3D } from "shader-composer"
 import { Color, Mesh } from "three"
 
 export default function DiscoCube() {
diff --git a/apps/shader-composer-examples/src/examples/Fireball.tsx b/apps/shader-composer-examples/src/examples/Fireball.tsx
index 7222dc8aa..84fa6da5e 100644
--- a/apps/shader-composer-examples/src/examples/Fireball.tsx
+++ b/apps/shader-composer-examples/src/examples/Fireball.tsx
@@ -19,7 +19,7 @@ import {
   useShader,
   useUniformUnit
 } from "shader-composer/r3f"
-import { PSRDNoise3D, Turbulence3D } from "shader-composer/noise"
+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/FloatingIsland.tsx b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
index d974bfd04..9896a3c67 100644
--- a/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
+++ b/apps/shader-composer-examples/src/examples/FloatingIsland.tsx
@@ -22,7 +22,7 @@ import {
   Vec3
 } from "shader-composer"
 import { Displacement } from "shader-composer-toybox"
-import { PSRDNoise2D } from "shader-composer/noise"
+import { PSRDNoise2D } from "shader-composer"
 import {
   Shader,
   ShaderMaster,
diff --git a/apps/shader-composer-examples/src/examples/Planet.tsx b/apps/shader-composer-examples/src/examples/Planet.tsx
index a362c9f8c..5cad9fa9a 100644
--- a/apps/shader-composer-examples/src/examples/Planet.tsx
+++ b/apps/shader-composer-examples/src/examples/Planet.tsx
@@ -15,7 +15,7 @@ import {
   Vec3,
   VertexPosition
 } from "shader-composer"
-import { Simplex3DNoise } from "shader-composer/noise"
+import { Simplex3DNoise } from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import { Color } from "three"
 
diff --git a/apps/shader-composer-examples/src/examples/StylizedWater.tsx b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
index fd48e0e43..27e0164c2 100644
--- a/apps/shader-composer-examples/src/examples/StylizedWater.tsx
+++ b/apps/shader-composer-examples/src/examples/StylizedWater.tsx
@@ -29,7 +29,7 @@ import {
   useShader,
   useUniformUnit
 } from "shader-composer/r3f"
-import { PSRDNoise2D, PSRDNoise3D } from "shader-composer/noise"
+import { PSRDNoise2D, PSRDNoise3D } from "shader-composer"
 import { Color } from "three"
 
 export default function StylizedWater() {
diff --git a/apps/shader-composer-examples/src/examples/Water.tsx b/apps/shader-composer-examples/src/examples/Water.tsx
index c16a68c01..28cefe151 100644
--- a/apps/shader-composer-examples/src/examples/Water.tsx
+++ b/apps/shader-composer-examples/src/examples/Water.tsx
@@ -2,7 +2,7 @@ import { Environment } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { Add, GlobalTime, Input, Int, Mul, Remap, Vec2 } from "shader-composer"
 import { Displacement } from "shader-composer-toybox"
-import { FBMNoise, GerstnerWave } from "shader-composer/noise"
+import { FBMNoise, GerstnerWave } from "shader-composer"
 import { Shader, ShaderMaster, useShader } from "shader-composer/r3f"
 import { Color, DoubleSide } from "three"
 
diff --git a/apps/vfx-composer-examples/src/examples/Asteroid.tsx b/apps/vfx-composer-examples/src/examples/Asteroid.tsx
index 2cdace996..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/noise"
+import { PSRDNoise2D } from "shader-composer"
 import { Color, DoubleSide } from "three"
 import {
   Emitter,
diff --git a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
index 663e67e55..fc3c72680 100644
--- a/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
+++ b/apps/vfx-composer-examples/src/examples/units/NoiseMask.tsx
@@ -14,7 +14,7 @@ import {
   Sub,
   UV
 } from "shader-composer"
-import { PSRDNoise2D } from "shader-composer/noise"
+import { PSRDNoise2D } from "shader-composer"
 
 /* TODO: extract this into SC or SC-toybox or similar? */
 
diff --git a/packages/material-composer/src/modules/SurfaceWobble.ts b/packages/material-composer/src/modules/SurfaceWobble.ts
index 39b668f67..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/noise"
+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 ed77911a4..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 } from "shader-composer"
-import { Turbulence3D } from "shader-composer/noise"
+import { Turbulence3D } from "shader-composer"
 
 export type HeatOptions = {
   offset?: Input<"vec3" | "float">
diff --git a/packages/shader-composer-toybox/src/effects/Dissolve.ts b/packages/shader-composer-toybox/src/effects/Dissolve.ts
index 6aed10c28..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 "shader-composer/noise"
+import { Simplex3DNoise } from "shader-composer"
 
 export const Dissolve = (
   visibility: Input<"float"> = 0.5,
diff --git a/packages/shader-composer/noise/package.json b/packages/shader-composer/noise/package.json
deleted file mode 100644
index f709111e6..000000000
--- a/packages/shader-composer/noise/package.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  "main": "dist/shader-composer-noise.cjs.js",
-  "module": "dist/shader-composer-noise.esm.js"
-}
diff --git a/packages/shader-composer/package.json b/packages/shader-composer/package.json
index 66d2fb759..6bbb9e783 100644
--- a/packages/shader-composer/package.json
+++ b/packages/shader-composer/package.json
@@ -17,7 +17,6 @@
     "entrypoints": [
       "index.ts",
       "fun.ts",
-      "noise.ts",
       "postprocessing.ts",
       "r3f.ts",
       "three.ts"
@@ -26,7 +25,6 @@
   "files": [
     "dist/**",
     "fun/**",
-    "noise/**",
     "postprocessing/**",
     "r3f/**",
     "three/**",
diff --git a/packages/shader-composer/src/index.ts b/packages/shader-composer/src/index.ts
index cc5dd83a9..ce6a221e1 100644
--- a/packages/shader-composer/src/index.ts
+++ b/packages/shader-composer/src/index.ts
@@ -1 +1,2 @@
 export * from "@shader-composer/core"
+export * from "@shader-composer/noise"
diff --git a/packages/shader-composer/src/noise.ts b/packages/shader-composer/src/noise.ts
deleted file mode 100644
index 5242baf2d..000000000
--- a/packages/shader-composer/src/noise.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "@shader-composer/noise"

From 61015d82ef0595a8ce5b8ebaabbf4a58b74190c5 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:51:59 +0100
Subject: [PATCH 49/55] Auto-import three

---
 packages/shader-composer/src/r3f.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shader-composer/src/r3f.ts b/packages/shader-composer/src/r3f.ts
index 93c29330e..2cfc6f49a 100644
--- a/packages/shader-composer/src/r3f.ts
+++ b/packages/shader-composer/src/r3f.ts
@@ -1 +1,2 @@
 export * from "@shader-composer/r3f"
+import "@shader-composer/three"

From 25bde858ca7fdb9f97a3acb6666e43c0d3649118 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 18:57:03 +0100
Subject: [PATCH 50/55] Comment

---
 packages/shader-composer/src/r3f.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/shader-composer/src/r3f.ts b/packages/shader-composer/src/r3f.ts
index 2cfc6f49a..4543701c3 100644
--- a/packages/shader-composer/src/r3f.ts
+++ b/packages/shader-composer/src/r3f.ts
@@ -1,2 +1,4 @@
 export * from "@shader-composer/r3f"
+
+/* Make sure the Three.js initialization code is imported */
 import "@shader-composer/three"

From 1f2c243f20b3c0fdd6bafef1badc67980e2cd4a6 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 19:00:52 +0100
Subject: [PATCH 51/55] Come on, Vercel

---
 apps/vfx-composer-examples/src/examples/FogExample.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/vfx-composer-examples/src/examples/FogExample.tsx b/apps/vfx-composer-examples/src/examples/FogExample.tsx
index 9e0468f12..60492cb00 100644
--- a/apps/vfx-composer-examples/src/examples/FogExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx
@@ -13,6 +13,8 @@ import {
 } from "vfx-composer-r3f"
 import { smokeUrl } from "./textures"
 
+/* Deploy me! */
+
 export const FogExample = () => (
   <FlatStage>
     <Fog />

From 28eba54f5222c7a9e7b4cce67133ab5b46312eff Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Tue, 29 Nov 2022 19:02:30 +0100
Subject: [PATCH 52/55] Eh

---
 apps/vfx-composer-examples/src/examples/FogExample.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/apps/vfx-composer-examples/src/examples/FogExample.tsx b/apps/vfx-composer-examples/src/examples/FogExample.tsx
index 60492cb00..9e0468f12 100644
--- a/apps/vfx-composer-examples/src/examples/FogExample.tsx
+++ b/apps/vfx-composer-examples/src/examples/FogExample.tsx
@@ -13,8 +13,6 @@ import {
 } from "vfx-composer-r3f"
 import { smokeUrl } from "./textures"
 
-/* Deploy me! */
-
 export const FogExample = () => (
   <FlatStage>
     <Fog />

From 8a73cb53248d411fbdd0661e5c268c1cc7253737 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Wed, 30 Nov 2022 09:22:14 +0100
Subject: [PATCH 53/55] Add a README to toybox

---
 packages/shader-composer-toybox/README.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/shader-composer-toybox/README.md

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.

From 3c403c082bd63fdebe4762cb40e567f53c9f0f16 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Wed, 30 Nov 2022 09:39:17 +0100
Subject: [PATCH 54/55] Another test

---
 .../shader-composer-core/src/stdlib/values.test.ts    | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/shader-composer-core/src/stdlib/values.test.ts b/packages/shader-composer-core/src/stdlib/values.test.ts
index 43751a966..5730ea29e 100644
--- a/packages/shader-composer-core/src/stdlib/values.test.ts
+++ b/packages/shader-composer-core/src/stdlib/values.test.ts
@@ -1,5 +1,6 @@
+import { Vector4 } from "three"
 import { glslRepresentation } from "../glslRepresentation"
-import { float, mat2, swizzle, vec3, vec4, Int, Vec3 } from "./values"
+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", () => {
@@ -18,6 +19,14 @@ describe("vec3", () => {
     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({ x: 1, y: 0, z: 0 })
     expect(glslRepresentation(cast)).toEqual(`vec3(vec3(1.0, 0.0, 0.0))`)

From b98a31cf62fc7b14f904dba9eb2729dae19903ae Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Wed, 30 Nov 2022 09:48:14 +0100
Subject: [PATCH 55/55] changesets

---
 .changeset/curvy-llamas-pump.md   | 11 ++++++++++-
 .changeset/olive-coats-perform.md | 23 +++++++++++++++++++++++
 .changeset/spotty-students-lay.md | 10 ++++++++++
 .changeset/stale-moles-float.md   | 13 +++++++++++--
 .changeset/two-jokes-wait.md      | 19 +++++++++++++++++--
 5 files changed, 71 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/olive-coats-perform.md
 create mode 100644 .changeset/spotty-students-lay.md

diff --git a/.changeset/curvy-llamas-pump.md b/.changeset/curvy-llamas-pump.md
index c6c3ceb8f..8239c60c1 100644
--- a/.changeset/curvy-llamas-pump.md
+++ b/.changeset/curvy-llamas-pump.md
@@ -1,5 +1,14 @@
 ---
 "shader-composer": minor
+"@shader-composer/core": minor
 ---
 
-Siganture of $foo() changed, now just 1 argument, needs array, eg. `vec2([1, 2])`
+**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
index 3ffb668c2..bb7049301 100644
--- a/.changeset/stale-moles-float.md
+++ b/.changeset/stale-moles-float.md
@@ -1,5 +1,14 @@
 ---
-"shader-composer-toybox": patch
+"shader-composer": minor
+"@shader-composer/core": minor
+"@shader-composer/r3f": minor
+"@shader-composer/three": minor
 ---
 
-This package no longer requires `three` as a peer dependency.
+**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
index 67369c9c3..d2ea83ac8 100644
--- a/.changeset/two-jokes-wait.md
+++ b/.changeset/two-jokes-wait.md
@@ -1,7 +1,22 @@
 ---
 "shader-composer": minor
+"@shader-composer/core": minor
 ---
 
-You can now pass Vector-like objects into Vec3 et al
+**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.
 
-massive improvements to value typings
+```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.