Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
-
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
-
-
InfluxDB
Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
-
The result is a virtual reality experience built with BabylonJS which you can play at https://office.wilcoschoneveld.com/. In this post, I would like to share the challenges I ran into while building it. First, I describe the development process by talking about the technology used, the game plan, level design, and physics work. Next, I dive deep into my attempts to create a great user experience for throwing objects in VR. Finally, I present some tips for debugging a web VR project like mine. Also, the game is open source and can be found on GitHub. Thanks for taking a look!
Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.
Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.
Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.
I ended up creating my game in BabylonJS. It's a very accessible and feature-rich framework that is quite mature in the WebXR and physics domain. Again, I stumbled upon some bugs but the forum has been very helpful in getting through the prototyping phase. In hindsight, I realize that WebXR is still fairly new, and the entire web and 3D landscape are constantly evolving. Because of this, any development on top of this is not going to be a smooth ride, but it helped me grow as a developer.
Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.
Since I'm a big Poimandres fan I looked into react-xr, and it was very easy to get a first WebXR project up and running. Unfortunately, there are many dependencies in the ecosystem which slowed me down: react-xr is built on top of react-three-fiber which is built on top of Three.js, and physics is enabled by use-cannon which is built on top of cannon-es. For a long time I was running into issues and helping fix them with a couple of pull requests, and ultimately it was preventing me from working on the actual project. Still, Poimandres is a great community and I got a lot of inspiration from the content being shared in the discord.
Integrating physics into the scene was a challenging part. The two major javascript physics libraries seem to be ammo.js and cannon-es, and they both come with limitations. For example, with ammo.js you won't get any rolling friction and with cannon-es there are issues with compound bodies. I decided to go with ammo.js because of the latter and simulate rolling friction with linear damping.
Get a hold of the WebXR emulator extension. It is limited in features but it does allow you to enter VR in a desktop browser and test your application with some basic inputs. With tip 4, this is very powerful and you can test a lot before actually putting on the headset.
To understand the algorithm, I first implemented linear regression from scratch for a linear trendline, including a test suite because I wanted to catch coding errors early on. This worked very well already, but I moved on to a quadratic trendline to also account for controller acceleration. For this, I used the mathjs library to make life easier.