Outline shader

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
576
This is a simple outline shader to learn how to make your own shaders in a simple way.
You'll need to only add your own graphics, it should be a 256x256 png with one or more masked sprites on it.
code_language.cerberus:
Import mojo2
Function Main()
    New MyApp
End

Class MyApp Extends App

    Global image2:Image
    Global imagecanvas2:Canvas
    Field sourceImage : Image
    Field sourceImage2 : Image
    Field targetImage : Image
    Field canvas : Canvas
    Field effect : ShaderEffect
  
    Method OnCreate()
        sourceImage = Image.Load("graphics.png",0,0,0) ' You need to provide a 256x256, one with masked sprites is ideal
        sourceImage2 = Image.Load("graphics2.png",0,0,0) ' This one is not used in this particular shader
        targetImage = New Image(sourceImage.Width,sourceImage.Height)
        effect = New ShaderEffect
        canvas = New Canvas
        image2=New Image(256,256,0,0,0)
         imagecanvas2=New Canvas(image2)
         SetUpdateRate 0
    End
  
    Method OnRender()
        canvas.Clear 0, 0.5, 1, 1
          
        effect.Render sourceImage, sourceImage2,image2     
        canvas.DrawRect 0,0, 256*2,256*2,image2,0,0,256,256
      
        canvas.Flush
    End

End

Class myShader Extends Shader

    Method New()
        Build(LoadString("shader.glsl"))
    End 
  
    Method OnInitMaterial:Void(material:Material)
        material.SetTexture "ColorTexture",Texture.White()
        material.SetTexture "ColorTexture2",Texture.White()
        material.SetScalar "EffectLevel",1
    End
  
    Function Instance:myShader()
        If Not _instance _instance=New myShader
        Return _instance
    End
  
    Private
  
    Global _instance:myShader
End

Class ShaderEffect

    Private
    Global _canvas:Canvas
    Field _material:Material
  
    Method New()
        If Not _canvas _canvas=New Canvas
        _material=New Material(myShader.Instance())
    End
  
    Method SetLevel:Void(level:Float)
        _material.SetScalar "EffectLevel",level
    End
  
    Method Render:Void(source:Image,source2:Image,target:Image)
        _material.SetTexture "ColorTexture",source.Material.ColorTexture
        _material.SetTexture "ColorTexture2",source2.Material.ColorTexture
        _canvas.Clear 0, 0, 0, 0
        _canvas.SetRenderTarget target
        _canvas.SetViewport 0,0,target.Width,target.Height
        _canvas.SetProjection2d 0,target.Width,0,target.Height
        _canvas.DrawRect 0,0,target.Width,target.Height,_material
        _canvas.Flush
    End
  
End


[CODE title="Shader code"]// -------------------------------------------------------------------------------------------------
// Cheat Sheet of Cerberus-X's Shaders (GLES2 GLSL)
// -----------------------------------

// Scalars
// -------
// bool bb;
// int ii;
// float ff;

// Boolean vectors (2-4 dimensional)
// ---------------
// bvec2 bv;
// bvec3 another;
// bvec4 wow;

// Integer vectors (2-4 dimensional)
// ---------------
// ivec2 iv;
// ivec3 iva;
// ivec4 ivaaa;

// Float vectors (2-4 dimensional)
// -------------
// vec2 v;
// vec3 secondVec;
// vec4 thirdVec;

// Floating point Matrixes
// mat2 m;
// mat3 mm;
// mat4 mmm;

// Almost all math operators work on both float and int data types but not in the same expression.
// Vector algebra operations require that the operands be of the same size.

// EXAMPLES :
//
// ALL VALID
float a = 3.0 * 0.7;
int b = 10 * 7;
ivec3 d = ivec3(1,2,3);
vec3 c = vec3(1.0, 2.0, 3.0);
//
// NOT VALID IN GLES2 as there's no int in GLES2 (there's floor though)
// b = int(10.0 * 0.7);

// -------------------------------------------------------------------------------------------------

uniform sampler2D ColorTexture;
uniform sampler2D ColorTexture2;

void shader(){
// -------------------------------------------------------------------------------------------------

// Get coordinate
vec2 uv=(b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5;

// Read pixel
vec4 color=texture2D(ColorTexture,uv).rgba;

// Calculate outline
vec2 step = vec2(1.0 / 256.0, 1.0 / 256.0); // thickness
vec4 right = texture2D(ColorTexture, vec2(uv.x + step.x, uv.y));
vec4 left = texture2D(ColorTexture, vec2(uv.x - step.x, uv.y));
vec4 up = texture2D(ColorTexture, vec2(uv.x, uv.y + step.y));
vec4 down = texture2D(ColorTexture, vec2(uv.x, uv.y - step.y));
vec4 acc = right + left + up + down;
if (acc.a > 0.0) acc.a = 1.0;
acc.rgb = vec3(0.5 * acc.a,0.5 * acc.a,0.5 * acc.a); // outline colour
color = (acc * (1.0 - color.a)) + (color * color.a);

// Write pixel
b3d_FragColor = color * color;

// -------------------------------------------------------------------------------------------------
}[/CODE]


This is an example of result. This sprite has an outline from the start.

What you need to know is that the gray outline is the result of the shader!

(To get your colours right without any kind of shadow effect you might want to change
b3d_FragColor = color * color
; to just b3d_FragColor = color; in the shader)


Screenshot 2021-01-17 at 11.54.58.png
 

Attachments

  • forumoutline.zip
    7 KB · Views: 12
Last edited:

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
576
In an effort to make shaders a bitmore accessible to people here's another shader that'll show :

* How to use int() and constants, as well as some built-in functions. You need to remember that there's is never any automatic casting in an expression so you need to keep them to one type per expression. :rolleyes:

Other than that it's just like CX/BASIC, but you must know that the main loops is executed once per pixel, and you can only write to the "current pixel". You can read any pixel though by stepping around from the current one. Position of the current pixel is given by UV (if you want 0.0 - 1.0, 0.0-1.0 style coordinates, or p which we'll define right after, which gives you pixels, so 0-255, 0-255 in this case of using 256x256 textures. :p

* How to use parameters instead of a texture to change a smaller palette realtime. :p


[CODE title="Shader to change palette of 4 colours realtime"]
uniform sampler2D ColorTexture;
uniform vec4 color2;

// This is how you define constants in GLSL
#define PI 3.14
// A more complex example
#define SIZE vec2(0.02,0.3)

//
// Some built-in functions :
// abs, sign, floor, ceil, fract, mod, step, smoothstep, sqrt, inversesqrt, pow, exp, exp2, log, log2
// radians (converts degrees to radians), degrees (converts radians to degrees),
// sin, cos, tan, asin, acos, atan (with one argument and two arguments for signed numerator and signed denominator)
// lessThan, lessThanEqual, greaterThan, greaterThanEqual, equal, notEqual, and not.
//

void shader(){
// -------------------------------------------------------------------------------------------------

// Get coordinate (both as uv 0.0 - 1.0 and as pixels 0-255)
vec2 uv=(b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5;
vec2 p = vec2(floor(uv.x*256.0), floor(uv.y*256.0));

// Read pixel
vec4 color=texture2D(ColorTexture,uv).rgba;

// Usage of int()
// float red = floor(color.r * 255.0);
int red = int(color.r * 255.0);
int green = int(color.g * 255.0);
int blue = int(color.b * 255.0);
int alpha = int(color.a * 255.0);

// Change palette
if (color.r == 1.0 && color.g == 1.0 && color.b == 0.0) color.rgb = vec3(0.0,0.0,0.0); // convert yellow to black
if (color.r == 1.0 && color.g == 0.0 && color.b == 0.0) color.rgb = vec3(1.0,1.0,1.0); // convert red to white
if (color.r == 1.0 && color.g == 0.0 && color.b == 1.0) color.rgb = vec3(1.0,0.0,0.0); // convert purple to red
if (color.r == 0.0 && color.g == 1.0 && color.b == 1.0) color.rgb = vec3(0.0,1.0,0.0); // convert cyan to green

// Write pixel
b3d_FragColor = color;
// -------------------------------------------------------------------------------------------------
}[/CODE]
 
Last edited:
Top Bottom