什么是延迟着色？与正常的前向明暗处理相比，前向明暗处理的工作模式是:遍历光源，获取光照条件，遍历物体，获取物体的几何数据，最后根据物体的光照和几何数据进行计算。 但是，当有许多光源时，前向着色会消耗大量性能。 因为程序要迭代每一个光源，每一个要渲染的物体，每一个要渲染的线段！还有，片段着色器的输出会被后续的输出覆盖，由于场景中多个对象重合在一个像素上，正向渲染会浪费很多片段着色器的运行时间。 延迟着色就是为了解决上述问题而诞生的，特别是对于需要用成百上千个光源渲染的场景。 见本节效果:延迟着色延迟着色正向着色伪代码:foreach light { foreach visible mesh { if(光照体积中断网格){使用此材质/光照着色器渲染；使用加法混合在帧缓冲区中累积；}}}延迟着色工作模式是将计算量较大的渲染光照部分推迟到后期进行求解，因此包含两个求解阶段(程):第一个几何程是渲染一个物体的各种几何信息，并存储在一个叫做G-buffer的纹理中。 包括主位置矢量、颜色矢量和法向矢量。 存储在G缓冲区中的几何信息将用于以下照明计算。 第二个光照过程是计算G缓冲区中几何数据的每一段的光照。 在光照阶段，不是直接将每个对象从顶点着色器带到片段着色器，而是迭代G缓冲区中的每个像素，以从相应的G缓冲区纹理中获得输入变量。 延迟着色伪代码://g-buffer传递foreach可见网格{将材质属性写入g-buffer；}//光线累积passforeach light {通过读取g-buffer计算光线；在帧缓冲区中累积；} frameBuffer延迟着色G-buffer基于帧缓冲区，涉及高级应用。帧缓冲真的无处不在！在演示的几何求解阶段，位置、法向量和颜色分别缓存，所以要对应建立三个颜色附件。不要忘记同时建立深度测试的深度缓冲区(Z-Buffer)。 const FB = GL . createframebuffer()；bindFramebuffer(gl。帧缓冲区，FB)；const fbo = { framebuffer: fb，纹理:[]}；//为(设i = 0)创建颜色纹理；我& lt3;i++){ const tex = initTexture(gl，{ informat: gl。RGBA16F，型号:gl。FLOAT }、宽度、高度)；frame buffer info . textures . push(tex)；gl.framebufferTexture2D(gl。帧缓冲区。COLOR_ATTACHMENT0 + i，gl。纹理_2D，德克萨斯，0)；}//创建深度渲染缓冲区constdepthbuffer = GL . createdrenderbuffer()；bindRenderbuffer(gl。RENDERBUFFER，depth buffer)；gl.renderbufferStorage(gl。渲染缓冲区。DEPTH_COMPONENT16，宽度，高度)；GL . framebufferrendebuffer(GL。帧缓冲区。深度_附件，总帐。RENDERBUFFER，depth buffer)；多渲染目标draw buffersWebGL实现多渲染目标需要打开扩展WEBGL_draw_buffers，但是WebGL 2.0可以直接使用。 我这里是为了方便，基于WebGL 2.0来实现的。多渲染目标调用如下:GL . draw buffers([GL . color _ attachment 0，gl.color _ attachment 1，GL . color _ attachment 2])；因为着色器延迟着色器分为两个阶段，相应的需要两组着色器。首先，看看几何解算阶段的着色器。 几何阶段顶点着色器(vertex)# version 300 esin vec4 aposition；vec4异常；统一mat4模型矩阵；统一mat4 vpMatrix外部vec3位置；out vec3 vNormalvoid main(){ GL _ Position = VP matrix * model matrix * a Position；v normal = ve C3(transpose(inverse(model matrix))* aNormal)；vPosition = ve C3(model matrix * a position)；}几何解算阶段的段着色器，其中三个输出变量对应于帧缓冲区中的三种颜色纹理。 #版本300 esprecision highp float布局(位置= 0)出vec3位置；//location layout(location = 1)out vec3 gnomal；//法向量布局(location = 2)out vec4 g color；//颜色统一vec4颜色；在vec3位置；在vec3 vNormal中；void main(){ g position = v position；gNormal = normal(vNormal)；gColor =颜色；}然后是光照解决阶段的着色器组。 求解光照阶段的顶点着色器，很简单，对应帧缓冲，也就是一个平面贴图。 #版本300 esin vec3 aPosition在vec2 aTexcoord中；out vec2 texcoordvoid main(){ tex coord = atex coord；gl_Position = vec4(aPosition，1.0)；}在光照求解阶段，片段着色器需要从相应的纹理贴图中取出相应的几何数据。 也就是说，利用纹理函数结合贴图和贴图坐标(texcoord)可以计算出相应的几何数据，然后通过拍一张根瘤的照片就可以渲染出最终的结果。 #版本300 esprecision highp float统一的vec3视图位置；均匀的vec3光方向；均匀的vec3浅色；均匀vec3 ambientColor均匀的漂浮光泽；//自己设置的各种变量...均匀样品gPosition//位置统一sampler2D gNormal//法向量均匀采样gColorvec2 texcoord中的颜色；//坐标出vec4 FragColorvoid main(){ ve C3 frag pos = texture(g position，texcoord)。rgbvec3法线=纹理(gNormal，texcoord)。rgbvec3 color = texture(gColor，texcoord)。rgb// todo:各种计算过程...//环境光ve C3 ambient = ambient color * color；//漫反射//...vec 3 diffuse = light color * color * cosθ；//高亮显示//...vec3镜面=光色*镜面强度；FragColor = vec4(环境光+漫反射+镜面反射，1.0)；WebGL流程最后用JavaScript把整个流程串起来。WebGL的其余技术细节不再赘述。详情请参考我之前的webgl教程。 下面详细介绍一般流程:几何求解阶段:绑定帧缓冲区，切换到相应的程序，设置各种变量，输出到帧缓冲区；光照求解阶段:切换回正常缓冲区，切换到相应的程序，设置各种变量，将上一个几何求解阶段得到的纹理作为输入变量，输出渲染结果；/* * *将场景绘制到帧缓冲区*/gl.bind framebuffer (target，fbo . frame buffer)；//绑定帧缓冲gl.viewport(0，0，width，height)；gl.clear(gl。颜色缓冲位| gl。DEPTH _ BUFFER _ BIT)；//清屏gl.useProgram(程序)；//Sample三色附件(对应几何纹理)GL . draw buffers([GL . color _ attachment 0，gl.color _ attachment 1，GL . color _ attachment 2])；setUniforms(程序、制服)；//设置统一变量setBuffersAndAttributes(gl，vao)；//设置缓存和属性变量drawBufferInfo(gl，vao)；//Write buffer/* * *从帧缓冲区渲染到普通缓冲区*/gl.bind framebuffer (target，null)；//切换回普通缓冲区gl.viewport(0，0，width，height)；gl.clear(gl。颜色缓冲位| gl。DEPTH _ BUFFER _ BIT)；GL . use program(fProgram)；Const uniforms = {// rest变量...gPosition: fbo.textures[0]，//位置纹理gnomal: fbo.textures [1]，//法线矢量纹理gColor: fbo.textures[2]，//颜色纹理}；setUniforms(fProgram，uniforms)；setBuffersAndAttributes(gl，fVao)；drawBufferInfo(gl，fVao)；//输出图片请看本节实现的效果:deferred shardingdemo使用1个平行光源，10个点光源，3个射灯，实现了类似舞厅的多彩渲染效果。 延迟着色在复杂光照条件下有性能优势，但也有缺点:内存开销大。 在光源不多的场景下，延迟渲染并不一定更快，有时甚至会因为开销太大而变得更慢。 当然，在更复杂的场景中，延迟渲染会成为性能优化的重要手段。