WebGL-片元着色器 1.Bloom特效实现

首发于talkingcoder

http://blog.csdn.net/chase_freedom/article/details/54089889

 编辑文章

第一件事先上demo吧     Bloom特效

demo下载地址

这篇文章耽误了很久。

首先说一下目的。今天是为了实现一个模糊特效的算法,这个算法常用与游戏里面post processing实现Bloom效果,也叫做全屏发光,本质上是高斯模糊。有时游戏在游戏里面看见类似于仙境的效果,或者在ios桌面下拉后的模糊效果。这些效果之间稍有差别,但是不是很大。今天我实现高斯模糊的基础是实现卷积运算。然后大家在这个基础上可以实现各种其他的模糊算法。


首先我们看看bloom效果,talking coder ”我的主页“ 就实现了高斯模糊。点击右上角自己的昵称进入“我的主页”后即可查看。



滚动鼠标就会发现随着鼠标的滚动图片越来越模糊。这个就是高斯模糊,Bloom特效的关键算法实现。

Bloom实现方法简介

首先我们介绍下实现辉光的几种经典的实现。


1.第一种方式:一个很简单的方式就是在一个公告牌(billboard)材质上面贴上一张发光效果的贴图。这种方法可谓简单粗暴,所谓效果不够图片来凑。虽然很简单,但是很多游戏里面就是这么实现的。


2.第二种:对图片实现卷积运算。所谓的图片的卷积运算,就是将元素附近的其他元素叠加到自身。为什么这样会实现模糊的效果?有兴趣的同学可以试着将任意一张图片复制很多份,一起置于ps当中。每次置于一张图片的时候都比前一张向下偏移一个像素,然后让他们叠加。实际上这就是一个模糊滤镜。


第一种方式很简单,我们就当作是设计师线下用ps帮我们实现了,我们用查表法检索出结果,就像法线贴图一样。我们在这里重点介绍第二种方式的实现方式。


1.传递贴图到着色器(temple.html文件已实现)

2.获取贴图的纹理像素(temple.html文件已实现)

3.实现卷积运算

为了降低不必要的难度我们已经实现了模板文件。虽然在文件里面有,注释也写的很清楚,我还是再这里贴出来着色器的主要代码。大家后续直接使用GLSL实现算法就可以了。 以下的代码直接实现了第一步和第二步。



                    
                    

你可能感兴趣的:(WebGL-片元着色器 1.Bloom特效实现)