"Active Theory Magic" scroll sections with framebuffers

Help & Support
1

Additional to my recent question concerning multiple 3d sections on a page:
Researching this topic I stumbled across this great project by active theory:

As it seems they use a single canvas with several frame buffers for the sections. Although this solution is not really possible for my project I was curios how such a setup could look like. I assume this is beyond the layer of play canvas and needs some heavy shader / core webgl magic? ( Rendering multiple cameras within one PlayCanvas Scene to Framebuffers and then stacking them) How do those wizards keep interaction working?

2

Digging into the code, it does look like a multiple camera, single app with shaders approach.

At a guess, they are moving all cameras at the same time when you scroll and the shader is used for the wavey line effect. Probably can use the viewport property to control how much of the screen each camera renders.

Tempted to give this a go when I get some time. It’s a cool effect.

1 Like
3

Thanks @yaustar,
that makes sense. But wouldn’t such a technique mess up the additional click / touch interactions? They have some simple object drag manipulation going. Sorry if that’s a no-brainer, but I’m fairly a noob when it comes to shader manipulation.

4

As long as you are doing the raycast/screen to world calls from the right camera, it should be okay.

I reckon you can do this with the transition (expect for the wavey line) without the need for going into shaders

5

Thanks @yaustar no I got what you are saying, actually a setup similar this actual demo could be the basis:


plus: switching to actual camera for raycast based on scrolling
plus: fragment shader for wavy effect
Now some of the wizardry is gone, but still amazing work
Thanks again for the heads up

6

That’s the demo I was thinking about referencing :smiley: