Scrolling apertures: a technical demo

[kbmonkey]

Here is a technical demo of a scrollable surface. It is nothing fancy but might be useful for some, sharing is caring right?

It uses a stencil and transforms, there is no drawing to off-screen canvasses involved.

aperture-lorem.gif (405.39 KiB) Viewed 5611 times

aperture-pictures.gif (205.23 KiB) Viewed 5611 times

harness-testsuite.love

(11.56 KiB) Downloaded 297 times

[grump]

Is there an advantage using stencil masks over scissor functions?

[Tjakka5]

I don't think there is any advantage using stencils over scissor. It may even be quite a lot slower.

I also looked into the code and saw that, while the pages are indeed being clipped, invisible pages are still being rendered.
I think this is a big issue, since if you for example have a huge list of items performance may be very bad.

Instead I suggest you add a little wrapper for pages, where each page has it's own drawing function.
Then internally you can only draw the currently visible pages.

[zorg]

I don't think there is any advantage using stencils over scissor. It may even be quite a lot slower.

I also looked into the code and saw that, while the pages are indeed being clipped, invisible pages are still being rendered.
I think this is a big issue, since if you for example have a huge list of items performance may be very bad.

Instead I suggest you add a little wrapper for pages, where each page has it's own drawing function.
Then internally you can only draw the currently visible pages.

I might be wrong, but in that case, using scissors instead would solve the issue of "invisible rendering", since anything outside the defined rectangle will not be rendered; unless you meant something else.

[grump]

I might be wrong, but in that case, using scissors instead would solve the issue of "invisible rendering", since anything outside the defined rectangle will not be rendered;

AFAIK, LÖVE doesn't do any clipping against the scissor rectangle. The fragments outside the sicssor rectangle get discarded, that's pretty far down the pipeline. Not much better than stencil tests. Stencils allow for arbitrary clipping shapes though.

Doing it properly it not an easy task though, since (the current version of) LÖVE does not provide a way to access the transformation state outside the GPU.

[kbmonkey]

Drawing the visible page would be easy enough

Code: Select all

if loremscroll.page == 1 then
  -- draw page 1 here
elseif loremscroll.page == 2 then
  -- you get the idea
end

That should satisfy any performance concerns. I will have to try scissors too, thanks for the idea!

[Tjakka5]

Note that you'd have to display 2 pages when you're moving from one to the other, just as a heads up

[s-ol]

Stencils are definitely slower than scissoring, but scissor dimensions cannot be transformed (not even translated or scaled) so either one can be more useful depending on the situation.