@plasius/renderer 1.0.0

package/src/landscape.tsx

@@ -0,0 +1,321 @@
+import * as THREE from "three";
+import { useMemo } from "react";
+import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { RigidBody } from "@react-three/rapier";
+
+const HEX_RADIUS = 66;
+//const TILE_RESOLUTION = 2048;
+const AREA_WIDTH = 2000;
+const AREA_HEIGHT = 2000;
+
+// Generate a single high-resolution hexagon as BufferGeometry
+function generateHexTile(radius: number): THREE.BufferGeometry {
+  const geom = new THREE.BufferGeometry();
+  const vertices: number[] = [];
+  const indices: number[] = [];
+
+  const segments = 30; // More segments for smoother curve
+  const angleStep = (Math.PI * 2) / segments;
+
+  // Center point
+  vertices.push(0, 0, 0);
+
+  // Outer ring vertices
+  for (let i = 0; i <= segments; i++) {
+    const angle = angleStep * i;
+    const x = radius * Math.cos(angle);
+    const z = -radius * Math.sin(angle); // flip Z axis for pointy top upward
+    vertices.push(x, 0, z);
+  }
+
+  // Create triangle fan indices
+  for (let i = 1; i <= segments; i++) {
+    indices.push(0, i, i + 1);
+  }
+
+  geom.setAttribute("position", new THREE.Float32BufferAttribute(vertices, 3));
+  geom.setIndex(indices);
+  geom.computeVertexNormals();
+  return geom;
+}
+
+// Axial to world coordinates (pointy-topped hex)
+function axialToWorld(q: number, r: number, radius: number): [number, number] {
+  const x = ((radius * 3) / 2) * q;
+  const z = radius * Math.sqrt(3) * (r + q / 2);
+  return [x, z];
+}
+
+// Simple seeded noise for per-tile deformation
+function seededNoise(x: number, z: number, seed = 42): number {
+  const s = Math.sin(x * 12.9898 + z * 78.233 + seed) * 43758.5453;
+  return (s - Math.floor(s)) * 2 - 1;
+}
+
+// Deform only the interior (non-edge) vertices of a hex tile
+function deformHexInterior(
+  geom: THREE.BufferGeometry,
+  radius: number,
+  seed = 42
+): void {
+  const pos = geom.attributes.position as THREE.BufferAttribute;
+  const vertexCount = pos.count;
+
+  for (let i = 0; i < vertexCount; i++) {
+    const x = pos.getX(i);
+    const z = pos.getZ(i);
+    const r = Math.sqrt(x * x + z * z);
+
+    // Only deform vertices inside the hex edge (leave edge vertices flat)
+    if (r < radius * 0.98) {
+      // Blend multiple nearby noise samples for smoother curvature
+      const n = (dx: number, dz: number) => seededNoise(x + dx, z + dz, seed);
+      const smoothY =
+        (n(0, 0) * 4 +
+          n(-1, 0) +
+          n(1, 0) +
+          n(0, -1) +
+          n(0, 1) +
+          n(-1, -1) +
+          n(1, 1) +
+          n(-1, 1) +
+          n(1, -1)) /
+        12;
+      pos.setY(i, smoothY);
+    }
+  }
+
+  pos.needsUpdate = true;
+  geom.computeVertexNormals();
+}
+
+function generateHexDepthMap(
+  cols: number,
+  rows: number,
+  seed = 42
+): number[][] {
+  const map: number[][] = [];
+  for (let q = 0; q < cols; q++) {
+    const row: number[] = [];
+    for (let r = 0; r < rows; r++) {
+      const value = Math.sin((q + seed) * 0.3) * Math.cos((r + seed) * 0.3);
+      row.push(value);
+    }
+    map.push(row);
+  }
+  return map;
+}
+
+export function Landscape() {
+  const geometry = useMemo(() => {
+    const radius = HEX_RADIUS;
+    const tiles: THREE.BufferGeometry[] = [];
+
+    const spacingX = (3 / 2) * radius;
+    const spacingZ = Math.sqrt(3) * radius;
+    const cols = Math.ceil(AREA_WIDTH / spacingX);
+    const rows = Math.ceil(AREA_HEIGHT / spacingZ);
+
+    const offset = Math.floor(cols / 2);
+    const depthMap = generateHexDepthMap(cols, rows);
+    const elevationScale = 20;
+
+    const baseHex = generateHexTile(radius);
+
+    for (let q = -Math.floor(cols / 2); q < Math.ceil(cols / 2); q++) {
+      for (let r = -Math.floor(rows / 2); r < Math.ceil(rows / 2); r++) {
+        const hex = baseHex.clone();
+
+        const dq = q + offset;
+        const dr = r + offset;
+        const elevation = depthMap?.[dq]?.[dr] ?? 0;
+
+        deformHexInterior(
+          hex,
+          radius,
+          42 + q * 1000 + r + Math.floor(elevation * 100)
+        );
+
+        const [x, z] = axialToWorld(q, r, radius);
+        hex.translate(x, elevation * elevationScale, z);
+
+        tiles.push(hex);
+      }
+    }
+
+    const merged = BufferGeometryUtils.mergeGeometries(tiles, false);
+    // Remove normals before merging vertices to ensure proper welding
+    if (merged.attributes.normal) {
+      merged.deleteAttribute("normal");
+    }
+    const stitched = BufferGeometryUtils.mergeVertices(merged, 1e-2);
+    stitched.computeVertexNormals();
+    return stitched;
+  }, []);
+
+  return (
+    <RigidBody type="fixed" colliders="trimesh">
+      <mesh geometry={geometry} castShadow receiveShadow>
+        <landscapeShaderMaterial color="#77aa66" />
+      </mesh>
+    </RigidBody>
+  );
+}
+
+/*
+
+import * as THREE from "three";
+import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
+import { useFrame } from "@react-three/fiber";
+import { useRef, useMemo } from "react";
+import { Mesh } from "three";
+
+import "./shaders/landscapeShader.js";
+
+// Deterministic, coherent angle function for seamless tile rotation
+function coherentAngle(x: number, y: number, scale: number = 0.2) {
+  const seed = Math.sin(x * 12.9898 + y * 78.233) * 43758.5453;
+  const noise = seed - Math.floor(seed);
+  return (noise - 0.5) * scale;
+}
+
+function generateHexTile(
+  edgeLength: number,
+  resolution: number
+): THREE.BufferGeometry {
+  const radius = edgeLength;
+  const height = Math.sqrt(3) * radius;
+  const width = 2 * radius;
+
+  const geom = new THREE.PlaneGeometry(width, height, resolution, resolution);
+
+  // Mask out corners beyond hexagon bounds
+  const pos = geom.attributes.position;
+  const indicesToKeep = [];
+
+  for (let i = 0; i < pos.count; i++) {
+    const x = pos.getX(i);
+    const y = pos.getY(i); // plane lies flat, so this is along Z in world
+    const px = Math.abs(x);
+    const py = Math.abs(y);
+    const angle = Math.atan2(py, px);
+
+    const maxX = radius;
+    const maxY = Math.tan(Math.PI / 6) * (maxX - px);
+    if (py < height / 2 && py < maxY + 1e-2) {
+      indicesToKeep.push(i);
+    }
+  }
+
+  // Build new geometry with only the allowed vertices
+  const indexAttr = [];
+  for (let i = 0; i < geom.index!.count; i += 3) {
+    const a = geom.index!.getX(i);
+    const b = geom.index!.getX(i + 1);
+    const c = geom.index!.getX(i + 2);
+    if (
+      indicesToKeep.includes(a) &&
+      indicesToKeep.includes(b) &&
+      indicesToKeep.includes(c)
+    ) {
+      indexAttr.push(a, b, c);
+    }
+  }
+
+  const trimmed = geom.clone();
+  trimmed.setIndex(indexAttr);
+  trimmed.computeVertexNormals();
+  return trimmed;
+}
+
+let persistedGeometry: THREE.BufferGeometry | undefined = undefined;
+
+interface LandscapeProps {
+  width?: number;
+  height?: number;
+  resolution?: number;
+  children?: React.ReactNode;
+}
+
+export function Landscape({
+  width = 100,
+  height = 100,
+  resolution = 64,
+  children,
+}: LandscapeProps) {
+  const ref = useRef<Mesh>(null);
+  const materialRef = useRef<any>(null);
+
+  useFrame(({ clock }) => {
+    if (materialRef.current) {
+      materialRef.current.uniforms.time.value = clock.getElapsedTime();
+    }
+  });
+
+  const radius = 6.6;
+  const hexWidth = 2 * radius;
+  const hexHeight = Math.sqrt(3) * radius;
+
+  const spacingX = (3 / 2) * radius;
+  const spacingZ = hexHeight;
+
+  const cols = Math.ceil(width / spacingX);
+  const rows = Math.ceil(height / spacingZ);
+
+  const geometry = useMemo(() => {
+    if (persistedGeometry !== undefined) return persistedGeometry;
+
+    const geometries: THREE.BufferGeometry[] = [];
+
+    for (let x = 0; x < cols; x++) {
+      for (let y = 0; y < rows; y++) {
+        const overlap = 0.1;
+        // Hex grid layout: pointy-top
+        const hexHeight = Math.sqrt(3) * radius;
+        const q = x;
+        const r = y;
+        const posX = radius * 1.5 * q;
+        const posZ = Math.sqrt(3) * radius * (r + q / 2);
+
+        const dx = x - cols / 2 + 0.5;
+        const dy = y - rows / 2 + 0.5;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+        const angleFactor = distance / Math.max(cols, rows);
+
+        const rotX = coherentAngle(x, y) * angleFactor;
+        const rotY = coherentAngle(y, x) * angleFactor;
+
+        const baseGeom = generateHexTile(radius, resolution);
+        baseGeom.rotateX(-Math.PI / 2); // flat base
+        baseGeom.rotateX(rotX);
+        baseGeom.rotateZ(rotY);
+        baseGeom.translate(posX - width / 2, 0, posZ - height / 2);
+
+        geometries.push(baseGeom);
+      }
+    }
+
+    persistedGeometry = BufferGeometryUtils.mergeGeometries(geometries, false);
+
+    // Post-process: stitch vertices along tile edges to ensure seamless normals
+    if (persistedGeometry) {
+      const tolerance = 1e-3; // merge close vertices
+      const merged = BufferGeometryUtils.mergeVertices(
+        persistedGeometry,
+        tolerance
+      );
+      persistedGeometry.dispose(); // clean up old geometry
+      persistedGeometry = merged;
+    }
+
+    return persistedGeometry;
+  }, [cols, rows, radius, width, height, resolution]);
+
+  //<landscapeShaderMaterial ref={materialRef} />
+  return (
+    <mesh ref={ref} geometry={geometry} receiveShadow>
+      {children}
+    </mesh>
+  );
+}
+*/

package/src/player/player.tsx

@@ -0,0 +1,257 @@
+import React, { useEffect, useRef, type PropsWithChildren } from "react";
+import type { CameraManager, Vec3 } from "@plasius/gpu-camera";
+import { PlayerStore } from "./playerstore.js";
+
+function length3(value: Vec3): number {
+  return Math.hypot(value[0], value[1], value[2]);
+}
+
+function normalize3(value: Vec3, fallback: Vec3): Vec3 {
+  const len = length3(value);
+  if (len <= Number.EPSILON) {
+    return [...fallback];
+  }
+  return [value[0] / len, value[1] / len, value[2] / len];
+}
+
+function add3(a: Vec3, b: Vec3): Vec3 {
+  return [a[0] + b[0], a[1] + b[1], a[2] + b[2]];
+}
+
+function sub3(a: Vec3, b: Vec3): Vec3 {
+  return [a[0] - b[0], a[1] - b[1], a[2] - b[2]];
+}
+
+function cross3(a: Vec3, b: Vec3): Vec3 {
+  return [
+    a[1] * b[2] - a[2] * b[1],
+    a[2] * b[0] - a[0] * b[2],
+    a[0] * b[1] - a[1] * b[0],
+  ];
+}
+
+function Player({
+  cameraManager,
+  cameraId,
+  children,
+}: PropsWithChildren<{ cameraManager: CameraManager; cameraId: string }>) {
+  // Local refs for movement-relevant stats (used by the rAF ticker)
+  const strRef = useRef(1);
+  const dexRef = useRef(1);
+  const endRef = useRef(1);
+  const movingKeys = useRef<Set<string>>(new Set());
+  const movingRef = useRef(false);
+  const runLoadRef = useRef(0); // seconds of continuous run load
+  const lastTickRef = useRef(performance.now());
+
+  // Subscribe via inline selector (useSyncExternalStore under the hood)
+  const physEff = PlayerStore.useSelector((s) => {
+    const phys = s?.attributesBase?.physical ?? {
+      strength: 1,
+      dexterity: 1,
+      endurance: 1,
+    };
+    const g = s?.attributesGear ?? {};
+    const e = s?.attributesEffects ?? {};
+
+    let strength =
+      (phys.strength ?? 1) + (g.strength ?? 0) + (e.strength ?? 0);
+    let dexterity =
+      (phys.dexterity ?? 1) + (g.dexterity ?? 0) + (e.dexterity ?? 0);
+    let endurance =
+      (phys.endurance ?? 1) + (g.endurance ?? 0) + (e.endurance ?? 0);
+
+    // Add equipped item modifiers
+    if (s?.equipment && s?.items) {
+      for (const slot of Object.keys(s.equipment)) {
+        const itemId = (s.equipment as any)[slot];
+        const item = s.items[itemId];
+        const m = item?.modifiers as
+          | Partial<Record<"strength" | "dexterity" | "endurance", number>>
+          | undefined;
+        if (m) {
+          strength += m.strength ?? 0;
+          dexterity += m.dexterity ?? 0;
+          endurance += m.endurance ?? 0;
+        }
+      }
+    }
+
+    // Add status effect attribute modifiers
+    if (s?.effects) {
+      for (const eff of Object.values(s.effects) as any[]) {
+        const mods = eff?.modifiers?.attributes as
+          | Partial<Record<"strength" | "dexterity" | "endurance", number>>
+          | undefined;
+        if (mods) {
+          strength += mods.strength ?? 0;
+          dexterity += mods.dexterity ?? 0;
+          endurance += mods.endurance ?? 0;
+        }
+      }
+    }
+
+    return { strength, dexterity, endurance };
+  });
+
+  // Keep refs in sync for rAF without causing extra renders
+  useEffect(() => {
+    strRef.current = physEff.strength;
+    dexRef.current = physEff.dexterity;
+    endRef.current = physEff.endurance;
+  }, [physEff.strength, physEff.dexterity, physEff.endurance]);
+
+  useEffect(() => {
+    window.focus();
+  }, []);
+
+  // Fatigue/exhaustion ticker
+  useEffect(() => {
+    let raf = 0;
+    const tick = () => {
+      const now = performance.now();
+      const dt = (now - lastTickRef.current) / 1000;
+      lastTickRef.current = now;
+
+      const ln = (x: number) => Math.log(1 + Math.max(0, x) / 25);
+      const endurance = endRef.current;
+      const recovery = 1.5 + ln(endurance); // recover faster with Endurance
+
+      if (movingRef.current) {
+        runLoadRef.current = Math.max(0, runLoadRef.current + dt);
+      } else {
+        runLoadRef.current = Math.max(0, runLoadRef.current - dt * recovery);
+      }
+
+      raf = requestAnimationFrame(tick);
+    };
+
+    lastTickRef.current = performance.now();
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, []);
+
+  // Movement handlers
+  useEffect(() => {
+    const ln = (x: number) => Math.log(1 + Math.max(0, x) / 25);
+
+    const baseSpeed = () => {
+      const dex = dexRef.current;
+      const str = strRef.current;
+      const dexBoost = 0.25 * ln(dex);
+      const strBoost = 0.1 * ln(str);
+      return 1 + dexBoost + strBoost;
+    };
+
+    const currentSpeed = () => {
+      const endurance = endRef.current;
+      const cap = 4 + 2 * ln(endurance);
+      const load = runLoadRef.current;
+      if (load <= cap) return baseSpeed();
+      const over = Math.min(1, (load - cap) / cap);
+      const fatigue = 1 - 0.5 * over; // down to 50%
+      return baseSpeed() * fatigue;
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      const cameraState = cameraManager.getCamera(cameraId);
+      if (!cameraState) return;
+
+      const position = [...cameraState.transform.position] as Vec3;
+      const target = [...cameraState.transform.target] as Vec3;
+      const up = normalize3(cameraState.transform.up ?? [0, 1, 0], [0, 1, 0]);
+
+      const forward = normalize3(sub3(target, position), [0, 0, -1]);
+      const forwardY = forward[1];
+      const planarForward = normalize3([forward[0], 0, forward[2]], [0, 0, -1]);
+      const right = normalize3(cross3(planarForward, up), [1, 0, 0]);
+
+      const moveKeys = new Set(["w", "a", "s", "d", "q", "e"]);
+      if (moveKeys.has(event.key)) {
+        movingKeys.current.add(event.key);
+        movingRef.current = true;
+      }
+
+      switch (event.key) {
+        case "w":
+          position[0] += planarForward[0] * currentSpeed();
+          position[1] += planarForward[1] * currentSpeed();
+          position[2] += planarForward[2] * currentSpeed();
+          break;
+        case "s":
+          position[0] -= planarForward[0] * currentSpeed();
+          position[1] -= planarForward[1] * currentSpeed();
+          position[2] -= planarForward[2] * currentSpeed();
+          break;
+        case "a":
+          position[0] -= right[0] * currentSpeed();
+          position[1] -= right[1] * currentSpeed();
+          position[2] -= right[2] * currentSpeed();
+          break;
+        case "d":
+          position[0] += right[0] * currentSpeed();
+          position[1] += right[1] * currentSpeed();
+          position[2] += right[2] * currentSpeed();
+          break;
+        case "q":
+          position[1] += currentSpeed();
+          break;
+        case "e":
+          position[1] -= currentSpeed();
+          break;
+        default:
+          break;
+      }
+
+      const nextTarget = add3(position, [
+        planarForward[0],
+        forwardY,
+        planarForward[2],
+      ]);
+
+      cameraManager.applyControl(
+        cameraId,
+        {
+          type: "set-look-at",
+          position,
+          target: nextTarget,
+          up,
+        },
+        { makeActive: true }
+      );
+    };
+
+    const handleKeyUp = (event: KeyboardEvent) => {
+      const moveKeys = new Set(["w", "a", "s", "d", "q", "e"]);
+      if (moveKeys.has(event.key)) {
+        movingKeys.current.delete(event.key);
+        if (movingKeys.current.size === 0) movingRef.current = false;
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("keyup", handleKeyUp);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("keyup", handleKeyUp);
+    };
+  }, [cameraManager, cameraId]);
+
+  return <>{children}</>;
+}
+
+function WrappedPlayer({
+  cameraManager,
+  cameraId,
+  children,
+}: PropsWithChildren<{ cameraManager: CameraManager; cameraId: string }>) {
+  return (
+    <PlayerStore.Provider>
+      <Player cameraManager={cameraManager} cameraId={cameraId}>
+        {children}
+      </Player>
+    </PlayerStore.Provider>
+  );
+}
+
+export { WrappedPlayer as Player };