Floating Origin Template for BJS 5.x

Ok, so this is a template for people who want a floating-origin solution on BJS 5.x – that is, support for huge scenery (ex: a solar system).

fp

I did not care about visuals at this moment, atm I just wanted to build a reasonable solution which did not require engine changes and was easy to use.

I will be using this on my own planetary project and am giving it away for those interested in having huge scenery support without imprecision far from the origin.

It is still a wip, but the concept works already.

Demo: Etherea
Source: GitHub - imerso/bjs_floating_origin: Floating Origin for Babylon.js 5.x

Please don’t get fooled by the demo: the camera is moving at an absurd speed, or you would take hours to fly around that “planet”. Things there are relatively big already, enough to cause floating-point imprecisions. But it solves that by making the camera fixed at origin, and moving the objects instead.

Hope some find it useful.

7 Likes

Yes! man! this is good
I believe this deserve a documentation page. Would you be ok to add one explaining how you did it?

That would be lovely

Sure! Will write that tomorrow, ok?

The code explains a bit how to use, but yes, some more text will help for sure. Thanks!

haha thanks a ton

cc @PirateJC / @JohnK to suggest where to land that page

The template was updated to better show the scene scale.

fp2

You start inside a simple hangar, then you can get out of it – initially slowly – and then you can use the mouse wheel to adjust your speed.

If you get lost and can’t find the hangar again, press [Space] to make the camera look into its direction. Then just accelerate forward and you will fly on its direction again.

Edit: and of course I will be more than happy if someone uses code and/or ideas from this template on their projects! I will happily help where possible as well, for the May 5th challenge! Just tell me how I could help. Thanks.

Update: added logarithmic depth to objects, added a star at world’s origin and moved planet a bit to the side, added skybox and some postprocessing.

There is a little wobble when you move close to something and suddenly stop – it wobbles one frame then stabilizes, but that is not really related to precision at all. That is just because I was lazy and used the builtin UniversalCamera to move, so I need to clear the move every frame, but that is not inerent to the floating-origin itself. If movement is placed within OriginCamera.ts (read keys and update doublepos directly), there is no glitch at all. I might fix that when I find more time.

fp3

4 Likes

Thanks!

Indeed, a bigger scenery to play with opens some nice opportunities and I do have a lot of ideas and techniques to implement, this thing is still on its early stages.

The camera is still pretty basic, but with enough time it will become a convincing space flight with inertia, atmosphere flight, collision detection etc. Leisure time is scarse, though, so maybe I should shut up and not start promising things that I’m not sure I will really have time to implement just for the fun of it. =)

1 Like

Added more info on the repository README.md. Thanks.

Hi there! I don’t fully understand what I’m looking at but I’m interested to see if this can be used as a solution for multiple players riding on a moving ship like in startrek bridge crew but also with the ability to get up and walk around on the ship. Do you think it could be a solution for moving the world around a “ridable” mesh?

See update to this thread:

Also, I just tried your demo site on Oculus Quest 1 in XR mode. I’m unable to teleport, so I can’t really move around to explore in VR.

I see some asteroids popping in and out of view when I rotate or move my head. The hand controllers and laser pointer render beneath the floor plane.

The template is an initial implementation for huge scenery support. It was built to show how to solve the problem of floating-point imprecision in an easy way.

You should look for the two files OriginCamera.ts and Entity.ts, as they are the files which have the trick. The demo is just to show how you can use those files.

The demo itself is just a quick test for the floating-origin solution, but not XR compatible yet. I believe that, in addition to the obvious that is adding some grounds for the XR Helper to find and enable teleportation, other thing that needs to be done is to enable logarithmic depth on the controllers after they load.

Anyway, at least for now you should understand OriginCamera.ts and Entity.ts and copy/adapt them to your own project, instead of using the demo by itself. Or, if you want to use the demo as a starting point, you will need to add the other features you want.

Oh, I’ve read that other thread. Understood now. The floating-origin is related to other problem.

I will see if I find time to make a little demo and jump in that other thread with a proposed solution. Not a promise, though.

1 Like

Sorry to catch up lately :slight_smile: did you add a page in the doc about it?

No, how I do that?

I wrote about it here:

Oh sorry I meant it to be on the official doc :slight_smile:
like here: doc.babylonjs.com

Contribute To The Documentation | Babylon.js Documentation (babylonjs.com)

1 Like

I made a first draft:

Edit: Got it, pushing an update with it showing on list of how-tos.

3 Likes

Thanks! you rock

1 Like