🎨 图形学方向
共 20 道题目
WebGL 基础：顶点着色器 & 片元着色器是什么？干什么用？
顶点着色器逐顶点执行，把坐标变换到屏幕空间；片元着色器逐像素执行，决定最终颜色。渲染管线：CPU准备数据 → 顶点着色器变换 → 光栅化 → 片元着色器上色 → 帧缓冲。
Canvas 动画：用 HTML5 Canvas 做动画的大致步骤？
创建canvas获取上下文 → 定义状态和绘制函数 → 清空画布+绘制 → requestAnimationFrame循环。关键：时间步长deltaTime、双缓冲、避免频繁创建对象。
渲染优化：前端复杂场景怎么优化性能？
WebGL/WebGPU替代Canvas2D、批量绘制合并drawCall、LOD远处低模、控制刷新频率、降分辨率、视锥裁剪/遮挡裁剪。
Three.js：如何创建一个最基本的 3D 场景？
场景Scene + 相机PerspectiveCamera + 渲染器WebGLRenderer + 光源Light + 几何体Geometry+材质Material=网格Mesh + requestAnimationFrame动画循环。
图形学算法：什么是贝塞尔曲线？前端哪里会用到？
通过控制点定义的平滑曲线，参数t从0到1插值。应用：CSS cubic-bezier缓动、SVG路径C/Q命令、Canvas的bezierCurveTo、图形编辑器路径。
响应式 3D：WebGL 在不同屏幕尺寸上如何保持体验？
监听resize动态设置renderer.setSize和camera.aspect+updateProjectionMatrix；移动端降分辨率setPixelRatio；自适应UI和手势控制；低端设备减少粒子/面数/后处理。
图形数据处理：前端如何管理/处理大量图形数据？
TypedArray+GPU缓冲VBO存顶点数据；Web Workers/WASM/Compute Shader做密集计算；空间索引八叉树BVH减少复杂度；分块流式加载配合LOD。
实时渲染 vs 非实时渲染：前端里有什么差别？
实时：每秒多帧，16ms内完成一帧（60FPS），如游戏、交互3D。非实时：追求画质，离线光追、输出图片视频。前端实时需平衡画质与性能。
WebGPU vs WebGL：核心区别？
WebGPU抽象自Vulkan/Metal/D3D12，支持现代图形/计算管线、显式资源管理、命令缓冲、Compute Shader。WebGL类似OpenGL ES，简单成熟但功能有限。
什么时候用 WebGPU 而不是 WebGL？实现思路？
场景：大量粒子/物理、复杂后处理、多Pass渲染、ML推理、海量点云/体渲染。策略：Compute Shader预计算、命令缓冲批量提交、多队列多缓冲并行。
Babylon.js 高级功能：物理 / 粒子 / 高级材质？
物理引擎集成（Ammo.js/Cannon.js）支持刚体碰撞关节；粒子系统CPU/GPU粒子做火焰烟雾特效；PBR材质粗糙度金属度环境贴图支持实时反射折射。
WebGPU 着色器：计算着色器 vs 渲染着色器？怎么写高效？
渲染着色器走图形管线输出颜色到帧缓冲；计算着色器不走光栅化直接对缓冲做通用并行计算。高效：合理工作组大小、减少内存带宽、合并计算步骤。
Babylon.js 场景优化手段？
LOD/视锥裁剪、Instances合批、纹理压缩mipmap合并、合理阴影质量和后处理数量、Web Workers/OffscreenCanvas处理重计算。
WebGPU 资源管理：缓冲、纹理、管线怎么管？
缓冲GPUBuffer统一创建复用避免频繁创建销毁；纹理统一纹理池按需加载压缩回收合理设置usage/format/mipmap；管线预创建常用Pipeline通过绑定组重用减少切换。
Babylon.js + VR/AR：关键点？
WebXR API封装一行代码开启XR：createDefaultXRExperienceAsync()。VR双目渲染头部跟踪手柄输入；AR叠加真实摄像头需平面检测光照估计。挑战：双眼渲染性能、晕动症、多设备兼容。
WebGPU 并行计算：怎么用？适合哪些场景？
Compute Shader + Storage Buffer/Texture按工作组划分任务。适合：粒子系统、流体布料模拟、路径规划、图像后处理、ML推理、批量数值计算。优于JS循环和单线程WASM。
Babylon.js 动画系统：关键帧 & 骨骼？
关键帧动画为属性定义keyframes通过Animation/AnimationGroup控制播放；骨骼动画Skeleton+Bones网格顶点绑定骨骼权重，支持从glTF导入可与状态机联动。
WebGPU 的跨平台能力：怎么做到的？要注意啥？
浏览器提供统一API底层适配D3D12/Metal/Vulkan。注意：功能检测feature/limit按设备能力降级、资源对齐格式兼容、回退路径不支持时退到WebGL。
什么是离屏渲染（Offscreen Rendering）？
渲染到帧缓冲/纹理而非直接渲染到屏幕。用途：后期处理Bloom/HDR/模糊、反射阴影贴图、多视图合成、缩略图生成。实现：创建离屏Canvas或Framebuffer绑定为渲染目标。
项目案例：怎么讲一个图形学问题 & 解决方案？（答题套路）
背景（项目类型+问题）→ 分析（Performance/WebGL Inspector定位瓶颈）→ 方案（合批/LOD/纹理压缩等）→ 效果（量化FPS/内存提升）→ 沉淀（工具/文档/模板）。