🪞 scene portals as hyperlinks, preparing threejs for vision-pro

https://twitter.com/0xca0a/status/1669698823931809795

sandbox: Enter portals - CodeSandbox

docs: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

16 Likes

Beautiful and amazing. Runs smoothly.

The transition while entering a portal has frames where the portal world is seen outside the portal frame. This is just for a fraction of a second. Is this intentional?

yes, technically it’s just a blend between the root scene and the portal scene, see https://twitter.com/0xca0a/status/1669698826683179009

in order to make it seamless it needs to be more tightly tied to camera controls, but i wanted to keep the code smaller. i would probably bind camera distance directly to the blend prop if a threshold is met.

3 Likes

Maybe you have already tried it → but I’m curious → what happens if double click just moves the camera towards the center of the portal (the camera target is also moved) … until the camera is so close to the portal that its frame is outside the frustum. Then there might be no need to blend.

1 Like

yes that would work, with clever timing it could jump from 0 to 1 immediately, you wouldn’t notice any jump. it’s just the edge cases that will be hard to crack, like if you approach the portal from an angle instead of full frontal. though this stuff is probably more important for first person controllers and games, for 2.5d presentational stuff the fade looks quite pleasing.

1 Like

Noticed that too, but found it as a natural behaviour of elements in the scene :slight_smile:

1 Like

beautiful stuff, that’s really impressive, i’m personally also not keen on the fade effect when transitioning, it feels clunky, although i’m sure you’ve found an optimal way of blending render targets + being parallel to apple ui effects… do you think there’s the possibility of using raycaster here? whereby if you “zoom” or scroll into a particular portal panel there could be an instant switch into the relative scene based on a rays distance to the closest portal, ive noticed at the minute if you scoll beyond a plane then the plane is “camera near” frustum culled and you don’t actually enter the scene ( this is technically not a portal :grimacing: :sweat_smile:)… say if the camera it’self moved close enough to any panel, the portal target would be come the submersive scene… i’ve been having a have a play with this concept myself in spare time and may find some solutions that work this way… i’d be happy to share if i find anything worth it

1 Like

The only alternative I can think of is to scale up the selected frame while zooming in and fading the other frames. But I personally prefer the zoom fading effect, It’s gorgeous as it is and a matter of taste at this point.

for sure! that would work. the blend prop was a deliberate choice, i wanted to leave finer details to the end user. they can tie it to a raycaster, or make the portals grow, etc. or even just “go through” and if camera distance coincides with the portal more or less switch blend from 0 to 1 without interpolation. i liked that the current api is composable like that.

i will probably attempt a mini fps game when i have time, and then go all out on trying to sync blend like that. for the 2.5D stuff i didn’t really bother too much.

3 Likes

This guy fixed it
https://twitter.com/paradoxrenders/status/1670439682503761920

1 Like

That’s the beauty of open source. There is a noticeable jump, though.

This looks amazing!

1 Like