Canvatorium

A long-term side project called “Canvatorium”, an experimental design lab for spatial computing built in Vue JS and Babylon JS.

Canvatorium Lab 004 (revamped)

In the revamped version of Lab 004 I worked on a way to pass the xr object from the useCanvatoriumLab composable to the createLabContent function.

Canvatorium Lab 003 (revamped)
Using the Default XR Experience from Babylon JS
âś… Move the XR player in the scene when entering immersive mode
âś… Basic controller input example

I took a short break from the labs to tidy up the Canvatorium site.

âś… Added a new tab bar
âś… Lab (the canvas with the scene)
âś… Lab notes (unrendered markdown for now
âś… Hacked the style of the webxr button
âś… Added the lab title as a GUI overlay

The website with the Lab Scene tab selected, showing the Hello Canvatorium lab.
The website with the Lab Scene tab selected, showing the notes from the Hello Canvatorium lab.

Canvatorium Lab 041

📸 Taking screenshots (sceneshots?) with Babylon JS

I also added a screenshot button to the global lab overlay. Here is a quick demo

My lab template for Canvatorium is now only 22 lines.
This template will create a Babylon JS scene with my default lab options (room, lights, camera).
All the work for the lab will happen in the createLabContent function

Canvatorium Lab 040

I started working on an overlay GUI for the scene data. Title, description, and maybe lab notes.

If it pans out, I'll add it to all labs.

I could use the same GUI content inside a mesh-based AdvancedDynamicTexture to show it while in VR 🤔