'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLORS = { bg: '#0f172a', primary: '#06b6d4', // Cyan secondary: '#8b5cf6', // Violet accent: '#f43f5e', // Rose text: '#e2e8f0', grid: '#1e293b', terminal: '#10b981' // Emerald }; const STAGES = [ { id: 'cpu', title: '1. CPU 指令与数据', desc: 'CPU 发送 Draw Call，准备顶点数据 (Vertices)', tech: 'Command Buffer / Input Assembler' }, { id: 'vertex', title: '2. 几何处理 (Geometry)', desc: '顶点着色器处理坐标变换，构建图元', tech: 'Vertex Shader / T&L' }, { id: 'raster', title: '3. 光栅化 (Rasterization)', desc: '将连续的几何图形转换为离散的片元 (Fragments)', tech: 'Rasterizer / Scanline' }, { id: 'pixel', title: '4. 像素着色 & 纹理', desc: '计算光照、颜色，应用纹理映射', tech: 'Pixel Shader / Texture Mapping' }, { id: 'rop', title: '5. 输出合并 (Output)', desc: '深度测试 (Z-Test)、抗锯齿 (AA) 与帧缓冲', tech: 'ROP / Depth Test / Anti-Aliasing' } ]; export const GPURenderingPipeline = () => { const [stageIndex, setStageIndex] = useState(0); const [progress, setProgress] = useState(0); // Animation loop logic useEffect(() => { const stageDuration = 4000; // ms per stage const intervalTime = 16; // ~60fps let startTime = Date.now(); const timer = setInterval(() => { const now = Date.now(); const elapsed = now - startTime; let p = elapsed / stageDuration; if (p >= 1) { p = 0; startTime = now; setStageIndex(prev => (prev + 1) % STAGES.length); } setProgress(p); }, intervalTime); return () => clearInterval(timer); }, []); const currentStage = STAGES[stageIndex]; // Helper to generate grid for rasterization const gridCells = useMemo(() => { const cells = []; const size = 20; const rows = 15; const cols = 15; const offsetX = VIEW_WIDTH / 2 - (cols * size) / 2; const offsetY = VIEW_HEIGHT / 2 - (rows * size) / 2; // Triangle definition for raster check const p1 = { x: 7, y: 1 }; const p2 = { x: 13, y: 13 }; const p3 = { x: 1, y: 13 }; // Barycentric technique helper (simplified check) const sign = (p1, p2, p3) => (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y); const pointInTriangle = (pt, v1, v2, v3) => { const d1 = sign(pt, v1, v2); const d2 = sign(pt, v2, v3); const d3 = sign(pt, v3, v1); const hasNeg = (d1 < 0) || (d2 < 0) || (d3 < 0); const hasPos = (d1 > 0) || (d2 > 0) || (d3 > 0); return !(hasNeg && hasPos); }; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const isInside = pointInTriangle({ x: c, y: r }, p1, p2, p3); // Edge detection for AA visualization const isEdge = isInside && ( !pointInTriangle({ x: c+1, y: r }, p1, p2, p3) || !pointInTriangle({ x: c-1, y: r }, p1, p2, p3) || !pointInTriangle({ x: c, y: r-1 }, p1, p2, p3) || !pointInTriangle({ x: c, y: r+1 }, p1, p2, p3) ); cells.push({ x: offsetX + c * size, y: offsetY + r * size, c, r, isInside, isEdge, size }); } } return cells; }, []); // --- RENDERING SUB-COMPONENTS --- // 1. CPU Stage: Streaming Data const renderCPUStage = () => { const opacity = stageIndex === 0 ? 1 : 0; if (stageIndex !== 0) return null; return ( CPU_INSTRUCTION_SET: DRAW_PRIMITIVE(TRIANGLE_LIST) {/* Binary Stream */} {Array.from({ length: 15 }).map((_, i) => ( {Math.random() > 0.5 ? '1' : '0'} {Math.random() > 0.5 ? '0' : '1'} {Math.random() > 0.5 ? '1' : '0'} ))} {/* Raw Vertices */} v0 (0, 1, 0) ); }; // 2. Vertex Stage: Wireframe Rotation const renderVertexStage = () => { if (stageIndex !== 1) return null; // Simulate 3D rotation via 2D projection const angle = progress * Math.PI * 2; const radius = 80; // Simple rotation logic const x1 = Math.sin(angle) * radius; const x2 = Math.sin(angle + 2.09) * radius; const x3 = Math.sin(angle + 4.18) * radius; const cx = VIEW_WIDTH / 2; const cy = VIEW_HEIGHT / 2; return ( {/* Wireframe Triangle */} {/* Vertices */} {/* Axis */} ); }; // 3. Rasterization Stage: Grid Scanning const renderRasterStage = () => { if (stageIndex !== 2) return null; const scanLineY = (VIEW_HEIGHT / 2 - 150) + (progress * 300); return ( {/* The Grid */} {gridCells.map((cell, i) => { // If scanline passed this cell const passed = cell.y < scanLineY; const isActive = cell.isInside && passed; return ( ); })} {/* Scanline */} SCANLINE ); }; // 4. Pixel Shader Stage: Texture & Coloring const renderPixelStage = () => { if (stageIndex !== 3) return null; return ( {gridCells.map((cell, i) => { if (!cell.isInside) return null; // Animate texture coordinate fill const delay = (cell.c + cell.r) * 0.05; const fillProgress = Math.max(0, Math.min(1, (progress * 2) - delay)); return ( {/* Background block */} {/* Texture fill */} {/* UV Coordinate Text (Simplified) */} {fillProgress > 0.8 && ( UV )} ); })} {/* Sample Texture Source on the side */} Texture Map ); }; // 5. ROP Stage: Depth & Anti-Aliasing const renderROPStage = () => { if (stageIndex !== 4) return null; // AA Effect: Blur edges then sharpen const blurAmount = progress < 0.5 ? (0.5 - progress) * 10 : 0; const finalOpacity = progress > 0.5 ? (progress - 0.5) * 2 : 0; return ( {/* Blocky version fading out */} {gridCells.map((cell, i) => { if (!cell.isInside) return null; return ( ); })} {/* Smooth Version Fading In */} {/* Z-Buffer Depth Check Visual */} Z-Buffer PASS {/* AA Label */} Anti-Aliasing: ON (4x MSAA) ); }; return ( ); };