Slimey shader

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
922
Slime shader is a useful example of how a shader works.

code.png


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("slime.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()/100.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 ' Timer should be 0-1
    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;
uniform float Timer;

void shader(){
// -------------------------------------------------------------------------------------------------
    // Get pixel coordinate
    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)) ;

    // Process pixel coordinate
    // uv.y = 1.0 - uv.y;
    // uv.y = -uv.y;
    //
    uv.y += (cos((uv.y+(Timer*0.004))*45.0)*0.019) +
    (cos((uv.y+(Timer*0.01))*15.0)*0.002);
    //
    uv.x += (sin((uv.y+(Timer*0.007))*15.0)*0.029) +
    (sin((uv.y+(Timer*0.01))*15.0)*0.002);
   
    // Read pixel
    vec4 color = texture2D(ColorTexture,uv).rgba ;

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

Attachments

  • Slimeshader.zip
    54.8 KB · Views: 23

MikeHart

Administrator
Joined
Jun 19, 2017
Messages
3,167
Looks nice. But you can see it not working correctly on the right side:

1621842905557.png
 

Jimmy

Active member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
922
That's the edge of the texture that inhibits the blob to become larger. You always want to have spare room around the object.
I was exploring how it added to the drip-effect sometimes.

Here's one I edited that will fit perfectly.

slime.png
 
Top Bottom