DefFX - A collection of useful shader effects

[Pkeod]

Repo: https://github.com/subsoap/deffx

DefFX

A collection of useful shader effects made ready to be used with the Defold game engine

The purpose of this shader collection is for each to be generally useful and efficient. If you’ve made a shader which you think would be useful to others please consider contributing it via a pull request. If you can improve an existing shader to add useful features or increase performance please submit your changes!

Installation

You can use DefFX in your own project by adding this project as a Defold library dependency. Open your game.project file and in the dependencies field under project add:

https://github.com/subsoap/deffx/archive/master.zip

Once installed, you can select the materials you wish to use from their associated folders much like you would builtin materials. When you make builds Defold will only package the materials you actually use so do not worry about the extra files. Check your build folder to see for yourself.

Check the source files and examples for full usage.

[Pkeod]

I meant to get this going a while ago but got busy over and over. Now I’m using Defold again much more with active proejcts so it’s time. I have a bunch I’ll be putting up soon, and adding more over time. Anyone who would like to have access to directly add changes / accept pull requests let me know and I’ll add you as a contributor.

Restating the purpose of this - these shaders are meant to be practically useful in real gamedev projects as is and not toy shaders or extremely niche use shaders. They are meant to be a complementary set of materials to use along side the builtin standard files. They should be easy to use and not need many changes to be useful in projects.

[Pkeod]

Making progress, have a bunch of things in stages of nearly being ready to be used. Jumping around, and looking through old files. Have some shaders / materials you’ve made / converted for Defold? Send me a zip and I’ll incorporate what works for public use!

Getting some 3d model shaders up now.

It’s still all in a messy state while it comes together…

subsoap/deffx

[Pkeod]

Adding all popular image editing blending modes over time. Useful in post processing as additional render target steps to apply textures in interesting ways. But there are / will be issues that I don’t know how to solve yet which I’m thinking about. I mostly need to read more docs probably.

[andreas.strangequest]

Awesome work @Pkeod
Will def steal the shit out of these things

[Pkeod]

Working on a few camera types. First one is simple look at camera and is especially easy to make because of handy built in functions. Next will be useful things like first person free form view with user input built in to move around with mouse and keyboard in the 3d world in a comfortable way, orbit/ automatic turntable camera with various quality of life settings, on rails animated camera to smoothly go through a set of points. They should be easy to use and have enough to them that not much would need to be added to them for them to be useful in projects. On top of these then other kinds of cameras can be made such as 3rd person following character camera.

Lots to do and I have strong hype to get it all ready!

[Pkeod]

Playing a bit with PBR today. If we can get a good setup then we could prepare a small library of PBR materials. I think then that products of popular 3d tools like Quixel Suite could be used. Lots of reading.

[Pkeod]

Facing ratio shader looks like electron microscope image. The two colors are customizable. Could be used for example to add a layer of velvet glow like look to other materials.

[Pkeod]

Working on a toon shader but it’s broken right now!

[Pkeod]

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.

FXAA_WhitePaper.pdf

[Pkeod]

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.

[Pkeod]

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.

[Pkeod]

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

[Pkeod]

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

[Todor_Imreorov]

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

2d material with a normal map - sprite shading if defold possible?

Hi, I recently bought sprite illuminator: www.youtube.com/watch?v=YMTZ_urkVjQ It allows me to quickly and easily generate a normal map for any sprite/atlas. Is it possible in defold to give your sprite a material that supports a normal map? Something that is more than a flat diffuse shader would be awesome to have! If so - how do you then create 2d lights in the scene that can affect a sprite with a normal map? Are there any example projects we can study?

How does one go about using it?

[Pkeod]

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.

[Pkeod]

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.

[Todor_Imreorov]

@Pkeod Excellent!! 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!

[Pkeod]

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

[Pkeod]

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.