From 455c06c95e98679dc1c7874b01e67af96e15e1d5 Mon Sep 17 00:00:00 2001
From: Hendrik Mans <hendrik@mans.de>
Date: Sat, 17 Sep 2022 12:28:12 +0200
Subject: [PATCH] Fix Fresnel (#277)

---
 .changeset/smart-garlics-explain.md           |  5 ++
 .../src/examples/Playground.tsx               | 75 ++++---------------
 .../shader-composer/src/stdlib/artistic.ts    |  5 +-
 3 files changed, 21 insertions(+), 64 deletions(-)
 create mode 100644 .changeset/smart-garlics-explain.md

diff --git a/.changeset/smart-garlics-explain.md b/.changeset/smart-garlics-explain.md
new file mode 100644
index 000000000..f2845ee00
--- /dev/null
+++ b/.changeset/smart-garlics-explain.md
@@ -0,0 +1,5 @@
+---
+"shader-composer": patch
+---
+
+`Fresnel` was returning wrong results for scaled geometries. This has now been fixed.
diff --git a/apps/material-composer-examples/src/examples/Playground.tsx b/apps/material-composer-examples/src/examples/Playground.tsx
index 513fc9b83..f6abbef99 100644
--- a/apps/material-composer-examples/src/examples/Playground.tsx
+++ b/apps/material-composer-examples/src/examples/Playground.tsx
@@ -1,74 +1,25 @@
-import { PatchedMaterialMaster } from "@material-composer/patch-material"
 import { useControls } from "leva"
-import { patched } from "material-composer-r3f"
-import { Lerp, NormalizePlusMinusOne, Sin, Time } from "shader-composer"
-import { useShader } from "shader-composer-r3f"
+import { composable, Layer, modules } from "material-composer-r3f"
+import { Fresnel } from "shader-composer"
 import { Color } from "three"
 
 export default function Playground() {
-  useControls({ foo: { value: 1, min: 0, max: 2 } })
-
-  const shader = useShader(() => {
-    return PatchedMaterialMaster({
-      color: Lerp(
-        new Color("white"),
-        new Color("blue"),
-        NormalizePlusMinusOne(Sin(Time()))
-      ),
-      metalness: 0.5,
-      roughness: 0.5
-    })
-  }, [])
-
-  const otherShader = useShader(() => {
-    return PatchedMaterialMaster({
-      color: Lerp(
-        new Color("red"),
-        new Color("green"),
-        NormalizePlusMinusOne(Sin(Time()))
-      ),
-      metalness: 0.5,
-      roughness: 0.5
-    })
-  }, [])
+  const controls = useControls({ scale: { value: 1, min: 0, max: 2 } })
 
   return (
     <group position-y={1.5}>
-      <mesh castShadow position-x={-1.5}>
-        <patched.meshStandardMaterial {...shader} />
-        <sphereGeometry />
-      </mesh>
+      <mesh scale={controls.scale}>
+        <sphereGeometry args={[1, 32, 32]} />
+
+        <composable.meshStandardMaterial>
+          <modules.Color color={new Color("hotpink")} />
+          {/* <modules.Fresnel /> */}
 
-      <mesh castShadow position-x={+1.5}>
-        <patched.meshStandardMaterial {...otherShader} />
-        <sphereGeometry />
+          <Layer opacity={Fresnel()}>
+            <modules.Color color={new Color("white")} />
+          </Layer>
+        </composable.meshStandardMaterial>
       </mesh>
     </group>
   )
 }
-
-// import { useControls } from "leva"
-// import { composable, modules } from "material-composer-r3f"
-// import { ModuleRegistrationContext } from "material-composer-r3f/src/moduleRegistration"
-
-// export default function Playground() {
-//   useControls({ foo: { value: 1, min: 0, max: 2 } })
-
-//   return (
-//     <group position-y={1.5}>
-//       <mesh castShadow position-x={-1.5}>
-//         <composable.meshStandardMaterial>
-//           <modules.Color color="yellow" />
-//         </composable.meshStandardMaterial>
-//         <sphereGeometry />
-//       </mesh>
-
-//       <mesh castShadow position-x={+1.5}>
-//         <composable.meshStandardMaterial>
-//           <modules.Color color="red" />
-//         </composable.meshStandardMaterial>
-//         <sphereGeometry />
-//       </mesh>
-//     </group>
-//   )
-// }
diff --git a/packages/shader-composer/src/stdlib/artistic.ts b/packages/shader-composer/src/stdlib/artistic.ts
index 9f64a7ef8..46bda441f 100644
--- a/packages/shader-composer/src/stdlib/artistic.ts
+++ b/packages/shader-composer/src/stdlib/artistic.ts
@@ -1,9 +1,9 @@
 import { pipe } from "fp-ts/function"
 import { GLSLType, Input, Unit } from "../units"
-import { VertexNormal, ViewDirection } from "./variables"
 import { Abs, Add, Lerp, Mul, Pow, Saturate, Smoothstep } from "./math"
 import { Float } from "./values"
-import { Dot } from "./vectors"
+import { VertexNormal, ViewDirection } from "./variables"
+import { Dot, Normalize } from "./vectors"
 
 export type FresnelProps = {
   normal?: Input<"vec3">
@@ -34,6 +34,7 @@ export const Fresnel = ({
   Float(
     pipe(
       normal,
+      (v) => Normalize(v),
       (v) => Dot(ViewDirection, v),
       (v) => Add(factor, v),
       (v) => Abs(v),