Merge pull request 'Merge e_bike + gps into develop' (#7) from feat/gps into develop

Reviewed-on: #7

src/components/ebike/Ebike.tsx

@@ -243,7 +243,7 @@ export function Ebike({ position }: EbikeProps): React.JSX.Element {
             height={0.8}
             startPos={gpsStartPos}
             destPos={destPos}
-            mapImageUrl="/map_background.png"
+            mapImageUrl="/assets/gps/map_background.png"
             worldBounds={{
               minX: -166,
               maxX: 163,

src/components/three/debug/NetTest.tsx

@@ -0,0 +1,25 @@
+import { useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import * as THREE from "three";
+import { createNetShader } from "@/shaders/NetShader";
+
+export function NetTest(): React.JSX.Element {
+  const materialRef = useRef<THREE.ShaderMaterial>(null);
+
+  useFrame((_, delta) => {
+    if (materialRef.current) {
+      materialRef.current.uniforms.uTime.value += delta;
+    }
+  });
+
+  return (
+    <mesh position={[0, 2, -3]} rotation={[0, 0, 0]}>
+      <planeGeometry args={[2, 2, 1, 1]} />
+      <primitive
+        object={createNetShader()}
+        ref={materialRef}
+        attach="material"
+      />
+    </mesh>
+  );
+}

src/pages/backgroundmap/page.tsx

@@ -101,7 +101,7 @@ function CameraManager({
       const dataUrl = gl.domElement.toDataURL("image/png");
       const a = document.createElement("a");
       a.href = dataUrl;
-      a.download = "map_background.png";
+      a.download = "/assets/gps/map_background.png";
       a.click();
     };
     return () => { delete (window as any).downloadMapScreenshot; };

src/shaders/NetShader.ts

@@ -0,0 +1,66 @@
+import { ShaderMaterial, Color, PlaneGeometry, Mesh, Vector2 } from "three";
+
+export const createNetShader = (): ShaderMaterial => {
+  return new ShaderMaterial({
+    uniforms: {
+      uTime: { value: 0 },
+      uGridScale: { value: 15.0 },
+      uPincushionStrength: { value: 0.4 },
+      uBloomIntensity: { value: 0.3 },
+      uGridThickness: { value: 0.02 },
+    },
+    vertexShader: `
+      varying vec2 vUv;
+      
+      void main() {
+        vUv = uv;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform float uTime;
+      uniform float uGridScale;
+      uniform float uPincushionStrength;
+      uniform float uBloomIntensity;
+      uniform float uGridThickness;
+      
+      varying vec2 vUv;
+      
+      vec2 applyPincushion(vec2 uv, float strength) {
+        vec2 center = uv - 0.5;
+        float dist = length(center);
+        float distortion = 1.0 + dist * dist * strength;
+        return center * distortion + 0.5;
+      }
+      
+      float grid(vec2 uv, float scale, float thickness) {
+        vec2 gridUV = fract(uv * scale);
+        float lineX = smoothstep(thickness, thickness + 0.01, gridUV.x) 
+                    * smoothstep(1.0 - thickness, 1.0 - thickness - 0.01, gridUV.x);
+        float lineY = smoothstep(thickness, thickness + 0.01, gridUV.y) 
+                    * smoothstep(1.0 - thickness, 1.0 - thickness - 0.01, gridUV.y);
+        return lineX + lineY;
+      }
+      
+      void main() {
+        vec2 uv = applyPincushion(vUv, uPincushionStrength);
+        
+        float gridPattern = grid(uv, uGridScale, uGridThickness);
+        
+        vec3 gridColor = vec3(1.0, 0.4, 0.7);
+        vec3 bgColor = vec3(0.05, 0.02, 0.05);
+        
+        float bloom = gridPattern * uBloomIntensity;
+        vec3 col = mix(bgColor, gridColor + bloom, gridPattern);
+        
+        gl_FragColor = vec4(col, 1.0);
+      }
+    `,
+  });
+};
+
+export const createNetMesh = (): Mesh => {
+  const geometry = new PlaneGeometry(2, 2);
+  const material = createNetShader();
+  return new Mesh(geometry, material);
+};

src/shaders/UnicolorShader.ts

@@ -0,0 +1,34 @@
+import { ShaderMaterial, Color } from "three";
+
+export const createUnicolorShader = (
+  color: Color | string | number,
+): ShaderMaterial => {
+  return new ShaderMaterial({
+    uniforms: {
+      uColor: { value: color instanceof Color ? color : new Color(color) },
+    },
+    vertexShader: `
+      varying vec3 vNormal;
+      varying vec3 vPosition;
+
+      void main() {
+        vNormal = normalize(normalMatrix * normal);
+        vPosition = (modelViewMatrix * vec4(position, 1.0)).xyz;
+        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }
+    `,
+    fragmentShader: `
+      uniform vec3 uColor;
+      varying vec3 vNormal;
+      varying vec3 vPosition;
+
+      void main() {
+        vec3 lightDir = normalize(vec3(1.0, 1.0, 1.0));
+        float diffuse = max(dot(vNormal, lightDir), 0.0);
+        float ambient = 0.3;
+        vec3 finalColor = uColor * (ambient + diffuse * 0.7);
+        gl_FragColor = vec4(finalColor, 1.0);
+      }
+    `,
+  });
+};

src/world/World.tsx

@@ -28,6 +28,7 @@ import { GameMap } from "@/world/GameMap";
 import { GameStageContent } from "@/world/GameStageContent";
 import { Player } from "@/world/player/Player";
 import { TestMap } from "@/world/debug/TestMap";
+import { NetTest } from "@/components/three/debug/NetTest";
 import type { SceneLoadingChangeHandler } from "@/types/world/sceneLoading";
 import { EbikeGPSMap } from "@/components/ebike/EbikeGPSMap";
 

src/world/debug/TestMap.tsx

@@ -259,7 +259,7 @@ export function TestMap({ onOctreeReady }: TestMapProps): React.JSX.Element {
             height={4}
             startPos={{ x: 10, y: 0, z: -10 }}
             destPos={{ x: -40, y: 0, z: 30 }}
-            mapImageUrl="/map_background.png"
+            mapImageUrl="/assets/gps/map_background.png"
             worldBounds={{
               "minX": -166,
               "maxX": 163,