Blur shader example

[Vincent]

Ported a blur shader I made a while ago to a blank project, download here

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

[Axel]

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

[88.josh]

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)

[Vincent]

[Axel]

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?

[Vincent]

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

[Axel]

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

[Vincent]

Blur Shader

[sergey.lerg]

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

[Vincent]

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
and tried to lower the res of the shader

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.

[Klear]

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?

[Vincent]

Something like this:

both only using 9 loops

[jhonny.goransson]

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: https://github.com/Jam3/glsl-fast-gaussian-blur

[Vincent]

Can you explain why having a for loop is not static causes it to not work on html:
Static

Not static

[jhonny.goransson]

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

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.

[Vincent]

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

[sven]

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

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

[Vincent]

don’t work

right now I have this:

but is is a but ugly

[jhonny.goransson]

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

[Mathias_Westerdahl]

Also, a friendly reminder that writing these tests on a site like https://www.shadertoy.com/ or 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