Shader questions

[Sulunia]

Hello folks!

I've been wanting to dabble with shaders for quite long now, and many questions arose whilst using this and this blog posts to get started. (Awesome sources by the way!)

This might be updated with a few more questions, but for now, I have 3 questions:

-> How can I get the color of a given pixel in a texture sent to the shader?
Suppose I send a drawn canvas to the shader. How can I get the color of a certain pixel on this canvas?

-> Is there any way to see values that are calculated inside the shader code? (This would be very useful for debugging purposes)

-> Besides the sources mentioned, are there any other useful beginner shader tutorials worth playing around with?
I found porting shaders from Shadertoy to be a pretty rough start for someone with no knowledge on this.

Sorry about the generic thread subject, couldn't think about anything else.

[grump]

How can I get the color of a given pixel in a texture sent to the shader?
Suppose I send a drawn canvas to the shader. How can I get the color of a certain pixel on this canvas?

The Texel function fetches pixels from textures. Texel() expects texture coordinates though, so to address a certain pixel, you have to divide the pixel coordinates by the size of the canvas.

Code: Select all

extern Image canvas;
extern vec2 certainPixel;

vec4 effect(...) {
    vec4 pixel = Texel(canvas, certainPixel);
    ...
}

On the Lua side, you send the required values to the shader:

Code: Select all

shader:send("canvas", canvas)
shader:send("certainPixel", { pixelX / canvas:getWidth(), pixelY / canvas:getHeight() })

For accurate results, you need to specify coordinates at the center of a pixel instead of the upper left corner. To accurately sample the pixel at 100, 100 you have to send 100.5, 100.5 to the shader.

Is there any way to see values that are calculated inside the shader code?

That's a funny question, because seeing the values that a shader calculated is kind of the point of using a shader in the first place. So yes, there is way to see the values: you enable the shader and draw something on the screen. Like, a rectangle.

Example code that fills the screen with the color from a pixel on a canvas:

Code: Select all

local canvas = love.graphics.newCanvas(128, 128)
local certainPixel = { 32.5, 32.5 }

canvas:renderTo(function()
	love.graphics.setColor(255, 0, 0)
	love.graphics.points(certainPixel)
end)

local shader = love.graphics.newShader([[
	extern Image canvas;
	extern vec2 certainPixel;

	vec4 effect(vec4 color, Image texture, vec2 uv, vec2 fc) {
		return Texel(canvas, certainPixel);
	}
]])

shader:send("canvas", canvas)
shader:send("certainPixel", { certainPixel[1] / canvas:getWidth(), certainPixel[2] / canvas:getHeight() })
love.graphics.setShader(shader)

function love.draw()
	love.graphics.setColor(255, 255, 255)
	love.graphics.rectangle("fill", 0, 0, love.graphics.getDimensions())
end

[vrld]

-> How can I get the color of a given pixel in a texture sent to the shader?
Suppose I send a drawn canvas to the shader. How can I get the color of a certain pixel on this canvas?

As grump wrote, the Texel() function does what you want, but keep in mind that shaders work "inside out": They are little programs that are run once for every pixel, not one program that iterates over all pixels. The coordinate of the current pixel is given by the texture_coords argument to your effect() function.

-> Is there any way to see values that are calculated inside the shader code? (This would be very useful for debugging purposes)

Yes and no. Shaders are notoriously hard to debug, because they run on a different processor with different IO than your CPU. GLSL-Debugger might be worth a shot.

-> Besides the sources mentioned, are there any other useful beginner shader tutorials worth playing around with?

The lighthouse3d tutorial is pretty comprehensive, but does cover more than what is needed in LÖVE. You can also have a look at the shaders in moonshine.