Shaders: when to use the texture?

[BlackBulletIV]

I've just started experimenting with shaders. It seems to me that you need handle images, text, and other things a bit differently than stuff like shapes. For example, I wrote this shader which makes everything grey and allows things to flicker through the multiplier:

Code: Select all

extern number multiplier;

vec4 effect(vec4 color, Image texture, vec2 textureCoords, vec2 screenCoords)
{
  number average = (color.r + color.g + color.b) / 3 * multiplier;
  return vec4(average, average, average, color.a);
}

When working with a drawn rectangle, it works fine. When working with images and text, everything turns into greyscale boxes. Do I need to use the texture or something? If so, how would you go about using this in fullscreen effects? Thanks.

[bartbes]

The easiest, and perhaps most correct, way to do this, is to disable the pixeleffect when you don't want to use it anymore. However, this is a pretty slow operation (specifically, setting it is), so then you're left to group your rectangles and images, or even pre-render some of it onto canvases.

[BlackBulletIV]

Ok. So if I wanted to apply a fullscreen effect, I'd need to use a canvas to do so, right?

[OmarShehata]

The easiest, and perhaps most correct, way to do this, is to disable the pixeleffect when you don't want to use it anymore. However, this is a pretty slow operation (specifically, setting it is), so then you're left to group your rectangles and images, or even pre-render some of it onto canvases.

While we're on the topic of canvases, what exactly were the requirements to playing a game that uses canvas? And are there any statistics as to how many people don't have these requirements? (Do they only need to download something for it to work or is it a hardware thing?)

[Boolsheet]

While we're on the topic of canvases, what exactly were the requirements to playing a game that uses canvas? And are there any statistics as to how many people don't have these requirements? (Do they only need to download something for it to work or is it a hardware thing?)

It's mainly a driver thing. The current Canvas implementation uses OpenGL framebuffers. They were introduced in OpenGL 3.0 and before that with the framebuffer extension. If the graphics card vendor was motivated enough to write drivers for at least OpenGL 3.0 or the extension, it is possible to use Canvases. It's likely that NVIDIA had it in all their (desktop) cards back in 2008 when OpenGL 3.0 was released. Intel only recently started to support OpenGL 3.0 with their drivers.

Wildfire Games collected some interesting statistics with their game. It's hard to say how accurate that list is. Better than nothing, I guess.

Wikipedia has lists for NVIDIA, AMD, and Intel GPUs and sometimes it also shows what OpenGL version it supports.

[Fractal]

I've just started experimenting with shaders. It seems to me that you need handle images, text, and other things a bit differently than stuff like shapes. For example, I wrote this shader which makes everything grey and allows things to flicker through the multiplier:

Code: Select all

extern number multiplier;

vec4 effect(vec4 color, Image texture, vec2 textureCoords, vec2 screenCoords)
{
  number average = (color.r + color.g + color.b) / 3 * multiplier;
  return vec4(average, average, average, color.a);
}

When working with a drawn rectangle, it works fine. When working with images and text, everything turns into greyscale boxes. Do I need to use the texture or something? If so, how would you go about using this in fullscreen effects? Thanks.

Hello,

The variable color is the global color (as set by love.graphics.setColor), so your code will indeed turn everything into greyscale boxes. In order to use the color of the current point, you have to use texture2D(texture,textureCoords) instead of color. If I understand what you are trying to do, the following should work:

Code: Select all

extern number multiplier;

vec4 effect(vec4 color, Image texture, vec2 textureCoords, vec2 screenCoords)
{
  vec4 color_pt = texture2D(texture, textureCoords);
  number average = (color_pt.r + color_pt.g + color_pt.b) / 3 * multiplier;
  return vec4(average, average, average, color_pt.a);
}

More precisely, the function texture2D has two arguments, an Image img and a vec2 pt and returns a vec4 containing the color of the point pt in the image img. Moreover, texture contains the current texture (the image you’re drawing) and textureCoords contains the coordinates of the current point. And the function effect should return the color of the current point as it should be drawn. For instance if your shader returns texture2D(texture,textureCoords), it will give the same thing as if you don’t use a shader.

Does it clarify things?

[BlackBulletIV]

Thanks for the explanation. I've think I've figured the whole concept out now.

Also, in LOVE, texture2D would be Texel.