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:
17 Likes
This is awesome, really nice work! How about creating an asset page for it?
4 Likes
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)
3 Likes
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?
Cool, glad you got it sorted! Please let us know if you run into other issues.
140 loop iterations for each pixel - a bit much. Might be a noticeable framerate drop on HTML5 or mobiles.
Effective blur shaders are hard.
3 Likes
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.
2 Likes
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?
2 Likes
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
4 Likes
Can you explain why having a for loop is not static causes it to not work on html:
Static
Not static
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.
1 Like
What about: colors = colors/vec4(pow(tim*3,2));
will not work on html
You might need to cast the result of pow to a float, something like:
colors = colors/vec4((float)pow(tim*3,2));
don’t work
right now I have this:
but is is a but ugly
Type casts doesnt work on webgl afaik, try wrapping it with a float(number-here).
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
7 Likes