本文介绍了如何使用WebGL实现Bloom特效，通过卷积运算实现图像的高斯模糊。首先，文章提供了Bloom特效的Demo，并解释了其实现目的——全屏发光效果。接着，详细阐述了Bloom的实现步骤，包括传递贴图到着色器、获取纹理像素和卷积运算。在卷积运算部分，解释了如何计算偏移值、获取不同位置的像素并进行叠加，从而达到模糊效果。最后，讨论了影响模糊程度的因素，如卷积核大小和偏移系数。文章适合对WebGL和图形编程感兴趣的读者。
首发于talkingcoder
http://blog.csdn.net/chase_freedom/article/details/54089889
第一件事先上demo吧 Bloom特效
这篇文章耽误了很久。
首先说一下目的。今天是为了实现一个模糊特效的算法，这个算法常用与游戏里面post processing实现Bloom效果，也叫做全屏发光，本质上是高斯模糊。有时游戏在游戏里面看见类似于仙境的效果，或者在ios桌面下拉后的模糊效果。这些效果之间稍有差别，但是不是很大。今天我实现高斯模糊的基础是实现卷积运算。然后大家在这个基础上可以实现各种其他的模糊算法。
首先我们看看bloom效果，talking coder ”我的主页“ 就实现了高斯模糊。点击右上角自己的昵称进入“我的主页”后即可查看。
滚动鼠标就会发现随着鼠标的滚动图片越来越模糊。这个就是高斯模糊，Bloom特效的关键算法实现。
Bloom实现方法简介
首先我们介绍下实现辉光的几种经典的实现。
1.第一种方式：一个很简单的方式就是在一个公告牌（billboard）材质上面贴上一张发光效果的贴图。这种方法可谓简单粗暴，所谓效果不够图片来凑。虽然很简单，但是很多游戏里面就是这么实现的。
2.第二种：对图片实现卷积运算。所谓的图片的卷积运算，就是将元素附近的其他元素叠加到自身。为什么这样会实现模糊的效果？有兴趣的同学可以试着将任意一张
最低0.47元/天 解锁文章
扫一扫
1539
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
