Remove Custom.* proxy (#232)

.changeset/empty-games-rescue.md

@@ -0,0 +1,5 @@
+---
+"@material-composer/patch-material": patch
+---
+
+Now also supports the `patched_Emissive` color value (`emissiveColor` in the `PatchedMaterialMaster`.)

.changeset/rare-walls-notice.md

@@ -0,0 +1,5 @@
+---
+"shader-composer-r3f": minor
+---
+
+**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`.

apps/shader-composer-examples/package.json

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@hmans/r3f-animate": "^0.0.4",
+    "@material-composer/patch-material": "workspace:^0.1.1",
+    "@material-composer/patched": "workspace:^0.1.1",
     "@react-three/drei": "^9.25.3",
     "@react-three/fiber": "^8.6.2",
     "fp-ts": "^2.12.3",
@@ -20,8 +22,7 @@
     "shader-composer": "^0.3.0",
     "shader-composer-r3f": "^0.2.0",
     "shader-composer-toybox": "^0.1.0",
-    "three": "^0.143.0",
-    "three-custom-shader-material": "^4.0.0"
+    "three": "^0.143.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.18",

apps/shader-composer-examples/src/examples/DiscoCube.tsx

@@ -1,10 +1,11 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { Environment } from "@react-three/drei"
 import { useFrame } from "@react-three/fiber"
 import { pipe } from "fp-ts/function"
 import { useRef } from "react"
 import {
   Add,
-  CustomShaderMaterialMaster,
   Div,
   Floor,
   Fract,
@@ -13,10 +14,9 @@ import {
   NormalizePlusMinusOne,
   OneMinus,
   Sub,
-  Time,
   VertexPosition
 } from "shader-composer"
-import { Custom, useShader } from "shader-composer-r3f"
+import { useShader } from "shader-composer-r3f"
 import { PSRDNoise3D } from "shader-composer-toybox"
 import { Color, Mesh } from "three"
 
@@ -39,8 +39,8 @@ export default function DiscoCube() {
       (v) => Fract(v)
     )
 
-    return CustomShaderMaterialMaster({
-      diffuseColor: Mul(new Color("#abf"), noise),
+    return PatchedMaterialMaster({
+      color: Mul(new Color("#abf"), noise),
       metalness: noise,
       roughness: OneMinus(noise)
     })
@@ -57,7 +57,7 @@ export default function DiscoCube() {
       <Environment preset="city" />
       <mesh ref={mesh}>
         <boxGeometry args={[1.5, 1.5, 1.5]} />
-        <Custom.MeshPhysicalMaterial clearcoat={0.2} {...shader} />
+        <patched.meshPhysicalMaterial clearcoat={0.2} {...shader} />
       </mesh>
     </>
   )

apps/shader-composer-examples/src/examples/Dissolve.tsx

@@ -1,7 +1,9 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
-import { CustomShaderMaterialMaster, Mix } from "shader-composer"
-import { Custom, useShader, useUniformUnit } from "shader-composer-r3f"
+import { Mix } from "shader-composer"
+import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Dissolve } from "shader-composer-toybox"
 import { Color, DoubleSide } from "three"
 
@@ -39,10 +41,8 @@ export default function DissolveExample() {
       dissolveEdgeThickness
     )
 
-    return CustomShaderMaterialMaster({
-      diffuseColor: pipe(sphereColor, (v) =>
-        Mix(v, dissolveEdgeColor, dissolve.edge)
-      ),
+    return PatchedMaterialMaster({
+      color: pipe(sphereColor, (v) => Mix(v, dissolveEdgeColor, dissolve.edge)),
       alpha: dissolve.alpha
     })
   }, [])
@@ -51,7 +51,7 @@ export default function DissolveExample() {
   return (
     <mesh>
       <icosahedronGeometry args={[1, 10]} />
-      <Custom.MeshPhysicalMaterial
+      <patched.meshPhysicalMaterial
         {...shader}
         transparent
         side={DoubleSide}

apps/shader-composer-examples/src/examples/Fireball.tsx

@@ -1,9 +1,10 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { useTexture } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
 import {
   Add,
-  CustomShaderMaterialMaster,
   GlobalTime,
   Mul,
   NormalizePlusMinusOne,
@@ -14,7 +15,7 @@ import {
   VertexNormal,
   VertexPosition
 } from "shader-composer"
-import { Custom, useShader, useUniformUnit } from "shader-composer-r3f"
+import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { PSRDNoise3D, Turbulence3D } from "shader-composer-toybox"
 import textureUrl from "./textures/explosion.png"
 
@@ -63,7 +64,7 @@ export default function Fireball() {
       (v) => Texture2D(sampler2D, vec2(0, v)).color
     )
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       /* Modify the vertex position based on the displacement value. */
       position: pipe(
         displacement,
@@ -72,15 +73,15 @@ export default function Fireball() {
       ),
 
       /* Apply color values. */
-      diffuseColor: color,
+      color,
       emissiveColor: Mul(color, 1.5)
     })
   }, [])
 
   return (
     <mesh>
       <icosahedronGeometry args={[1, 5]} />
-      <Custom.MeshStandardMaterial {...shader} />
+      <patched.meshStandardMaterial {...shader} />
     </mesh>
   )
 }

apps/shader-composer-examples/src/examples/Flag.tsx

@@ -1,18 +1,17 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { useTexture } from "@react-three/drei"
 import {
   Add,
-  CustomShaderMaterialMaster,
   GlobalTime,
   Mul,
   Sin,
-  Time,
   UV,
   vec3,
   VertexPosition
 } from "shader-composer"
-import { Custom, useShader } from "shader-composer-r3f"
-import { DoubleSide, MeshStandardMaterial } from "three"
-import CustomShaderMaterial from "three-custom-shader-material"
+import { useShader } from "shader-composer-r3f"
+import { DoubleSide } from "three"
 import textureUrl from "./textures/shader-composer-logo.jpg"
 
 export default function Flag() {
@@ -21,7 +20,7 @@ export default function Flag() {
   const shader = useShader(() => {
     const time = GlobalTime
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       position: vec3(
         VertexPosition.x,
         VertexPosition.y,
@@ -33,7 +32,7 @@ export default function Flag() {
   return (
     <mesh>
       <planeGeometry args={[4, 2, 40, 20]} />
-      <Custom.MeshStandardMaterial
+      <patched.meshStandardMaterial
         map={texture}
         side={DoubleSide}
         {...shader}

apps/shader-composer-examples/src/examples/FloatingIsland.tsx

@@ -1,10 +1,11 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { Environment, Float as Floating } from "@react-three/drei"
 import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
 import { FlatStage } from "r3f-stage"
 import {
   Add,
-  CustomShaderMaterialMaster,
   Float,
   GreaterOrEqual,
   If,
@@ -23,9 +24,9 @@ import {
   Vec3,
   vec3
 } from "shader-composer"
-import { Custom, useShader, useUniformUnit } from "shader-composer-r3f"
+import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Displacement, PSRDNoise2D } from "shader-composer-toybox"
-import { Color, Vector2 } from "three"
+import { Color, RGBADepthPacking, Vector2 } from "three"
 
 export default function FloatingIslandExample() {
   return (
@@ -100,10 +101,10 @@ const FloatingIsland = () => {
     recalculating the position for every fragment. */
     const position = varying(Displacement(displace).position)
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       position,
 
-      diffuseColor: pipe(Vec3(new Color("#1982c4")), (v) =>
+      color: pipe(Vec3(new Color("#1982c4")), (v) =>
         pipe(
           v,
           (v) => Mix(new Color("#252422"), v, Step(-0.2, position.y)),
@@ -120,17 +121,19 @@ const FloatingIsland = () => {
     <mesh castShadow receiveShadow>
       <dodecahedronGeometry args={[2, 5]} />
 
-      <Custom.MeshStandardMaterial
+      <patched.meshStandardMaterial
         {...shader}
         flatShading
         metalness={0.5}
         roughness={0.5}
       />
 
       {/* We don't need the fragment shader in the depth material. */}
-      <Custom.MeshDepthMaterial
+      <patched.meshDepthMaterial
         vertexShader={shader.vertexShader}
         uniforms={shader.uniforms}
+        attach="customDepthMaterial"
+        depthPacking={RGBADepthPacking}
       />
     </mesh>
   )

apps/shader-composer-examples/src/examples/ForceField.tsx

@@ -1,10 +1,12 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { Float } from "@react-three/drei"
 import { MeshProps } from "@react-three/fiber"
+import { pipe } from "fp-ts/function"
 import { useControls } from "leva"
 import { Layers, useRenderPipeline } from "r3f-stage"
 import {
   Add,
-  CustomShaderMaterialMaster,
   Fresnel,
   GlobalTime,
   Mul,
@@ -16,13 +18,11 @@ import {
   Sub,
   Texture2D,
   TilingUV,
-  Time,
   UV,
   vec2,
   VertexPosition
 } from "shader-composer"
-import { pipe } from "fp-ts/function"
-import { Custom, useShader, useUniformUnit } from "shader-composer-r3f"
+import { useShader, useUniformUnit } from "shader-composer-r3f"
 import { Color } from "three"
 import { useRepeatingTexture } from "./helpers"
 
@@ -66,7 +66,7 @@ export default function ForceField() {
       (v) => Smoothstep(0, 1, v)
     )
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       emissiveColor: Mul(color, intensity),
 
       alpha: pipe(
@@ -85,7 +85,7 @@ export default function ForceField() {
       <Float floatIntensity={1} speed={2}>
         <mesh layers-mask={Layers.TransparentFX}>
           <icosahedronGeometry args={[1.3, 8]} />
-          <Custom.MeshStandardMaterial
+          <patched.meshStandardMaterial
             transparent
             depthWrite={false}
             {...shader}

apps/shader-composer-examples/src/examples/Planet.tsx

@@ -1,8 +1,9 @@
+import { PatchedMaterialMaster } from "@material-composer/patch-material"
+import { patched } from "@material-composer/patched"
 import { pipe } from "fp-ts/function"
 import {
   Add,
   Clamp,
-  CustomShaderMaterialMaster,
   Float,
   Fresnel,
   GlobalTime,
@@ -17,7 +18,7 @@ import {
   Vec3,
   VertexPosition
 } from "shader-composer"
-import { Custom, useShader } from "shader-composer-r3f"
+import { useShader } from "shader-composer-r3f"
 import { Simplex3DNoise } from "shader-composer-toybox"
 import { Color } from "three"
 
@@ -59,14 +60,14 @@ function Planet() {
       (color: Color, height: Input<"float">) => (v: Input<"vec3">) =>
         Mix(v, color, Step(height, totalHeight))
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       position: pipe(
         totalHeight,
         (v) => Add(1.0, v),
         (v) => Mul(VertexPosition, v)
       ),
 
-      diffuseColor: pipe(
+      color: pipe(
         Vec3(new Color("#336")),
         applyColor(new Color("yellow"), water),
         applyColor(new Color("#484"), 0.04),
@@ -81,7 +82,7 @@ function Planet() {
   return (
     <mesh>
       <icosahedronGeometry args={[1, 12]} />
-      <Custom.MeshStandardMaterial {...shader} />
+      <patched.meshStandardMaterial {...shader} />
     </mesh>
   )
 }
@@ -108,7 +109,7 @@ function Atmosphere() {
 
     const fresnel = Mul(Fresnel(), 0.3)
 
-    return CustomShaderMaterialMaster({
+    return PatchedMaterialMaster({
       alpha: pipe(
         Float(atmosphereDensity),
         (v) => Add(v, clouds),
@@ -120,7 +121,7 @@ function Atmosphere() {
   return (
     <mesh>
       <icosahedronGeometry args={[1.15, 12]} />
-      <Custom.MeshStandardMaterial color="white" {...shader} transparent />
+      <patched.meshStandardMaterial color="white" {...shader} transparent />
     </mesh>
   )
 }