Hello,
This is my first tutorial here. We are going to sloooowly convert basic Shadertoy shader to CX.
When you are in shadertoy.com and start new shader you have exactly this.
On the left the quad or screen space containing compiled result of the code in the right.
All test are made for HTML5 export, i have not windows, ios, or android and just discovered Cerberus X yesterday.
To convert this shader for CX we have 2 solution.
1- Minimum conversion method.
2- Write entire shader for CX.
For lazy coder like me we are exploring the first method.
Let's begin.
Run Cerberus X and ....
1 - Create new drawer rename it shader
2 - Create New file called shader.cxs
3 - Copy this code inside the shader.cxs file
4 - Create data file inside shader drawer : shader.data
5- Create textfile and rename it shader.glsl
6 - inside shader.glsl copy this shader code.
7- Save all and Run build and Run;
8- Have fun
This is my first tutorial here. We are going to sloooowly convert basic Shadertoy shader to CX.
When you are in shadertoy.com and start new shader you have exactly this.
On the left the quad or screen space containing compiled result of the code in the right.
All test are made for HTML5 export, i have not windows, ios, or android and just discovered Cerberus X yesterday.
To convert this shader for CX we have 2 solution.
1- Minimum conversion method.
2- Write entire shader for CX.
For lazy coder like me we are exploring the first method.
Let's begin.
Run Cerberus X and ....
1 - Create new drawer rename it shader
2 - Create New file called shader.cxs
3 - Copy this code inside the shader.cxs file
Cerberus:
' Cerberus X - Shadertoy Default Shader
'
' Gtr V1.0 2020
Strict
Import mojo2
Class MyShader Extends Shader
Method New()
Build(LoadString("shader.glsl"))
End
Method OnInitMaterial:Void( myMaterial:Material )
'write uniform
myMaterial.SetScalar("timer", 0)
End
End
Class MyApp Extends App
Field shaderMaterial:Material = New Material(New MyShader())
Field myCanvas:Canvas
Field timer:Float = 0.0
Field tx:String =" "
Method OnCreate:Int()
myCanvas = New Canvas()
Return 0
End
Method OnUpdate:Int()
' infinite timer
timer = Millisecs()/1000.0
Return 0
End
Method OnRender:Int()
shaderMaterial.SetScalar("timer", timer)
myCanvas.DrawRect(0, 0, 800, 600, shaderMaterial)
'myCanvas.DrawText(Millisecs()/10000.0, 0,0) ' force screen update
myCanvas.DrawText(tx, 0,0)
myCanvas.Flush()
Return 0
End
End
Function Main:Int()
New MyApp()
Return 0
End
4 - Create data file inside shader drawer : shader.data
5- Create textfile and rename it shader.glsl
6 - inside shader.glsl copy this shader code.
Cerberus:
// Shadertoy default Shader ; Gtr 2020
// Basic way to convert shader for CX
uniform sampler2D ColorTexture;
uniform float timer; // we are using this uniform in shader.cxs "timer" to modfy color
// Shadertoy Emulation #define is used to emulate iTime and iResolution for CX ... iTime become 'timer' will used on CX
#define iTime timer
#define iResolution b3d_Texcoord0 // iResolution become b3d_Texcoord0 on CX
// Shadertoy Shader without modification
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
// Normalized pixel coordinates (from 0 to 1)
vec2 uv = fragCoord/iResolution.xy;
// Time varying pixel color
vec3 col = 0.5 + 0.5*cos(iTime+uv.xyx+vec3(0,2,4));
// Output to screen
fragColor = vec4(col,1.0);
}
// End Shadertoy shader
// CX shader , just call mainImage(out, in) function
void shader(){
mainImage(b3d_FragColor, b3d_Texcoord0.xy);
}
7- Save all and Run build and Run;
8- Have fun
Attachments
Last edited: