Simple image shader (GLSL)

[DruggedBunny Participant]

This is a very simple pixel shader for modifying images using a GLSL shader.

In this case, the shader changes each pixel’s colour to a greyscale (average) version:

It’s formed of two parts, the Monkey2 code and the GLSL shader code.

The file structure should be:

• the Monkey2 code and an assets folder next to each other;
• the GLSL file in a shaders folder within assets. (“assets/shaders/basic.glsl”)

A pre-made zip setup can be downloaded here.

Monkey2:

Monkey

#Import "<std>" #Import "<mojo>"</p> <p>#Import "assets/"</p> <p>Using std.. Using mojo..</p> <p>Class ImageRenderTarget</p> <p> Field image:Image Field canvas:Canvas</p> <p> Method New (width:Int, height:Int, centered:Bool = True)</p> <p> ' Adapted from DoctorWhoof's Plane Demo -- thanks, DoctorWhoof!</p> <p> image = New Image (width, height, TextureFlags.Dynamic, Shader.Open ("basic"))</p> <p> If centered image.Handle = New Vec2f (0.5, 0.5) Endif</p> <p> image.Material.SetInt ("Toggle", False)</p> <p> canvas = New Canvas (image)</p> <p> canvas.Clear (Color.Brown) canvas.TextureFilteringEnabled = False</p> <p> End</p> <p>End</p> <p>Class Demo Extends Window</p> <p> Const WINDOW_WIDTH:Int = 960 Const WINDOW_HEIGHT:Int = 540 Const WINDOW_FLAGS:WindowFlags = WindowFlags.Resizable</p> <p> Field x:Float Field y:Float Field width:Float = 2 Field height:Float = 2</p> <p> Field xdir:Float = 1 Field ydir:Float = 1</p> <p> Field toggle:Bool</p> <p> Field target:ImageRenderTarget</p> <p> Method New (title:String = "Image Shader Demo", width:Int = WINDOW_WIDTH, height:Int = WINDOW_HEIGHT, flags:WindowFlags = WINDOW_FLAGS) Super.New (title, width, height, flags) End</p> <p> Method OnCreateWindow () Override target = New ImageRenderTarget (640, 480) Mouse.PointerVisible = False End</p> <p> Method OnRender (canvas:Canvas) Override</p> <p> ' Ask app to render itself...</p> <p> RequestRender ()</p> <p> If Keyboard.KeyHit (Key.Escape) Then App.Terminate ()</p> <p> ' Toggle B & W shader effect...</p> <p> If Keyboard.KeyHit (Key.Space)</p> <p> toggle = Not toggle</p> <p> ' NOTE: The "Toggle" string is received in the shader code as m_Toggle, ie. is automatically prefixed with "m_".</p> <p> target.image.Material.SetInt ("Toggle", toggle)</p> <p> Endif</p> <p> ' Simple movement code for the random-colour dot being drawn onto the render target...</p> <p> x = x + xdir y = y + ydir</p> <p> If x < 0 Or x > target.canvas.Viewport.Width xdir = -xdir x = x + xdir Endif</p> <p> If y < 0 Or y > target.canvas.Viewport.Height ydir = -ydir y = y + ydir Endif</p> <p> ' Draw onto render target canvas; shader will affect the result:</p> <p> target.canvas.Color = Color.Rnd () target.canvas.DrawRect (x, y, width, height) target.canvas.Flush ()</p> <p> ' Draw resulting image onto main window canvas:</p> <p> canvas.TextureFilteringEnabled = False canvas.Clear (Color.Pine) canvas.DrawImage (target.image, canvas.Viewport.Width * 0.5, canvas.Viewport.Height * 0.5)', (Pi / 180.0) * angle) canvas.DrawText ("Space to toggle B & W shader", 20, 20)</p> <p> End</p> <p>End</p> <p>Function Main ()</p> <p> New AppInstance New Demo</p> <p> App.Run ()</p> <p>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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122

#Import "<std>" #Import "<mojo>"   #Import "assets/"   Using std.. Using mojo..   Class ImageRenderTarget   Field image:Image Field canvas:Canvas   Method New (width:Int, height:Int, centered:Bool = True)   ' Adapted from DoctorWhoof's Plane Demo -- thanks, DoctorWhoof!   image = New Image (width, height, TextureFlags.Dynamic, Shader.Open ("basic"))   If centered image.Handle = New Vec2f (0.5, 0.5) Endif image.Material.SetInt ("Toggle", False) canvas = New Canvas (image) canvas.Clear (Color.Brown) canvas.TextureFilteringEnabled = False End End   Class Demo Extends Window   Const WINDOW_WIDTH:Int = 960 Const WINDOW_HEIGHT:Int = 540 Const WINDOW_FLAGS:WindowFlags = WindowFlags.Resizable   Field x:Float Field y:Float Field width:Float = 2 Field height:Float = 2 Field xdir:Float = 1 Field ydir:Float = 1 Field toggle:Bool Field target:ImageRenderTarget Method New (title:String = "Image Shader Demo", width:Int = WINDOW_WIDTH, height:Int = WINDOW_HEIGHT, flags:WindowFlags = WINDOW_FLAGS) Super.New (title, width, height, flags) End   Method OnCreateWindow () Override target = New ImageRenderTarget (640, 480) Mouse.PointerVisible = False End Method OnRender (canvas:Canvas) Override ' Ask app to render itself... RequestRender ()   If Keyboard.KeyHit (Key.Escape) Then App.Terminate ()   ' Toggle B & W shader effect... If Keyboard.KeyHit (Key.Space) toggle = Not toggle ' NOTE: The "Toggle" string is received in the shader code as m_Toggle, ie. is automatically prefixed with "m_". target.image.Material.SetInt ("Toggle", toggle) Endif ' Simple movement code for the random-colour dot being drawn onto the render target... x = x + xdir y = y + ydir If x < 0 Or x > target.canvas.Viewport.Width xdir = -xdir x = x + xdir Endif If y < 0 Or y > target.canvas.Viewport.Height ydir = -ydir y = y + ydir Endif ' Draw onto render target canvas; shader will affect the result: target.canvas.Color = Color.Rnd () target.canvas.DrawRect (x, y, width, height) target.canvas.Flush ()   ' Draw resulting image onto main window canvas: canvas.TextureFilteringEnabled = False canvas.Clear (Color.Pine) canvas.DrawImage (target.image, canvas.Viewport.Width * 0.5, canvas.Viewport.Height * 0.5)', (Pi / 180.0) * angle) canvas.DrawText ("Space to toggle B & W shader", 20, 20) End   End   Function Main ()   New AppInstance New Demo App.Run ()   End

GLSL:

This code must be placed into assets/shaders/basic.glsl:

Monkey

// -------------------- // BOILERPLATE BEGINS! // --------------------</p> <p>//@renderpasses 0</p> <p>varying vec2 v_TexCoord0; varying vec4 v_Color;</p> <p>//@vertex</p> <p>attribute vec4 a_Position; attribute vec2 a_TexCoord0; attribute vec4 a_Color;</p> <p>uniform mat4 r_ModelViewProjectionMatrix;</p> <p>uniform vec4 m_ImageColor;</p> <p>void main(){</p> <p> v_TexCoord0=a_TexCoord0; v_Color=m_ImageColor * a_Color;</p> <p> gl_Position=r_ModelViewProjectionMatrix * a_Position; }</p> <p>//@fragment</p> <p>// -------------------- // BOILERPLATE ENDS! // --------------------</p> <p>uniform sampler2D m_ImageTexture0;</p> <p>// m_Toggle is filled-in by image.Material.SetInt ("Toggle", toggle) // m_ prefix is automatically added by mojo...</p> <p>uniform bool m_Toggle;</p> <p>void main(){</p> <p> // Store "this" pixel's original colour:</p> <p> vec4 color = texture2D(m_ImageTexture0, v_TexCoord0);</p> <p> // Average out the RGB values:</p> <p> float average_rgb = ((color.r + color.g + color.b) * 0.333);</p> <p> // Build a new vec4 value with RGB each set to average_rgb, and alpha of 1.0:</p> <p> vec4 bw = vec4(average_rgb, average_rgb, average_rgb, 1.0);</p> <p> // If Toggle = True, set to B & W version of pixel, else draw default. // (gl_FragColor is the resulting pixel colour.)</p> <p> if (m_Toggle) { gl_FragColor = bw; } else { gl_FragColor = color; }</p> <p>}

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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77

// -------------------- // BOILERPLATE BEGINS! // --------------------   //@renderpasses 0   varying vec2 v_TexCoord0; varying vec4 v_Color;   //@vertex   attribute vec4 a_Position; attribute vec2 a_TexCoord0; attribute vec4 a_Color;   uniform mat4 r_ModelViewProjectionMatrix;   uniform vec4 m_ImageColor;   void main(){   v_TexCoord0=a_TexCoord0; v_Color=m_ImageColor * a_Color; gl_Position=r_ModelViewProjectionMatrix * a_Position; }   //@fragment   // -------------------- // BOILERPLATE ENDS! // --------------------   uniform sampler2D m_ImageTexture0;   // m_Toggle is filled-in by image.Material.SetInt ("Toggle", toggle) // m_ prefix is automatically added by mojo...   uniform bool m_Toggle;   void main(){       // Store "this" pixel's original colour: vec4 color = texture2D(m_ImageTexture0, v_TexCoord0); // Average out the RGB values: float average_rgb = ((color.r + color.g + color.b) * 0.333);   // Build a new vec4 value with RGB each set to average_rgb, and alpha of 1.0: vec4 bw = vec4(average_rgb, average_rgb, average_rgb, 1.0); // If Toggle = True, set to B & W version of pixel, else draw default. // (gl_FragColor is the resulting pixel colour.) if (m_Toggle) { gl_FragColor = bw; } else { gl_FragColor = color; } }

You just create an ImageRenderTarget, using the image and canvas fields like so:

• canvas to draw to the canvas;
• image for drawing the resulting shaded image.

To set/get shader variables, you use the image.Material‘s Set/Get methods, as in the SetInt (“Toggle”, toggle) seen in this example. The Toggle string here relates to the m_Toggle value in the GLSL code (notice that the GLSL variable name is formed from this string, auto-prefixed by mojo with “m_”).

Thanks to DoctorWhoof (aka. Ethernaut) for the render target code and PixelPaladin for the example GLSL interfacing code.

Next up, to finally do a workable ZX Spectrum shader on my Island demo (use L to toggle resolution), since I only need to operate on a tiny 256 x 192 image now, which is upscaled to the actual display size… (Done it before but it was far too slow as I was working on the entire display, and the attribute-clash part of the Spectrum shader is very intensive, checking 64 pixels around every single pixel for the most common colour!)

[DruggedBunny Participant]

Updated Island demo with the ImageRenderTarget code from above, now offers simple greyscale for starters. (L to toggle low-res, P to toggle greyscale in low-res mode.)

[DruggedBunny Participant]

Update to Speccy Island!

Hit L to go Low-res, Spectrum-style, with attribute clash.

Hit P in low-res mode to toggle real colours. Full-screen it!

L gets back to normal res/colours.

Still WIP, but finally got a decent-performing shader that at least outputs legit Spectrum-compatible imagery, needs much tweaking still.

In theory, you could save a bunch of frames and display them for real on the Spectrum, as-is… which I’ll eventually try.

[Abe _King_ Participant]

Which browser are you using? It’s not working on Chrome!

Failed to compile shader:ERROR: too many uniform

 

 

Working fairly nicely in FireFox!

[DruggedBunny Participant]

Ah, only tried in FF, web not really being my main target, but had to do a few tweaks to get that to work. Get the impression cross-browser shaders are not a lot of fun!

[DruggedBunny Participant]

Hmm, weird, just installed Chrome and it’s working fine here! What platform/gfx card you on?

[DruggedBunny Participant]

Well, 256 x 192 is rather a “challenging” candidate for turning a low-contrast, fairly washed-out, realtime rendered scene into 8 Spectrum colours (each with associated ‘dark’ version) with correct colour-clash, and without sampling every 8×8 block of pixels (a MASSIVE framerate hit since GLSL isn’t meant to read anything other than the ‘current’ pixel), it wasn’t feasible to select a suitable foreground and background colour that avoided constant flickering between the two as the scene changed, so I’ve amended the Spectrum’s display size.

Here’s how the scene would be rendered if the Spectrum’s display size was 1024 x 768 instead of 256 x 192, but still with correct colours and clash. You really have to see it moving to get the full effect!

Full-screen it. (Only testing web version in Firefox, apologies.)

I’ll upload my code once I’m done messing about…

[DruggedBunny Participant]

Also quite cool back in 256 x 192 but with colour clash turned off. (Separate link; again recommend full-screening it. Key L is still available to toggle low-res mode off.)

[DruggedBunny Participant]

Updated and placed code on GitHub.

WebGL version [Only testing on Firefox!]

[Author]

Posts