CRT Shader?

[Joubarbe]

Hey,

Does any of you have a shader or something that could be used to mimic a CRT screen, green on black? Like cool-retro-term on Linux (or this one). Note: I have no idea how I could apply shaders to a 2D screen in PB. I'm aware of the shader editor that is around on the forum, but cannot really find out how to apply this to everything that is displayed on screen at each frame.

[ricardo_sdl]

Here, viewtopic.php?t=75223, you can find some examples on how to use shaders with the ogre engine (which is included with purebasic). I know it is possible to init the 3d engine, create a camera and use that to show your 2d sprites. I think a crt shader could be applied to the camera to create the effect.

[Joubarbe]

Hmm, I don't know, seems a bit silly to use the 3D engine just to have shaders...? I was hoping to find a solution with the GLSL editor, but I have no idea how that works If someone has a working example of a very simple shader applied to one 2d sprite, that would help.

[idle]

you don't really need a shader just make a full screen sprite as an overlay and draw it last
see DisplayMessageCenter functions

Code: Select all

;Putin's ACME clock, any key to activate, esc to end 
;fair use claimed for the intro to the Final Countdown by Europe 
EnableExplicit 

InitSprite()
InitKeyboard() 
InitMouse() 
InitSound() 
UseOGGSoundDecoder()

Global font,font1
Global event,ct,sc,bput=0
Global width, height 
Global snd,spath.s

Procedure DisplayMessageCenter(window,msg.s,color=255,scale.f=1.00)
  
  Protected spriteNumber,tempImage,fontsTextWidth,fontsTextHeight,cx,cy,a,b
  Static overlay,ct1 
  
  ct1+1 
  
  If Not overlay 
     overlay = CreateSprite(#PB_Any,width,height) ;make a overlay to mimic green crt  
     If overlay 
       If StartDrawing(SpriteOutput(overlay))   
         Box(0,0,width,height,RGB(1,1,1)) 
         For a = 2 To width-1 Step 2  
           For b = 2 To height-3 Step 3 
             Plot(a,b,0) 
             Plot(a,b+1,0)
           Next 
         Next
         StopDrawing() 
       EndIf  
     EndIf      
  EndIf 
  
  tempImage = CreateImage(#PB_Any,1,1)    ;if you need to get the size of a font in pixels         
  If tempImage
    If StartDrawing(ImageOutput(tempImage)) ;draw to the temp image 
      DrawingFont(FontID(font))             ;with the selected font  
      fontsTextWidth = TextWidth(msg)       ;get the width and height in pixles     
      fontsTextHeight = TextHeight(msg)  
            
      StopDrawing()  
      spriteNumber = CreateSprite(#PB_Any,fontsTextWidth,fontsTextHeight) ;create the sprite of required size 
                 
      If spriteNumber 
        If StartDrawing(SpriteOutput(spriteNumber))   ;now you can draw the text to the sprite 
          DrawingFont(FontID(font)) 
          DrawText(0,0,msg,color)
          StopDrawing()
          TransparentSpriteColor(spriteNumber,0)
          cx= (WindowWidth(window) - (fontsTextWidth*scale)) / 2   
          cy = (WindowHeight(window)- (fontsTextHeight*scale)) / 2        
          ZoomSprite(spriteNumber,fontsTextWidth*scale,fontsTextHeight*scale)  
          DisplayTransparentSprite(spriteNumber,cx-(ct1&2),cy-(ct1&1))  ;jitter the x and y ccoordinates  
        EndIf   
        FreeSprite(spriteNumber)
        TransparentSpriteColor(overlay,0)
        DisplayTransparentSprite(overlay,0,0,255)  
      EndIf 
    EndIf  
    FreeImage(tempImage)      
  EndIf 
  
EndProcedure 

spath = GetTemporaryDirectory() + "countdown.ogg" 
If FileSize(spath) > 0 
  LoadSound(0,spath) 
ElseIf ReceiveHTTPFile("https://dnscope.io/idlefiles/countdown.ogg",spath) 
  LoadSound(0,spath) 
EndIf    
  
ExamineDesktops() 
width = DesktopWidth(0)
height = DesktopHeight(0) 

font = LoadFont(#PB_Any,"Arial Bold",height/8,#PB_Font_HighQuality)

#Style = #PB_Window_SystemMenu | #PB_Window_SizeGadget | #PB_Window_MaximizeGadget | #PB_Window_MinimizeGadget | #PB_Window_ScreenCentered
OpenWindow(0,0,0,width/2,height/2,"Putin's ACME clock",#Style)  
OpenWindowedScreen(WindowID(0),0,0,width,height) 
ReleaseMouse(1)
Repeat 
  Repeat 
    event=WindowEvent()
    If event=#PB_Event_CloseWindow
      End
    EndIf
  Until event=0
  
  ExamineKeyboard() 
  ExamineMouse() 
    
  If bput > 0   
    ClearScreen(RGB((ct&63)*2,0,0))
    DisplayMessageCenter(0,"T-" + FormatDate("%hh:%ii:%ss", Date()-ct),RGB(0,192,0),0.025*sc)
    ct+1  
  Else 
    ClearScreen(0)
    DisplayMessageCenter(0,FormatDate("%hh:%ii:%ss", Date()),RGB(0,255,0))
    ct=0
  EndIf 
   
  sc+1 
  sc%60
  FlipBuffers()
  
  If KeyboardInkey()
    bput ! 1
    If bput 
      If IsSound(0) 
        PlaySound(0) 
      EndIf 
    ElseIf IsSound(0)   
      StopSound(0) 
    EndIf   
    
  EndIf   
  
Until KeyboardPushed(#PB_Key_Escape)     

[Joubarbe]

Haha, nice example idle

However, when you look at it closer, you can see that it's way more complicated than that. First you have a curve, to simulate the shape of the screen. Second, you have a fluorescent effect that affects everything, and also a little lag that keeps some areas green for a few milliseconds. And third, the flickering that deforms everything. It's not just a thing they draw on top.

[idle]

Haha, nice example idle

However, when you look at it closer, you can see that it's way more complicated than that. First you have a curve, to simulate the shape of the screen. Second, you have a fluorescent effect that affects everything, and also a little lag that keeps some areas green for a few milliseconds. And third, the flickering that deforms everything. It's not just a thing they draw on top.

Sorry I didn't look at the videos. Yes that's a bit more challenging,. the curvature is the problematic part you will need to use 3D for that.
I'm not sure what format the shader source is but it should be easy enough to port to glsl and use with 3D engine
https://github.com/Swordfish90/cool-ret ... rminal.qml

If you could forgo the curvature the rest is easy enough to simulate with sprites in 2D