How do the pixel shaders work?

New releases and general discussions.

Post » Fri May 08, 2009 10:22 am

Alrighty, just a quick question for the devs. I'd love to have a 'sharpen' effect, so that what I'm concepting in Photoshop and the game actually match up 100%.

So I googled around and found this:

http://www.coniserver.net/wiki/index.php/Shaders

Seems like there are a bunch of .fx shaders on there - can we reuse that stuff in Construct? I looked into the sharpen.fx file and compared it to the .fx files in Construct and they do seem pretty similar in terms of code, but I have no idea whether they can be made compatible and if so, how.
B
6
S
2
G
3
Posts: 520
Reputation: 2,690

Post » Fri May 08, 2009 10:56 am

I've been wondering too that how easily do FX from other game engines or games work in Construct
B
11
S
3
G
4
Posts: 622
Reputation: 3,186

Post » Fri May 08, 2009 11:13 am

Okay, a programmer buddy of mine helped me with this one:

[code:1om0gxb2]// Sharpen
// Bozo Bajozo
// PS 2.0
// A simple Sharpen Shader.

//#BORDER-MODE : prevent pixel influence from outside box area.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
Texture = (ForegroundTexture);
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
};

float pixelWidth;
float pixelHeight;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
float strength = 10;
float4 Color;

Color = tex2D( foreground, Tex.xy);
Color -= tex2D( foreground, Tex.xy+0.0001)*strength;
Color += tex2D( foreground, Tex.xy-0.0001)*strength;

Color.a = 1.0;

return Color;
}

// ConstructEffect
technique ConstructEffect
{
pass p0
{
VertexShader = null;
PixelShader = compile ps_2_0 EffectProcess();
}
}[/code:1om0gxb2]

You can set the strength using the strength value in there.

The problem is that the effect is a different one that Photoshop uses. It makes everything looks kinda embossy, which isn't really what I want.
B
6
S
2
G
3
Posts: 520
Reputation: 2,690

Post » Fri May 08, 2009 11:24 am

If you want it to look the same, you need to look up the algorithm photoshop uses and reproduce it.

Some hints:

- Get rid of the #border-mode line if it looks the same without it, the shader will run faster
- If you want to get the next adjacent pixel to the lower right, tex2D( foreground, Tex.xy+0.0001) won't do that. Texture coordinates are percentages of the texture size, so you're actually going 0.01% further along the texture which probably isn't what you want. However if you did Tex.xy + float2(pixelWidth, pixelHeight), that's the offset you need to move one pixel.
If you always move an integer number of pixels along, you can also get rid of linear sampling and use point sampling instead, which runs slightly faster.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,630

Post » Fri May 08, 2009 11:39 am

Okay, so here's the Photoshop version of Sharpen:

[code:qyrrf7dn]// Sharpen
// Elvis Presley
// PS 2.0
// A simple Sharpen Shader.

//#BORDER-MODE : prevent pixel influence from outside box area.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
Texture = (ForegroundTexture);
MinFilter = Linear;
MagFilter = Linear;
MipFilter = Linear;
};

float pixelWidth;
float pixelHeight;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
// Strength should be from 0.0 to 1.0
float strength = 0.1;
float4 color;

color = 9.0 * tex2D( foreground, Tex.xy);
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(0.0, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, 0));

color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(0, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, 0));
color = color * strength + (1.0 - strength) * tex2D( foreground, Tex.xy);
color.a = 1.0;

return color;
}

// ConstructEffect
technique ConstructEffect
{
pass p0
{
VertexShader = null;
PixelShader = compile ps_2_0 EffectProcess();
}
}[/code:qyrrf7dn]

You can set the strengh in there. I set it to 0.1, so that the rendered image looks identical to my concept in Photoshop - you can set it to whatever you want :)

Thanks to my buddy Henry Korol for this :)

Can we implement this in the next Construct version? Having a sharpen filter is definitely useful :)
B
6
S
2
G
3
Posts: 520
Reputation: 2,690

Post » Fri May 08, 2009 12:01 pm

OK, I made a few tweaks like being able to change the strength and supporting transparency:

[code:akpn529n]// Sharpen
// Elvis Presley
// PS 2.0
// A simple Sharpen Shader.

// Foreground texture
texture ForegroundTexture;

// Foreground sampler
sampler2D foreground = sampler_state {
Texture = (ForegroundTexture);
MinFilter = Point;
MagFilter = Point;
MipFilter = Point;
};

//#PARAM percent strength 0.1 : Strength : Strength of the effect.
float strength;

float pixelWidth;
float pixelHeight;

// Effect function
float4 EffectProcess( float2 Tex : TEXCOORD0 ) : COLOR0
{
float4 color;

color = 9.0 * tex2D( foreground, Tex.xy);
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(0.0, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, 0));

color -= tex2D( foreground, Tex.xy + float2(-pixelWidth, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(0, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, -pixelHeight));
color -= tex2D( foreground, Tex.xy + float2(pixelWidth, 0));
color = color * strength + (1.0 - strength) * tex2D( foreground, Tex.xy);
//color.a = 1.0;

return color;
}

// ConstructEffect
technique ConstructEffect
{
pass p0
{
VertexShader = null;
PixelShader = compile ps_2_0 EffectProcess();
}
}[/code:akpn529n]

This is in the next build as "sharpen.fx", so you can cut and paste that in and carry on using it in 0.99.
Scirra Founder
B
359
S
214
G
72
Posts: 22,952
Reputation: 178,630

Post » Fri May 08, 2009 12:07 pm

Neat! Now Elvis can rest in peace.

:D

Can anyone look into that scratched film shader? That'd be a nice one to have, Henry told me that it's a bit more complex and involves textures, so can we still use that one in Construct?

I have no idea what the effect looks like, but it'd be neat to explore. I think David once created something like that using events, but if we can have a simple inheritance layer on top of our layouts and use a canvas object with an fx shader, it'd be super easy to use.
B
6
S
2
G
3
Posts: 520
Reputation: 2,690

Post » Fri May 08, 2009 12:58 pm

Wouldn't mind seeing the toon shader, crystal, or bloom either.
heck there are lot of nice effects there.
Image Image
B
161
S
48
G
91
Posts: 7,359
Reputation: 67,273

Post » Fri May 08, 2009 1:03 pm

They all look fairly easy to convert into shaders.
B
3
S
2
G
5
Posts: 1,777
Reputation: 5,529

Post » Fri May 08, 2009 1:43 pm

[quote="Rich":1o4g8803]They all look fairly easy to convert into shaders.[/quote:1o4g8803]

Go right ahead! ;)
B
6
S
2
G
3
Posts: 520
Reputation: 2,690

Next

Return to Construct Classic Discussion

Who is online

Users browsing this forum: No registered users and 0 guests