Canvas
A Canvas is also known as a framebuffer or render-to-texture. It allows you to render to a texture instead of directly to the screen. This lets you postprocess or transform the results later before finally rendering them to the screen.
After creating a Canvas, you can attach Textures to it using Canvas:setTexture
.
Constructor
lovr.graphics.newCanvas | Create a new Canvas. |
Methods
Canvas:getDepthTexture | Get the depth buffer used by the Canvas. |
Canvas:getDimensions | Get the dimensions of the Canvas. |
Canvas:getHeight | Get the height of the Canvas. |
Canvas:getMSAA | Get the number of MSAA samples used by the Canvas. |
Canvas:newTextureData | Create a new TextureData from a Canvas texture. |
Canvas:renderTo | Render to the Canvas using a function. |
Canvas:isStereo | Check if the Canvas is stereo. |
Canvas:getTexture | Get the Textures attached to the Canvas. |
Canvas:setTexture | Attach one or more Textures to the Canvas. |
Canvas:getWidth | Get the width of the Canvas. |
Notes
Up to four textures can be attached to a Canvas and anything rendered to the Canvas will be broadcast to all attached Textures. If you want to do render different things to different textures, use the multicanvas
shader flag when creating your shader and implement the void colors
function instead of the usual vec4 color
function. You can then assign different output colors to lovrCanvas[0]
, lovrCanvas[1]
, etc. instead of returning a single color. Each color written to the array will end up in the corresponding texture attached to the Canvas.
Example
Apply a postprocessing effect (wave) using a Canvas and a fragment shader.
function lovr.load()
lovr.graphics.setBackgroundColor(.1, .1, .1)
canvas = lovr.graphics.newCanvas(lovr.headset.getDisplayDimensions())
wave = lovr.graphics.newShader([[
vec4 lovrMain() {
return lovrRVertex;
}
]], [[
uniform float time;
vec4 lovrMain() {
uv.x += sin(uv.y * 10 + time * 4) * .01;
uv.y += cos(uv.x * 10 + time * 4) * .01;
return lovrGraphicsColor * lovrDiffuseColor * lovrVertexColor * texture(lovrDiffuseTexture, lovrTexCoord);
}
]])
end
function lovr.update(dt)
wave:send('time', lovr.timer.getTime())
end
function lovr.draw()
-- Render the scene to the canvas instead of the headset.
canvas:renderTo(function()
lovr.graphics.clear()
local size = 5
for i = 1, size do
for j = 1, size do
for k = 1, size do
lovr.graphics.setColor(i / size, j / size, k / size)
local x, y, z = i - size / 2, j - size / 2, k - size / 2
lovr.graphics.cube('fill', x, y, z, .5)
end
end
end
end)
-- Render the canvas to the headset using a shader.
lovr.graphics.setColor(1, 1, 1)
lovr.graphics.setShader(wave)
lovr.graphics.fill(canvas:getTexture())
lovr.graphics.setShader()
end
See also
lovr.graphics