[piece-shadow] add shaders to the shadow

resources/js/Game/Board/Board.tsx

@@ -10,7 +10,7 @@ export const Board = () => {
     const setBoardRef = useBoardState(state => state.setBoardRef);
     return (
         <>
-            <Grid args={[gridSize, gridSize, 1]} position-y={0.06} sectionSize={blockSize} sectionColor={0x00ff00} />
+            {/* <Grid args={[gridSize, gridSize, 1]} position-y={0.06} sectionSize={blockSize} sectionColor={0x00ff00} /> */}
             <mesh visible={true} ref={ref => setBoardRef(ref)} scale={[gridSize, 1, gridSize]} >
                 <boxGeometry args={[1, 0.1, 1]} />
                 <meshBasicMaterial color={0xffffff} />

resources/js/Game/Board/Piece/PieceShadow.tsx

@@ -7,13 +7,13 @@ import vertexShader from '../../../../shaders/piece_shadow/vertexShader.glsl'
 import fragmentShader from '../../../../shaders/piece_shadow/fragmentShader.glsl'
 import { extend } from "@react-three/fiber";
 
-const successColor = new THREE.Color(0x00ff00);
-const errorColor = new THREE.Color(0xff0000);
+const successColor = new THREE.Color(0x86efac);
+const errorColor = new THREE.Color(0xfca5a5);
 const geometry = new THREE.BoxGeometry(0.5,0.01,0.5);
 
 const BlockShadowMaterial = shaderMaterial(
     {
-      uColor: new THREE.Color(0x000000),
+      uColor: new THREE.Color(0xff0000),
     },
     vertexShader,
     fragmentShader,
@@ -80,7 +80,7 @@ export const PieceShadow = React.forwardRef<THREE.Group, Props>(({isDragging, bl
                 block_positions.map((position, index) => {
                     return (
                         <mesh visible={false} key={index} position={[position.x * blockSize, 0, position.y * blockSize]} geometry={geometry}>
-                            <blockShadowMaterial ref={materialRef => !shadowMaterialRef.current.some(m => m === materialRef) && materialRef && shadowMaterialRef.current.push(materialRef)} />
+                            <blockShadowMaterial transparent depthWrite={false} ref={materialRef => !shadowMaterialRef.current.some(m => m === materialRef) && materialRef && shadowMaterialRef.current.push(materialRef)} />
                         </mesh>
                     )
                 })

resources/js/Game/Experience.tsx

@@ -18,7 +18,7 @@ export const Experience = memo(
                     position: [14.5, 3, 10],
                 }}>
                     <Perf position="top-left"/>
-                    <OrbitControls makeDefault/>
+                    <OrbitControls makeDefault enableDamping/>
                     <color attach={'background'} args={['#535353']} />
                     <GameMap/>
                 </Canvas>

resources/shaders/piece_shadow/fragmentShader.glsl

@@ -1,5 +1,9 @@
 
 uniform vec3 uColor;
+varying vec2 vUv;
 void main(){
-    gl_FragColor = vec4(uColor, 1.0);
+
+    float strength = 1.0;
+
+    gl_FragColor = vec4(uColor, strength);
 }

resources/shaders/piece_shadow/vertexShader.glsl

@@ -1,10 +1,12 @@
 
-
+varying vec2 vUv;
 void main(){
     vec4 modelPosition = modelMatrix * vec4( position, 1.0 );
 
     vec4 viewPosition = viewMatrix * modelPosition;
     vec4 projectedPosition = projectionMatrix * viewPosition;
 
     gl_Position = projectedPosition;
+
+    vUv = uv;
 }