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

本文介绍了如何使用WebGL实现Bloom特效,通过卷积运算实现图像的高斯模糊。首先,文章提供了Bloom特效的Demo,并解释了其实现目的——全屏发光效果。接着,详细阐述了Bloom的实现步骤,包括传递贴图到着色器、获取纹理像素和卷积运算。在卷积运算部分,解释了如何计算偏移值、获取不同位置的像素并进行叠加,从而达到模糊效果。最后,讨论了影响模糊程度的因素,如卷积核大小和偏移系数。文章适合对WebGL和图形编程感兴趣的读者。
摘要由CSDN通过智能技术生成

首发于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.第二种:对图片实现卷积运算。所谓的图片的卷积运算,就是将元素附近的其他元素叠加到自身。为什么这样会实现模糊的效果?有兴趣的同学可以试着将任意一张

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值