I tried the blur mask effect trick from some tutorials and not bad but not que final quality i'm looking.
Actually doing by distance using sprites and giving more o less and looks great. But to optimize instead of each sprite want to do in a tilemap and for that needs to be something applied like the blur mask globally.
Tried looking on shadertoy and saw various Blur shaders but are applied to all the image. I'm looking a blur distance that applied in a layout from center to corners with some intensity parameter.
Based on this one: shadertoy.com/view/MdtXWr , and with help of one on my twitter folllowers i achieved it, shared here in text format, so always will be available :P .
DistanceBlur.FX
#ifdef GL_ES precision mediump float; #endif #extension GL_OES_standard_derivatives : disable //// START C2 UNIFORMS HEADER //// uniform sampler2D samplerBack; uniform sampler2D samplerFront; varying vec2 vTex; uniform vec2 destStart; uniform vec2 destEnd; uniform float seconds; uniform float pixelWidth; uniform float pixelHeight; vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight); //// END C2 HEADER //// const int filterSize = 15; // must be odd const float texture2DSize = 512.0; const int halfFilterSize = filterSize / 2; const float pixelSize = (1.0 / texture2DSize); float Gaussian (float x, float sigma) { return exp(-(x*x) / (2.0 * sigma*sigma)); } vec3 BlurredPixel (in vec2 uv) { float sigma = 5.0 * length(vec2(iResolution.x/2.0,iResolution.y/2.0)/ iResolution.xy - uv); float sigma2 = max(sigma - 1.0, 0.0); float total = 0.0; vec3 ret = vec3(0); for (int iy = 0; iy < filterSize; iy++) { float fy = Gaussian (float(iy) - float(halfFilterSize), sigma2); float offsety = float(iy-halfFilterSize) * pixelSize; for (int ix = 0; ix < filterSize; ix++) { float fx = Gaussian (float(ix) - float(halfFilterSize), sigma2); float offsetx = float(ix-halfFilterSize) * pixelSize; float f = fx*fy; total += f; ret += texture2D(samplerFront, uv + vec2(offsetx, offsety)).rgb * f; } } return ret / total; } void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; gl_FragColor = vec4(BlurredPixel(uv), 1.0); }
DistanceBlur.xml
<?xml version="1.0" encoding="UTF-8" ?> <c2effect> <id>DistanceBlur</id> <name>DistanceBlur</name> <category>Distortion</category> <description>DistanceBlur</description> <author>DavitMasia</author> <extend-box-horizontal>0</extend-box-horizontal> <extend-box-vertical>0</extend-box-vertical> <blends-background>false</blends-background> <cross-sampling>false</cross-sampling> <preserves-opaqueness>false</preserves-opaqueness> <animated>false</animated> <parameters> <param> <name>Param Name</name> <description>Param Description</description> <type>float</type> <initial>Param Initial Value</initial> <uniform>Param Uniform</uniform> </param> <param> <name>Param Name</name> <description>Param Description</description> <type>float</type> <initial>Param Initial Value</initial> <uniform>Param Uniform</uniform> </param> <param> <name>Param Name</name> <description>Param Description</description> <type>float</type> <initial>Param Initial Value</initial> <uniform>Param Uniform</uniform> </param> <param> <name>Param Name</name> <description>Param Description</description> <type>float</type> <initial>Param Initial Value</initial> <uniform>Param Uniform</uniform> </param> </parameters> </c2effect>
Develop games in your browser. Powerful, performant & highly capable.
Hello,
it would be awesome to have instead of the name "Param Name" a Name for the parameter function. Can you please make a simple demo capx to show how to use the effect. Thanks for sharing.
On this line:
"float sigma2 = max(sigma - 1.0, 0.0);"
Change X to make the focus zone more o less big
"float sigma2 = max(sigma - X.0, 0.0);"
And here:
"const int filterSize = 15;"
Set how much intensity for the blur.
Found a new and more simple shader, due the previous one get 15% of the GPU, very heavy. Again this one converted with the Gigatron tool, no errors, but only affects to sprites and seems blur too much at100% my sprites are 12x12 with HD scale, on Layout/layer not works ¿?, how to fix ? Based on this one: shadertoy.com/view/MsffDl .
#ifdef GL_ES precision mediump float; #endif #extension GL_OES_standard_derivatives : disable //// START C2 UNIFORMS HEADER //// uniform sampler2D samplerBack; uniform sampler2D samplerFront; varying vec2 vTex; uniform vec2 destStart; uniform vec2 destEnd; uniform float pixelWidth; uniform float pixelHeight; vec2 iResolution = vec2( 1./pixelWidth, 1./pixelHeight); //// END C2 HEADER //// void main() { vec2 uv = gl_FragCoord.xy / iResolution.xy; float r = iResolution.y / iResolution.x; vec2 m = vec2(iResolution.x/2.0,iResolution.y/2.0) / iResolution.xy; vec2 coord = uv - 0.5; gl_FragColor = texture2D(samplerFront, uv, m.x* 10.0 * sqrt(dot(coord * 1.0, coord)) * 1.0); }
Any idea how to fix?
Ok, so DIstace Blur with much better perfomance:
Distance BLur
FX = pastebin.com/Vtub5adK
XML = pastebin.com/ZvaqCb6Q
THis time the .XML includes the parameters for Strenght and Radial to set for much 100% focus distance from center.
Ok, so DIstace Blur with much better perfomance: Distance BLur FX = pastebin.com/Vtub5adK XML = pastebin.com/ZvaqCb6Q THis time the .XML includes the parameters for Strenght and Radial to set for much 100% focus distance from center.
Is there a C3 version?