• Hello everyone,

    We're happy to announce that our forum is back online! We needed to take some time off to discuss and decide on how to handle sensitive topics in our community.

    The team has posted an in-depth comment regarding a recent incident and our stance on politics and sexuality in our forum. We also added a dedicated paragraph about this in the forum guidelines. This is part of our commitment to maintain a welcoming and inclusive environment for all our users. Your understanding and continued support in building a creative and respectful community are highly appreciated.

    Thank you, the CX Dev-Team

Snippet Drawing with fire

Wingnut

Well-known member
3rd Party Module Dev
Tutorial Author
Joined
Jan 2, 2020
Messages
1,364
As I sense an increasing interest in shaders, I want to share what I have primarly used shaders for - Drawing.
This is a simple example to show how to efficiently use the GPU on your phone or computer to draw something that normally take alot of CPU power.

Here's a demo that lets you draw with live fire (you can change the demo to be truly alive, just spot the correct line and uncomment it).
Code:
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
    Field drawimage:Image
     
    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
          drawimage = New Image(512,512,0,0,0)
    End
   
    Method OnUpdate:Int()
         timer = Millisecs()/2000.0
         timer = MouseX()/100.0 ' Test using mouse
        Return 0
    End
   
    Method OnRender()
        canvas.Clear  
        effect.SetValue value
        value = value + 0.01        
        effect.SetValue timer ' Pass the timer to shader
        effect.Render sourceImage, sourceImage,targetImage
        canvas.SetRenderTarget drawimage
    '    canvas.DrawRect TouchX(),TouchY(),10,10
        canvas.DrawRect TouchX()-128,TouchY()-128, 256*1,256*1,targetImage,0,0,256,256
        canvas.SetRenderTarget Null
        canvas.DrawImage drawimage
        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
 

Attachments

  • Screenshot.png
    Screenshot.png
    208.5 KB · Views: 36
  • drawfireshader.zip
    34.2 KB · Views: 34
Back
Top Bottom