Defold Shaders (2021 shader practice / learning edition)

[Pkeod]

In 2021 I want to really get good with shaders (100% knowledge of GLES 2.0, mastery of all common techniques), make simple examples of all of the kinds of shader effects which are common in games and useful to have easily accessible. I’ll be looking at adapting popular shader examples / tutorials too from people like Minions Art. And I we would all benefit if anyone more knowledgeable contributes to improve shader efficiency.

I’ve done projects like these before but this time I want to go all out and keep it a bit more organized. I’ll bring forward previous examples to this version too over time.

If there are shader effects you want to see examples of please post them in this thread and I’ll try to investigate adding examples for them.

https://www.pkeod.com/shaders/2/ this link will be updated as new versions go live incrementally

https://github.com/subsoap/defold-shaders

These examples will make use of global constants for render predicates. This helps to reduce drawcalls for situations where you want the same effect being applied in a somewhat consistent way to many objects such as with lighting.

I’ll be marking examples with or depending on if I think they are ready for production or not. Though they may be useful in production projects as is, you will most likely want to combine multiple shaders together to be able to have multiple effects. Hopefully this process can be made easier / more clear how to do in the future as well.

---

World Position Texture Swap

Swaps between two textures based on distance from a point in 3D space. Could be useful for combining with other distance shaders to show a hidden world or hidden enemies (such as fog of war). Or highlighting / replacing parts of objects based on a form of observation / change.

Has hard coded values currently.

---

I remember someone here making an editor script to compile shaders with another tool to better validate them. Anyone remember where?

[aglitchman]

I remember someone here making an editor script to compile shaders with another tool to better validate them. Anyone remember where?

I did it. The script is very simple but useful

Editor Scripts : Alpha Release

I use Mali Offline Compiler wrapped into Editor Script to avoid bugs/mistakes, and to test the performance of shaders. [image] The source code is here: https://gist.github.com/aglitchman/167b7f15d01ebd584c3b9a5209adbe23 *Only for Windows. If someone is going to use it, I will add paths to “malioc” for macOS/Linux.

[Pkeod]

Great thank you! I will try to add it to this project.

Think the last legacy version would work from 2018 instead of downloading the latest studio version? https://developer.arm.com/tools-and-software/graphics-and-gaming/mali-offline-compiler/downloads I’ll test.

[Pkeod]

Modified version of the editor script which appears to work with the stand alone legacy version download (tested Mali Offline Compiler Version 6.4 Windows 64-bit).

I think removing the .exe should make it work on other platforms too.

-- Download and install Mali Offline Compiler Version 6.4 from 
-- https://developer.arm.com/tools-and-software/graphics-and-gaming/mali-offline-compiler/downloads

local M = {}

local function ends_with(str, ending)
    return ending == "" or str:sub(-#ending) == ending
end

function M.get_commands()
    return {
        {
            label = "Compile Fragment Shader (Mali-G72)",
            locations = {"Edit", "Assets"},
            query = {selection = {type = "resource", cardinality = "one"}},
            active = function(opts)
                local path = editor.get(opts.selection, "path")
                return ends_with(path, ".fp")
            end,
            run = function(opts)
                local path = editor.get(opts.selection, "path")
                path = path:sub(2)
                return {
                    {action = "shell", command = {"cmd", "/C", "malisc", "--core", "Mali-G72", "--fragment", path}}
                }
            end
        }, {
            label = "Compile Vertex Shader (Mali-G72)",
            locations = {"Edit", "Assets"},
            query = {selection = {type = "resource", cardinality = "one"}},
            active = function(opts)
                local path = editor.get(opts.selection, "path")
                return ends_with(path, ".vp")
            end,
            run = function(opts)
                local path = editor.get(opts.selection, "path")
                path = path:sub(2)
                return {
                    {action = "shell", command = {"cmd", "/C", "malisc", "--core", "Mali-G72", "--vertex", path}}
                }
            end
        }, {
            label = "Compile Fragment Shader (Mali-T600)",
            locations = {"Edit", "Assets"},
            query = {selection = {type = "resource", cardinality = "one"}},
            active = function(opts)
                local path = editor.get(opts.selection, "path")
                return ends_with(path, ".fp")
            end,
            run = function(opts)
                local path = editor.get(opts.selection, "path")
                path = path:sub(2)
                return {
                    {action = "shell", command = {"cmd", "/C", "malisc", "--core", "Mali-T600", "--fragment", path}}
                }
            end
        }, {
            label = "Compile Vertex Shader (Mali-T600)",
            locations = {"Edit", "Assets"},
            query = {selection = {type = "resource", cardinality = "one"}},
            active = function(opts)
                local path = editor.get(opts.selection, "path")
                return ends_with(path, ".vp")
            end,
            run = function(opts)
                local path = editor.get(opts.selection, "path")
                path = path:sub(2)
                return {
                    {action = "shell", command = {"cmd", "/C", "malisc", "--core", "Mali-T600", "--vertex", path}}
                }
            end
        }
    }
end

return M

Now I will need to learn how to use this to optimize shaders.

Arm Mali Offline Compiler v6.4.0
(C) Copyright 2007-2018 Arm, Ltd.
All rights reserved.

No driver specified, using "Mali-Gxx_r11p0-00rel0" as default.

No core revision specified, using "r0p3" as default.


64 work registers used, 2 uniform registers used, spilling not used.

			A	L/S	T
Instructions Emitted:	5	4	1
Shortest Path Cycles:	5	4	1
Longest Path Cycles:	5	4	1

A = Arithmetic, L/S = Load/Store, T = Texture
Note: The cycles counts do not include possible stalls due to cache misses.
Note: Shaders with loops may return "N/A" for cycle counts if the number of cycles cannot be statically determined.

Compilation succeeded.

[COCO]

Your “Shader tutorial for beginners” is perfect, I can translate all your tutorials and upload them to github because I want to learn them too.

[Pkeod]

Shaders for beginners is not by me but it is great!

[SpencerWF]

Well, I am thinking about making a glitch vertex shader, like when you want to represent something has been hacked in your game.

A few others you might be interested in doing, but I wasn’t necessary looking to implement myself yet.

• A water effect, where you can raise and lower the water level of a section. Don’t know if this is best done through a shader or not?
• A shockwave effect vertex shader which would shift the position of the pixels in a ring out and back in.
• A shockwave effect fragment shader which spread a color band out from a point to the edges of the whole screen.
• A number of text altering shaders, to represent emotions or something in the speaker.

It might be there are better ways to do these effects then shaders, but I was thinking of making them through shaders.

[Klear]

Well, I am thinking about making a glitch vertex shader, like when you want to represent something has been hacked in your game.

If you do, could you let me know and let me use it? I’m working on a project where it would come it very useful. Right now I’m using a modified version of this shader, but it can’t hurt to have more to choose from/more variety.

[Pkeod]

A number of text altering shaders, to represent emotions or something in the speaker.

Have a look at Defold-RichText

With it you can easily modify individual glyphs of text to animate them in ways you may want. There should be examples included showing how it can be done.

[SpencerWF]

Hello Pkeod,

How has the shader work started? I’m mainly making this comment so I have one place to look when I start getting into this.

-Vertex shader to “fade away” a character like the snap from infinity war.

[Pkeod]

-Vertex shader to “fade away” a character like the snap from infinity war.

I would try a vertical fade/dissolve with some noise / add gradient color with noise over sprite combined ParticleFX. I’ll add it to my todo.

We still don’t have localized texture UV space so doing calculations on a sprite in an atlas wouldn’t be possible at the moment, it would only look right for a texture in its own atlas.

[Pkeod]

Linking for future easy reference, a method to get local sprite XY for shading (while in an atlas with many textures) thanks to @roccosaienz

Shading sprites based on sprite Y

Thank you for sharing. Here is a modified version with more logos bouncing around with the directions randomized and changing over time. sprite_shader.zip (90.2 KB) [2021-01-27%2010_43_35-sprite_shader] I’ll try to adapt this to other situations soon. For some special effects, having extra draw calls is fine. They can be disabled / swapped to less expensive ones at runtime now anyway. I’ll do a test with dynamically setting material of a sprite to reduce draw calls when not using the special…