• Dear Cerberus X User!

    As we prepare to transition the forum ownership from Mike to Phil (TripleHead GmbH), we need your explicit consent to transfer your user data in accordance with our amended Terms and Rules in order to be compliant with data protection laws.

    Important: If you accept the amended Terms and Rules, you agree to the transfer of your user data to the future forum owner!

    Please read the new Terms and Rules below, check the box to agree, and click "Accept" to continue enjoying your Cerberus X Forum experience. The deadline for consent is April 5, 2024.

    Do not accept the amended Terms and Rules if you do not wish your personal data to be transferred to the future forum owner!

    Accepting ensures:

    - Continued access to your account with a short break for the actual transfer.

    - Retention of your data under the same terms.

    Without consent:

    - You don't have further access to your forum user account.

    - Your account and personal data will be deleted after April 5, 2024.

    - Public posts remain, but usernames indicating real identity will be anonymized. If you disagree with a fictitious name you have the option to contact us so we can find a name that is acceptable to you.

    We hope to keep you in our community and see you on the forum soon!

    All the best

    Your Cerberus X Team

Snippet Outline shader

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,414
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.
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: 99
Last edited:
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:
Back
Top Bottom