A collection of articles, apps, and other digital resources, thematically tied to the subjects of art, design, programming and general philosophy. All content created by "The Imp".

This website does not use cookies, because they are high in sugar and saturated fat. (Yes, they are tasty too, I know, I know...)

Fucoaster

08/01/2020

Playing around with a samsung Gear VR headset and a rollercoaster simulator, someone asked if, as a developer, I could make a rollercoaster simulator. I thought it seemed like an interesting challenge. I knew how to make animated models in Blender, and I knew how to render 3D graphics in the browser, via threeJS. The only thing I was unsure about was whether threeJS, or more broadly speaking, WebGL, had mechanisms to do I/O with a VR headset. Turns out, they do! WebGL has a "WebXR API" for this (XR represents the acronyms VR and AR), and threeJS leverages it with some of its preconfigured libraries. ThreeJS even has a demo, and source code, that demonstrates a VR Rollercoaster! Making the app was a sinch! It was done in about 2 days.

The provided rollercoaster code did need a number of tweaks here and there to work as I wanted it to. For instance, the code in the example generates the curve of the rollercoaster track based on a mathematical algorithm, whereas I wanted more control; to define a curve by the location of points in 3D space. This way, the track would snake over the terrain that I had created in Blender.

While riding, keep an eye out for the alien mesh I modelled, textured, and animated in less than 15 minutes! It is a monstrosity in more ways than one!

NB: WebVR only works when the app is delivered over HTTPS, which I have not configured for this website. So unfortunately, VR works when the app is run locally with my dev server, but will not work here! I may change this in the future. However, you can still experience the rollercoaster here in "2D 3D" - as opposed to "3D 3D". You can also press C on the keyboard to activate the debug camera, and then use W, A, S, D, Space, Left Shift, and the mouse to fly around and look at the map.

NB: To create the app more quickly, I have dispensed with a loading progress indicator. Therefore, once you have clicked on the app to start it, you may see a black screen for a few seconds before the app starts - just keep waitin!

Comments (0)

Replying to: Noname

Error

Utilising this page as a billboard for marketing purposes is not allowed. Any messages posted by users that appear to be commercial in nature will be deleted, and any user found breaching this term will have their IP address reported to ICANN. This may result in their networks appearing in worldwide electronic communication blacklists.