WebGL辉光效果[英] WebGL glow effect

本文是小编为大家收集整理的关于WebGL辉光效果的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

我开始学习着色器,在Shadertoy.com上玩耍.对于我想制定的项目,我需要在WebGL上创建一个任意的Glow滤波器(不是Bloom).我想计算我可以用来绘制颜色发光或用于某些动画纹理(例如火等)的alpha.

.

到目前为止,我想到了一些想法:

  1. 平均每个像素附近的某些区域的α-显然很慢
  2. 在一个循环中围绕每个像素绕一个循环,然后在另一个循环中绕过另一个像素,以根据形状与该像素的形状有多近来计算alpha-可能同样慢
  3. 整个形状模糊 - 听起来像是一个过度杀伤,因为我只需要alpha

还有其他想法可以接近这一点吗?我只能从类似Bloom的过滤器中找到的高斯模糊技术.

推荐答案

Please find this nvidia document 为简单的发光效果. 基本想法是

  1. 在后退缓冲区中渲染场景
  2. 激活效果
  3. 在FBO中渲染场景的某些元素
  4. 计算发光效果
  5. 将最终的FBO绑定为纹理,并将这种效果与前面渲染的场景混合在一起

本文地址:https://www.itbaoku.cn/post/2091105.html

问题描述

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. Averaging alpha across some area near each pixel - obviously slow
  2. 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
  3. 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

  1. render the scene in the back buffer
  2. activate the effect
  3. render some elements of the scene in a FBO
  4. compute the Glow effect
  5. bind the final FBO as a texture and blend this effect with the previously rendered scene in the backbuffer