Real-Time Virtual Studio Canvas Rendering

Studio-Canvas is a client/server applications for dynamically rendering the virtual canvas of a filmstudio through the help of a game engine. The canvas optionally is overlayed with a standalone monitor and/or an embedded decal, both showing an own video stream. The virtual cameras optionally can follow the physical PTZ cameras throught their emitted FreeD information.

The application, written in TypeScript, consists of a central Node.js-based server component and a HTML5 Single-Page Application (SPA) as the client component. The client component it turn runs in two distinct modes: a Vue.js based control mode for real-time adjusting the scene parameters and a rendering mode for real-time rendering the scene with the help of the Babylon.js game engine.

Studio-Canvas is based on a client/server architecture. The client runs in either control mode or render mode. The render client(s) are remote controlled from control client(s). Here are screenshots of the user interface of the control client.

• Under Windows/macOS/Linux install Node.js for the server run-time, Google Chrome for the client run-time (control mode and either OBS Studio or vMix for the client run-time (renderer mode).

• Install all dependencies:
  npm install --production

• Run the production build-process once:
  npm start build

• Run the bare server component:
  npm start server

• Open the client component (control mode) in Google Chrome:
  https://127.0.0.1:12345/

• Use the client component (renderer mode) in OBS Studio or vMix browser sources:
  https://127.0.0.1:12345/#/render/CAM2?ptzFreeD=true

• Under Windows/macOS/Linux install Node.js for the server run-time and Google Chrome for the client run-time (both control mode and renderer mode), plus Visual Studio Code with its TypeScript, ESLint and VueJS extensions.

• Install all dependencies:
  npm install

• Run the development build-process once:
  npm start build-dev

• Run the development build-process and server component continuously:
  npm start dev

• Open the client component (control mode) in Google Chrome:
  https://127.0.0.1:12345/

• Open the client component (renderer mode) in Google Chrome:
  https://127.0.0.1:12345/#/render/CAM2?ptzFreeD=true

Studio-Canvas is based on a Client/Server architecture, as illustrated in the following diagram:

• TypeScript
• Vue.js
• BabylonJS
  • BabylonJS Documentation
  • BabylonJS Playground
  • BabylonJS Sandbox
  • BabylonJS Node Material Editor (NME)
  • BabylonJS Editor
• Node.js
• Blender

Copyright © 2023-2024 Dr. Ralf S. Engelschall
Licensed under GPL 3.0