# Blur shader example

**URL:** <https://forum.defold.com/t/blur-shader-example/33932>\
**Category:** The Defoldmine\
**Created:** [November 5, 2018, 10:17pm UTC](https://forum.defold.com/t/blur-shader-example/33932 "2018-11-05T22:17:41Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 5, 2018, 10:17pm UTC](https://forum.defold.com/t/blur-shader-example/33932/1 "2018-11-05T22:17:41Z")

</div>

Ported a blur shader I made a while ago to a blank project, [download here](https://github.com/VincentLagerros/BlurShader)

 ![PNG](https://forum-defold-uploads.b-cdn.net/original/2X/8/83a9526fc7e022a66e367ece017a2ef0721f9b64.jpeg) ![PNG](https://forum-defold-uploads.b-cdn.net/original/2X/f/f000551091277cd6197eacb31f4065cfb9729133.jpeg)

A bit messy, and a lot copy pasted code by @Pkeod but works. Can be used for pause menu:

 ![PNG](https://forum-defold-uploads.b-cdn.net/original/2X/9/9c5c3ee6342ea5ec99218cf4730328f3bb1803f7.jpeg)

---

<div class="post-metadata">

**Author:** ![Axel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/axel/32/11723_2.png) [@Axel](https://forum.defold.com/u/Axel)\
**Post date:** [November 6, 2018, 8:10am UTC](https://forum.defold.com/t/blur-shader-example/33932/2 "2018-11-06T08:10:00Z")

</div>

This is awesome, really nice work! How about creating an asset page for it?

---

<div class="post-metadata">

**Author:** ![88.josh](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/88.josh/32/20137_2.png) [@88.josh](https://forum.defold.com/u/88.josh)\
**Post date:** [November 6, 2018, 10:23am UTC](https://forum.defold.com/t/blur-shader-example/33932/3 "2018-11-06T10:23:39Z")

</div>

nice! I can’t wait to start looking into shaders! (just kidding, i’m actually dreading it but i really need them for my next big thing)

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 12:00pm UTC](https://forum.defold.com/t/blur-shader-example/33932/4 "2018-11-06T12:00:50Z")

</div>

![error](https://forum-defold-uploads.b-cdn.net/original/2X/9/9c3080b9a6a353c4f6c9ff79a9f8b7dc49c42d49.png)

---

<div class="post-metadata">

**Author:** ![Axel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/axel/32/11723_2.png) [@Axel](https://forum.defold.com/u/Axel)\
**Post date:** [November 6, 2018, 12:28pm UTC](https://forum.defold.com/t/blur-shader-example/33932/5 "2018-11-06T12:28:36Z")

</div>

Hey @Vincent, thanks for reporting—we’ll look into it. In which step did you get/what triggered this error? Did you try to create the community page from the Asset Portal or the Dashboard?

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 12:30pm UTC](https://forum.defold.com/t/blur-shader-example/33932/6 "2018-11-06T12:30:06Z")

</div>

I tried to upload it yesterday in dashboard, got the error. Works now???

 ![works%20now](https://forum-defold-uploads.b-cdn.net/original/2X/6/6f6ba71148c98ba5745cad8ed74723a0903e6b2b.png)

---

<div class="post-metadata">

**Author:** ![Axel](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/axel/32/11723_2.png) [@Axel](https://forum.defold.com/u/Axel)\
**Post date:** [November 6, 2018, 12:53pm UTC](https://forum.defold.com/t/blur-shader-example/33932/7 "2018-11-06T12:53:35Z")

</div>

Cool, glad you got it sorted! Please let us know if you run into other issues.

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 1:05pm UTC](https://forum.defold.com/t/blur-shader-example/33932/8 "2018-11-06T13:05:58Z")

</div>

[https://www.defold.com/community/projects/125545/](https://www.defold.com/community/projects/125545/)

---

<div class="post-metadata">

**Author:** ![sergey.lerg](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sergey.lerg/32/3970_2.png) [@sergey.lerg](https://forum.defold.com/u/sergey.lerg)\
**Post date:** [November 6, 2018, 2:26pm UTC](https://forum.defold.com/t/blur-shader-example/33932/9 "2018-11-06T14:26:16Z")

</div>

140 loop iterations for each pixel - a bit much. Might be a noticeable framerate drop on HTML5 or mobiles.  
Effective blur shaders are hard.

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 3:10pm UTC](https://forum.defold.com/t/blur-shader-example/33932/10 "2018-11-06T15:10:42Z")

</div>

I know. It was more for pc use, but can be ported on to mobile and HTML5. Have tried a checker pattern for less performance, but it dosen’t look as good. I have tried less preformence blur shaders like this

 ![badblur](https://forum-defold-uploads.b-cdn.net/original/2X/c/cb459f03cc9cd6ede474f171bdbb2ac773cbfa3b.png)  
and tried to lower the res of the shader  
 ![lowresblur](https://forum-defold-uploads.b-cdn.net/original/2X/6/6f4a878f1bd6526d521b6432b73c2820db389715.png)  
but they looked too ugly 😕

Can update the shader in include these, but this project was more to share how to make a basic shader.

---

<div class="post-metadata">

**Author:** ![Klear](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/klear/32/11577_2.png) [@Klear](https://forum.defold.com/u/Klear)\
**Post date:** [November 6, 2018, 3:14pm UTC](https://forum.defold.com/t/blur-shader-example/33932/11 "2018-11-06T15:14:53Z")

</div>

The top one looks delightfully alien. I might have use for that… if I get far enough to even consider adding stuff like this. Could you share it?

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 3:17pm UTC](https://forum.defold.com/t/blur-shader-example/33932/12 "2018-11-06T15:17:05Z")

</div>

Something like this:

 ![PNG](https://forum-defold-uploads.b-cdn.net/original/2X/4/42f4a0d828c93817c50cf2d73611ebbde1ccaa63.jpeg) ![PNG](https://forum-defold-uploads.b-cdn.net/original/2X/b/bb7d9b661cd2d88aa5fbad4e377e329a1ad2eda6.jpeg)

both only using 9 loops

---

<div class="post-metadata">

**Author:** ![jhonny.goransson](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/jhonny.goransson/32/3864_2.png) [@jhonny.goransson](https://forum.defold.com/u/jhonny.goransson)\
**Post date:** [November 6, 2018, 3:29pm UTC](https://forum.defold.com/t/blur-shader-example/33932/13 "2018-11-06T15:29:20Z")

</div>

Always nice to see people use shaders in Defold, keep it up! 🙂 If you want better performance, there’s a few things you can try:

- 2D blur is separable, so you can first do the blur in one dimension and then apply another blur on the result from that in the other dimension. For large blurs, that will save you alot.
- Downsample the buffer a few times and apply a smaller blur when upsampling (or when downsampling? I don’t remember what the praxis is)
- Try this: [GitHub - Experience-Monks/glsl-fast-gaussian-blur: optimized single-pass blur shaders for GLSL · GitHub](https://github.com/Jam3/glsl-fast-gaussian-blur)

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 4:11pm UTC](https://forum.defold.com/t/blur-shader-example/33932/14 "2018-11-06T16:11:47Z")

</div>

Can you explain why having a for loop is not static causes it to not work on html:  
Static  
 ![static](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/0/0d010b123c71e849aaf690f73ef0c7d850509274.png)  
Not static  
 ![nonstatic](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/d/d46d75fef79afcdc66ed5a16d799e6d0612b8af8.png)

---

<div class="post-metadata">

**Author:** ![jhonny.goransson](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/jhonny.goransson/32/3864_2.png) [@jhonny.goransson](https://forum.defold.com/u/jhonny.goransson)\
**Post date:** [November 6, 2018, 4:37pm UTC](https://forum.defold.com/t/blur-shader-example/33932/15 "2018-11-06T16:37:21Z")

</div>

WebGL doesn’t support it per spec, I guess it has to do with loop unrolling. You can override it by doing something like:

```lua
const int max_iterations = 100;

for(int i = 0; i < max_iterations; i++)
{
    if (i == tim*3) 
       break;
    ...
}

```

You might break instruction limits or run into weird glitches on some hardware, but I don’t think there’s any way around it.

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 4:57pm UTC](https://forum.defold.com/t/blur-shader-example/33932/16 "2018-11-06T16:57:56Z")

</div>

What about: `colors = colors/vec4(pow(tim*3,2));`  
will not work on html

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [November 6, 2018, 5:02pm UTC](https://forum.defold.com/t/blur-shader-example/33932/17 "2018-11-06T17:02:58Z")

</div>

You might need to cast the result of `pow` to a float, something like:

```lua
colors = colors/vec4((float)pow(tim*3,2));

```

---

<div class="post-metadata">

**Author:** ![Vincent](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/vincent/32/4357_2.png) [@Vincent](https://forum.defold.com/u/Vincent)\
**Post date:** [November 6, 2018, 5:04pm UTC](https://forum.defold.com/t/blur-shader-example/33932/18 "2018-11-06T17:04:17Z")

</div>

don’t work 😕

right now I have this:  
 ![right%20now](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/5/59142ad96cea975b7da8dd3734d543c022cb58e6.png)  
but is is a but ugly

---

<div class="post-metadata">

**Author:** ![jhonny.goransson](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/jhonny.goransson/32/3864_2.png) [@jhonny.goransson](https://forum.defold.com/u/jhonny.goransson)\
**Post date:** [November 6, 2018, 5:12pm UTC](https://forum.defold.com/t/blur-shader-example/33932/19 "2018-11-06T17:12:38Z")

</div>

Type casts doesnt work on webgl afaik, try wrapping it with a float(number-here).

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [November 6, 2018, 7:40pm UTC](https://forum.defold.com/t/blur-shader-example/33932/20 "2018-11-06T19:40:27Z")

</div>

Also, a friendly reminder that writing these tests on a site like [https://www.shadertoy.com/](https://www.shadertoy.com/) or [https://shaderfrog.com/app/editor](https://shaderfrog.com/app/editor), you’ll get various descriptive error messages. E.g. pow() only takes floats/vec2/vec3 or vec4. Also check this reference card: [https://www.khronos.org/files/webgl/webgl-reference-card-1\_0.pdf](https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf)

[Next page](https://forum.defold.com/t/blur-shader-example/33932.md?page=2)