WebGL 发光效果
WebGL glow effect
我开始学习着色器,玩弄 ShaderToy.com。对于我想做的项目,我需要在 WebGL(不是 Bloom)上创建一个任意的辉光滤镜。我想计算 alpha,然后我可以用它来绘制颜色发光或用于一些动画纹理,如火等。
到目前为止我想到了几个想法:
- 在每个像素附近的某些区域平均 alpha - 显然很慢
- 在一个循环中围绕每个像素转一圈,然后在另一个循环中越过距离,根据形状与该像素的接近程度计算 alpha - 可能同样慢
- 模糊整个形状 - 听起来有点矫枉过正,因为我只需要 alpha
还有其他解决方法吗?我能找到的只是来自 bloom-like 过滤器的高斯模糊技术。
简单的发光效果请找这个nvidia document。
基本思路是
- 在后台缓冲区渲染场景
- 激活效果
- 在 FBO 中渲染场景的一些元素
- 计算发光效果
- 将最终的 FBO 绑定为纹理,并将此效果与后台缓冲区中先前渲染的场景混合
我开始学习着色器,玩弄 ShaderToy.com。对于我想做的项目,我需要在 WebGL(不是 Bloom)上创建一个任意的辉光滤镜。我想计算 alpha,然后我可以用它来绘制颜色发光或用于一些动画纹理,如火等。
到目前为止我想到了几个想法:
- 在每个像素附近的某些区域平均 alpha - 显然很慢
- 在一个循环中围绕每个像素转一圈,然后在另一个循环中越过距离,根据形状与该像素的接近程度计算 alpha - 可能同样慢
- 模糊整个形状 - 听起来有点矫枉过正,因为我只需要 alpha
还有其他解决方法吗?我能找到的只是来自 bloom-like 过滤器的高斯模糊技术。
简单的发光效果请找这个nvidia document。 基本思路是
- 在后台缓冲区渲染场景
- 激活效果
- 在 FBO 中渲染场景的一些元素
- 计算发光效果
- 将最终的 FBO 绑定为纹理,并将此效果与后台缓冲区中先前渲染的场景混合