diff --git a/example/Experience.jsx b/example/Experience.jsx
index 8ffebf5..499fdcd 100644
--- a/example/Experience.jsx
+++ b/example/Experience.jsx
@@ -57,13 +57,13 @@ export default function Experience() {
<>
-
+ /> */}
diff --git a/example/Floor.jsx b/example/Floor.jsx
index d5e679c..d77c6d9 100644
--- a/example/Floor.jsx
+++ b/example/Floor.jsx
@@ -1,11 +1,179 @@
import { RigidBody } from "@react-three/rapier";
+import { ShaderMaterial, Color } from "three";
+import { folder, useControls } from 'leva'
export default function Floor() {
+
+ //leva controls
+ const debug = useControls('Floor Shader', {
+
+ Sizes: folder({
+ floorSize: {
+ value: 2000,
+ min: 1,
+ max: 2000,
+ step: 1,
+ },
+ minorGridSize: {
+ value: 1000,
+ min: 1,
+ max: 4000,
+ step: 2,
+ },
+ majorGridSize: {
+ value: 100,
+ min: 1,
+ max: 1000,
+ step: 2,
+ },
+ }),
+
+ 'Grid Thickness': folder({
+ minorGridlineThickness: {
+ value: 1.45,
+ min: 0.5,
+ max: 5,
+ step: 0.001,
+ },
+ majorGridlineThickness: {
+ value: 1,
+ min: 0.5,
+ max: 5,
+ step: 0.001,
+ },
+ axisThickness: {
+ value: 0.5,
+ min: 0.1,
+ max: 1,
+ step: 0.001,
+ },
+ }),
+
+ 'Grid Colors': folder({
+ minorGridColor: '#05bdb4',
+ majorGridColor: '#0aa7b3ff',
+ axisGridColor: '#ffffffff',
+ }),
+
+ 'Light colors': folder({
+ lightColor: '#e5e8e9',
+ }),
+
+ })
+
+ const shaderMaterial = new ShaderMaterial({
+ vertexShader: `
+ varying vec2 vUv;
+
+ void main() {
+ vUv = uv;
+ gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+ }
+ `,
+ fragmentShader:
+ `
+ //precision
+ precision highp float;
+
+ varying vec2 vUv;
+
+ //uniforms
+ uniform float u_minorGridlineThickness;
+ uniform float u_majorGridlineThickness;
+ uniform float u_axisThickness;
+ uniform float u_minorGridSize;
+ uniform float u_majorGridSize;
+ uniform vec3 u_lightColor;
+ uniform vec3 u_minorGridColor;
+ uniform vec3 u_majorGridColor;
+ uniform vec3 u_axisGridColor;
+
+ float pristineGrid(vec2 uv, vec2 lineWidth) {
+ //calculate derivatives for anti-aliasing
+ vec2 ddx = dFdx(uv);
+ vec2 ddy = dFdy(uv);
+ vec2 uvDeriv = vec2(length(vec2(ddx.x, ddy.x)), length(vec2(ddx.y, ddy.y)));
+ bvec2 invertLine = bvec2(lineWidth.x > 0.5, lineWidth.y > 0.5);
+ vec2 targetWidth = vec2(
+ invertLine.x
+ ? 1.0 - lineWidth.x
+ : lineWidth.x,
+ invertLine.y
+ ? 1.0 - lineWidth.y
+ : lineWidth.y
+ );
+ vec2 drawWidth = clamp(targetWidth, uvDeriv, vec2(0.5));
+ vec2 lineAA = uvDeriv * 1.5;
+ vec2 gridUV = abs(fract(uv) * 2.0 - 1.0);
+
+ gridUV.x = invertLine.x ? gridUV.x : 1.0 - gridUV.x;
+ gridUV.y = invertLine.y ? gridUV.y : 1.0 - gridUV.y;
+ vec2 grid2 = smoothstep(drawWidth + lineAA, drawWidth - lineAA, gridUV);
+
+ grid2 *= clamp(targetWidth / drawWidth, 0.0, 1.0);
+ grid2 = mix(grid2, targetWidth, clamp(uvDeriv * 2.0 - 1.0, 0.0, 1.0));
+ grid2.x = invertLine.x ? 1.0 - grid2.x : grid2.x;
+ grid2.y = invertLine.y ? 1.0 - grid2.y : grid2.y;
+
+ return mix(grid2.x, 1.0, grid2.y);
+ }
+
+ void main() {
+ vec2 coords = vUv;
+ vec2 gradientCoords = coords - 0.5;
+ vec2 minorGridCoords = coords;
+ vec2 majorGridCoords = coords;
+
+ vec2 axisCoords = coords;
+
+ minorGridCoords *= u_minorGridSize;
+ majorGridCoords *= u_majorGridSize;
+ vec3 color;
+
+
+ vec3 minorGridColor = u_minorGridColor;
+ vec3 majorGridColor = u_majorGridColor;
+ vec3 axisGridColor = u_axisGridColor;
+
+
+ //light gradient
+ vec3 lightColor = u_lightColor;
+
+ float minorGrid = pristineGrid(minorGridCoords, vec2(u_minorGridlineThickness / 100.0));
+
+ float majorGrid = pristineGrid(majorGridCoords, vec2(u_majorGridlineThickness / 100.0));
+
+ float axisGrid = pristineGrid(axisCoords * 2.0, vec2(u_axisThickness / 1000.0));
+
+ color = lightColor;
+
+ color = mix(color, minorGridColor, minorGrid);
+
+ color = mix(color, majorGridColor, majorGrid);
+
+ color = mix(color, axisGridColor, axisGrid);
+
+ gl_FragColor = vec4(color, 1.0);
+ }
+ `
+ ,
+ uniforms: {
+ u_minorGridlineThickness: { value: debug.minorGridlineThickness },
+ u_majorGridlineThickness: { value: debug.majorGridlineThickness },
+ u_axisThickness: { value: debug.axisThickness },
+ u_minorGridSize: { value: debug.minorGridSize },
+ u_majorGridSize: { value: debug.majorGridSize },
+ u_lightColor: { value: new Color(debug.lightColor) },
+ u_minorGridColor: { value: new Color(debug.minorGridColor) },
+ u_majorGridColor: { value: new Color(debug.majorGridColor) },
+ u_axisGridColor: { value: new Color(debug.axisGridColor) },
+ },
+ })
+
return (
-
+
-
);