Appear effect using Shader

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
922
How to create a simple appear effect using a shader.

Screenshot.png


Shader.cxs
Cerberus:
Import mojo2
Function Main()
    New MyApp
End

Class MyApp Extends App

    Field sourceImage : Image
    Field targetImage : Image
    Field canvas : Canvas
    Field effect : ShaderEffect
    Field value : Float
    Field timer:Float = 0
      
    Method OnCreate()
        sourceImage = Image.Load("graphics.png",0,0,0)
        targetImage = New Image(sourceImage.Width,sourceImage.Height)
        effect = New ShaderEffect
        canvas = New Canvas
          SetUpdateRate 0
    End
    
    Method OnUpdate:Int()
         timer = Millisecs()/1000.0
         timer = MouseX()/100.0 ' Test using mouse
        Return 0
    End
    
    Method OnRender()
        canvas.Clear 0, 0.5, 1, 1   
        effect.SetValue value
        value = value + 0.01         
        effect.SetValue timer ' Pass the varialel timer to shader
        effect.Render sourceImage, sourceImage,targetImage
        canvas.DrawRect 0,0, 256*1,256*1,targetImage,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.SetScalar "Timer",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 SetValue:Void( value:Float )
        _material.SetScalar "Timer",value
    End
    
    Method Render:Void(source:Image,source2:Image,target:Image)
        _material.SetTexture "ColorTexture",source.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

shader.glsl
Code:
uniform sampler2D ColorTexture; // sometimes called Texture0
uniform float Timer;

void shader(){
// -------------------------------------------------------------------------------------------------
    // Get coordinate
    vec2 uv=(b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5 ;    // Get them as normalized (0.0 - 1.0)
    vec2 p = vec2(floor(uv.x*256.0), floor(uv.y*256.0)) ;        // Get them as pixels (0 - 255) (sometimes called FRAGCOORD)

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

    // Pixel action goes here

    // make all pixels black 50% alpha (instead of using texture content) uncomment this to use texture as source
    color.rgba = vec4(0.0,0.0,0.0,0.5) ;
    //
      float xFraction = fract(p.x / 10.0) ;
    float yFraction = fract(p.y / 10.0) ;
    float xDistance = abs(xFraction - 0.5) ;
    float yDistance = abs(yFraction - 0.5) ;
    //
    if (xDistance + yDistance + uv.x + uv.y > Timer ) {
       discard ;
    }

    // Write pixel
    b3d_FragColor = color ;
// -------------------------------------------------------------------------------------------------
}
 

Attachments

  • Code.zip
    33.1 KB · Views: 22
Top Bottom