问题描述
我开始学习着色器,在Shadertoy.com上玩耍.对于我想制定的项目,我需要在WebGL上创建一个任意的Glow滤波器(不是Bloom).我想计算我可以用来绘制颜色发光或用于某些动画纹理(例如火等)的alpha.
.到目前为止,我想到了一些想法:
- 平均每个像素附近的某些区域的α-显然很慢
- 在一个循环中围绕每个像素绕一个循环,然后在另一个循环中绕过另一个像素,以根据形状与该像素的形状有多近来计算alpha-可能同样慢
- 整个形状模糊 - 听起来像是一个过度杀伤,因为我只需要alpha
还有其他想法可以接近这一点吗?我只能从类似Bloom的过滤器中找到的高斯模糊技术.
推荐答案
Please find this nvidia document 为简单的发光效果. 基本想法是
- 在后退缓冲区中渲染场景
- 激活效果
- 在FBO中渲染场景的某些元素
- 计算发光效果
- 将最终的FBO绑定为纹理,并将这种效果与前面渲染的场景混合在一起
问题描述
I started learning shaders, playing around on ShaderToy.com. For a project I want to make, I need to create an arbitrary glow filter on WebGL (not Bloom). I want to calculate alpha that I can then use to draw a color glow or use for some animated texture like fire etc.
So far I thought of a few ideas:
- Averaging alpha across some area near each pixel - obviously slow
- Going in circle around each pixel in one loop then over distance in another to calculate alpha based on how close the shape is to this pixel - probably just as slow
- Blur entire shape - sounds like an overkill since I just need the alpha
Are there other ideas for approaching this? All I can find are gaussian blur techniques from bloom-like filters.
推荐答案
Please find this nvidia document for the simple glow effect. The basic idea is to
- render the scene in the back buffer
- activate the effect
- render some elements of the scene in a FBO
- compute the Glow effect
- bind the final FBO as a texture and blend this effect with the previously rendered scene in the backbuffer