WebGL发光效果 [英] WebGL glow effect

问题描述

我开始学习着色器，并在ShaderToy.com上玩.对于我要制作的项目，我需要在WebGL(不是Bloom)上创建一个任意的辉光过滤器.我想计算出Alpha，然后将其用于绘制彩色发光效果或用于诸如火等的某些动画纹理.

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:

1. 在每个像素附近某个区域的平均Alpha值-显然很慢
2. 在一个循环中绕每个像素绕圈，然后在另一个循环中越过距离，以根据形状与该像素的接近程度来计算alpha值-可能同样慢
3. 模糊整个形状-因为我只需要Alpha，听起来像是一个过大的杀伤力

还有其他想法可以解决这个问题吗?我所能找到的只是绽放式滤镜中的高斯模糊技术.

Are there other ideas for approaching this? All I can find are gaussian blur techniques from bloom-like filters.

推荐答案

请找到该nvidia

Please find this nvidia document for the simple glow effect. The basic idea is to

1. 在后台缓冲区中渲染场景
2. 激活效果
3. 在FBO中渲染场景的某些元素
4. 计算发光效果
5. 将最终的FBO绑定为纹理，并将此效果与后缓冲中先前渲染的场景混合

这篇关于WebGL发光效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！