@poolzin/pool-bot 2026.1.38 → 2026.2.0

package/skills/webgpu-threejs-tsl/docs/wgsl-integration.md

@@ -1,324 +0,0 @@
-# WGSL Integration
-
-TSL allows embedding raw WGSL (WebGPU Shading Language) code when you need direct GPU control.
-
-## wgslFn - Custom WGSL Functions
-
-### Basic Usage
-
-```javascript
-import { wgslFn, float, vec3 } from 'three/tsl';
-
-// Define WGSL function
-const gammaCorrect = wgslFn(`
-  fn gammaCorrect(color: vec3<f32>, gamma: f32) -> vec3<f32> {
-    return pow(color, vec3<f32>(1.0 / gamma));
-  }
-`);
-
-// Use in TSL
-material.colorNode = gammaCorrect(inputColor, float(2.2));
-```
-
-### Function with Multiple Parameters
-
-```javascript
-const blendColors = wgslFn(`
-  fn blendColors(a: vec3<f32>, b: vec3<f32>, t: f32) -> vec3<f32> {
-    return mix(a, b, t);
-  }
-`);
-
-material.colorNode = blendColors(colorA, colorB, blendFactor);
-```
-
-### Advanced Math Functions
-
-```javascript
-const fresnelSchlick = wgslFn(`
-  fn fresnelSchlick(cosTheta: f32, F0: vec3<f32>) -> vec3<f32> {
-    return F0 + (vec3<f32>(1.0) - F0) * pow(1.0 - cosTheta, 5.0);
-  }
-`);
-
-const GGX = wgslFn(`
-  fn distributionGGX(N: vec3<f32>, H: vec3<f32>, roughness: f32) -> f32 {
-    let a = roughness * roughness;
-    let a2 = a * a;
-    let NdotH = max(dot(N, H), 0.0);
-    let NdotH2 = NdotH * NdotH;
-
-    let num = a2;
-    let denom = (NdotH2 * (a2 - 1.0) + 1.0);
-    denom = 3.14159265359 * denom * denom;
-
-    return num / denom;
-  }
-`);
-```
-
-### Noise Functions
-
-```javascript
-const simplexNoise = wgslFn(`
-  fn mod289(x: vec3<f32>) -> vec3<f32> {
-    return x - floor(x * (1.0 / 289.0)) * 289.0;
-  }
-
-  fn permute(x: vec3<f32>) -> vec3<f32> {
-    return mod289(((x * 34.0) + 1.0) * x);
-  }
-
-  fn snoise(v: vec2<f32>) -> f32 {
-    let C = vec4<f32>(
-      0.211324865405187,
-      0.366025403784439,
-      -0.577350269189626,
-      0.024390243902439
-    );
-
-    var i = floor(v + dot(v, C.yy));
-    let x0 = v - i + dot(i, C.xx);
-
-    var i1: vec2<f32>;
-    if (x0.x > x0.y) {
-      i1 = vec2<f32>(1.0, 0.0);
-    } else {
-      i1 = vec2<f32>(0.0, 1.0);
-    }
-
-    var x12 = x0.xyxy + C.xxzz;
-    x12 = vec4<f32>(x12.xy - i1, x12.zw);
-
-    i = mod289(vec3<f32>(i, 0.0)).xy;
-    let p = permute(permute(i.y + vec3<f32>(0.0, i1.y, 1.0)) + i.x + vec3<f32>(0.0, i1.x, 1.0));
-
-    var m = max(vec3<f32>(0.5) - vec3<f32>(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), vec3<f32>(0.0));
-    m = m * m;
-    m = m * m;
-
-    let x = 2.0 * fract(p * C.www) - 1.0;
-    let h = abs(x) - 0.5;
-    let ox = floor(x + 0.5);
-    let a0 = x - ox;
-
-    m = m * (1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h));
-
-    let g = vec3<f32>(
-      a0.x * x0.x + h.x * x0.y,
-      a0.y * x12.x + h.y * x12.y,
-      a0.z * x12.z + h.z * x12.w
-    );
-
-    return 130.0 * dot(m, g);
-  }
-`);
-
-// Use noise
-const noiseValue = simplexNoise(uv().mul(10.0));
-```
-
-### FBM (Fractal Brownian Motion)
-
-```javascript
-const fbm = wgslFn(`
-  fn fbm(p: vec2<f32>, octaves: i32) -> f32 {
-    var value = 0.0;
-    var amplitude = 0.5;
-    var frequency = 1.0;
-    var pos = p;
-
-    for (var i = 0; i < octaves; i = i + 1) {
-      value = value + amplitude * snoise(pos * frequency);
-      amplitude = amplitude * 0.5;
-      frequency = frequency * 2.0;
-    }
-
-    return value;
-  }
-`);
-```
-
-## WGSL Types Reference
-
-### Scalar Types
-```wgsl
-bool        // Boolean
-i32         // 32-bit signed integer
-u32         // 32-bit unsigned integer
-f32         // 32-bit float
-f16         // 16-bit float (if enabled)
-```
-
-### Vector Types
-```wgsl
-vec2<f32>   // 2D float vector
-vec3<f32>   // 3D float vector
-vec4<f32>   // 4D float vector
-vec2<i32>   // 2D integer vector
-vec2<u32>   // 2D unsigned integer vector
-```
-
-### Matrix Types
-```wgsl
-mat2x2<f32> // 2x2 matrix
-mat3x3<f32> // 3x3 matrix
-mat4x4<f32> // 4x4 matrix
-mat2x3<f32> // 2 columns, 3 rows
-```
-
-### Texture Types
-```wgsl
-texture_2d<f32>
-texture_3d<f32>
-texture_cube<f32>
-texture_storage_2d<rgba8unorm, write>
-```
-
-## WGSL Syntax Reference
-
-### Variables
-```wgsl
-let x = 1.0;              // Immutable
-var y = 2.0;              // Mutable
-const PI = 3.14159;       // Compile-time constant
-```
-
-### Control Flow
-```wgsl
-// If-else
-if (condition) {
-  // ...
-} else if (other) {
-  // ...
-} else {
-  // ...
-}
-
-// For loop
-for (var i = 0; i < 10; i = i + 1) {
-  // ...
-}
-
-// While loop
-while (condition) {
-  // ...
-}
-
-// Switch
-switch (value) {
-  case 0: { /* ... */ }
-  case 1, 2: { /* ... */ }
-  default: { /* ... */ }
-}
-```
-
-### Built-in Functions
-```wgsl
-// Math
-abs(x), sign(x), floor(x), ceil(x), round(x)
-fract(x), trunc(x)
-min(a, b), max(a, b), clamp(x, lo, hi)
-mix(a, b, t), step(edge, x), smoothstep(lo, hi, x)
-sin(x), cos(x), tan(x), asin(x), acos(x), atan(x), atan2(y, x)
-pow(x, y), exp(x), log(x), exp2(x), log2(x)
-sqrt(x), inverseSqrt(x)
-
-// Vector
-length(v), distance(a, b)
-dot(a, b), cross(a, b)
-normalize(v), faceForward(n, i, nref)
-reflect(i, n), refract(i, n, eta)
-
-// Matrix
-transpose(m), determinant(m)
-
-// Texture
-textureSample(t, s, coord)
-textureLoad(t, coord, level)
-textureStore(t, coord, value)
-textureDimensions(t)
-```
-
-## Combining TSL and WGSL
-
-### TSL Wrapper for WGSL
-
-```javascript
-import { Fn, wgslFn, float, vec2, vec3 } from 'three/tsl';
-
-// WGSL implementation
-const wgslNoise = wgslFn(`
-  fn noise2d(p: vec2<f32>) -> f32 {
-    return fract(sin(dot(p, vec2<f32>(12.9898, 78.233))) * 43758.5453);
-  }
-`);
-
-// TSL wrapper with nice API
-const noise = Fn(([position, scale = 1.0]) => {
-  return wgslNoise(position.xy.mul(scale));
-});
-
-// Use
-material.colorNode = vec3(noise(positionWorld, 10.0));
-```
-
-### Hybrid Approach
-
-```javascript
-// Complex math in WGSL
-const complexMath = wgslFn(`
-  fn complexOperation(a: vec3<f32>, b: vec3<f32>, t: f32) -> vec3<f32> {
-    let blended = mix(a, b, t);
-    let rotated = vec3<f32>(
-      blended.x * cos(t) - blended.y * sin(t),
-      blended.x * sin(t) + blended.y * cos(t),
-      blended.z
-    );
-    return normalize(rotated);
-  }
-`);
-
-// Simple logic in TSL
-const finalColor = Fn(() => {
-  const base = texture(diffuseMap).rgb;
-  const processed = complexMath(base, vec3(1, 0, 0), time);
-  return mix(base, processed, oscSine(time));
-});
-
-material.colorNode = finalColor();
-```
-
-## Performance Tips
-
-### Avoid Branching When Possible
-```wgsl
-// Instead of:
-if (x > 0.5) {
-  result = a;
-} else {
-  result = b;
-}
-
-// Use:
-result = mix(b, a, step(0.5, x));
-```
-
-### Use Local Variables
-```wgsl
-fn compute(p: vec2<f32>) -> f32 {
-  // Cache repeated calculations
-  let p2 = p * p;
-  let p4 = p2 * p2;
-  return p2.x + p2.y + p4.x * p4.y;
-}
-```
-
-### Minimize Texture Samples
-```wgsl
-// Sample once, use multiple times
-let sample = textureSample(tex, sampler, uv);
-let r = sample.r;
-let g = sample.g;
-let b = sample.b;
-```

package/skills/webgpu-threejs-tsl/examples/basic-setup.js

@@ -1,87 +0,0 @@
-/**
- * Basic WebGPU Three.js Setup
- *
- * Minimal example showing WebGPU renderer initialization
- * with a simple animated mesh using TSL.
- *
- * Based on Three.js examples (MIT License)
- * https://github.com/mrdoob/three.js
- */
-
-import * as THREE from 'three/webgpu';
-import { color, time, oscSine, positionLocal, normalWorld } from 'three/tsl';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-let camera, scene, renderer, controls;
-
-async function init() {
-  // Camera
-  camera = new THREE.PerspectiveCamera(
-    70,
-    window.innerWidth / window.innerHeight,
-    0.1,
-    100
-  );
-  camera.position.z = 4;
-
-  // Scene
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x111111);
-
-  // Lighting
-  const ambientLight = new THREE.AmbientLight(0x404040);
-  scene.add(ambientLight);
-
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-  directionalLight.position.set(5, 5, 5);
-  scene.add(directionalLight);
-
-  // Create mesh with TSL material
-  const geometry = new THREE.TorusKnotGeometry(1, 0.3, 128, 32);
-  const material = new THREE.MeshStandardNodeMaterial();
-
-  // Animated color using TSL
-  material.colorNode = color(0x0088ff).mul(
-    oscSine(time.mul(0.5)).mul(0.5).add(0.5)
-  );
-
-  // Add slight position wobble
-  material.positionNode = positionLocal.add(
-    normalWorld.mul(oscSine(time.mul(2.0).add(positionLocal.y)).mul(0.05))
-  );
-
-  const mesh = new THREE.Mesh(geometry, material);
-  scene.add(mesh);
-
-  // Renderer
-  renderer = new THREE.WebGPURenderer({ antialias: true });
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.setPixelRatio(window.devicePixelRatio);
-  document.body.appendChild(renderer.domElement);
-
-  // Initialize WebGPU
-  await renderer.init();
-
-  // Controls
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = true;
-
-  // Handle resize
-  window.addEventListener('resize', onWindowResize);
-
-  // Start animation loop
-  renderer.setAnimationLoop(animate);
-}
-
-function onWindowResize() {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-}
-
-function animate() {
-  controls.update();
-  renderer.render(scene, camera);
-}
-
-init();

package/skills/webgpu-threejs-tsl/examples/custom-material.js

@@ -1,170 +0,0 @@
-/**
- * Custom TSL Material Example
- *
- * Demonstrates creating custom shader effects using TSL:
- * - Fresnel rim lighting
- * - Animated patterns
- * - Dynamic displacement
- *
- * Based on Three.js examples (MIT License)
- * https://github.com/mrdoob/three.js
- */
-
-import * as THREE from 'three/webgpu';
-import {
-  Fn,
-  color,
-  float,
-  vec2,
-  vec3,
-  uniform,
-  texture,
-  uv,
-  time,
-  mix,
-  smoothstep,
-  sin,
-  cos,
-  positionLocal,
-  positionWorld,
-  normalLocal,
-  normalWorld,
-  cameraPosition
-} from 'three/tsl';
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-let camera, scene, renderer, controls;
-let rimColor, patternScale, displacementStrength;
-
-async function init() {
-  // Setup
-  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
-  camera.position.z = 3;
-
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(0x000000);
-
-  // Uniforms for runtime control
-  rimColor = uniform(new THREE.Color(0x00ffff));
-  patternScale = uniform(5.0);
-  displacementStrength = uniform(0.1);
-
-  // Create custom material
-  const material = createCustomMaterial();
-
-  // Mesh
-  const geometry = new THREE.IcosahedronGeometry(1, 64);
-  const mesh = new THREE.Mesh(geometry, material);
-  scene.add(mesh);
-
-  // 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;
-
-  // Events
-  window.addEventListener('resize', onWindowResize);
-
-  // GUI (optional - requires lil-gui)
-  setupGUI();
-
-  renderer.setAnimationLoop(animate);
-}
-
-function createCustomMaterial() {
-  const material = new THREE.MeshStandardNodeMaterial();
-
-  // --- Fresnel Rim Effect ---
-  const fresnel = Fn(() => {
-    const viewDir = cameraPosition.sub(positionWorld).normalize();
-    const nDotV = normalWorld.dot(viewDir).saturate();
-    return float(1.0).sub(nDotV).pow(3.0);
-  });
-
-  // --- Animated Pattern ---
-  const animatedPattern = Fn(() => {
-    const uvCoord = uv().mul(patternScale);
-    const t = time.mul(0.5);
-
-    // Create animated wave pattern
-    const wave1 = sin(uvCoord.x.mul(10.0).add(t)).mul(0.5).add(0.5);
-    const wave2 = sin(uvCoord.y.mul(10.0).sub(t.mul(1.3))).mul(0.5).add(0.5);
-    const wave3 = sin(uvCoord.x.add(uvCoord.y).mul(7.0).add(t.mul(0.7))).mul(0.5).add(0.5);
-
-    return wave1.mul(wave2).mul(wave3);
-  });
-
-  // --- Displacement ---
-  const displacement = Fn(() => {
-    const pattern = animatedPattern();
-    return normalLocal.mul(pattern.mul(displacementStrength));
-  });
-
-  // Apply displacement
-  material.positionNode = positionLocal.add(displacement());
-
-  // --- Color ---
-  const baseColor = color(0x222244);
-  const highlightColor = color(0x4444ff);
-
-  // Mix colors based on pattern
-  const pattern = animatedPattern();
-  const surfaceColor = mix(baseColor, highlightColor, pattern);
-
-  material.colorNode = surfaceColor;
-
-  // --- Rim lighting ---
-  material.emissiveNode = rimColor.mul(fresnel());
-
-  // --- PBR properties ---
-  material.roughnessNode = float(0.3).add(pattern.mul(0.4));
-  material.metalnessNode = float(0.1);
-
-  return material;
-}
-
-function setupGUI() {
-  // Only setup if lil-gui is available
-  if (typeof window.GUI === 'undefined') {
-    console.log('Add lil-gui for interactive controls');
-    return;
-  }
-
-  const gui = new GUI();
-  const params = {
-    rimColor: '#00ffff',
-    patternScale: 5.0,
-    displacementStrength: 0.1
-  };
-
-  gui.addColor(params, 'rimColor').onChange((value) => {
-    rimColor.value.set(value);
-  });
-
-  gui.add(params, 'patternScale', 1, 20).onChange((value) => {
-    patternScale.value = value;
-  });
-
-  gui.add(params, 'displacementStrength', 0, 0.5).onChange((value) => {
-    displacementStrength.value = value;
-  });
-}
-
-function onWindowResize() {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-}
-
-function animate() {
-  controls.update();
-  renderer.render(scene, camera);
-}
-
-init();