Problems getting shaders to work

[ChristopherKlay]

I'm pretty new to Love2D itself but i'm working just fine with it so far, beside one thing; shaders.
I found a nice list of shaders https://github.com/mindreframer/love2d- ... i0/shaders that says that the shader are changed to work with Love2D, but while they don't return any error for me they don't return anything else too..

Basically whenever i use one of them on any ofmy projects, the screen just turns black.
Could anybody explain me why and how to fix it?

[Kingdaro]

Could you upload a .love of the game you're trying to use it in, so we could better figure what the issue actually is?

[ChristopherKlay]

I don't have a .love with it set up yet (mainly because it wasnt working), but shouldnt it be enough to load the shader with

Code: Select all

shader = love.graphics.newShader("shaders/shadername.filetype")

and then use it with

Code: Select all

love.graphics.setShader(shader)

I never used them before (even tho i understand how they work) and only did a small black/white shader before which worked like a charm when i tried using it like that. But any of those shaders on the link above returns only a black screen for me while it should actually work (i mean, there are even screens of them).

Is .glsl that different from .frag?

[Kingdaro]

Well, the game doesn't have to actually work, but just, anything that shows as a whole how you're actually using the shaders.

But, here. I'll take a shot in the dark anyway. The best way to use shaders is to render everything you're drawing to a canvas first, then draw the canvas, so the shader only has to process one thing, and when that one thing is a Texture-based object, it'll have a pretty easy time processing it. It's also good for if you want to use multiple shaders, so you aren't rendering everything multiple times. This is basically what you have to do, if you aren't already:

Code: Select all

function love.load()
  canvas = love.graphics.newCanvas()
end

function love.draw()
  canvas:clear()
  love.graphics.setCanvas(canvas)
  
  drawGame() -- placeholder for your game's drawing logic
  
  love.graphics.setCanvas()
  
  love.graphics.setShader(yourShader)
  love.graphics.draw(canvas)
  love.graphics.setShader()
end

[ChristopherKlay]

Currently i'm working on this (it's for a project i work on with a team from reddit, but really just the window stuff right now).
The canvas thing broke two things right now i need to fix tho; the scaling and flipping the screen.
Key 1 and 2 change window size and active shader. The thing is (beside the canvas problems) the second shader gives a blank screen.

Code: Select all

-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
--  _______ _______ _______ _______    _______ _______ _______________________ ________________
-- (  ____ (  ___  |       |  ____ \  (  ____ |  ____ |  ___  )__    _(  ____ (  ____ \__   __/
-- | (    \/ (   ) | () () | (    \/  | (    )| (    )| (   ) |  )  ( | (    \/ (    \/  ) (   
-- | |     | (___) | || || | (__      | (____)| (____)| |   | |  |  | | (__   | |        | |   
-- | | ____|  ___  | |(_)| |  __)     |  _____)     __) |   | |  |  | |  __)  | |        | |   
-- | | \_  ) (   ) | |   | | (        | (     | (\ (  | |   | |  |  | | (     | |        | |   
-- | (___) | )   ( | )   ( | (____/\  | )     | ) \ \_| (___) |\_)  ) | (____/\ (____/\  | |   
-- (_______)/     \|/     \(_______/  |/      |/   \__(_______|____/  (_______(_______/  )_(   
--                    _______ _______ ______  ______ _________________
--                   (  ____ |  ____ (  __  \(  __  \\__   __|__   __/
--                   | (    )| (    \/ (  \  ) (  \  )  ) (     ) (   
--                   | (____)| (__   | |   ) | |   ) |  | |     | |   
--                   |     __)  __)  | |   | | |   | |  | |     | |   
--                   | (\ (  | (     | |   ) | |   ) |  | |     | |   
--                   | ) \ \_| (____/\ (__/  ) (__/  )__) (___  | |   
--                   |/   \__(_______(______/(______/\_______/  )_(                                                                                                                      
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Debug Info
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
debug = true
if debug then
  print("Debug Info:")
  print("OS: "..love.system.getOS( ))
  print("Power Supply: "..love.system.getPowerInfo( ))
  print("CPU Count: "..love.system.getProcessorCount( ))
end
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Game Settings and info
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
--Game Settings
game = {
  groundlevel = 60,
}

--Possible Resolutions
resolutions = {current = 1, use = false, timermax = 1.0, timercurrent = 0.0, scale = 1.0}
resolutions[1] = {width = 640, height = 360, fullscreen = false}
resolutions[2] = {width = 960, height = 540, fullscreen = false}
resolutions[3] = {width = 1280, height = 720, fullscreen = false}
resolutions[4] = {width = 1600, height = 900, fullscreen = false}
resolutions[5] = {width = 1920, height = 1080, fullscreen = false}
resolutions[6] = {width = 1920, height = 1080, fullscreen = true}

--Shader Settings
shader = {current = 0, use = false, timermax = 1.0, timercurrent = 0.0}

--Background
map = {groundlevel = 60, background = nil}
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Load; Load sprites, music, and basic settings
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
function love.load(arg)
--Fonts
font_pixelsmall = love.graphics.newFont("assets/fonts/slkscr.ttf", 14)
font_pixelsmall:setFilter('nearest', 'nearest', 0)
font_pixellarge = love.graphics.newFont("assets/fonts/slkscre.ttf", 26)
font_pixellarge:setFilter('nearest', 'nearest', 0)
love.graphics.setFont(font_pixelsmall)

--Sprites
map.background = love.graphics.newImage('assets/backgrounds/test-room.png')
map.background:setFilter('nearest', 'nearest', 0)

--Shader
shader[1] = love.graphics.newShader("shaders/blackwhite.glsl")
shader[2] = love.graphics.newShader("shaders/scanlines.glsl")

--Canvas
canvas = love.graphics.newCanvas()
end
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Functions; Custom functions
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
function playSound(sd)
  love.audio.newSource(sd, "static"):play()
end

function CheckCollision(x1,y1,w1,h1, x2,y2,w2,h2)
  return x1 < x2+w2 and
  x2 < x1+w1 and
  y1 < y2+h2 and
  y2 < y1+h1
end

function round(num, idp)
  local mult = 10^(idp or 0)
  return math.floor(num * mult + 0.5) / mult
end
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Update; Update positions, check for collisions, timers, and generating movement
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
function love.update(dt)
  --Select Resolution
  resolutions.timercurrent = resolutions.timercurrent - dt
  if love.keyboard.isDown('1') then
    if resolutions.timercurrent < 0 then
      if resolutions.use and resolutions.current < 6 then
        resolutions.current = resolutions.current + 1
      elseif resolutions.use and resolutions.current > 4 then
        resolutions.current = 1
        resolutions.use = false
      else
        resolutions.use = true
      end
      if debug then
        print("Screen Mode:"..tostring(resolutions.current))
      end
      love.window.setMode(resolutions[resolutions.current].width, resolutions[resolutions.current].height, {fullscreen = resolutions[resolutions.current].fullscreen, vsync=false})
      resolutions.scale = love.graphics.getWidth() / 640
      resolutions.timercurrent = resolutions.timermax
    end
  end

  --Select Shader
  shader.timercurrent = shader.timercurrent - dt
  if love.keyboard.isDown('2') then
    if shader.timercurrent < 0 then
      if shader.use and shader.current < 2 then
        shader.current = shader.current + 1
      elseif shader.use and shader.current > 1 then
        shader.current = 0
        shader.use = false
      else
        shader.use = true
      end
      if debug then
        print("Shader Mode:"..tostring(shader.current))
      end
      shader.timercurrent = shader.timermax
    end
  end
end
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
-- LOVE - Draw; Draw and re-draw sprites, UI and background
-----------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------
function love.draw(dt)
--Apply Ratio
love.graphics.scale(resolutions.scale, resolutions.scale)

--Cleanup Canvas
canvas:clear()
love.graphics.setCanvas(canvas)

--Background Image
love.graphics.draw(map.background)

--Testchar
love.graphics.rectangle("fill", 360 - map.groundlevel, 240, 20, 60)

--FPS Display
love.graphics.print(tostring(love.timer.getFPS( )), 620, 00)

--Re-Draw Canvas
if shader.use then
  love.graphics.setShader(shader[shader.current])
end
love.graphics.draw(canvas)
love.graphics.setShader()
end

[Kingdaro]

That's because, when you draw things to the canvas, then draw the canvas, everything gets scaled twice. Just make sure you're only scaling when drawing the elements to the canvas, and not the canvas itself, and using love.graphics.push/pop() is an easy way to do this. This would be your new love.draw, for example.

Code: Select all

function love.draw(dt)
  love.graphics.push()
  
  --Apply Ratio
  love.graphics.scale(resolutions.scale, resolutions.scale)
  
  --Cleanup Canvas
  canvas:clear()
  love.graphics.setCanvas(canvas)
  
  --Background Image
  love.graphics.draw(map.background)
  
  --Testchar
  love.graphics.rectangle("fill", 360 - map.groundlevel, 240, 20, 60)
  
  --FPS Display
  love.graphics.print(tostring(love.timer.getFPS( )), 620, 00)
  
  love.graphics.pop()
  
  --Re-Draw Canvas
  if shader.use then
    love.graphics.setShader(shader[shader.current])
  end
  love.graphics.draw(canvas)
  love.graphics.setShader()
end

And for future reference, you can't just give people your main.lua, because it won't work without the rest of the resources to go along with it. You need to create and upload a .love file instead.

[ChristopherKlay]

I do know that the main file isnt able to run alone, was just as a refference on how i used the shader o;
I'v created a love file now with it, but you'll notic ALOT of problems that come with using a canvas
and the shaders (well, nr2 the scanline/crt shader) still wont work.

[WZ]

You have to set shader extern variables by shader:send() function.