Canvatorium Recap Three

Labs 010, 012–016 with a focus on Behaviors, Gizmos, and Ref History.

Preview version of Canvatorium is now live

Toward the end of this week, I took some time to host a development build of the Canvatorium project. You can find it on Vercel. Use the sidebar on the left to navigate to various labs. Each lab contains a canvas for the 3D scene and some notes. As always, you can find the code on GitHub. I encourage you to try out the labs in VR. If you have feedback or suggestions, please contact me on Twitter or use the contact form on this site.

Lab 010 – Updated Grab Examples

I added a few more examples of grabbing objects to Lab 010. Examples include:

1. Mesh Picking to attach a mesh to the controller while holding the trigger
2. SixDofDragBehavior – this is my favorite by far!
3. Pointer Drag along a single axis
4. Pointer Drag along a plane

Canvatorium Lab 010 – Updated

✅ Mesh picking to grab and move
✅ Six-DOF mesh behavior dragging (super cool!)
✅ Pointer drag along an axis
✅ Pointer drag along a plane#BabylonJS #WebXR pic.twitter.com/cicLOvbJZ0

— Joseph Simpson (@vrhermit) February 7, 2022

Lab 012 – Gizmos!

Babylon JS has a ton of built-in 3D gizmos for working with 3D objects. I was pleasantly surprised that these work in VR when using pointer controls. This lab has a manual gizmo example, as well as an example that uses Gizmo Manager with multiple objects.

Canvatorium Lab 012

Gizmos! pic.twitter.com/er0dDoocoU

— Joseph Simpson (@vrhermit) February 6, 2022

Lab 014 – Follow Behavior

Follow Behavior is an abstract behavior that can make an object follow a camera around a scene. The Near Menu from Lab 008 uses this behavior.

Canvatorium Lab 014 – Follow Behavior

✅ Free follow anywhere in view (purple)
✅ Constrain pitch (green)
❌ Can't follow meshes or nodes, only cameras

Pretty neat though. These balls basically behave like kittens. The need to be seen at all times. #BabylonJS #WebXR pic.twitter.com/emtI8zjZ3Y

— Joseph Simpson (@vrhermit) February 7, 2022

Lab 015 – Resizable GUI

This one took some work. I have an advanced dynamic texture on a plane, with the plane attached to card (box mesh). The card has a scale widget that lets the user resize it. After each resize, the GUI redraws to take advantage of this new size of the card. This example uses a single text block inside a scroll view, but this could be used with other containers such as grids and stacks.

Canvatorium Lab 015 – Resizable GUI

✅ Scale X and Y to keep aspect ratio (zoom)
✅ Scale the parent mesh and use the scale value to adjust and redraw the GUI, preserve text size, triggering layout updates. #BabylonJS #WebXR pic.twitter.com/xrFwiFxZHk

— Joseph Simpson (@vrhermit) February 9, 2022

Lab 016 – Snapping and History

This lab has an example of useRefHistory() from VueUse. It has a box with a drag gizmo, snapping enabled. On each snap, the current position is saved to the ref. Then we can use undo and redo actions to cycle through the history of the ref data.

Canvatorium Lab 016 – Snapping and History

Example: a box with a drag widget, snapping to grid. Each snap saves the position in a ref.

VueUse useRefHistory() to add undo and redo functionality. #BabylonJS #VueJS pic.twitter.com/OLcad7aVQm

— Joseph Simpson (@vrhermit) February 10, 2022

Bonus: I made a cheesey montage video of the first few weeks of Canvatorium development.

Cheesy montage of the first few weeks of Canvatorium development. pic.twitter.com/lIdehMBOEw

— Joseph Simpson (@vrhermit) February 12, 2022