Canvatorium Lab 007

Recreate the console log in VR using Babylon JS and Vue.

The goal of this lab is to explore the concept of overriding the console.log() method to view the log in a virtual reality (VR) environment. This lab is a proof-of-concept and not a fully developed solution.

This is based on the work I did in the legacy Canvatorium Lab 007 in 2022.

Lab Notes:

• Override console.log() and store the log messages in a reactive variable.
• Watch the reactive variable and display the log messages in VR by updating the text in a scroll view.
• The log messages are limited to simple strings and do not support objects or arrays.

How it Works:

1. The console.log() method is overridden using a custom function that will save log text to a reactive array.
2. Whenever console.log() is called, the message is added to a reactive array, conLogData, and the original console.log() method is invoked with the same arguments.
3. A UI card is created in the scene, which contains the 2D UI controls to show the console logging text.
4. The UI card contains a scroll view and a text block.
5. Whenever the reactive array is modified, a Vue Watch will append the latest value to the text block, then scroll to the last row of the scroll view.

The lab customizes the XR experience by adding event listeners to specific buttons on the VR controllers. Pressing these buttons in the immersive mode triggers console logs that are displayed in VR.

Video Demo