@cascadetui/core 0.1.4 → 0.1.6

package/3d.js

@@ -6,7 +6,7 @@ import {
   __export,
   __require,
   __toESM
-} from "./index-jx194wn1.js";
+} from "./index-rj3f00a6.js";
 
 // ../../node_modules/.bun/omggif@1.0.10/node_modules/omggif/omggif.js
 var require_omggif = __commonJS((exports) => {
@@ -19501,7 +19501,13 @@ var require_any_base = __commonJS((exports, module) => {
 });
 
 // src/3d/WGPURenderer.ts
-import { PerspectiveCamera, Color, NoToneMapping, LinearSRGBColorSpace } from "three";
+import {
+  PerspectiveCamera,
+  Color,
+  NoToneMapping,
+  LinearSRGBColorSpace,
+  PCFSoftShadowMap
+} from "three";
 import { WebGPURenderer } from "three/webgpu";
 import { createWebGPUDevice, setupGlobals } from "bun-webgpu";
 
@@ -31820,6 +31826,12 @@ class ThreeCliRenderer {
   superSample;
   backgroundColor = RGBA.fromValues(0, 0, 0, 1);
   alpha = false;
+  toneMapping = NoToneMapping;
+  toneMappingExposure = 1;
+  outputColorSpace = LinearSRGBColorSpace;
+  shadows = false;
+  shadowMapType = PCFSoftShadowMap;
+  sortObjects = true;
   threeRenderer;
   canvas;
   device = null;
@@ -31853,6 +31865,12 @@ class ThreeCliRenderer {
     this.renderHeight = this.outputHeight * (this.superSample !== "none" /* NONE */ ? 2 : 1);
     this.backgroundColor = options.backgroundColor ?? RGBA.fromValues(0, 0, 0, 1);
     this.alpha = options.alpha ?? false;
+    this.toneMapping = options.toneMapping ?? NoToneMapping;
+    this.toneMappingExposure = options.toneMappingExposure ?? 1;
+    this.outputColorSpace = options.outputColorSpace ?? LinearSRGBColorSpace;
+    this.shadows = options.shadows ?? false;
+    this.shadowMapType = options.shadowMapType ?? PCFSoftShadowMap;
+    this.sortObjects = options.sortObjects ?? true;
     if (process.env.CELL_ASPECT_RATIO) {
       this._aspectRatio = parseFloat(process.env.CELL_ASPECT_RATIO);
     }
@@ -31876,7 +31894,7 @@ class ThreeCliRenderer {
     }
     this.cliRenderer.on("debugOverlay:toggle" /* DEBUG_OVERLAY_TOGGLE */, this.debugToggleHandler);
     this.cliRenderer.on("destroy" /* DESTROY */, this.destroyHandler);
-    setupGlobals({ libPath: options.libPath });
+    setupGlobals({ libPath: options.libPath ?? process.env.BUN_WEBGPU_LIB_PATH });
   }
   toggleDebugStats() {
     this.doRenderStats = !this.doRenderStats;
@@ -31891,8 +31909,12 @@ class ThreeCliRenderer {
         alpha: this.alpha
       });
       this.setBackgroundColor(this.backgroundColor);
-      this.threeRenderer.toneMapping = NoToneMapping;
-      this.threeRenderer.outputColorSpace = LinearSRGBColorSpace;
+      this.threeRenderer.toneMapping = this.toneMapping;
+      this.threeRenderer.toneMappingExposure = this.toneMappingExposure;
+      this.threeRenderer.outputColorSpace = this.outputColorSpace;
+      this.threeRenderer.shadowMap.enabled = this.shadows;
+      this.threeRenderer.shadowMap.type = this.shadowMapType;
+      this.threeRenderer.sortObjects = this.sortObjects;
       this.threeRenderer.setSize(this.renderWidth, this.renderHeight, false);
     } catch (error) {
       console.error("Error creating THREE.WebGPURenderer:", error);
@@ -32175,6 +32197,420 @@ class ThreeRenderable extends Renderable {
     };
   }
 }
+// src/3d/Advanced3D.ts
+import {
+  AmbientLight,
+  BoxGeometry,
+  CatmullRomCurve3,
+  DirectionalLight,
+  Euler,
+  Fog,
+  Group,
+  InstancedMesh,
+  Matrix4,
+  Mesh,
+  MeshStandardMaterial,
+  Object3D,
+  PlaneGeometry,
+  PerspectiveCamera as PerspectiveCamera3,
+  Quaternion,
+  Scene as Scene3,
+  TorusKnotGeometry,
+  Vector2,
+  Vector3
+} from "three";
+function createOrbitCameraRig(options = {}) {
+  const camera = new PerspectiveCamera3(45, 1, 0.1, 1000);
+  const orbit = new OrbitCameraController(camera, options);
+  return { camera, orbit };
+}
+
+class OrbitCameraController {
+  camera;
+  state;
+  minRadius;
+  maxRadius;
+  minPolar;
+  maxPolar;
+  rotateSpeed;
+  zoomSpeed;
+  panSpeed;
+  damping;
+  azimuthVelocity = 0;
+  polarVelocity = 0;
+  zoomVelocity = 0;
+  panVelocity = new Vector2(0, 0);
+  constructor(camera, options = {}) {
+    this.camera = camera;
+    this.state = {
+      target: options.target?.clone() ?? new Vector3(0, 0, 0),
+      radius: options.radius ?? Math.max(0.001, camera.position.length() || 6),
+      azimuth: options.azimuth ?? 0,
+      polar: options.polar ?? Math.PI / 2
+    };
+    this.minRadius = options.minRadius ?? 0.2;
+    this.maxRadius = options.maxRadius ?? 300;
+    this.minPolar = options.minPolar ?? 0.01;
+    this.maxPolar = options.maxPolar ?? Math.PI - 0.01;
+    this.rotateSpeed = options.rotateSpeed ?? 1;
+    this.zoomSpeed = options.zoomSpeed ?? 1;
+    this.panSpeed = options.panSpeed ?? 1;
+    this.damping = options.damping ?? 0.84;
+    this.state.radius = this.clamp(this.state.radius, this.minRadius, this.maxRadius);
+    this.state.polar = this.clamp(this.state.polar, this.minPolar, this.maxPolar);
+    this.syncCamera();
+  }
+  getState() {
+    return {
+      target: this.state.target.clone(),
+      radius: this.state.radius,
+      azimuth: this.state.azimuth,
+      polar: this.state.polar
+    };
+  }
+  setTarget(target) {
+    this.state.target.copy(target);
+    this.syncCamera();
+  }
+  rotate(deltaAzimuth, deltaPolar) {
+    this.azimuthVelocity += deltaAzimuth * this.rotateSpeed;
+    this.polarVelocity += deltaPolar * this.rotateSpeed;
+  }
+  zoom(delta) {
+    this.zoomVelocity += delta * this.zoomSpeed;
+  }
+  pan(deltaX, deltaY) {
+    this.panVelocity.x += deltaX * this.panSpeed;
+    this.panVelocity.y += deltaY * this.panSpeed;
+  }
+  update(deltaSeconds) {
+    const dt = Math.max(0, deltaSeconds);
+    this.state.azimuth += this.azimuthVelocity * dt;
+    this.state.polar = this.clamp(this.state.polar + this.polarVelocity * dt, this.minPolar, this.maxPolar);
+    this.state.radius = this.clamp(this.state.radius + this.zoomVelocity * dt, this.minRadius, this.maxRadius);
+    if (this.panVelocity.lengthSq() > 0) {
+      const forward = this.state.target.clone().sub(this.camera.position).normalize();
+      const right = new Vector3().crossVectors(forward, this.camera.up).normalize();
+      const up = this.camera.up.clone().normalize();
+      this.state.target.addScaledVector(right, this.panVelocity.x * dt);
+      this.state.target.addScaledVector(up, this.panVelocity.y * dt);
+    }
+    const dampingFactor = Math.pow(this.damping, Math.max(1, dt * 60));
+    this.azimuthVelocity *= dampingFactor;
+    this.polarVelocity *= dampingFactor;
+    this.zoomVelocity *= dampingFactor;
+    this.panVelocity.multiplyScalar(dampingFactor);
+    this.syncCamera();
+  }
+  syncCamera() {
+    const sinPolar = Math.sin(this.state.polar);
+    const offset = new Vector3(this.state.radius * sinPolar * Math.sin(this.state.azimuth), this.state.radius * Math.cos(this.state.polar), this.state.radius * sinPolar * Math.cos(this.state.azimuth));
+    this.camera.position.copy(this.state.target).add(offset);
+    this.camera.lookAt(this.state.target);
+    this.camera.updateProjectionMatrix();
+    this.camera.updateMatrixWorld();
+  }
+  clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+}
+function createSeededRandom(seed) {
+  let state = seed >>> 0;
+  return () => {
+    state = state * 1664525 + 1013904223 >>> 0;
+    return state / 4294967296;
+  };
+}
+function createInstancedScatter(geometry, material, options) {
+  const count = Math.max(1, Math.floor(options.count));
+  const extent = options.extent instanceof Vector3 ? options.extent.clone() : Array.isArray(options.extent) ? new Vector3(options.extent[0], options.extent[1], options.extent[2]) : new Vector3(20, 10, 20);
+  const minScale = options.minScale ?? 0.35;
+  const maxScale = options.maxScale ?? 1.8;
+  const yRotationOnly = options.yRotationOnly ?? false;
+  const random = createSeededRandom(options.seed ?? 12345);
+  const mesh = new InstancedMesh(geometry, material, count);
+  const tempMatrix = new Matrix4;
+  const tempPosition = new Vector3;
+  const tempScale = new Vector3;
+  const tempQuaternion = new Quaternion;
+  const tempEuler = new Euler;
+  const maxExtent = new Vector3(extent.x * 0.5, extent.y * 0.5, extent.z * 0.5);
+  let radius = 0;
+  for (let i = 0;i < count; i++) {
+    tempPosition.set((random() * 2 - 1) * maxExtent.x, (random() * 2 - 1) * maxExtent.y, (random() * 2 - 1) * maxExtent.z);
+    if (yRotationOnly) {
+      tempEuler.set(0, random() * Math.PI * 2, 0);
+    } else {
+      tempEuler.set(random() * Math.PI * 2, random() * Math.PI * 2, random() * Math.PI * 2);
+    }
+    tempQuaternion.setFromEuler(tempEuler);
+    const uniformScale = minScale + random() * Math.max(0.0001, maxScale - minScale);
+    tempScale.set(uniformScale, uniformScale, uniformScale);
+    tempMatrix.compose(tempPosition, tempQuaternion, tempScale);
+    mesh.setMatrixAt(i, tempMatrix);
+    const dist = tempPosition.length() + uniformScale;
+    if (dist > radius) {
+      radius = dist;
+    }
+  }
+  mesh.instanceMatrix.needsUpdate = true;
+  mesh.computeBoundingSphere();
+  return {
+    mesh,
+    center: new Vector3(0, 0, 0),
+    radius
+  };
+}
+function createMassiveScatterField(options) {
+  const geometry = options.geometry ?? new BoxGeometry(1, 1, 1);
+  const material = options.material ?? new MeshStandardMaterial({ color: options.color ?? 16777215, roughness: 0.9 });
+  return createInstancedScatter(geometry, material, options);
+}
+
+class KeyframeAnimator {
+  target;
+  keyframes;
+  duration;
+  loop;
+  pingPong;
+  time = 0;
+  direction = 1;
+  constructor(target, keyframes, options = {}) {
+    if (keyframes.length < 2) {
+      throw new Error("KeyframeAnimator requires at least two keyframes");
+    }
+    this.target = target;
+    this.keyframes = [...keyframes].sort((a, b) => a.time - b.time);
+    this.duration = this.keyframes[this.keyframes.length - 1].time;
+    this.loop = options.loop ?? true;
+    this.pingPong = options.pingPong ?? false;
+    this.apply(0);
+  }
+  update(deltaSeconds) {
+    if (this.duration <= 0)
+      return;
+    this.time += Math.max(0, deltaSeconds) * this.direction;
+    if (this.pingPong) {
+      if (this.time > this.duration) {
+        this.time = this.duration;
+        this.direction = -1;
+      } else if (this.time < 0) {
+        this.time = 0;
+        this.direction = 1;
+      }
+    } else if (this.loop) {
+      this.time = (this.time % this.duration + this.duration) % this.duration;
+    } else {
+      this.time = Math.min(this.duration, Math.max(0, this.time));
+    }
+    this.apply(this.time);
+  }
+  getTime() {
+    return this.time;
+  }
+  apply(time) {
+    let left = this.keyframes[0];
+    let right = this.keyframes[this.keyframes.length - 1];
+    for (let i = 0;i < this.keyframes.length - 1; i++) {
+      const start = this.keyframes[i];
+      const end = this.keyframes[i + 1];
+      if (time >= start.time && time <= end.time) {
+        left = start;
+        right = end;
+        break;
+      }
+    }
+    const span = Math.max(0.000001, right.time - left.time);
+    const t = this.clamp((time - left.time) / span, 0, 1);
+    if (left.position && right.position) {
+      this.target.position.copy(left.position).lerp(right.position, t);
+    }
+    if (left.scale && right.scale) {
+      this.target.scale.copy(left.scale).lerp(right.scale, t);
+    }
+    if (left.rotation && right.rotation) {
+      const startQ = new Quaternion().setFromEuler(left.rotation);
+      const endQ = new Quaternion().setFromEuler(right.rotation);
+      this.target.quaternion.copy(startQ).slerp(endQ, t);
+    }
+    this.target.updateMatrixWorld();
+  }
+  clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+  }
+}
+function createAnimatedTransformNode(keyframes, options = {}) {
+  const node = new Object3D;
+  const mapped = keyframes.map((keyframe) => ({
+    time: keyframe.time,
+    position: keyframe.position ? new Vector3(...keyframe.position) : undefined,
+    rotation: keyframe.rotation ? new Euler(...keyframe.rotation) : undefined,
+    scale: keyframe.scale ? new Vector3(...keyframe.scale) : undefined
+  }));
+  const animator = new KeyframeAnimator(node, mapped, options);
+  return { node, animator };
+}
+function createCinematicScenePreset(options = {}) {
+  const scene = new Scene3;
+  scene.fog = new Fog(options.fogColor ?? 329226, options.fogNear ?? 8, options.fogFar ?? 120);
+  const ambientLight = new AmbientLight(16777215, options.ambientIntensity ?? 0.2);
+  const keyLight = new DirectionalLight(16773841, options.keyLightIntensity ?? 1.4);
+  keyLight.position.set(14, 20, 12);
+  const fillLight = new DirectionalLight(10405887, options.fillLightIntensity ?? 0.75);
+  fillLight.position.set(-12, 8, 10);
+  const rimLight = new DirectionalLight(16758159, options.rimLightIntensity ?? 0.9);
+  rimLight.position.set(0, 8, -16);
+  scene.add(ambientLight);
+  scene.add(keyLight);
+  scene.add(fillLight);
+  scene.add(rimLight);
+  const camera = new PerspectiveCamera3(options.cameraFov ?? 45, 1, options.cameraNear ?? 0.1, options.cameraFar ?? 1000);
+  const orbit = new OrbitCameraController(camera, {
+    radius: options.cameraRadius ?? 12,
+    target: new Vector3(0, 0, 0),
+    minRadius: 1,
+    maxRadius: 300,
+    damping: 0.86,
+    rotateSpeed: 1,
+    panSpeed: 0.8,
+    zoomSpeed: 1.4
+  });
+  orbit.update(0);
+  return {
+    scene,
+    camera,
+    orbit,
+    keyLight,
+    fillLight,
+    rimLight,
+    ambientLight
+  };
+}
+
+class CameraRailController {
+  camera;
+  path;
+  lookAtPath;
+  speed;
+  loop;
+  t = 0;
+  constructor(camera, points, options = {}) {
+    if (points.length < 2) {
+      throw new Error("CameraRailController requires at least two points");
+    }
+    this.camera = camera;
+    this.speed = options.speed ?? 0.08;
+    this.loop = options.loop ?? true;
+    const pathPoints = points.map((point) => new Vector3(point.position[0], point.position[1], point.position[2]));
+    const lookAtPoints = points.map((point) => {
+      const lookAt = point.lookAt ?? [0, 0, 0];
+      return new Vector3(lookAt[0], lookAt[1], lookAt[2]);
+    });
+    this.path = new CatmullRomCurve3(pathPoints, this.loop, "catmullrom", 0.5);
+    this.lookAtPath = new CatmullRomCurve3(lookAtPoints, this.loop, "catmullrom", 0.5);
+    this.update(0);
+  }
+  update(deltaSeconds) {
+    const dt = Math.max(0, deltaSeconds);
+    this.t += dt * this.speed;
+    if (this.loop) {
+      this.t = this.t % 1;
+    } else {
+      this.t = Math.min(1, this.t);
+    }
+    const position = this.path.getPointAt(this.t);
+    const lookAt = this.lookAtPath.getPointAt(this.t);
+    this.camera.position.copy(position);
+    this.camera.lookAt(lookAt);
+    this.camera.updateProjectionMatrix();
+    this.camera.updateMatrixWorld();
+  }
+  getProgress() {
+    return this.t;
+  }
+  setProgress(progress) {
+    this.t = this.loop ? (progress % 1 + 1) % 1 : Math.min(1, Math.max(0, progress));
+    this.update(0);
+  }
+}
+function createShowcaseScene(options = {}) {
+  const preset = createCinematicScenePreset({
+    cameraRadius: 18,
+    keyLightIntensity: 1.6,
+    fillLightIntensity: 0.9,
+    rimLightIntensity: 1.1
+  });
+  const floor = new Mesh(new PlaneGeometry(220, 220, 1, 1), new MeshStandardMaterial({
+    color: 987417,
+    roughness: 0.95,
+    metalness: 0.05
+  }));
+  floor.rotation.x = -Math.PI / 2;
+  floor.position.y = -3.2;
+  floor.receiveShadow = true;
+  preset.scene.add(floor);
+  const scatter = createMassiveScatterField({
+    count: options.instanceCount ?? 14000,
+    seed: options.seed ?? 4242,
+    extent: options.worldExtent ?? [180, 28, 180],
+    minScale: 0.2,
+    maxScale: 2.4,
+    color: 9418751
+  });
+  scatter.mesh.castShadow = true;
+  scatter.mesh.receiveShadow = true;
+  const cluster = new Group;
+  cluster.add(scatter.mesh);
+  preset.scene.add(cluster);
+  const focusNode = new Mesh(new TorusKnotGeometry(1.3, 0.42, 220, 48), new MeshStandardMaterial({
+    color: 16766858,
+    roughness: 0.35,
+    metalness: 0.7,
+    emissive: 2365194,
+    emissiveIntensity: 0.5
+  }));
+  focusNode.castShadow = true;
+  focusNode.receiveShadow = true;
+  focusNode.position.set(0, 0, 0);
+  preset.scene.add(focusNode);
+  const { node: animatedFocus, animator: focusAnimator } = createAnimatedTransformNode([
+    { time: 0, position: [0, -0.6, 0], rotation: [0, 0, 0], scale: [0.9, 0.9, 0.9] },
+    { time: 2.5, position: [0, 0.6, 0], rotation: [0, Math.PI, 0], scale: [1.1, 1.1, 1.1] },
+    { time: 5, position: [0, -0.6, 0], rotation: [0, Math.PI * 2, 0], scale: [0.9, 0.9, 0.9] }
+  ], { loop: true });
+  const rail = new CameraRailController(preset.camera, [
+    { position: [0, 6, 24], lookAt: [0, 0, 0] },
+    { position: [22, 5, 16], lookAt: [0, 0, 0] },
+    { position: [28, 7, -4], lookAt: [0, 0, 0] },
+    { position: [8, 9, -24], lookAt: [0, 0, 0] },
+    { position: [-20, 6, -14], lookAt: [0, 0, 0] },
+    { position: [-24, 8, 10], lookAt: [0, 0, 0] }
+  ], { loop: true, speed: 0.035 });
+  const startY = focusNode.position.y;
+  let time = 0;
+  return {
+    scene: preset.scene,
+    camera: preset.camera,
+    orbit: preset.orbit,
+    rail,
+    focusNode,
+    update: (deltaSeconds) => {
+      const dt = Math.max(0, deltaSeconds);
+      time += dt;
+      focusAnimator.update(dt);
+      focusNode.position.x = animatedFocus.position.x;
+      focusNode.position.y = startY + animatedFocus.position.y;
+      focusNode.position.z = animatedFocus.position.z;
+      focusNode.quaternion.copy(animatedFocus.quaternion);
+      focusNode.scale.copy(animatedFocus.scale);
+      cluster.rotation.y += dt * 0.08;
+      const pulse = 0.9 + (Math.sin(time * 1.7) + 1) * 0.35;
+      preset.keyLight.intensity = 1.2 + pulse * 0.4;
+      preset.fillLight.intensity = 0.7 + pulse * 0.2;
+      preset.rimLight.intensity = 0.8 + pulse * 0.25;
+    }
+  };
+}
 // src/3d/TextureUtils.ts
 import { Color as Color2, DataTexture, NearestFilter, ClampToEdgeWrapping, RGBAFormat, UnsignedByteType } from "three";
 class TextureUtils {
@@ -34009,6 +34445,12 @@ class SpriteResourceManager {
 // src/3d.ts
 import * as THREE6 from "three";
 export {
+  createShowcaseScene,
+  createOrbitCameraRig,
+  createMassiveScatterField,
+  createInstancedScatter,
+  createCinematicScenePreset,
+  createAnimatedTransformNode,
   TiledSprite,
   ThreeRenderable,
   ThreeCliRenderer,
@@ -34028,14 +34470,17 @@ export {
   PlanckPhysicsWorld,
   PhysicsExplosionManager,
   PhysicsExplodingSpriteEffect,
+  OrbitCameraController,
   MeshPool,
+  KeyframeAnimator,
   InstanceManager,
   ExplosionManager,
   ExplodingSpriteEffect,
   DEFAULT_PHYSICS_EXPLOSION_PARAMETERS,
   DEFAULT_EXPLOSION_PARAMETERS,
+  CameraRailController,
   CLICanvas
 };
 
-//# debugId=C1EA4E78670C6E6364756E2164756E21
+//# debugId=290FDC6E12ED7E0364756E2164756E21
 //# sourceMappingURL=3d.js.map