@poolzin/pool-bot 2026.1.38 → 2026.2.0

package/skills/webgpu-threejs-tsl/templates/webgpu-project.js

@@ -1,276 +0,0 @@
-/**
- * WebGPU Three.js Project Template
- *
- * A complete starter template with:
- * - WebGPU renderer setup
- * - TSL material example
- * - Post-processing ready
- * - Responsive design
- * - Animation loop
- *
- * Usage:
- * 1. Copy this file to your project
- * 2. Install Three.js: npm install three
- * 3. Replace placeholder content with your scene
- */
-
-import * as THREE from 'three/webgpu';
-import {
-  // Types
-  float,
-  vec2,
-  vec3,
-  vec4,
-  color,
-  uniform,
-
-  // Geometry
-  positionLocal,
-  positionWorld,
-  normalLocal,
-  normalWorld,
-  uv,
-
-  // Camera
-  cameraPosition,
-
-  // Time
-  time,
-  deltaTime,
-
-  // Math
-  mix,
-  smoothstep,
-  clamp,
-  sin,
-  cos,
-
-  // Texture
-  texture,
-
-  // Functions
-  Fn,
-  If,
-  Loop,
-
-  // Post-processing
-  pass
-} from 'three/tsl';
-
-import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-
-// ============================================
-// CONFIGURATION
-// ============================================
-
-const CONFIG = {
-  // Renderer
-  antialias: true,
-  pixelRatio: Math.min(window.devicePixelRatio, 2),
-
-  // Camera
-  fov: 60,
-  near: 0.1,
-  far: 1000,
-  position: new THREE.Vector3(0, 2, 5),
-
-  // Scene
-  backgroundColor: 0x111111,
-
-  // Controls
-  enableDamping: true,
-  dampingFactor: 0.05
-};
-
-// ============================================
-// GLOBALS
-// ============================================
-
-let camera, scene, renderer, controls;
-let clock;
-
-// Add your uniforms here
-const uniforms = {
-  // Example: myColor: uniform(new THREE.Color(0xff0000))
-};
-
-// ============================================
-// INITIALIZATION
-// ============================================
-
-async function init() {
-  // Clock
-  clock = new THREE.Clock();
-
-  // Scene
-  scene = new THREE.Scene();
-  scene.background = new THREE.Color(CONFIG.backgroundColor);
-
-  // Camera
-  camera = new THREE.PerspectiveCamera(
-    CONFIG.fov,
-    window.innerWidth / window.innerHeight,
-    CONFIG.near,
-    CONFIG.far
-  );
-  camera.position.copy(CONFIG.position);
-
-  // Renderer
-  renderer = new THREE.WebGPURenderer({ antialias: CONFIG.antialias });
-  renderer.setSize(window.innerWidth, window.innerHeight);
-  renderer.setPixelRatio(CONFIG.pixelRatio);
-  document.body.appendChild(renderer.domElement);
-
-  // Initialize WebGPU
-  await renderer.init();
-
-  // Controls
-  controls = new OrbitControls(camera, renderer.domElement);
-  controls.enableDamping = CONFIG.enableDamping;
-  controls.dampingFactor = CONFIG.dampingFactor;
-
-  // Setup scene content
-  setupLights();
-  setupScene();
-
-  // Optional: Setup post-processing
-  // setupPostProcessing();
-
-  // Events
-  window.addEventListener('resize', onWindowResize);
-
-  // Start animation loop
-  renderer.setAnimationLoop(animate);
-}
-
-// ============================================
-// SCENE SETUP
-// ============================================
-
-function setupLights() {
-  // Ambient light
-  const ambientLight = new THREE.AmbientLight(0x404040, 0.5);
-  scene.add(ambientLight);
-
-  // Directional light
-  const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
-  directionalLight.position.set(5, 10, 5);
-  directionalLight.castShadow = true;
-  scene.add(directionalLight);
-
-  // Add more lights as needed
-}
-
-function setupScene() {
-  // ========================================
-  // ADD YOUR SCENE CONTENT HERE
-  // ========================================
-
-  // Example: Create a mesh with TSL material
-  const geometry = new THREE.BoxGeometry(1, 1, 1);
-  const material = createExampleMaterial();
-  const mesh = new THREE.Mesh(geometry, material);
-  scene.add(mesh);
-
-  // Example: Add a floor
-  const floorGeometry = new THREE.PlaneGeometry(10, 10);
-  const floorMaterial = new THREE.MeshStandardNodeMaterial({
-    color: 0x333333
-  });
-  const floor = new THREE.Mesh(floorGeometry, floorMaterial);
-  floor.rotation.x = -Math.PI / 2;
-  floor.position.y = -0.5;
-  scene.add(floor);
-}
-
-function createExampleMaterial() {
-  const material = new THREE.MeshStandardNodeMaterial();
-
-  // ========================================
-  // CUSTOMIZE YOUR MATERIAL HERE
-  // ========================================
-
-  // Example: Animated color
-  material.colorNode = Fn(() => {
-    const t = time.mul(0.5).sin().mul(0.5).add(0.5);
-    return mix(color(0x0066ff), color(0xff6600), t);
-  })();
-
-  // Example: PBR properties
-  material.roughnessNode = float(0.5);
-  material.metalnessNode = float(0.0);
-
-  // Example: Simple fresnel rim
-  material.emissiveNode = Fn(() => {
-    const viewDir = cameraPosition.sub(positionWorld).normalize();
-    const fresnel = float(1.0).sub(normalWorld.dot(viewDir).saturate()).pow(3.0);
-    return color(0x00ffff).mul(fresnel).mul(0.5);
-  })();
-
-  return material;
-}
-
-// ============================================
-// POST-PROCESSING (Optional)
-// ============================================
-
-let postProcessing;
-
-function setupPostProcessing() {
-  // Uncomment and customize as needed
-
-  // postProcessing = new THREE.PostProcessing(renderer);
-  // const scenePass = pass(scene, camera);
-  // const sceneColor = scenePass.getTextureNode('output');
-  //
-  // // Add effects here
-  // postProcessing.outputNode = sceneColor;
-}
-
-// ============================================
-// ANIMATION LOOP
-// ============================================
-
-function animate() {
-  const delta = clock.getDelta();
-  const elapsed = clock.getElapsedTime();
-
-  // ========================================
-  // UPDATE YOUR SCENE HERE
-  // ========================================
-
-  // Example: Rotate mesh
-  const mesh = scene.children.find((child) => child.type === 'Mesh');
-  if (mesh) {
-    mesh.rotation.y += delta * 0.5;
-  }
-
-  // Update controls
-  controls.update();
-
-  // Render
-  if (postProcessing) {
-    postProcessing.render();
-  } else {
-    renderer.render(scene, camera);
-  }
-}
-
-// ============================================
-// EVENT HANDLERS
-// ============================================
-
-function onWindowResize() {
-  camera.aspect = window.innerWidth / window.innerHeight;
-  camera.updateProjectionMatrix();
-  renderer.setSize(window.innerWidth, window.innerHeight);
-}
-
-// ============================================
-// START
-// ============================================
-
-init().catch(console.error);
-
-// Export for external access if needed
-export { scene, camera, renderer, uniforms };