Fix Fresnel (#277)

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

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

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