create-xani-agentic-app 1.0.0

package/template/.claude/skills/webgpu-threejs-tsl/examples/earth-shader.js

@@ -0,0 +1,292 @@
+/**
+ * Earth Shader Example
+ *
+ * Complete procedural Earth with:
+ * - Day/night texture blending
+ * - Atmospheric glow (fresnel)
+ * - Cloud layer
+ * - City lights at night
+ * - Bump mapping
+ *
+ * Based on Three.js webgpu_tsl_earth example (MIT License)
+ * https://github.com/mrdoob/three.js
+ */
+
+import * as THREE from 'three/webgpu';
+import {
+  Fn,
+  If,
+  float,
+  vec2,
+  vec3,
+  vec4,
+  color,
+  uniform,
+  texture,
+  uv,
+  time,
+  mix,
+  smoothstep,
+  pow,
+  clamp,
+  normalize,
+  dot,
+  max,
+  positionWorld,
+  normalWorld,
+  normalLocal,
+  cameraPosition,
+  bumpMap
+} from 'three/tsl';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+let camera, scene, renderer, controls;
+let earth, clouds, atmosphere;
+
+// Uniforms
+const sunDirection = uniform(new THREE.Vector3(1, 0.2, 0.5).normalize());
+const atmosphereDayColor = uniform(new THREE.Color(0x4db2ff));
+const atmosphereTwilightColor = uniform(new THREE.Color(0xbd5f1b));
+const cloudSpeed = uniform(0.01);
+const cityLightIntensity = uniform(1.5);
+
+async function init() {
+  // Camera
+  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
+  camera.position.set(0, 0, 4);
+
+  // Scene
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x000011);
+
+  // Load textures
+  const loader = new THREE.TextureLoader();
+
+  // Note: Replace with actual texture paths
+  const earthDayTexture = loader.load('textures/earth_day.jpg');
+  const earthNightTexture = loader.load('textures/earth_night.jpg');
+  const earthCloudsTexture = loader.load('textures/earth_clouds.jpg');
+  const earthBumpTexture = loader.load('textures/earth_bump.jpg');
+
+  // Set texture properties
+  [earthDayTexture, earthNightTexture, earthCloudsTexture, earthBumpTexture].forEach((tex) => {
+    tex.colorSpace = THREE.SRGBColorSpace;
+    tex.wrapS = THREE.RepeatWrapping;
+    tex.wrapT = THREE.ClampToEdgeWrapping;
+  });
+
+  // Create Earth
+  earth = createEarth(earthDayTexture, earthNightTexture, earthBumpTexture);
+  scene.add(earth);
+
+  // Create cloud layer
+  clouds = createClouds(earthCloudsTexture);
+  scene.add(clouds);
+
+  // Create atmosphere glow
+  atmosphere = createAtmosphere();
+  scene.add(atmosphere);
+
+  // Stars background
+  createStars();
+
+  // Renderer
+  renderer = new THREE.WebGPURenderer({ antialias: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  document.body.appendChild(renderer.domElement);
+  await renderer.init();
+
+  // Controls
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.minDistance = 2;
+  controls.maxDistance = 10;
+
+  // Events
+  window.addEventListener('resize', onWindowResize);
+
+  renderer.setAnimationLoop(animate);
+}
+
+function createEarth(dayTex, nightTex, bumpTex) {
+  const geometry = new THREE.SphereGeometry(1, 64, 64);
+  const material = new THREE.MeshStandardNodeMaterial();
+
+  // Sun illumination factor
+  const sunOrientation = Fn(() => {
+    return normalWorld.dot(sunDirection).mul(0.5).add(0.5);
+  });
+
+  // Day/night color mixing
+  material.colorNode = Fn(() => {
+    const dayColor = texture(dayTex, uv());
+    const nightColor = texture(nightTex, uv());
+
+    const orientation = sunOrientation();
+    const dayNight = smoothstep(0.4, 0.6, orientation);
+
+    // Add city lights on night side
+    const cityLights = nightColor.mul(cityLightIntensity).mul(
+      float(1.0).sub(dayNight)
+    );
+
+    const baseColor = mix(nightColor, dayColor, dayNight);
+    return baseColor.add(cityLights.mul(float(1.0).sub(orientation).pow(2.0)));
+  })();
+
+  // Bump mapping for terrain
+  material.normalNode = bumpMap(texture(bumpTex, uv()), 0.03);
+
+  // PBR properties vary with day/night
+  material.roughnessNode = Fn(() => {
+    const orientation = sunOrientation();
+    return mix(float(0.8), float(0.4), smoothstep(0.3, 0.7, orientation));
+  })();
+
+  material.metalnessNode = float(0.0);
+
+  // Subtle atmospheric rim on day side
+  material.emissiveNode = Fn(() => {
+    const viewDir = normalize(cameraPosition.sub(positionWorld));
+    const fresnel = pow(float(1.0).sub(normalWorld.dot(viewDir).saturate()), 4.0);
+
+    const orientation = sunOrientation();
+    const atmosphereColor = mix(atmosphereTwilightColor, atmosphereDayColor, orientation);
+
+    return atmosphereColor.mul(fresnel).mul(orientation).mul(0.3);
+  })();
+
+  return new THREE.Mesh(geometry, material);
+}
+
+function createClouds(cloudsTex) {
+  const geometry = new THREE.SphereGeometry(1.01, 64, 64);
+  const material = new THREE.MeshStandardNodeMaterial();
+
+  // Animated UV for cloud movement
+  const cloudUV = Fn(() => {
+    const baseUV = uv();
+    const offset = time.mul(cloudSpeed);
+    return vec2(baseUV.x.add(offset), baseUV.y);
+  });
+
+  // Cloud color (white with transparency)
+  material.colorNode = color(0xffffff);
+
+  // Cloud opacity from texture
+  material.opacityNode = Fn(() => {
+    const cloudAlpha = texture(cloudsTex, cloudUV()).r;
+
+    // Fade clouds on night side
+    const sunOrientation = normalWorld.dot(sunDirection).mul(0.5).add(0.5);
+    const dayFactor = smoothstep(0.2, 0.5, sunOrientation);
+
+    return cloudAlpha.mul(0.8).mul(dayFactor.mul(0.5).add(0.5));
+  })();
+
+  material.transparent = true;
+  material.depthWrite = false;
+  material.side = THREE.DoubleSide;
+
+  // Slight self-illumination
+  material.emissiveNode = Fn(() => {
+    const sunOrientation = normalWorld.dot(sunDirection).mul(0.5).add(0.5);
+    return color(0xffffff).mul(sunOrientation.mul(0.1));
+  })();
+
+  return new THREE.Mesh(geometry, material);
+}
+
+function createAtmosphere() {
+  const geometry = new THREE.SphereGeometry(1.15, 64, 64);
+  const material = new THREE.MeshBasicNodeMaterial();
+
+  material.colorNode = Fn(() => {
+    const viewDir = normalize(cameraPosition.sub(positionWorld));
+    const fresnel = pow(float(1.0).sub(normalWorld.dot(viewDir).abs()), 3.0);
+
+    const sunOrientation = normalWorld.dot(sunDirection).mul(0.5).add(0.5);
+    const atmosphereColor = mix(atmosphereTwilightColor, atmosphereDayColor, sunOrientation);
+
+    return atmosphereColor;
+  })();
+
+  material.opacityNode = Fn(() => {
+    const viewDir = normalize(cameraPosition.sub(positionWorld));
+    const fresnel = pow(float(1.0).sub(normalWorld.dot(viewDir).abs()), 2.5);
+
+    // Stronger on day side
+    const sunOrientation = normalWorld.dot(sunDirection).mul(0.5).add(0.5);
+
+    return fresnel.mul(sunOrientation.mul(0.5).add(0.3));
+  })();
+
+  material.transparent = true;
+  material.depthWrite = false;
+  material.side = THREE.BackSide;
+
+  return new THREE.Mesh(geometry, material);
+}
+
+function createStars() {
+  const starsGeometry = new THREE.BufferGeometry();
+  const starCount = 2000;
+
+  const positions = new Float32Array(starCount * 3);
+  const colors = new Float32Array(starCount * 3);
+
+  for (let i = 0; i < starCount; i++) {
+    // Random position on sphere
+    const theta = Math.random() * Math.PI * 2;
+    const phi = Math.acos(Math.random() * 2 - 1);
+    const radius = 50 + Math.random() * 50;
+
+    positions[i * 3] = radius * Math.sin(phi) * Math.cos(theta);
+    positions[i * 3 + 1] = radius * Math.sin(phi) * Math.sin(theta);
+    positions[i * 3 + 2] = radius * Math.cos(phi);
+
+    // Slight color variation
+    const brightness = 0.5 + Math.random() * 0.5;
+    colors[i * 3] = brightness;
+    colors[i * 3 + 1] = brightness;
+    colors[i * 3 + 2] = brightness + Math.random() * 0.2;
+  }
+
+  starsGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+  starsGeometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+  const starsMaterial = new THREE.PointsNodeMaterial();
+  starsMaterial.colorNode = Fn(() => {
+    return vec3(1.0);
+  })();
+  starsMaterial.sizeNode = float(2.0);
+  starsMaterial.vertexColors = true;
+
+  const stars = new THREE.Points(starsGeometry, starsMaterial);
+  scene.add(stars);
+}
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+function animate() {
+  // Rotate Earth slowly
+  earth.rotation.y += 0.001;
+  clouds.rotation.y += 0.0012;
+
+  // Animate sun direction (optional - creates day/night cycle)
+  // const angle = time.value * 0.1;
+  // sunDirection.value.set(Math.cos(angle), 0.2, Math.sin(angle)).normalize();
+
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+init();
+
+// Export for external control
+export { sunDirection, atmosphereDayColor, atmosphereTwilightColor, cloudSpeed, cityLightIntensity };

package/template/.claude/skills/webgpu-threejs-tsl/examples/particle-system.js

@@ -0,0 +1,259 @@
+/**
+ * GPU Particle System with Compute Shaders
+ *
+ * Demonstrates TSL compute shaders for particle simulation:
+ * - Instanced array buffers
+ * - Physics simulation on GPU
+ * - Mouse interaction
+ *
+ * Based on Three.js webgpu_compute_particles example (MIT License)
+ * https://github.com/mrdoob/three.js
+ */
+
+import * as THREE from 'three/webgpu';
+import {
+  Fn,
+  If,
+  uniform,
+  float,
+  vec3,
+  color,
+  instancedArray,
+  instanceIndex,
+  hash,
+  time
+} from 'three/tsl';
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+let camera, scene, renderer, controls;
+let computeInit, computeUpdate, computeHit;
+
+// Particle count
+const PARTICLE_COUNT = 100000;
+
+// Storage buffers
+const positions = instancedArray(PARTICLE_COUNT, 'vec3');
+const velocities = instancedArray(PARTICLE_COUNT, 'vec3');
+
+// Uniforms
+const gravity = uniform(-9.8);
+const bounce = uniform(0.7);
+const friction = uniform(0.98);
+const deltaTimeUniform = uniform(0);
+const clickPosition = uniform(new THREE.Vector3());
+const hitStrength = uniform(5.0);
+
+async function init() {
+  // Camera
+  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100);
+  camera.position.set(0, 5, 15);
+
+  // Scene
+  scene = new THREE.Scene();
+  scene.background = new THREE.Color(0x111122);
+
+  // Create compute shaders
+  createComputeShaders();
+
+  // Create particle mesh
+  createParticleMesh();
+
+  // Floor
+  const floorGeometry = new THREE.PlaneGeometry(30, 30);
+  const floorMaterial = new THREE.MeshStandardNodeMaterial({
+    color: 0x333333
+  });
+  const floor = new THREE.Mesh(floorGeometry, floorMaterial);
+  floor.rotation.x = -Math.PI / 2;
+  floor.receiveShadow = true;
+  scene.add(floor);
+
+  // Lights
+  const ambientLight = new THREE.AmbientLight(0x404040);
+  scene.add(ambientLight);
+
+  const pointLight = new THREE.PointLight(0xffffff, 100);
+  pointLight.position.set(5, 10, 5);
+  scene.add(pointLight);
+
+  // Renderer
+  renderer = new THREE.WebGPURenderer({ antialias: true });
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  renderer.setPixelRatio(window.devicePixelRatio);
+  document.body.appendChild(renderer.domElement);
+  await renderer.init();
+
+  // Initialize particles (renderer already initialized above)
+  renderer.compute(computeInit);
+
+  // Controls
+  controls = new OrbitControls(camera, renderer.domElement);
+  controls.enableDamping = true;
+  controls.target.set(0, 2, 0);
+
+  // Events
+  window.addEventListener('resize', onWindowResize);
+  renderer.domElement.addEventListener('click', onClick);
+
+  renderer.setAnimationLoop(animate);
+}
+
+function createComputeShaders() {
+  // Grid dimensions for initialization
+  const gridSize = Math.ceil(Math.sqrt(PARTICLE_COUNT));
+  const spacing = 0.15;
+  const offset = (gridSize * spacing) / 2;
+
+  // Initialize particles in a grid
+  computeInit = Fn(() => {
+    const position = positions.element(instanceIndex);
+    const velocity = velocities.element(instanceIndex);
+
+    // Calculate grid position
+    const x = instanceIndex.mod(gridSize);
+    const z = instanceIndex.div(gridSize);
+
+    // Set position
+    position.x.assign(x.toFloat().mul(spacing).sub(offset));
+    position.y.assign(float(5.0).add(hash(instanceIndex).mul(2.0)));
+    position.z.assign(z.toFloat().mul(spacing).sub(offset));
+
+    // Random initial velocity
+    velocity.x.assign(hash(instanceIndex.add(1)).sub(0.5).mul(2.0));
+    velocity.y.assign(hash(instanceIndex.add(2)).mul(-2.0));
+    velocity.z.assign(hash(instanceIndex.add(3)).sub(0.5).mul(2.0));
+  })().compute(PARTICLE_COUNT);
+
+  // Physics update
+  computeUpdate = Fn(() => {
+    const position = positions.element(instanceIndex);
+    const velocity = velocities.element(instanceIndex);
+    const dt = deltaTimeUniform;
+
+    // Apply gravity
+    velocity.y.addAssign(gravity.mul(dt));
+
+    // Update position
+    position.addAssign(velocity.mul(dt));
+
+    // Apply friction
+    velocity.mulAssign(friction);
+
+    // Ground collision
+    If(position.y.lessThan(0), () => {
+      position.y.assign(0);
+      velocity.y.assign(velocity.y.abs().mul(bounce)); // Reverse and dampen
+
+      // Extra friction on ground
+      velocity.x.mulAssign(0.9);
+      velocity.z.mulAssign(0.9);
+    });
+
+    // Boundary walls
+    If(position.x.abs().greaterThan(15), () => {
+      position.x.assign(position.x.sign().mul(15));
+      velocity.x.assign(velocity.x.negate().mul(bounce));
+    });
+
+    If(position.z.abs().greaterThan(15), () => {
+      position.z.assign(position.z.sign().mul(15));
+      velocity.z.assign(velocity.z.negate().mul(bounce));
+    });
+  })().compute(PARTICLE_COUNT);
+
+  // Hit/explosion effect
+  computeHit = Fn(() => {
+    const position = positions.element(instanceIndex);
+    const velocity = velocities.element(instanceIndex);
+
+    // Distance to click
+    const toClick = position.sub(clickPosition);
+    const distance = toClick.length();
+
+    // Apply force within radius
+    If(distance.lessThan(3.0), () => {
+      const direction = toClick.normalize();
+      const force = float(3.0).sub(distance).div(3.0).mul(hitStrength);
+
+      // Add randomness
+      const randomForce = force.mul(hash(instanceIndex.add(time.mul(1000))).mul(0.5).add(0.75));
+
+      velocity.addAssign(direction.mul(randomForce));
+      velocity.y.addAssign(randomForce.mul(0.5));
+    });
+  })().compute(PARTICLE_COUNT);
+}
+
+function createParticleMesh() {
+  // Simple sphere geometry for each particle
+  const geometry = new THREE.SphereGeometry(0.08, 8, 8);
+
+  // Material using computed positions
+  const material = new THREE.MeshStandardNodeMaterial();
+
+  // Position from compute buffer
+  material.positionNode = positions.element(instanceIndex);
+
+  // Color based on velocity
+  material.colorNode = Fn(() => {
+    const velocity = velocities.element(instanceIndex);
+    const speed = velocity.length();
+
+    // Color gradient: blue (slow) -> orange (fast)
+    const t = speed.div(10.0).saturate();
+    return color(0x0066ff).mix(color(0xff6600), t);
+  })();
+
+  material.roughnessNode = float(0.5);
+  material.metalnessNode = float(0.2);
+
+  // Create instanced mesh
+  const mesh = new THREE.InstancedMesh(geometry, material, PARTICLE_COUNT);
+  scene.add(mesh);
+}
+
+function onClick(event) {
+  // Raycast to find click position on floor
+  const raycaster = new THREE.Raycaster();
+  const mouse = new THREE.Vector2(
+    (event.clientX / window.innerWidth) * 2 - 1,
+    -(event.clientY / window.innerHeight) * 2 + 1
+  );
+
+  raycaster.setFromCamera(mouse, camera);
+
+  // Intersect with floor plane (y = 0)
+  const plane = new THREE.Plane(new THREE.Vector3(0, 1, 0), 0);
+  const intersection = new THREE.Vector3();
+  raycaster.ray.intersectPlane(plane, intersection);
+
+  if (intersection) {
+    // Raise click position slightly
+    intersection.y = 0.5;
+    clickPosition.value.copy(intersection);
+
+    // Run hit compute shader
+    renderer.compute(computeHit);
+  }
+}
+
+function onWindowResize() {
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+}
+
+const clock = new THREE.Clock();
+
+function animate() {
+  // Update delta time
+  deltaTimeUniform.value = Math.min(clock.getDelta(), 0.1);
+
+  // Run physics compute
+  renderer.compute(computeUpdate);
+
+  controls.update();
+  renderer.render(scene, camera);
+}
+
+init();