```javascript 'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; // --- 常量配置 --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLORS = { bg: '#0f172a', // Slate 900 grid: '#1e293b', // Slate 800 primary: '#06b6d4', // Cyan 500 secondary: '#8b5cf6',// Violet 500 accent: '#f43f5e', // Rose 500 success: '#10b981', // Emerald 500 warning: '#f59e0b', // Amber 500 textMain: '#f8fafc', // Slate 50 textDim: '#94a3b8', // Slate 400 }; const STAGES = [ { id: 'cpu', title: '1. CPU 指令提交 (Input Assembler)', desc: 'CPU 将 Draw Call 和顶点数据流 (Vertices) 通过 PCIe 总线发送至 GPU。', tech: 'Command Buffer / PCIe Bus', color: COLORS.primary }, { id: 'vertex', title: '2. 几何处理 (Vertex Processing)', desc: '顶点着色器执行坐标变换 (MVP 矩阵)，将 3D 模型投影到 2D 屏幕空间。', tech: 'Vertex Shader / T&L', color: COLORS.secondary }, { id: 'raster', title: '3. 光栅化 (Rasterization)', desc: '图元组装与三角形遍历，将连续的几何图形离散化为片元 (Fragments)。', tech: 'Scanline / Edge Function', color: COLORS.warning }, { id: 'pixel', title: '4. 像素着色 (Pixel Shader)', desc: '对每个片元进行纹理采样 (Texture) 和光照计算 (Lighting)，决定最终颜色。', tech: 'Fragment Shader / ALU', color: COLORS.accent }, { id: 'rop', title: '5. 输出合并 (Output Merger)', desc: '执行深度测试 (Z-Test)、颜色混合 (Blending) 并写入帧缓冲区。', tech: 'ROP / Framebuffer', color: COLORS.success } ]; export const GPURenderingPipeline = () => { // --- 状态管理 --- const [stageIndex, setStageIndex] = useState(0); const [progress, setProgress] = useState(0); // 0.0 ~ 1.0 within stage const [globalTime, setGlobalTime] = useState(0); // --- 动画循环 --- useEffect(() => { let animationFrameId; const stageDuration = 5000; // 每个阶段 5秒 let lastTime = Date.now(); let accumulatedTime = 0; const animate = () => { const now = Date.now(); const delta = now - lastTime; lastTime = now; accumulatedTime += delta; setGlobalTime(t => t + delta); // 计算阶段进度 let nextProgress = accumulatedTime / stageDuration; if (nextProgress >= 1) { accumulatedTime = 0; nextProgress = 0; setStageIndex(prev => (prev + 1) % STAGES.length); } setProgress(nextProgress); animationFrameId = requestAnimationFrame(animate); }; animationFrameId = requestAnimationFrame(animate); return () => cancelAnimationFrame(animationFrameId); }, []); const currentStage = STAGES[stageIndex]; // --- 辅助几何计算 --- // 预计算光栅化网格 const rasterGrid = useMemo(() => { const size = 24; const cols = 16; const rows = 12; const cells = []; const offsetX = VIEW_WIDTH / 2 - (cols * size) / 2; const offsetY = VIEW_HEIGHT / 2 - (rows * size) / 2 - 20; // 定义一个三角形用于光栅化演示 const p1 = { x: 8, y: 1 }; const p2 = { x: 14, y: 10 }; const p3 = { x: 2, y: 10 }; 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 + 0.5, y: r + 0.5 }, p1, p2, p3); cells.push({ x: offsetX + c * size, y: offsetY + r * size, c, r, isInside, size }); } } return { cells, offsetX, offsetY, width: cols * size, height: rows * size }; }, []); // --- 子组件渲染 --- // 1. CPU Stage: 数据流与总线 const renderCPU = () => { if (stageIndex !== 0) return null; const packetCount = 8; return ( {/* CPU Block */} CPU Draw Call {/* Bus Lines */} {/* Moving Data Packets */} {Array.from({ length: packetCount }).map((_, i) => { const delay = i * (1 / packetCount); const localP = (progress + delay) % 1; const xPos = 220 + localP * (VIEW_WIDTH/2 - 220); // Move to center const opacity = localP < 0.8 ? 1 : (1 - localP) * 5; return ( 01 ); })} {/* Central GPU Buffer Accumulator */} Command Buffer Load Vertices... ); }; // 2. Vertex Stage: 3D 变换 const renderVertex = () => { if (stageIndex !== 1) return null; // 模拟旋转矩阵效果 const angle = progress * Math.PI * 2; const scale = 1 + Math.sin(progress * Math.PI) * 0.2; // 3D 点投影到 2D const project = (x, y, z) => { // 简单的 Y 轴旋转 const cos = Math.cos(angle); const sin = Math.sin(angle); const rx = x * cos - z * sin; const rz = x * sin + z * cos; // 透视投影模拟 const fov = 300; const scale2d = fov / (fov + rz + 200); return { x: rx * scale2d * scale, y: y * scale2d * scale }; }; const v0 = project(0, -100, 0); const v1 = project(-80, 80, 50); const v2 = project(80, 80, -50); const cx = VIEW_WIDTH / 2; const cy = VIEW_HEIGHT / 2; return ( {/* Matrix Visualization Background */} [ cosθ 0 sinθ 0 ] [ 0 1 0 0 ] [ -sinθ 0 cosθ 0 ] [ 0 0 0 1 ] {/* Coordinate Grid */} {/* Transformed Triangle */} {/* Vertex Points */} {[v0, v1, v2].map((v, i) => ( v{i} ))} World Space -> Clip Space ); }; // 3. Rasterization Stage: 扫描线 const renderRaster = () => { if (stageIndex !== 2) return null; const { cells, width, height, offsetX, offsetY } = rasterGrid; const scanY = offsetY + (progress * height); // 扫描线位置 return ( {/* Grid Background */} {cells.map((cell, i) => { const isScanned = cell.y < scanY; const isActive = cell.isInside && isScanned; return ( ); })} {/* The Scanline Laser */} FRAGMENT_GENERATION: {Math.floor(progress * 100)}% ); }; // 4. Pixel Shader Stage: 纹理与光照 const renderPixel = () => { if (stageIndex !== 3) return null; const { cells, offsetX, offsetY } = rasterGrid; // Light Source Animation const lightPos = { x: offsetX - 80, y: offsetY + 50 + Math.sin(globalTime * 0.002) * 100 }; return ( {/* Gradient Def */} {/* Pixels being processed */} {cells.map((cell, i) => { if (!cell.isInside) return null; // Calculate distance to "scan wave" const wave = (cell.c + cell.r) * 10; const currentWave = progress * 600; const dist = Math.abs(currentWave - wave); const isProcessing = dist < 50; const isDone = currentWave > wave; if (!isDone && !isProcessing) return null; // Lighting intensity simulation const dx = cell.x - lightPos.x; const dy = cell.y - lightPos.y; const d = Math.sqrt(dx*dx + dy*dy); const intensity = Math.max(0.2, 1 - d/500); return ( {isProcessing && ( )} ); })} {/* Light Source Visual */} Light {/* Math Formula */} Final_Color = Texture(uv) * dot(Normal, Light) ); }; // 5. ROP Stage: 深度与混合 const renderROP = () => { if (stageIndex !== 4) return null; return ( {/* Layers Stack Visualization */} {/* Background Layer (Existing Framebuffer) */} Existing Frame {/* New Primitive Layer */} New Pixel {/* Z-Test Indicator */} Depth Test {progress > 0.3 ? 'PASS' : 'CHECKING...'} {/* Blend Indicator */} 0.5 ? 1 : 0.3}> Alpha Blend SrcOver ); }; return (

); }; ```