17 | 如何使用后期处理通道增强图像效果？
月影
该思维导图由 AI 生成，仅供参考
你好，我是月影。
前面几节课，我们学习了利用向量和矩阵公式，来处理像素和生成纹理的技巧，但是这些技巧都有一定的局限性：每个像素是彼此独立的，不能共享信息。
为什么这么说呢？因为 GPU 是并行渲染的，所以在着色器的执行中，每个像素的着色都是同时进行的。这样一来，我们就不能获得某一个像素坐标周围坐标点的颜色信息，也不能获得要渲染图像的全局信息。
这会导致什么问题呢？如果我们要实现与周围像素点联动的效果，比如给生成的纹理添加平滑效果滤镜，就不能直接通过着色器的运算来实现了。
因此，在 WebGL 中，像这样不能直接通过着色器运算来实现的效果，我们需要使用其他的办法来实现，其中一种办法就是使用后期处理通道。所谓后期处理通道，是指将渲染出来的图像作为纹理输入给新着色器处理，是一种二次加工的手段。这么一来，虽然我们不能从当前渲染中获取周围的像素信息，却可以从纹理中获取任意 uv 坐标下的像素信息，也就相当于可以获取任意位置的像素信息了。
使用后期处理通道的一般过程是，我们先正常地将数据送入缓冲区，然后执行 WebGLProgram。只不过，在执行了 WebGLProgram 之后，我们要将输出的结果再作为纹理，送入另一个 WebGLProgram 进行处理，这个过程可以进行一次，也可以循环多次。最后，经过两次 WebGLProgram 处理之后，我们再输出结果。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
本文介绍了如何在WebGL中使用后期处理通道来增强图像的视觉效果。通过具体的代码示例和渲染流程，生动地展示了后期处理通道的应用方法，包括实现Blur滤镜、辉光效果和烟雾效果。核心原理是将第一次渲染后的内容输出到帧缓冲对象FBO中，再将其作为纹理图片进行下一次渲染，重复若干次后输出到屏幕上。读者可以通过本文快速了解并实践该技术，掌握处理图像的细节，包括颜色表示、滤镜处理、纹理造型等。此外，文章还提出了小试牛刀的挑战，鼓励读者改进烟雾扩散效果，并探索后期处理通道的更多功能，如实现类似探照灯效果。整体而言，本文对读者快速了解并实践后期处理通道技术具有一定的指导意义。
仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《跟月影学可视化》，新⼈⾸单¥68
《跟月影学可视化》，新⼈⾸单¥68
立即购买
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(4)
- 最新
- 精选
阿鑫探照灯效果： https://codepen.io/dajiangjun/pen/KKzNqLj。貌似不用后期通道处理更加简单作者回复: 探照灯效果可以用很多方式实现的，后期处理通道当然不只能实现探照灯，关键是能实现其他更复杂效果。
2020-08-212
胡浩好秀啊2020-08-081
有一种踏实后处理方式实现探照灯效果：https://github.com/IDonotK/graphics/blob/master/homework/h17/index3.html 光场函数有待优化，真实的手电筒光场函数是怎么样的？2023-12-26归属地：上海
樊瑞update 中的 renderer.uniforms.tMap = fbo.texture; 出现了两次，虽然不影响效果，但是干扰了学习；想了半天也没想到有什么特殊用处？？？ 第二次可以删了吧2021-03-041
收起评论