@poolzin/pool-bot 2026.1.38 → 2026.2.0

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

@@ -1,292 +0,0 @@
-/**
- * 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/skills/webgpu-threejs-tsl/examples/particle-system.js

@@ -1,259 +0,0 @@
-/**
- * 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
-  await renderer.computeAsync(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).negate().mul(-1));
-
-      // 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();