Shader example, water effect

Jimmy

New member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
569
code_language.cerberus:
' this
' https://www.shadertoy.com/view/ldXGz7

' Translate to Cerberus glsl dialect (shader.glsl)
' uniform sampler2D ColorTexture;
' uniform float EffectLevel; // "time of animation"
'
' void shader(){
'
'    // Get coordinate
'    vec2 uv=(b3d_ClipPosition.st/b3d_ClipPosition.w)*0.5+0.5;
'
'    // Water effect math on coordinate
'    uv.y += (cos((uv.y + (EffectLevel * 0.04)) * 45.0) * 0.0019) + (cos((uv.y + (EffectLevel * 0.1)) * 10.0) * 0.002);
'    uv.x += (sin((uv.y + (EffectLevel * 0.07)) * 15.0) * 0.0029) + (sin((uv.y + (EffectLevel * 0.1)) * 15.0) * 0.002);
'
'    // Read pixel at coordinate
'    vec4 color=texture2D(ColorTexture,uv).rgba;
'
'    // Write pixel
'    b3d_FragColor=vec4(color);
' }

Import mojo2

Function Main()
    New MyApp
End

Class MyApp Extends App

    Global image2:Image
    Global imagecanvas2:Canvas
    Global image3:Image
    Global imagecanvas3:Canvas
    Field sourceImage : Image
    Field targetImage : Image
    Field canvas : Canvas
    Field effect : ShaderEffect
    Field level : Float = 1
    
    Method OnCreate()
        sourceImage = Image.Load("graphics.png")
        targetImage = New Image(sourceImage.Width,sourceImage.Height)
        effect = New ShaderEffect
        canvas = New Canvas
        image2=New Image(256,256,1,1)
         imagecanvas2=New Canvas(image3)
             image3=New Image(256,256,1,1)
         imagecanvas3=New Canvas(image3)
                 createimages()
         SetUpdateRate 0
    End
    
    Method OnRender()

          If MouseDown(0) Then createimages()
        effect.SetLevel level
        level = level + 0.1       
        
        effect.Render sourceImage,targetImage
        canvas.DrawImage image2,256,256
            
        ' effect.Render image3,image2
        canvas.Clear 0, 0.5, 1, 1
        canvas.SetBlendMode BlendMode.Alpha
            
        ' test with other flush       
        canvas.DrawImage targetImage,320,240
        ' canvas.DrawImage image3,256+256,256

        canvas.Flush
    End
    
    Method createimages()
    
        ' shader reads from
        imagecanvas3.Clear
        imagecanvas3.SetColor 1,1,1,1
        imagecanvas3.DrawRect 0,0,image2.Width(),image2.Height()
        imagecanvas3.SetColor 0,0,0,1
        imagecanvas3.DrawText "Image...2",0,0
        imagecanvas3.Flush

        ' shader writes to
        imagecanvas2.Clear
        imagecanvas2.SetColor 1,1,1,1
        imagecanvas2.DrawRect 0,0,image2.Width(),image2.Height()
        imagecanvas2.SetColor 0,0,0,1
        imagecanvas2.DrawText "Image...2",0,0
        imagecanvas2.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 "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,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
Screenshot 2021-01-06 at 02.59.01.png
 

Attachments

  • shaderexample.zip
    45.4 KB · Views: 17
Top Bottom