1.1 Lambert 与漫反射
卷一封版了几何到像素的骨架,卷二只换着色环节。本节从 N·L 的几何含义出发,把 Lambert 漫反射写成纯整数点积加一次算术右移:66 个方向实测受光 30、背光 36,去掉 max(0, N·L) 后出现 81 个负通道,而钳制版所有通道落在 [0, 200]。
tag
卷一封版了几何到像素的骨架,卷二只换着色环节。本节从 N·L 的几何含义出发,把 Lambert 漫反射写成纯整数点积加一次算术右移:66 个方向实测受光 30、背光 36,去掉 max(0, N·L) 后出现 81 个负通道,而钳制版所有通道落在 [0, 200]。
《计算机图形学》卷二《着色、光照与纹理》附录 A:全卷共用的 Q16.16 定点常数表(1/π、9/π、3/π)、逐像素层的量级上界推导、六个着色公式的整数形式速查(Lambert、Phong、Blinn-Phong、GGX、Smith、Schlick)、材质参数表、能量守恒残差汇总,以及各章产物的数据集索引与复现命令。所有数字来自本机实跑。
《计算机图形学》卷二《着色、光照与纹理》目录:16 章 48 节,只替换卷一封版的着色环节——逐顶点 Lambert 改为插值法线后逐像素求值,把光照模型、BRDF 与能量守恒、法线贴图、阴影、环境光遮蔽、微表面 PBR、sRGB 与色调映射、程序化纹理与后处理全部写成可逐像素断言的整数。本页给出分工、六档可运行性口径、卷二新基线与全书 16 章 48 节完整清单。
《计算机图形学》卷二《着色、光照与纹理》全 50 篇。卷一已经把装配、深度与覆盖封版成一组可复现的整数,本卷只替换着色环节:第一部分(第 1–4 章)从经验模型推到可断言的着色——Lambert 与漫反射、Phong 与高光、着色频率与插值,BRDF 与能量守恒、常见 BRDF 的定点化、材质的组合与混合,法线的变换、切线空间、法线贴图的解压与重建,阴影贴图的原理、分辨率偏差与走样、软阴影与 PCF;第二部分(第 5–8 章)处理间接与纹理——环境光遮蔽、SSAO 的采样与噪声、环境贴图与球谐,微表面理论、金属度-粗糙度工作流、能量守恒的验证,线性空间与 sRGB、色调映射、色彩管理的整数化,纹理坐标与寻址模式、过滤与 mipmap 的构造、各向异性过滤;第三部分(第 9–12 章)做程序化纹理与数值一致——值噪声与 Perlin、分形噪声与 fBm、程序化纹理的整数化,卷积与模糊、Bloom 与泛光、色调与调色,时间抗锯齿、抖动与蓝噪声、抗锯齿的度量,最后把浮点的容差口径、图像 digest 与误差度量、CPU 与 GPU 的比对做成可验证的判据;第四部分(第 13–16 章)把材质与光照工程化并装配成完整着色链路,做三种消费的联调并交付卷三。按章节提供仿真、逻辑内核与原型;配套工程与累计快照已有验证;具体范围以对应目录说明为准,按章复现、全部事实与练习另行验收。全书围绕程序化场景《烛影山谷》与工具链 lantern 展开。
顶点上的 UV 直接线性插值到像素是错的:透视投影下屏幕坐标是 x/w,属性在屏幕空间不再线性。正确做法是插值 u/w 与 1/w 再相除。本节在一块近远端 w 相差 2.57 倍的后仰四边形上把两条路径都跑一遍,量出 1923 个像素不同、最大通道偏差 180,再让 WebGL2 用同一份场景复现。
系统讲解 Defold 的材质与着色器体系:.material 文件结构与标签(Tags)、顶点/片元着色器的数据流与内建属性、uniform 常量与 sampler 的声明与传值、渲染脚本中的 enable_material 与 set_constant、溶解/描边/灰度等常见效果的完整实现,以及着色器性能与调试方法。
着色器不是直接丢给 GPU 执行的源码,而要经过预处理、解析、语义分析、优化、生成中间表示、再翻译成各平台后端代码的完整链路。本文拆解 SPIR-V 中间表示的结构与反汇编方法,讲解 glslang/DXC/glslc 离线编译工具、SPIRV-Cross 跨后端翻译、运行时管线缓存与变体管理,以及 WebGPU 通过 Naga 走 WGSL 的另一条路径。
着色器写错时报错只有一行天书,定位全靠猜:本节真跑 getCompilationInfo(),拿到带行号、列号与字符偏移的诊断,并用 11.1 的 include 行映射把它还原成原始文件的文件:行:列,让编辑器能一键跳到出错的那一行源码。
uniform 结构体在 CPU 侧要按完全一致的内存布局填充,手写偏移是 bug 温床:本节从 WGSL 的 struct 反射出每个成员的偏移与整个缓冲区大小,按该布局自动打包参数,并真跑一次渲染回读像素,验证绑定确实生效,偏移对了像素才会对。
WGSL 没有 #include,但引擎要把公共函数拆成多个文件复用:本节在 createShaderModule() 之前做一层文本级 include 展开,处理递归、去重与循环检测,并真跑一次编译与像素回读,验证拼接后的模块确实可编译可用。
沿渲染管线逐级展开图形学核心概念:从模型视图投影矩阵与齐次坐标的变换链,到 Lambert、Phong、Blinn-Phong 光照模型与 BRDF 入门,再讲纹理映射与 Mipmap 采样、深度缓冲与 Z-fighting、背面剔除与视锥裁剪,并对比光栅化与光线追踪两种范式,最后落到着色器职责、伽马校正与 MSAA 抗锯齿。
海洋渲染是实时图形学的经典难题:既有大尺度波动的物理频谱,又有微观表面的反射折射与次表面散射。本文讲解 Gerstner 波的解析构造、Tessendorf FFT 海洋频谱、平面反射与折射的工程实现、Schlick 菲涅尔近似、水体次表面散射与泡沫生成,以及深度、透明度与水下效果的处理,给出从湖面到开放海洋的完整方案。
体积云与大气散射是实时渲染中最具「物理感」的效果之一。本文从体积渲染方程出发,讲解 Raymarching 积分、Beer-Lambert 吸收定律、Henyey-Greenstein 与 Mie 相位函数、Precomputed Atmospheric Scattering 的 LUT 方案、Worley/Perlin 噪声构造云形,以及降采样、时间重投影、蓝噪声抖动等性能优化手段,给出可落地的工程实现路径。
系统覆盖 Defold 着色器与后处理:着色器管线(vertex/fragment)、材质(Material)配置、内置着色器与自定义 GLSL、常用特效(溶解/描边/水波)、全屏后处理(模糊/色调)、性能权衡。
Defold 是一款由 King 开发并开源的轻量级 2D/3D 游戏引擎,以组件化架构、Lua 脚本系统和可视化编辑器著称,支持 HTML5、iOS、Android、Nintendo Switch 等多平台一键发布。本专题系统覆盖 Defold 引擎核心架构与项目结构、编辑器与资源管线、Lua 脚本系统与消息传递机制、精灵动画与 2D 物理引擎、Tilemap 关卡编辑与粒子系统、GUI/UI 开发与 HUD 实现、状态机与复杂游戏逻辑处理、音频系统与资源管理、热更新与 Live Update 资源热更、跨平台构建与发布流程,并延伸精灵与 Flipbook 逐帧动画、go.animate 程序动画、音频系统与混音、寻路与 AI(A*/Navmesh/行为树)、多人联机同步(权威服务器)、性能优化(Draw Call/Profiler)、着色器与后处理(GLSL/材质),并扩展相机与视口、输入系统与手势、粒子系统、游戏存档与序列化、关卡编辑器与数据驱动、IAP 内购与广告变现,帮助开发者从零构建并发布跨平台游戏项目。并进一步覆盖 ECS 与代码架构、本地化与多语言、分析与崩溃上报、测试与持续集成(busted/bob headless/GitHub Actions)、2D 光照与后处理特效,以及团队协作与版本控制工作流。并补齐消息传递架构、补间动画与缓动曲线、GUI 响应式布局、HTML5 导出优化、材质与着色器语言、行为树 AI 等进阶议题。
计算机图形学与 GPU 编程是现代游戏引擎、虚拟现实、科学可视化、影视渲染和 AI 推理加速的核心技术领域。本专题系统覆盖 Vulkan、OpenGL、WebGPU 三大主流图形 API,从渲染管线架构、GLSL 着色器编程语法到 GPU 并行计算模型,深入讲解顶点处理、光栅化、片段着色、纹理采样、帧缓冲操作、延迟渲染与光线追踪,并延伸至光照模型与实时阴影(PBR/CSM/PCSS)、纹理压缩与显存优化、HDR 后处理与抗锯齿、大地形 LOD 与 GPU 驱动渲染、骨骼动画与蒙皮、BVH 光追与混合渲染,以及体积云与大气散射、水面海洋渲染、GPU 粒子特效、可见性剔除(视锥/BVH/Hi-Z)、色彩管理与 HDR 工作流、物理模拟与渲染集成等进阶专题,帮助开发者从零构建完整的图形渲染知识体系。并补齐渲染图与帧调度、GPU 剖析与调试工具链、着色器编译与 SPIR-V、集群前向渲染、SDF 距离场渲染、移动端渲染与功耗优化等进阶议题。
概述 GLSL(OpenGL Shading Language)是 WebGPU 之前最流行的 GPU 着色语言,也是 Vulkan SPIR-V 的生身之本。本文从语法基础出发,依次覆盖五大着色器阶段(顶点、几何、细分、片段、计算),并深入 UBO、SSBO、SPIR-V 互转以及主流版本差异,帮
WebGL 是浏览器端 3D 图形的基石,其性能优化直接影响用户体验和设备续航。本文从 Draw Call 合并、状态排序、纹理压缩、缓冲区管理、着色器优化和内存管理六个维度,系统讲解 WebGL 性能调优的核心技术与实战策略,帮助开发者在目标设备上榨取每一帧的性能潜力。
GLSL(OpenGL Shading Language)统治了图形着色器编程近二十年,而 WGSL(WebGPU Shading Language)作为 WebGPU 的原生语言横空问世。本文从语法结构、类型系统、资源绑定、内置变量、控制流和编译管线六个维度,全面对比 GLSL 与 WGSL 的差异,并提供从 GLSL 向 WGSL 迁移的实战指南和常见陷阱清单。
Three.js 作为最流行的 Web 3D 框架,其高级特性远不止基础几何体和材质。本文深入探讨 Three.js 的物理材质系统(MeshPhysicalMaterial)、基于图像的光照(IBL)、延迟渲染后处理管线(EffectComposer、Bloom、SSAO、Tone Mapping)、LOD 管理、实例化渲染(InstancedMesh)以及与 WebGPU 渲染器的集成,展示如何在浏览器中实现接近原生质量的渲染效果。