Adapting Tilt Shift shader from shadertoy

Questions
#1

Hey there!

Looks like Im in trouble trying to adapt that shader:
https://www.shadertoy.com/view/3t2fWK

To defold:

varying mediump vec2 var_texcoord0;

uniform lowp sampler2D sbuffer;
uniform lowp vec4 tint;

float normalize(float min1, float max1, float value) {
	return (value - min1) / (max1 - min1);
}

float map(float min1, float max1, float min2, float max2, float value) {
	return mix(min2, max2, normalize(min1, max1, value));
}

const float blurAmount = 2.0;
const float maxPos = 0.5;
const float bottom = 0.25;
const float top = 0.75;
const float left = 0.25;
const float right = 0.75;

void main()
{
	vec2 res = vec2(1.0, 1.0); 
	vec2 uv = var_texcoord0.xy * res.xy;
	float position = 0.0;

	// TOP / BOTTOM
	if(uv.y <= bottom) {
		position = map(0.0, bottom, maxPos, 0.0, uv.y);
	} else if(uv.y >= top) {
		position = map(top, 1.0, 0.0, maxPos, uv.y);
	}

	// LEFT / RIGHT
	if(uv.x <= left) {
		position += map(0.0, left, maxPos, 0.0, uv.x);
	} else if(uv.x >= top) {
		position += map(right, 1.0, 0.0, maxPos, uv.x);
	}

	float bias = position * blurAmount;

	gl_FragColor = texture2D(sbuffer, uv, bias);
}

It seems like that bias in the end is useless and out of syntax. Need help!

1 Like
#2

This is the answer:

Edit:
If you chance sampler to use mipmap, it will work.

45

03
Screen Shot 2021-03-27 at 14.57.03.png960×662 740 KB

1 Like
#3

Oh, got it. Bias is a third param and right where it should be.

Switching to any mipmap makes screen black. =(

#4

Probably you are doing something wrong. It works for me.
Here is my .fp.

varying mediump vec2 var_texcoord0;
uniform lowp sampler2D tex0;

float normalizea(float min1, float max1, float value)
{
    return (value - min1) / (max1 - min1);
}

float map(float min1, float max1, float min2, float max2, float value)
{
    return mix(min2, max2, normalizea(min1, max1, value));
}

const float blurAmount = 5.0;
const float maxPos = 0.5;
const float bottom = 0.25;
const float top = 0.75;
const float left = 0.25;
const float right = 0.75;

void main()
{
    vec2 uv = var_texcoord0.xy;
    float position = 0.0;

    position = map(0.0, bottom, maxPos, 0.0, uv.y) * float(uv.y <= bottom) +
               map(top, 1.0, 0.0, maxPos, uv.y) * float(uv.y >= top) +
               map(0.0, left, maxPos, 0.0, uv.x) * float(uv.x <= left) +
               map(right, 1.0, 0.0, maxPos, uv.x) * float(uv.x >= top);

    float bias = position * blurAmount;

    gl_FragColor = texture2D(tex0, uv.xy, bias);
}

And this is the test project:

tilt-shift.zip (157.1 KB)

2 Likes
#5

Hm… I render all the game and gui to texture and then use shaders on it. Maybe that’s the problem. Guess I need to check your project more closely.

Huge thanks! :pray:

#6

Hard to tell, it might be. but consider this; using bias can be expensive on gpu as mentioned here: https://community.khronos.org/t/easy-question-what-is-bias-param-in-texturexd/52936/2.

There is nothing special about it. It is just a Defold 3D Template. Render script is same as default.

1 Like