Canvatorium Recap Two

Labs 009, 010, and 011. Babylon JS features as reactive Vue 3 Composables.

Lab 009 – Title Card & Vue 3 Composables

A simple GUI component that displays a title and subtitle for a Lab. I used this to explore the idea of using Vue 3 Composables for Babylon JS features. This may be my favorite thing in the Canvatorium project so far. This pattern is simple but powerful, allowing me to keep all the imperative Babylon JS code inside a function while exporting/returning only the reactive data that are needed elsewhere in the project.

The function createTitleCard creates and returns some reactive references. Watchers update Babylon JS GUI when these references change.

const createTitleCard = (scene) => {

  // The data that we will display in the VR console
  let title = ref("TITLE PLACEHOLDER");
  let subtitle = ref("SUBTITLE PLACEHOLDER");

 
  // Babylon JS GUI code here, removed for brevity 


  // Watch the title and subtitle for changes
  // and update the text in the GUI
  watch(title, (newValue) => {
    const texture = scene.getTextureByName("title-card-texture");
    texture.getControlByName("title-text").text = newValue;
  });

  watch(subtitle, (newValue) => {
    const texture = scene.getTextureByName("title-card-texture");
    texture.getControlByName("subtitle-text").text = newValue;
  });

  return { title, subtitle };
};

export default createTitleCard;

When using createTitleCard in a Lab, destructure the result of the function and use the references as normal.

 const { title, subtitle } = createTitleCard(scene);
  ...
  title.value = "Lab 009";
  subtitle.value = "Title Card & Vue 3 Composables";

Lab 010 – Grab Lab

Just getting started with this one. Lab 010 is a place where I’ll explore several methods of grabbing and moving objects in VR. At the time of this recap, the only thing here is a simple demo of pointer-based grabbing. I need to spend a bit of time learning more about Mesh Behaviors. In the meantime, this post of the forum got me off to a good start.

Lab 011 and Shared Lab Tools

Lab 011 itself doesn’t have any features or experiments. Instead, I’m using this as a test scene for some of the refactoring work on some shared components. I’ll be working on these features for some time to come.

1. LabConsole – This is a reusable version of the console logging feature from Lab 007. I’ve added a clear button, reversed the print order, added a “toggle visibility” feature, and learned how to position the object relative to a motion controller.

2. LabPlayer – This new tool does setup for the WebXR Default Experience. It uses the teleportation system by accepting an array of meshes as a parameter. It has placeholder console logging for the WebXR controller buttons. It also imports and uses the LabConsole described above. Pressing Y on the left controller will toggle the console visibility state.

My next area of focus is likely to be learning more about Behaviors. Babylon JS has some common behaviors built in that could make many of my ideas easy to implement.