shaders question?

[JesseParticipant]

I was just looking at some of the threads about shaders and run into the thread started by @ethernaut were he post a link to a shader book and a link to some of examples converted to Monkey2. I tried to match them but they are completely different for example the the second example, the original shader illustrated:

Monkey

[crayon-5cba154577d25787369997 inline="true" ] #ifdef GL_ES precision mediump float; #endif uniform float u_time; void main() { gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0); }

1 2 3 4 5 6 7 8 9 10 11 12

[crayon-5cba154577d25787369997 inline="true" ] #ifdef GL_ES precision mediump float; #endif   uniform float u_time;   void main() { gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0); }

[/crayon]

and the Monkey2 code looks like this:

Monkey

[crayon-5cba154577d30425239849 inline="true" ] #Import "<std>" #Import "<mojo>" #Import "shaders/test02_color.glsl" Using std.. Using mojo.. 'In this example, the shader takes the canvas.Color through the attribute "a_Color". 'A color cycling is performed in the canvas.Color, not in the shader. Class MyWindow Extends Window Field img :Image Field testShader :Shader Method New() Super.New( "Shader test",1024,600,WindowFlags.Resizable ) Local testShader := New Shader( "test02", LoadString("asset::test02_color.glsl"), "" ) img = New Image( 512, 512, TextureFlags.FilterMipmap, testShader ) img.Handle = New Vec2f( 0.5 ) End Method OnRender( canvas:Canvas ) Override App.RequestRender() Local flash := Abs( Sin(Millisecs()/500.0) ) 'Negative values won't look right, so we use Abs() to remove them canvas.Color = New Color( flash, flash , flash ) canvas.DrawImage( img, Width/2, Height/2 ) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

[crayon-5cba154577d30425239849 inline="true" ] #Import "<std>" #Import "<mojo>" #Import "shaders/test02_color.glsl"   Using std.. Using mojo..   'In this example, the shader takes the canvas.Color through the attribute "a_Color". 'A color cycling is performed in the canvas.Color, not in the shader.   Class MyWindow Extends Window Field img :Image Field testShader :Shader   Method New() Super.New( "Shader test",1024,600,WindowFlags.Resizable  ) Local testShader := New Shader( "test02", LoadString("asset::test02_color.glsl"), "" ) img = New Image( 512, 512, TextureFlags.FilterMipmap, testShader ) img.Handle = New Vec2f( 0.5 ) End   Method OnRender( canvas:Canvas ) Override App.RequestRender() Local flash := Abs( Sin(Millisecs()/500.0) ) 'Negative values won't look right, so we use Abs() to remove them canvas.Color = New Color( flash, flash , flash ) canvas.DrawImage( img, Width/2, Height/2 ) End End   Function Main() New AppInstance New MyWindow App.Run() End

[/crayon]

and this:

Monkey

[crayon-5cba154577d3b245555353 inline="true" ] //@renderpasses 0 varying vec4 v_Color; //@vertex attribute vec4 a_Position; attribute vec4 a_Color; uniform mat4 r_ModelViewProjectionMatrix; uniform vec4 m_ImageColor; void main(){ v_Color=m_ImageColor * a_Color; gl_Position=r_ModelViewProjectionMatrix * a_Position; } //@fragment void main() { gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * v_Color ; }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

[crayon-5cba154577d3b245555353 inline="true" ] //@renderpasses 0   varying vec4 v_Color;   //@vertex attribute vec4 a_Position; attribute vec4 a_Color;   uniform mat4 r_ModelViewProjectionMatrix; uniform vec4 m_ImageColor;   void main(){ v_Color=m_ImageColor * a_Color; gl_Position=r_ModelViewProjectionMatrix * a_Position; }   //@fragment void main() { gl_FragColor = vec4( 1.0, 1.0, 1.0, 1.0 ) * v_Color ; }

[/crayon]

it makes the two completely different. for starters the monkey 2 version does not use the time variable or the trig functions inside the shader. I tried to use it the same way as the original and it doesn’t rotate the colors. I am guessing because the variable u_time doesn’t work with monkey2. This leads me to the conclusion that Monkey2 doesn’t pass variables to shaders?

If that is the case, does that make the shader a bit limited and/or slower?
this also makes the tutorial book posted by @ethernaut(https://thebookofshaders.com )in most cases almost impossible to duplicate with Monkey2. it’s obviously doable but in my opinion it doesn’t illustrate the full power of the shader.
?????????????????????????????????

I really don’t know what I am doing. This is just a reflection of my ignorance.

[EthernautParticipant]

Hi, Sorry if that was confusing! Maybe I should remove the reference to the book to make it less confusing.

I wasn’t trying to translate the book’s examples one by one, I was just experimenting with how to achieve certain things using Monkey2 (transparency, passing variables to the shader, using textures, etc) and was using the book as a rough guide.

For instance, example 2 uses Canvas.Color, which is something specific to Mojo and isn’t mentioned in the book, which is about WebGL using a javascript library. But as far as I can tell, all examples they have are completely doable in Monkey2.

I recommend simply doing the book’s examples in their website without worrying about Monkey2, then taking a peek at the M2 code just as examples on how to solve some specific problems using Mojo.

[JesseParticipant]

Thanks, I have been playing around with the code, I can get the examples as they are in the book, and I can modify the code in the GLSL editor and get different results but I am having problems converting the code to Monkey2. I will keep trying but any help would really be appreciated.

[nerobotParticipant]

Mark recently had moved to opengl from gles2.0.

Now we have more possibilities.

[Author]

Posts