DefFX - A collection of useful shader effects

Messing with anti-aliasing today. I researched/tested a bunch about the different methods before a while ago, and I think FXAA was the best option so going to add it first. 3d + post processing. Other good one I think is SMAA. You only really need to use these if you are using a 3d scene and don’t want the hard aliased edges.

1 Like

Still working on FXAA. Have render target post processing working for 3d rendering now - example with mosaic / pixelate filter. I’m thinking about the best, most user/designer friendly way to allow multiple post processing layers without needing to modify the render script at all or much. @britzl made a good way of handling multiple cameras dynamically which could work with this too.

Something I’ve never tested using yet is the ability to add a list of materials to the .render file.

Idea of method is you have a post processing prefab GO, and you send a message to it with a list of post processing effects you wish to apply and in an order. You must also have a custom .render file which also has the same list of materials with the same names. Then the render script looks at the dynamic list of materials and attempts to use them in the order specified one after another. Then for dev can quickly comment out the shader effect materials from the list to disable them and enable them quickly. For release optimization would probably want to go through the shaders you do use and merge them into a single shader, which is not too difficult to do and a few multi shaders like this could be prepared once we know which ones would be generally used. I believe that Unity’s shaders are done this way. The team (or a tool) makes every possible combination into a single shader with a single one used with the set of options the user selects.

A smart multistep process is also needed for some shader effects such as some of the anti-aliasing methods and blur methods. Versions of PBR need it too.

2 Likes

FXAA does (mostly) remove aliasing, but it also blurs some things you may not wanted blurred. I think I prefer it off, but it would have to be used in a real game scene to know, and you’d want to for sure only apply it to the 3d scene with all UI kept sharp and drawn on top. With a game animated and going around in a world the hard edges can be more annoying. Will try other options soon. All of them have pros and cons. The best looking ones are not at all possible to use on mobile but could be used on desktop versions and allow the user to config their use. This version of FXAA should be mobile safe.

4 Likes

Simple zdepth shader based on relative near / far values from camera.

4 Likes

Started with SMAA but it’s significantly more complex and requires 3 passes to work so I want to work on getting the above described multi material and multi pass support working right first. I’ll test adding a sharpen filter on top of FXAA then too.

http://www.iryoku.com/smaa/downloads/SMAA-Enhanced-Subpixel-Morphological-Antialiasing.mp4
2 Likes

Hi,
Do you have a shader that can be used for 2d sprite normal maps?
More info:

How does one go about using it?

Sprite components are not currently able to have different textures selected for them at once. So what I would probably do is to pack the diffuse and the normal texture for each sprite frame next to each other in a pre-made tilemap so that you can do a simple offset to get the normal. It would mean that your animation frames all need to have the same size so you would want to pack only probably one character at at time if each character has different frame sizes and then communicate the offset value for each to each sprite.

Actually might be better to put the normals below each strip of horizontal frames so that you can animate in the tilemap.

If Defold team could make a special sprite type which could look for frame_DIFFUSE, frame_NORMALS etc. to make this a little more convenient to do.

If you don’t want to take advantage of the benefits of using sprites then you can specify different textures but then animating them is much more difficult because you would have to store a bunch more data about all of the frames, and manually handle all animation code and offsetting.

I’ll do a test soon. But 100% doable even now.

5 Likes

:smiley:

CC @ericsroy

varying mediump vec2 var_texcoord0;

uniform lowp sampler2D DIFFUSE_TEXTURE;
uniform lowp vec4 tint;
uniform lowp vec4 light_color;
uniform lowp vec4 light_direction;

void main()
{
    // Pre-multiply alpha since all runtime textures already are
    lowp vec4 tint_pm = vec4(tint.xyz * tint.w, tint.w);
	lowp vec2 normal_offset = vec2(0.0, 0.5);

	vec4 diffuse = texture2D(DIFFUSE_TEXTURE, var_texcoord0) * tint_pm;

	vec3 normal;
	normal.xy = texture2D(DIFFUSE_TEXTURE, var_texcoord0.xy + normal_offset).rg * 2.0 - 1.0;
	normal.z = sqrt(1.0 - dot(normal.xy, normal.xy));

	vec3 ambient = vec3(0.2);
	vec3 light = light_color.rgb * max(-dot(normal, light_direction.xyz), 0.0) + ambient.rgb;
	light = clamp(light, 0.0, 1.0);


	
    gl_FragColor = vec4(diffuse.rgb * light.rgb, diffuse.a);
}

I made these normals with http://www.2deegameart.com/p/sprite-dlight.html

Can still be improved, but there is proof that it works. Next to improve it would be to be able to add more lights and position them in addition to the simple light direction. Then you can have rim lights and positioned lights of different kinds.

9 Likes

@Pkeod Excellent!! :smiley: Can you upload an example project ot reusable asset I can study in defold? This would be an amazing addition to the github repository with shaders!

1 Like

Yes, I’ll push to the DefFX repo again soon. I’m adding some basic support for more lights/types first.

5 Likes

Still need to fix this issue of rotated sprites not getting right lighting due to static normal map. I think I just need to calculate tangent with dFdx / dFdy magic. Will try in a few hours at least.

3 Likes

This tool is really useful. http://spector.babylonjs.com/

You can make HTML5 builds, and then be able to see every step of rendering.

3 Likes

I don’t think I can fix it the right way because things are missing.

Sprites are not currently sent normals? I tried to add the normal values to the shader program anyway but it’s not working.

Until this is fixed you can’t rotate sprites nor flip them otherwise it breaks the lights. You’ll have to make animations for each direction with their own normal texture pairs.

There is probably still a workaround related to sending more information to the shader from the object being lit but that’s kind of lame because it can require a script for every single thing being lit or a manager which knows about everything.

1 Like

I think if you changed the tilesource, the offset in shader should be changed, though we can pass it to shader, but all the changes have to be handled manually. I have the save idea these days, but give it up after some test :joy:.

Hopefully we’ll be able to set _DIFFUSE, _NORMALS etc. textures for sprite frames in a user friendly and low busy work way. I made an issue on github to hopefully get the feature eventually.

1 Like

Yes, or allow us to pick another image from same atlas/tilesource, and the engine pass the offset to us, so we can avoid a second texture file.

Here is way I suggested to do it so that all image version could still be in the same texture atlas.

2 Likes

Any thoughts on CRT style shaders for retro games?

1 Like

You can adapt most any CRT style shader you can find in the wild to work with Defold if you can find a version you like. If it’s already GLSL it’s easier to adapt.

3 Likes

If you follow Pkeod’s suggestion, please share, as I haven’t delved deep enough into the subject myself but I want it for my game as well.

Not all shaders will work on all platforms, be aware of that. I tried a scanline one on android and it was a no go. Think it’s GLSL version related.

2 Likes