CRT Shader?

[HezkoreParticipant]

Now we need it in real time

My example above is real-time

You must have copied the shader incorrectly, cause it’s the exact same shader as nr 7. which you got an error on (that error is btw fixed by writing ‘1.0 -‘ instead of just ‘1 -‘, fixed in my version), but mine has two name changes.
Make sure you get the first line copied which defines the renderpasses.

And as I said, all you have to do is replace the ‘sharp’ and ‘blur’ texture with ‘m_ImageTexture0’ and pass the image to a canvas (so that the canvas draws to the image), then there’s no need to pass a texture to the shader, M2 does that for you.

So if you really can’t get my example working, do ^ those things.

[therevillsParticipant]

Strange when I copy and paste the shaders from here I get the “Can’t find ‘//@renderpasses’ tag” error…

I now get:

Monkey

Invalid uniform type 0 expecting 1

1 2 3

Invalid uniform type 0 expecting 1

Edit:
Got it to work now… no idea what was going on…

[PixelPaladinParticipant]

If there is interest I could write a crt shader module for monkeyX2.

[AnatolParticipant]

therevills, I had a similar error before

> Invalid uniform type 0 expecting 1

In my case I didn’t set the uniform from outside the shader. I thought I did but that piece of code never got executed and so the shader couldn’t find it.

[therevillsParticipant]

@pixelpaladin – that would be great!

@anatol – I really dont have any idea what I’m doing with shaders at the moment, never played with them in the past

[PixelPaladinParticipant]

Okay, I wrote a small crt module.

Get it here:
https://www.dropbox.com/s/pvv6l8hqwsth2vm/crt.zip?dl=0

Some example code:

Monkey

Namespace application #Import "<std>" #Import "<mojo>" #Import "<crt>" #import "assets/" Using std.. Using mojo.. Using crt.. Class AppWindow Extends Window Field crt:GraphicsCRT Field testImage:Image Method New(title:String, width:Int, height:Int) 'Call super class constructor - this just passes the arguments 'up' to the Window class constructor. Super.New(title, width, height, WindowFlags.Resizable) ' initialize crt screen (width, heightn, rgb-split-intensity) crt = New GraphicsCRT(320, 240, 0.75) Layout = "resize" ClearColor = New Color(0.0, 0.2, 0.4) Style.BackgroundColor = Color.Black SwapInterval = 1 End Method OnRender(canvas:Canvas) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() App.RequestRender() ' get crt canvas: Local crtCanvas:Canvas = crt.Canvas ' render some stuff on crt screen: crtCanvas.Clear(Color.Black) crtCanvas.BlendMode = BlendMode.Alpha crtCanvas.Color = Color.White crtCanvas.DrawText("Move Mouse", 5, 5) crtCanvas.BlendMode = BlendMode.Additive crtCanvas.Color = New Color(Float(Mouse.X)/Width, Float(Mouse.Y)/Height, 0.0) crtCanvas.DrawCircle(Float(Width-Mouse.X)*Float(crt.Resolution.x)/Width, Float(Height-Mouse.Y)*Float(crt.Resolution.y)/Height, 50) crtCanvas.Color = New Color(1.0-Float(Mouse.X)/Width, 1.0-Float(Mouse.Y)/Height, 1.0) crtCanvas.DrawCircle(Mouse.X*crt.Resolution.x/Width, Mouse.Y*crt.Resolution.y/Height, 50) ' draw crt screen on canvas: crt.DrawScreen(canvas, 0, 0, Width, Height) End End Function Main() New AppInstance New AppWindow("Test Application", App.DesktopSize.x/2 ,App.DesktopSize.y/2) 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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

Namespace application   #Import "<std>" #Import "<mojo>" #Import "<crt>"   #import "assets/"   Using std.. Using mojo.. Using crt..   Class AppWindow Extends Window Field crt:GraphicsCRT Field testImage:Image Method New(title:String, width:Int, height:Int) 'Call super class constructor - this just passes the arguments 'up' to the Window class constructor. Super.New(title, width, height, WindowFlags.Resizable) ' initialize crt screen (width, heightn, rgb-split-intensity) crt = New GraphicsCRT(320, 240, 0.75) Layout = "resize" ClearColor = New Color(0.0, 0.2, 0.4) Style.BackgroundColor = Color.Black SwapInterval = 1 End   Method OnRender(canvas:Canvas) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() App.RequestRender() ' get crt canvas: Local crtCanvas:Canvas = crt.Canvas ' render some stuff on crt screen: crtCanvas.Clear(Color.Black) crtCanvas.BlendMode = BlendMode.Alpha crtCanvas.Color = Color.White crtCanvas.DrawText("Move Mouse", 5, 5) crtCanvas.BlendMode = BlendMode.Additive crtCanvas.Color = New Color(Float(Mouse.X)/Width, Float(Mouse.Y)/Height, 0.0) crtCanvas.DrawCircle(Float(Width-Mouse.X)*Float(crt.Resolution.x)/Width, Float(Height-Mouse.Y)*Float(crt.Resolution.y)/Height, 50) crtCanvas.Color = New Color(1.0-Float(Mouse.X)/Width, 1.0-Float(Mouse.Y)/Height, 1.0) crtCanvas.DrawCircle(Mouse.X*crt.Resolution.x/Width, Mouse.Y*crt.Resolution.y/Height, 50) ' draw crt screen on canvas: crt.DrawScreen(canvas, 0, 0, Width, Height) End End   Function Main() New AppInstance New AppWindow("Test Application", App.DesktopSize.x/2 ,App.DesktopSize.y/2) App.Run() End

(only resolutions between 128×64 and 800×600 are allowed)

Attachments:

1. 

   cgt1.jpg
   

2. 

   crt2.jpg
   

3. 

   crt3.jpg
   

4. 

   crt4.jpg
   

[EthernautParticipant]

Thanks for sharing!

I also updated my shader tests repository with my latest CRT shader. Still needs some tweaks, but it’s very customizable, and is already working pretty well for an “arcade monitor” style image. It has features like variable width scanlines, soft glow, color correction and image filtering on a single axis.

There’s also a “useful functions” .glsl file in the shaders folder, with functions I found while googling around, with credits for each one.

https://github.com/DoctorWhoof/Mojo-Shader-Tests

Cheers.

[PixelPaladinParticipant]

@ethernaut: That looks nice! I like the glow effect. How did you implement it?

I changed some parameters. The image is now less distorted (but in the corners some pixels are not visible anymore). It is now also possible to set the intensity for rgb splitting (the vertical lines) as well as the intensity of the scan lines (the horizontal lines):

Monkey

New GraphicsCRT(width:UInt, height:UInt, rgbSplitIntensity:Float=0.5, scanlineIntensity:Float=0.1))

1	New GraphicsCRT(width:UInt, height:UInt, rgbSplitIntensity:Float=0.5, scanlineIntensity:Float=0.1))

Attachments:

1. 

   crt5.jpg
   

[EthernautParticipant]

The glow was a pain, took me something like 2 or 3 nights fiddling with the code and the parameters to get it to look right. This is what I got in the end:

C

vec3 glow( sampler2D image, vec2 uv, float glowRadius, vec2 res ){ vec3 result = vec3( 0.0, 0.0, 0.0 ); vec2 pixSize = vec2( 1.0/m_Resolution.x, 1.0/m_Resolution.y ); float glowRadiusUV = glowRadius * pixSize.x; int samples = int(glowRadius)*2; int halfsamples = samples/2; for( int x=-halfsamples; x<=halfsamples; x++ ){ for( int y=-halfsamples; y<=halfsamples; y++ ){ float posX = float(x)/float(halfsamples); float posY = float(y)/float(halfsamples); float xoffset = posX*glowRadius*pixSize.x; float yoffset = posY*glowRadius*pixSize.y; float fade = 1.0 - (abs(posX)*abs(posY)); result += ( texture2D( image, vec2( uv.x + xoffset, uv.y + yoffset ) ).rgb * fade ); } } return result; }

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

vec3 glow( sampler2D image, vec2 uv, float glowRadius, vec2 res ){ vec3 result = vec3( 0.0, 0.0, 0.0 ); vec2 pixSize = vec2( 1.0/m_Resolution.x, 1.0/m_Resolution.y );   float glowRadiusUV = glowRadius * pixSize.x; int samples = int(glowRadius)*2; int halfsamples = samples/2;   for( int x=-halfsamples; x<=halfsamples; x++ ){ for( int y=-halfsamples; y<=halfsamples; y++ ){ float posX = float(x)/float(halfsamples); float posY = float(y)/float(halfsamples); float xoffset = posX*glowRadius*pixSize.x; float yoffset = posY*glowRadius*pixSize.y; float fade = 1.0 - (abs(posX)*abs(posY)); result += ( texture2D( image, vec2( uv.x + xoffset, uv.y + yoffset ) ).rgb * fade ); } } return result; }

The number of X and Y samples increases automatically when the glow size is larger, so it gets very expensive very quick. 2.0 seems like a good amount for an Ok looking glow with a reasonable performance (runs on a 2880×1800 image at 60fps on a laptop with intel graphics).

But the trick that actually helped a lot was to “pre-mix” the glow with the main color using “max( color, glowColor * 1.5 )” before doing the additive mix. This “fills” the dark spaces between pixels more, and makes the glow more visible without making the image much brighter. Have a look at the full glsl code here:

https://github.com/DoctorWhoof/Mojo-Shader-Tests/blob/master/shaders/test07_CRT.glsl

It’s kinda messy, I don’t really know what I”m doing!
Cheers!

[therevillsParticipant]

@pixelpaladin – I cant get your code to work. When I try to compile I get:

Monkey

Error : Can't find overload for 'new:Void(monkey.types.String,monkey.types.String,monkey.types.String)' with argument types (monkey.types.String,monkey.types.String)

1 2	Error : Can't find overload for 'new:Void(monkey.types.String,monkey.types.String,monkey.types.String)' with argument types (monkey.types.String,monkey.types.String)

So I changed this line:

Monkey

crtShader = New Shader("crtshader", CRT_ShaderCode)

1	crtShader = New Shader("crtshader", CRT_ShaderCode)

to

Monkey

crtShader = New Shader("crtshader", CRT_ShaderCode, "")

1	crtShader = New Shader("crtshader", CRT_ShaderCode, "")

So it now compiles but crashes at runtime:

Monkey

Attempt to invoke method on null instance

1	Attempt to invoke method on null instance

Full code:

Monkey

Namespace crt #Import "<std>" #Import "<mojo>" #import "assets/tvscreen.png" Using std.. Using mojo.. Class GraphicsCRT Field crtCanvas:Canvas Field crtImage:Image Field crtShader:Shader Field resolution:Vec2i Global Instance:GraphicsCRT = Null Field overlayImg:Image Method New(width:UInt = 320, height:UInt = 240, rgbSplitIntensity:Float = 0.5, scanlineIntensity:Float = 0.1) If Instance <> Null Then RuntimeError("only one crt graphics instance is allowed") Instance = Self If width < 128 Then width = 128 If width > 800 Then width = 800 If height < 64 Then height = 64 If height > 600 Then height = 600 If rgbSplitIntensity < 0.0 Then rgbSplitIntensity = 0.0 If rgbSplitIntensity > 1.0 Then rgbSplitIntensity = 1.0 resolution = New Vec2i(width, height) Local CRT_ShaderCode:String 'CRT_ShaderCode = LoadString("asset::crt.txt") CRT_ShaderCode = "~n//@renderpasses 0,1,2~n~nvarying vec2 texCoord0;~nvarying vec4 color;~n~n//@vertex~n~nattribute vec4 mx2_Vertex;~nattribute vec2 mx2_TexCoord0;~nattribute vec4 mx2_Color;~n~nuniform mat4 mx2_ModelViewProjectionMatrix;~n~nuniform vec4 mx2_ImageColor;~n~nvoid main(){~n~n~ttexCoord0=mx2_TexCoord0;~n~n~tcolor=mx2_ImageColor * mx2_Color;~n~t~n~tgl_Position=mx2_ModelViewProjectionMatrix * mx2_Vertex;~n}~n~n//@fragment~n~nuniform sampler2D mx2_ImageTexture0;~n~nvoid main(){~n~n#if MX2_RENDERPASS==0~n~tvec2 texcoords = texCoord0;~n~tfloat bl = %BORDER_LEVEL%*0.1;~n~tfloat x = texcoords.x*(1.0+bl)-bl/2.0;~n~tfloat y = texcoords.y*(1.0+bl)-bl/2.0;~n~tfloat x2 = (x-0.5)*(1.0+ 0.5*%EFFECT_LEVEL% *((y-0.5)*(y-0.5)))+0.5;~n~tfloat y2 = (y-0.5)*(1.0+ 0.25*%EFFECT_LEVEL% *((x-0.5)*(x-0.5)))+0.5;~n~tvec2 v2 = vec2(x2, y2);~n~tvec4 temp = texture2D(mx2_ImageTexture0, v2);~n~tif (v2.x<0.0 || v2.x>1.0 || v2.y<0.0 || v2.y>1.0) {~n~t~ttemp = vec4(0.0,0.0,0.0,1.0);~n~t}else{~n~t~tfloat cr = sin((x2*%WIDTH%) *2.0*3.1415) * 0.5+0.5+0.1; //if(cr < 0.0) cr = 0.0;~n~t~tfloat cg = sin((x2*%WIDTH%-1.0*2.0*3.1415)*2.0*3.1415) * 0.5+0.5+0.1; //if(cg < 0.0) cg = 0.0;~n~t~tfloat cb = sin((x2*%WIDTH%-2.0*2.0*3.1415)*2.0*3.1415) * 0.5+0.5+0.1; //if(cg < 0.0) cg = 0.0;~n~t~ttemp = mix(temp*vec4(cr,cg,cb,1.0),temp,1.0-%RGB_SPLIT_INTENSITY%);~n~t~tif (%HEIGHT% <= 320.0) {~n~t~t~tfloat ck = sin((y2*%HEIGHT%) *2.0*3.1415) * 0.5+0.5+0.1;~n~t~t~ttemp = temp*(1.0-%SCANLINE_INTENSITY%) + temp*ck*%SCANLINE_INTENSITY%;~n~t~t}~n~t}~n~tgl_FragColor = (temp * color)*0.875+0.125;~n#else~n~tfloat alpha=texture2D( mx2_ImageTexture0,texCoord0 ).a * color.a;~n~tgl_FragColor=vec4( 0.0,0.0,0.0,alpha );~n#endif~n}~n" CRT_ShaderCode = CRT_ShaderCode.Replace("%WIDTH%", String(Int(resolution.x)+".0")) CRT_ShaderCode = CRT_ShaderCode.Replace("%HEIGHT%", String(Int(resolution.y)+".0")) CRT_ShaderCode = CRT_ShaderCode.Replace("%EFFECT_LEVEL%", "0.3")'0.5 CRT_ShaderCode = CRT_ShaderCode.Replace("%BORDER_LEVEL%", "0.3") Local sint:String = scanlineIntensity If Not sint.Contains(".") Then sint += ".0" CRT_ShaderCode = CRT_ShaderCode.Replace("%SCANLINE_INTENSITY%", sint) Local si:String = rgbSplitIntensity If Not si.Contains(".") Then si += ".0" CRT_ShaderCode = CRT_ShaderCode.Replace("%RGB_SPLIT_INTENSITY%", si) crtShader = New Shader("crtshader", CRT_ShaderCode, "") crtImage = New Image(resolution.x, resolution.y, TextureFlags.Dynamic, crtShader) crtCanvas = New Canvas(crtImage) overlayImg = Image.Load("asset::tvscreen.png") End Property Canvas:Canvas() Return crtCanvas End Property Resolution:Vec2i() Return resolution End Method DrawScreen:Void(targetCanvas:Canvas, x:Float, y:Float, width:Float, height:Float) crtCanvas.Flush() If targetCanvas = Null Then Return targetCanvas.DrawRect(x, y, width, height, crtImage) Local tempColor := targetCanvas.Color targetCanvas.Color = Color.White targetCanvas.DrawRect(x, y, width, height, overlayImg) targetCanvas.Color = tempColor End End Class AppWindow Extends Window Field crt:GraphicsCRT Field testImage:Image Method New(title:String, width:Int, height:Int) 'Call super class constructor - this just passes the arguments 'up' to the Window class constructor. Super.New(title, width, height, WindowFlags.Resizable) ' initialize crt screen (width, heightn, rgb-split-intensity) crt = New GraphicsCRT(320, 240, 0.75) Layout = "resize" ClearColor = New Color(0.0, 0.2, 0.4) Style.BackgroundColor = Color.Black SwapInterval = 1 End Method OnRender(canvas:Canvas) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() App.RequestRender() ' get crt canvas: Local crtCanvas:Canvas = crt.Canvas ' render some stuff on crt screen: crtCanvas.Clear(Color.Black) crtCanvas.BlendMode = BlendMode.Alpha crtCanvas.Color = Color.White crtCanvas.DrawText("Move Mouse", 5, 5) crtCanvas.BlendMode = BlendMode.Additive crtCanvas.Color = New Color(Float(Mouse.X)/Width, Float(Mouse.Y)/Height, 0.0) crtCanvas.DrawCircle(Float(Width-Mouse.X)*Float(crt.Resolution.x)/Width, Float(Height-Mouse.Y)*Float(crt.Resolution.y)/Height, 50) crtCanvas.Color = New Color(1.0-Float(Mouse.X)/Width, 1.0-Float(Mouse.Y)/Height, 1.0) crtCanvas.DrawCircle(Mouse.X*crt.Resolution.x/Width, Mouse.Y*crt.Resolution.y/Height, 50) ' draw crt screen on canvas: crt.DrawScreen(canvas, 0, 0, Width, Height) End End Function Main() New AppInstance New AppWindow("Test Application", App.DesktopSize.x/2 ,App.DesktopSize.y/2) 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 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

Namespace crt   #Import "<std>" #Import "<mojo>"   #import "assets/tvscreen.png"   Using std.. Using mojo..   Class GraphicsCRT Field crtCanvas:Canvas Field crtImage:Image Field crtShader:Shader Field resolution:Vec2i Global Instance:GraphicsCRT = Null Field overlayImg:Image Method New(width:UInt = 320, height:UInt = 240, rgbSplitIntensity:Float = 0.5, scanlineIntensity:Float = 0.1) If Instance <> Null Then RuntimeError("only one crt graphics instance is allowed") Instance = Self If width < 128 Then width = 128 If width > 800 Then width = 800 If height < 64 Then height = 64 If height > 600 Then height = 600 If rgbSplitIntensity < 0.0 Then rgbSplitIntensity = 0.0 If rgbSplitIntensity > 1.0 Then rgbSplitIntensity = 1.0 resolution = New Vec2i(width, height) Local CRT_ShaderCode:String 'CRT_ShaderCode = LoadString("asset::crt.txt") CRT_ShaderCode = "~n//@renderpasses 0,1,2~n~nvarying vec2 texCoord0;~nvarying vec4 color;~n~n//@vertex~n~nattribute vec4 mx2_Vertex;~nattribute vec2 mx2_TexCoord0;~nattribute vec4 mx2_Color;~n~nuniform mat4 mx2_ModelViewProjectionMatrix;~n~nuniform vec4 mx2_ImageColor;~n~nvoid main(){~n~n~ttexCoord0=mx2_TexCoord0;~n~n~tcolor=mx2_ImageColor * mx2_Color;~n~t~n~tgl_Position=mx2_ModelViewProjectionMatrix * mx2_Vertex;~n}~n~n//@fragment~n~nuniform sampler2D mx2_ImageTexture0;~n~nvoid main(){~n~n#if MX2_RENDERPASS==0~n~tvec2 texcoords = texCoord0;~n~tfloat bl = %BORDER_LEVEL%*0.1;~n~tfloat x = texcoords.x*(1.0+bl)-bl/2.0;~n~tfloat y = texcoords.y*(1.0+bl)-bl/2.0;~n~tfloat x2 = (x-0.5)*(1.0+  0.5*%EFFECT_LEVEL%  *((y-0.5)*(y-0.5)))+0.5;~n~tfloat y2 = (y-0.5)*(1.0+  0.25*%EFFECT_LEVEL%  *((x-0.5)*(x-0.5)))+0.5;~n~tvec2 v2 = vec2(x2, y2);~n~tvec4 temp = texture2D(mx2_ImageTexture0, v2);~n~tif (v2.x<0.0 || v2.x>1.0 || v2.y<0.0 || v2.y>1.0) {~n~t~ttemp = vec4(0.0,0.0,0.0,1.0);~n~t}else{~n~t~tfloat cr = sin((x2*%WIDTH%)            *2.0*3.1415) * 0.5+0.5+0.1;   //if(cr < 0.0) cr = 0.0;~n~t~tfloat cg = sin((x2*%WIDTH%-1.0*2.0*3.1415)*2.0*3.1415) * 0.5+0.5+0.1;   //if(cg < 0.0) cg = 0.0;~n~t~tfloat cb = sin((x2*%WIDTH%-2.0*2.0*3.1415)*2.0*3.1415) * 0.5+0.5+0.1;   //if(cg < 0.0) cg = 0.0;~n~t~ttemp = mix(temp*vec4(cr,cg,cb,1.0),temp,1.0-%RGB_SPLIT_INTENSITY%);~n~t~tif (%HEIGHT% <= 320.0) {~n~t~t~tfloat ck = sin((y2*%HEIGHT%)               *2.0*3.1415) * 0.5+0.5+0.1;~n~t~t~ttemp = temp*(1.0-%SCANLINE_INTENSITY%) + temp*ck*%SCANLINE_INTENSITY%;~n~t~t}~n~t}~n~tgl_FragColor = (temp * color)*0.875+0.125;~n#else~n~tfloat alpha=texture2D( mx2_ImageTexture0,texCoord0 ).a * color.a;~n~tgl_FragColor=vec4( 0.0,0.0,0.0,alpha );~n#endif~n}~n" CRT_ShaderCode = CRT_ShaderCode.Replace("%WIDTH%", String(Int(resolution.x)+".0")) CRT_ShaderCode = CRT_ShaderCode.Replace("%HEIGHT%", String(Int(resolution.y)+".0")) CRT_ShaderCode = CRT_ShaderCode.Replace("%EFFECT_LEVEL%", "0.3")'0.5 CRT_ShaderCode = CRT_ShaderCode.Replace("%BORDER_LEVEL%", "0.3") Local sint:String = scanlineIntensity If Not sint.Contains(".") Then sint += ".0" CRT_ShaderCode = CRT_ShaderCode.Replace("%SCANLINE_INTENSITY%", sint) Local si:String = rgbSplitIntensity If Not si.Contains(".") Then si += ".0" CRT_ShaderCode = CRT_ShaderCode.Replace("%RGB_SPLIT_INTENSITY%", si) crtShader = New Shader("crtshader", CRT_ShaderCode, "") crtImage = New Image(resolution.x, resolution.y, TextureFlags.Dynamic, crtShader) crtCanvas = New Canvas(crtImage) overlayImg = Image.Load("asset::tvscreen.png") End Property Canvas:Canvas() Return crtCanvas End Property Resolution:Vec2i() Return resolution End Method DrawScreen:Void(targetCanvas:Canvas, x:Float, y:Float, width:Float, height:Float) crtCanvas.Flush() If targetCanvas = Null Then Return targetCanvas.DrawRect(x, y, width, height, crtImage) Local tempColor := targetCanvas.Color targetCanvas.Color = Color.White targetCanvas.DrawRect(x, y, width, height, overlayImg) targetCanvas.Color = tempColor End End       Class AppWindow Extends Window Field crt:GraphicsCRT Field testImage:Image Method New(title:String, width:Int, height:Int) 'Call super class constructor - this just passes the arguments 'up' to the Window class constructor. Super.New(title, width, height, WindowFlags.Resizable) ' initialize crt screen (width, heightn, rgb-split-intensity) crt = New GraphicsCRT(320, 240, 0.75) Layout = "resize" ClearColor = New Color(0.0, 0.2, 0.4) Style.BackgroundColor = Color.Black SwapInterval = 1 End Method OnRender(canvas:Canvas) Override If Keyboard.KeyReleased(Key.Escape) Then App.Terminate() App.RequestRender() ' get crt canvas: Local crtCanvas:Canvas = crt.Canvas ' render some stuff on crt screen: crtCanvas.Clear(Color.Black) crtCanvas.BlendMode = BlendMode.Alpha crtCanvas.Color = Color.White crtCanvas.DrawText("Move Mouse", 5, 5) crtCanvas.BlendMode = BlendMode.Additive crtCanvas.Color = New Color(Float(Mouse.X)/Width, Float(Mouse.Y)/Height, 0.0) crtCanvas.DrawCircle(Float(Width-Mouse.X)*Float(crt.Resolution.x)/Width, Float(Height-Mouse.Y)*Float(crt.Resolution.y)/Height, 50) crtCanvas.Color = New Color(1.0-Float(Mouse.X)/Width, 1.0-Float(Mouse.Y)/Height, 1.0) crtCanvas.DrawCircle(Mouse.X*crt.Resolution.x/Width, Mouse.Y*crt.Resolution.y/Height, 50) ' draw crt screen on canvas: crt.DrawScreen(canvas, 0, 0, Width, Height) End End Function Main() New AppInstance New AppWindow("Test Application", App.DesktopSize.x/2 ,App.DesktopSize.y/2) App.Run() End

[PixelPaladinParticipant]

So you used a single-pass approach. Multi-pass would be faster, but if you get 60 fps on Intel graphics it should be absolutely okay (I wanted to implement it but I was too lazy )

Somehow my biggest problem with monkey2’s mojo is that I cannot pass values to shaders. I really don’t like that. The only possibility to pass values to a shader seems to be encoding them into a hidden area of the source image … which seems odd to me.

[therevillsParticipant]

@pixelpaladin – did you see my post just before yours?

[EthernautParticipant]

I’m actually getting the same errors as @therevills on MacOS. Maybe it’s because I’m using the latest dev branch?

So you used a single-pass approach. Multi-pass would be faster

Baby steps! Until a couple weeks ago I wouldn’t even know where to start if someone asked me how a shader works… :-)… Multi-pass here would actually be ideal, since the glow should happen on the image after the scanlines and shadow mask are applied. Any pointers on how exactly I’d make it happen? For instance, where do you store each pass resulting texture, and how do you use it on the next pass? Is it just updated on the m_ImageTexture0 itself?

Somehow my biggest problem with monkey2’s mojo is that I cannot pass values to shaders

I didn’t get that part. Can’t you pass values using methods like Image.Material.SetFloat?

Cheers.

[PixelPaladinParticipant]

Any pointers on how exactly I’d make it happen?

The idea behind the multi pass approach is to blur in one direction first (let’s say in x direction) and in the next pass blur in the other direction (y). This reduces running time from O(n²) to O(n). In mojo you could render into different images using multiple canvases (I am not sure how efficient this is – maybe there is a better solution to this). To get a soft blur a gauss kernel is often used. It can be statically included into the shader as an array or it can be passed to the shader as a texture. However I cannot figure out how pass stuff to the shader in monkey2’s mojo (everything I tried just crashed my program).

I didn’t get that part. Can’t you pass values using methods like Image.Material.SetFloat?

That was what I thought – but I have no idea how to do this. Is there any documentation or a tutorial to this? Let’s say I have a uniform float foo in my shader. What do I need to do to set the value of foo in my monkey source?

Edit: I figured out, how it works … fixing everything right now.

[PixelPaladinParticipant]

@therevills: no, sorry. I updated my monkey2 to the newest version and now my code crashes, too. I will try to fix that. Seems like the shader stuff has changed a lot in the last months …

[Author]

Posts