webgl-forensics 3.1.0

package/scripts/10-webgpu-extractor.js

@@ -0,0 +1,248 @@
+/**
+ * SCRIPT 10 — WebGPU Extractor
+ * webgl-forensics skill | Enhancement #7
+ *
+ * PURPOSE:
+ *   Detect and extract WebGPU compute shaders, render pipelines, and
+ *   bind group layouts from sites using the WebGPU API (next-gen graphics).
+ *
+ *   WebGPU is the successor to WebGL. Sites using Three.js WebGPURenderer,
+ *   Babylon.js WebGPU mode, or custom WebGPU code will be captured here.
+ *
+ * WHAT IT EXTRACTS:
+ *   - Whether WebGPU is supported + preferred adapter info
+ *   - Detected WebGPU renderer (Three.js WebGPURenderer, Babylon, custom)
+ *   - WGSL shader source (the WebGPU shader language, like GLSL for WebGPU)
+ *   - Pipeline descriptors (vertex, fragment, compute stages)
+ *   - Bind group layouts (how data is passed to shaders)
+ *   - GPU device limits and features
+ *
+ * RUN VIA:
+ *   evaluate_script — run after page loads, before/after navigating
+ *
+ * NOTE:
+ *   WebGPU is still experimental in 2026. Most sites still use WebGL.
+ *   Run this script when 00-tech-stack-detect.js reports:
+ *   - Three.js >= r163 (WebGPURenderer was added in r163)
+ *   - Babylon.js 6.x+ in WebGPU mode
+ *   - Any custom WebGPU code
+ */
+(async () => {
+  const result = {
+    meta: {
+      url: window.location.href,
+      timestamp: new Date().toISOString(),
+      webgpuSupported: typeof navigator.gpu !== 'undefined',
+      webglFallback: typeof WebGLRenderingContext !== 'undefined',
+    },
+    adapter: null,
+    device: null,
+    detectedRenderer: null,
+    pipelines: [],
+    shaders: [],
+    bindGroupLayouts: [],
+    computeShaders: [],
+    recommendations: [],
+  };
+
+  // ═══════════════════════════════════════════════
+  // GUARD — WebGPU detection
+  // ═══════════════════════════════════════════════
+  if (!navigator.gpu) {
+    result.status = 'WebGPU not supported in this browser';
+    result.recommendations.push('This browser does not support WebGPU. Use Chrome 113+ or Edge 113+.');
+    result.recommendations.push('For cloning: this site likely uses WebGL fallback — run scripts 00 and 14 instead.');
+    return result;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 1 — Request adapter info (read-only, no permission needed)
+  // ═══════════════════════════════════════════════
+  try {
+    const adapter = await navigator.gpu.requestAdapter({
+      powerPreference: 'high-performance',
+    });
+
+    if (adapter) {
+      const info = await adapter.requestAdapterInfo?.();
+      result.adapter = {
+        vendor: info?.vendor || 'unknown',
+        architecture: info?.architecture || 'unknown',
+        device: info?.device || 'unknown',
+        description: info?.description || 'unknown',
+        isFallbackAdapter: adapter.isFallbackAdapter,
+        features: [...(adapter.features?.values() || [])],
+        limits: {
+          maxTextureDimension2D: adapter.limits?.maxTextureDimension2D,
+          maxBufferSize: adapter.limits?.maxBufferSize,
+          maxComputeWorkgroupSizeX: adapter.limits?.maxComputeWorkgroupSizeX,
+          maxComputeInvocationsPerWorkgroup: adapter.limits?.maxComputeInvocationsPerWorkgroup,
+          maxBindGroups: adapter.limits?.maxBindGroups,
+          maxSampledTexturesPerShaderStage: adapter.limits?.maxSampledTexturesPerShaderStage,
+        },
+      };
+    }
+  } catch (e) {
+    result.adapter = { error: e.message };
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 2 — Detect WebGPU renderer type
+  // ═══════════════════════════════════════════════
+  function detectWebGPURenderer() {
+    // Three.js WebGPURenderer (r163+)
+    if (window.THREE) {
+      if (window.THREE.WebGPURenderer) {
+        return { name: 'Three.js WebGPURenderer', version: window.THREE.REVISION, detected: true };
+      }
+      // Check if any existing renderer is WebGPU-based
+      if (window.__threeRenderer?.isWebGPURenderer) {
+        return { name: 'Three.js WebGPURenderer (active)', version: window.THREE.REVISION, detected: true };
+      }
+    }
+
+    // Babylon.js WebGPU
+    if (window.BABYLON) {
+      const engine = window.BABYLON.Engine?.LastCreatedEngine;
+      if (engine?.constructor?.name?.includes('WebGPU')) {
+        return { name: 'Babylon.js WebGPU Engine', version: window.BABYLON.Engine?.Version, detected: true };
+      }
+    }
+
+    // wgpu-matrix or raw WebGPU
+    if (window.GPUDevice || document.querySelector('[data-webgpu]')) {
+      return { name: 'Custom WebGPU', detected: true };
+    }
+
+    // Check canvas context types
+    for (const canvas of document.querySelectorAll('canvas')) {
+      try {
+        // Don't actually request context — just check if it was already created
+        const ctx = canvas._gpuContext;
+        if (ctx) return { name: 'Custom WebGPU (canvas detected)', detected: true };
+      } catch(e) {}
+    }
+
+    return { name: null, detected: false };
+  }
+
+  result.detectedRenderer = detectWebGPURenderer();
+
+  // ═══════════════════════════════════════════════
+  // STEP 3 — INTERCEPT WebGPU pipeline creation
+  //           (Monkey-patch for future calls on this page)
+  // ═══════════════════════════════════════════════
+  if (!window.__webgpuIntercepted) {
+    window.__webgpuIntercepted = true;
+    window.__webgpuCaptured = {
+      shaderModules: [],
+      pipelines: [],
+      computePipelines: [],
+    };
+
+    // Intercept GPUDevice.createShaderModule (captures WGSL source)
+    const origCreateShaderModule = GPUDevice.prototype.createShaderModule;
+    GPUDevice.prototype.createShaderModule = function(descriptor) {
+      if (descriptor?.code) {
+        window.__webgpuCaptured.shaderModules.push({
+          label: descriptor.label || `shader_${window.__webgpuCaptured.shaderModules.length}`,
+          code: descriptor.code,
+          capturedAt: Date.now(),
+        });
+        console.log(`🔬 [webgl-forensics] Captured WGSL shader: ${descriptor.label || 'unlabeled'}`);
+      }
+      return origCreateShaderModule.apply(this, arguments);
+    };
+
+    // Intercept createRenderPipeline
+    const origCreateRenderPipeline = GPUDevice.prototype.createRenderPipeline;
+    GPUDevice.prototype.createRenderPipeline = function(descriptor) {
+      window.__webgpuCaptured.pipelines.push({
+        label: descriptor?.label,
+        vertexEntry: descriptor?.vertex?.entryPoint,
+        fragmentEntry: descriptor?.fragment?.entryPoint,
+        topology: descriptor?.primitive?.topology || 'triangle-list',
+        cullMode: descriptor?.primitive?.cullMode || 'none',
+        depthWriteEnabled: descriptor?.depthStencil?.depthWriteEnabled,
+      });
+      return origCreateRenderPipeline.apply(this, arguments);
+    };
+
+    // Intercept createComputePipeline
+    const origCreateComputePipeline = GPUDevice.prototype.createComputePipeline;
+    GPUDevice.prototype.createComputePipeline = function(descriptor) {
+      window.__webgpuCaptured.computePipelines.push({
+        label: descriptor?.label,
+        computeEntry: descriptor?.compute?.entryPoint,
+      });
+      return origCreateComputePipeline.apply(this, arguments);
+    };
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 4 — Collect already-captured data
+  // ═══════════════════════════════════════════════
+  if (window.__webgpuCaptured) {
+    result.shaders = window.__webgpuCaptured.shaderModules.map(s => ({
+      label: s.label,
+      wgsl: s.code.slice(0, 3000), // first 3000 chars
+      length: s.code.length,
+      hasComputeStage: s.code.includes('@compute'),
+      hasVertexStage: s.code.includes('@vertex'),
+      hasFragmentStage: s.code.includes('@fragment'),
+      uniforms: [...s.code.matchAll(/@group\((\d+)\) @binding\((\d+)\) var(?:<uniform>)? (\w+)/g)]
+        .map(m => ({ group: m[1], binding: m[2], name: m[3] })),
+      storageBuffers: [...s.code.matchAll(/@group\((\d+)\) @binding\((\d+)\) var<storage/g)]
+        .map(m => ({ group: m[1], binding: m[2] })),
+    }));
+
+    result.pipelines = window.__webgpuCaptured.pipelines;
+    result.computeShaders = window.__webgpuCaptured.computePipelines;
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 5 — Three.js WebGPURenderer specific extraction
+  // ═══════════════════════════════════════════════
+  if (window.THREE?.WebGPURenderer && window.__threeRenderer?.isWebGPURenderer) {
+    const renderer = window.__threeRenderer;
+    try {
+      result.threeWebGPU = {
+        isWebGPURenderer: true,
+        backend: renderer.backend?.constructor?.name,
+        info: {
+          memory: renderer.info?.memory,
+          render: renderer.info?.render,
+        },
+        // Three.js WebGPU uses a node-based material system
+        nodeBuilderCache: renderer._nodeBuilderCache
+          ? Object.keys(renderer._nodeBuilderCache).length + ' cached nodes'
+          : null,
+      };
+    } catch(e) {
+      result.threeWebGPU = { error: e.message };
+    }
+  }
+
+  // ═══════════════════════════════════════════════
+  // STEP 6 — Recommendations
+  // ═══════════════════════════════════════════════
+  if (!result.detectedRenderer.detected) {
+    result.recommendations.push('No WebGPU renderer detected. This site likely uses WebGL — run script 14 for shader extraction.');
+  } else {
+    result.recommendations.push(`Detected: ${result.detectedRenderer.name}`);
+    if (result.shaders.length === 0) {
+      result.recommendations.push('No WGSL shaders captured yet. The intercept is now installed — hard-reload the page to capture shader compilation.');
+    } else {
+      result.recommendations.push(`Captured ${result.shaders.length} WGSL shader modules.`);
+    }
+    if (result.shaders.some(s => s.hasComputeStage)) {
+      result.recommendations.push('⚡ Compute shaders found — this site does GPU-side computation (particles, physics, image processing).');
+    }
+  }
+
+  result.status = result.detectedRenderer.detected
+    ? `WebGPU detected: ${result.detectedRenderer.name}`
+    : 'WebGPU supported by browser but not used by this site';
+
+  return result;
+})()

package/scripts/11-scroll-screenshot-grid.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+/**
+ * SCRIPT 11 — Auto-Scroll Screenshot Grid
+ * webgl-forensics skill | Enhancement #9
+ *
+ * STANDALONE USAGE (no browser DevTools needed):
+ *   node puppeteer-runner.js https://cappen.com
+ *
+ * EVALUATE_SCRIPT MODE:
+ *   Paste into Chrome console or evaluate_script tool
+ *   Results: returns scroll positions for use with take_screenshot tool
+ *
+ * Purpose: Generate a complete visual map of the site by:
+ *   1. Getting total page height
+ *   2. Calculating 10 scroll positions (0%, 10%, 20%... 100%)
+ *   3. Returning the scroll positions for sequential screenshot capture
+ *
+ * In evaluate_script mode — returns positions only (screenshots are manual).
+ * In puppeteer mode — auto-scrolls and screenshots.
+ */
+
+// ════════════════════════════════════════════════
+// BROWSER CONSOLE / evaluate_script VERSION
+// ════════════════════════════════════════════════
+const BROWSER_IIFE = `
+(() => {
+  const totalHeight = document.documentElement.scrollHeight;
+  const viewportHeight = window.innerHeight;
+  const steps = 10;
+
+  const positions = [];
+  for (let i = 0; i <= steps; i++) {
+    const pct = i / steps;
+    const y = Math.round(pct * (totalHeight - viewportHeight));
+    positions.push({
+      step: i,
+      percentage: Math.round(pct * 100) + '%',
+      scrollY: y,
+      instructions: [
+        \`window.scrollTo(0, \${y})\`,
+        \`take_screenshot → save as "scroll-\${Math.round(pct * 100)}pct.png"\`,
+      ],
+    });
+  }
+
+  console.log('📸 SCREENSHOT GRID PLAN:');
+  console.table(positions.map(p => ({ pct: p.percentage, scrollY: p.scrollY })));
+
+  return {
+    totalPageHeight: totalHeight + 'px',
+    viewportHeight: viewportHeight + 'px',
+    scrollableArea: (totalHeight - viewportHeight) + 'px',
+    screenshotCount: steps + 1,
+    positions,
+    instructions: [
+      'For each position:',
+      '1. Call: window.scrollTo(0, {scrollY})',
+      '2. Wait 500ms for animations to settle',
+      '3. Call: take_screenshot and save with the step name',
+      'Or use evaluate_script with: window.scrollTo(0, {y}); then take_screenshot',
+    ],
+  };
+})()
+`;
+
+// If running in Node.js via puppeteer, export the logic
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = { BROWSER_IIFE };
+}
+
+// Print the script for use in browser console
+if (typeof window === 'undefined') {
+  console.log('Paste the following into evaluate_script or browser console:');
+  console.log('─'.repeat(60));
+  console.log(BROWSER_IIFE);
+}

package/scripts/12-network-waterfall.js

@@ -0,0 +1,151 @@
+/**
+ * SCRIPT 12 — Network Waterfall & CDN Fingerprinting
+ * webgl-forensics skill | Enhancement #2
+ *
+ * Run via: evaluate_script (paste entire IIFE)
+ * Purpose: Map the network delivery architecture:
+ *   - CDN provider identification from headers
+ *   - Critical rendering path (what blocks first paint)
+ *   - External origin analysis
+ *   - Cache strategy
+ *   - Assets worth replicating vs. avoiding
+ */
+(() => {
+  const result = {
+    url: window.location.href,
+    delivery: {},
+    criticalPath: [],
+    externalOrigins: {},
+    heaviestByType: {},
+    performanceBudget: {},
+    recommendations: [],
+  };
+
+  // ═══ RESOURCE TIMING API ═══
+  const resources = performance.getEntriesByType('resource');
+
+  if (!resources.length) {
+    return { error: 'No resource timing data. Try running after full page load.' };
+  }
+
+  // ═══ CDN FINGERPRINTING ═══
+  // Can't read response headers in JS (CORS), but can infer from resource URLs
+  const cdnPatterns = [
+    { name: 'Vercel Edge', pattern: /vercel\.app|vercel\.com|v\.cdn\.vercel\.com/i },
+    { name: 'Cloudflare', pattern: /cloudflare|workers\.dev|pages\.dev/i },
+    { name: 'Fastly', pattern: /fastly\.net/i },
+    { name: 'AWS CloudFront', pattern: /cloudfront\.net/i },
+    { name: 'Netlify', pattern: /netlify\.app|netlify\.com/i },
+    { name: 'Akamai', pattern: /akamai\.net|akamaized\.net/i },
+    { name: 'jsDelivr', pattern: /jsdelivr\.net/i },
+    { name: 'UNPKG', pattern: /unpkg\.com/i },
+    { name: 'Google CDN', pattern: /googleapis\.com|gstatic\.com/i },
+    { name: 'Bunny CDN', pattern: /b-cdn\.net|bunnycdn\.com/i },
+  ];
+
+  const detectedCDNs = new Set();
+  resources.forEach(r => {
+    cdnPatterns.forEach(({ name, pattern }) => {
+      if (pattern.test(r.name)) detectedCDNs.add(name);
+    });
+  });
+
+  // Check host itself
+  cdnPatterns.forEach(({ name, pattern }) => {
+    if (pattern.test(window.location.hostname)) detectedCDNs.add(name + ' (host)');
+  });
+
+  result.delivery.cdns = [...detectedCDNs];
+  result.delivery.protocol = performance.getEntriesByType('navigation')[0]?.nextHopProtocol || 'unknown';
+  result.delivery.serviceWorker = !!navigator.serviceWorker?.controller;
+
+  // ═══ RESOURCE BREAKDOWN ═══
+  const byType = {};
+  resources.forEach(r => {
+    const type = r.initiatorType;
+    if (!byType[type]) byType[type] = { count: 0, totalKB: 0, items: [] };
+    byType[type].count++;
+    byType[type].totalKB += (r.transferSize / 1024);
+    byType[type].items.push({
+      name: r.name.split('/').pop().slice(0, 50),
+      size: (r.transferSize / 1024).toFixed(1) + 'KB',
+      duration: r.duration.toFixed(0) + 'ms',
+      cached: r.transferSize === 0,
+    });
+  });
+
+  // Sort by size, keep top 5 per type
+  Object.keys(byType).forEach(type => {
+    byType[type].totalKB = byType[type].totalKB.toFixed(1) + 'KB';
+    byType[type].items = byType[type].items
+      .sort((a, b) => parseFloat(b.size) - parseFloat(a.size))
+      .slice(0, 5);
+  });
+
+  result.heaviestByType = byType;
+
+  // ═══ CRITICAL RENDERING PATH ═══
+  // Resources loaded before first paint are render-blocking
+  const fcp = performance.getEntriesByType('paint').find(p => p.name === 'first-contentful-paint');
+  const fcpTime = fcp?.startTime || Infinity;
+
+  result.criticalPath = resources
+    .filter(r => r.startTime < fcpTime && r.transferSize > 0)
+    .sort((a, b) => a.startTime - b.startTime)
+    .slice(0, 15)
+    .map(r => ({
+      name: r.name.split('/').pop().slice(0, 60),
+      type: r.initiatorType,
+      startTime: r.startTime.toFixed(0) + 'ms',
+      duration: r.duration.toFixed(0) + 'ms',
+      size: (r.transferSize / 1024).toFixed(1) + 'KB',
+      renderBlocking: r.renderBlockingStatus === 'blocking' || r.initiatorType === 'link',
+    }));
+
+  // ═══ EXTERNAL ORIGINS ═══
+  const origins = {};
+  resources.forEach(r => {
+    try {
+      const origin = new URL(r.name).origin;
+      if (origin !== window.location.origin) {
+        if (!origins[origin]) origins[origin] = { count: 0, totalKB: 0 };
+        origins[origin].count++;
+        origins[origin].totalKB += r.transferSize / 1024;
+      }
+    } catch(e) {}
+  });
+
+  result.externalOrigins = Object.fromEntries(
+    Object.entries(origins).sort((a, b) => b[1].totalKB - a[1].totalKB)
+  );
+
+  // ═══ PERFORMANCE BUDGET CHECK ═══
+  const totalJS = resources.filter(r => r.initiatorType === 'script')
+    .reduce((acc, r) => acc + r.transferSize, 0) / 1024;
+  const totalCSS = resources.filter(r => r.initiatorType === 'link' || r.initiatorType === 'css')
+    .reduce((acc, r) => acc + r.transferSize, 0) / 1024;
+  const totalImages = resources.filter(r => r.initiatorType === 'img')
+    .reduce((acc, r) => acc + r.transferSize, 0) / 1024;
+  const total3D = resources.filter(r => /\.(glb|gltf|obj|fbx|draco|basis)/i.test(r.name))
+    .reduce((acc, r) => acc + r.transferSize, 0) / 1024;
+  const totalFonts = resources.filter(r => r.initiatorType === 'font' || /\.(woff2?|ttf|otf)/i.test(r.name))
+    .reduce((acc, r) => acc + r.transferSize, 0) / 1024;
+
+  result.performanceBudget = {
+    javascript: { actual: totalJS.toFixed(1) + 'KB', budget: '500KB', over: totalJS > 500 },
+    css: { actual: totalCSS.toFixed(1) + 'KB', budget: '100KB', over: totalCSS > 100 },
+    images: { actual: totalImages.toFixed(1) + 'KB', budget: '1000KB', over: totalImages > 1000 },
+    fonts: { actual: totalFonts.toFixed(1) + 'KB', budget: '150KB', over: totalFonts > 150 },
+    '3dAssets': { actual: total3D.toFixed(1) + 'KB', budget: '2000KB', over: total3D > 2000 },
+    total: ((totalJS + totalCSS + totalImages + totalFonts + total3D)).toFixed(1) + 'KB',
+  };
+
+  // ═══ CLONE RECOMMENDATIONS ═══
+  if (totalJS > 1000) result.recommendations.push('⚠️ JS bundle > 1MB — investigate with source map extractor to find what\'s large');
+  if (total3D > 0) result.recommendations.push(`✅ 3D assets found (${total3D.toFixed(1)}KB) — download and optimize for clone`);
+  if (totalFonts > 300) result.recommendations.push('⚠️ Heavy fonts — consider subsetting or using variable fonts in clone');
+  if (result.delivery.serviceWorker) result.recommendations.push('🔧 Service Worker detected — implement for offline functionality in clone');
+  if (detectedCDNs.size === 0) result.recommendations.push('ℹ️ No major CDN detected — self-hosted or unknown delivery');
+
+  return result;
+})()