寻求WebGL2从零实现光线追踪硬阴影的教程与参考资源

核心实现逻辑 #

硬阴影是光线追踪效果里门槛最低的一类，不需要复杂的全局光照或者加速结构就能跑出非常干净的效果，核心判定规则非常简单：

• 对场景中每个被视线命中的表面点，向点光源/平行光源方向发射一条阴影探测射线
• 如果这条射线在到达光源的路径上和任何不透明几何体存在交点，当前点就处于阴影中，直接降低光照计算的贡献值即可
• 如果射线全程无碰撞到光源，当前点就按正常的漫反射、高光规则计算着色
  WebGL2下入门优先选全屏片元着色器逐像素计算的方案，不用一开始折腾复杂的计算着色器或者BVH结构，从简单几何体场景切入，百行左右GLSL代码就能跑通完整效果。

分步实现路径 #

按下面的步骤写，基本不会卡壳：

• 先搭最精简的WebGL2渲染骨架：直接用顶点着色器生成覆盖全屏的三角形，不需要绑定任何顶点缓冲区，片元着色器先输出纯色，确保管线编译、渲染流程跑通。注意GLSL ES 3.00开头必须声明#version 300 es，同时加上precision highp float;避免浮点数精度不足导致的渲染错误。
• 实现基础无阴影光线追踪渲染：在片元着色器里写射线生成逻辑，根据当前片元的归一化设备坐标、相机视场角、位置和朝向，算出每个像素对应视线射线的起点和方向；再封装几个基础几何体的求交函数，比如球体求交intersectSphere、平面求交intersectPlane、轴对齐包围盒求交intersectAABB，先实现不带阴影的漫反射着色，能正常渲染出简单几何体场景就完成这步。
• 叠加硬阴影逻辑：对每个视线求交得到的表面点，先计算点到光源的单位方向向量作为阴影射线方向；把表面点沿着法线方向偏移极小一段距离（比如0.001个场景单位）作为阴影射线的起点，避免射线和当前所在表面自交产生噪点；阴影射线的最大检测长度设为表面点到光源的直线距离，直接复用之前写的几何体求交函数遍历场景，只要存在有效交点就把当前点的光照贡献压到原有的10%左右模拟暗部，没有交点就正常计算光照，此时输出的就是边缘锐利的标准硬阴影。
• 简单效果调优：如果出现阴影表面脏斑、边缘锯齿，微调阴影射线的偏移值即可；10个几何体以内的简单场景完全不需要加速结构，逐像素遍历求交在主流设备上都能稳定跑到60帧。

新手最容易踩的坑就是漏了阴影射线的起点偏移，射线会和当前着色的表面误判相交，导致大面积错误的阴影噪点，只要加了极小偏移就能解决90%的入门bug。

可复用的代码结构参考 #

不需要找复杂的第三方开源项目，核心代码结构非常固定：

• JS端只负责初始化WebGL2上下文、编译链接着色器程序、每帧把相机参数、光源位置、场景几何体参数通过uniform传入着色器，不需要其他额外逻辑
• 片元着色器里的求交函数可以同时给主视线、阴影射线复用，不需要单独为阴影写新的求交逻辑
• 平行光的阴影射线只需要把方向设为固定的光照反方向，射线检测长度设为足够覆盖整个场景的固定值即可，逻辑和点光源几乎没有区别

内容的提问来源于stack exchange，提问作者سعید مزرعه فرهانی