{"id":24558093,"url":"https://github.com/rse/studio-canvas","last_synced_at":"2025-04-19T09:58:55.111Z","repository":{"id":66345646,"uuid":"602703935","full_name":"rse/studio-canvas","owner":"rse","description":"Real-Time Virtual Studio Canvas Rendering","archived":false,"fork":false,"pushed_at":"2025-04-09T21:12:19.000Z","size":365106,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-15T21:55:49.679Z","etag":null,"topics":["canvas","game-engine-3d","real-time-rendering","scene","studio"],"latest_commit_sha":null,"homepage":"https://github.com/rse/studio-canvas/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rse.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-16T19:13:06.000Z","updated_at":"2025-04-09T21:12:21.000Z","dependencies_parsed_at":"2024-08-07T14:10:17.030Z","dependency_job_id":"955a2f82-00af-4995-acc9-cd6574db95f0","html_url":"https://github.com/rse/studio-canvas","commit_stats":null,"previous_names":[],"tags_count":68,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fstudio-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fstudio-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fstudio-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rse%2Fstudio-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rse","download_url":"https://codeload.github.com/rse/studio-canvas/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249670037,"owners_count":21308670,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","game-engine-3d","real-time-rendering","scene","studio"],"created_at":"2025-01-23T05:47:23.200Z","updated_at":"2025-04-19T09:58:55.104Z","avatar_url":"https://github.com/rse.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cimg src=\"https://raw.githubusercontent.com/rse/studio-canvas/master/res/app-icon.svg\" width=\"200\" align=\"right\" alt=\"\"/\u003e\n\nStudio-Canvas\n=============\n\n**Real-Time Virtual Studio Canvas Rendering**\n\nAbout\n-----\n\n**Studio-Canvas** is a client/server applications for dynamically\nrendering the virtual canvas of a filmstudio through the help of a game\nengine. The canvas optionally is overlayed with a standalone monitor\nand/or an embedded decal, both showing an own video stream. The virtual\ncameras optionally can follow the physical PTZ cameras throught their\nemitted FreeD information.\n\nThe application, written in [TypeScript](https://www.typescriptlang.org/),\nconsists of a central [Node.js](https://nodejs.org)-based server component and\na HTML5 Single-Page Application (SPA) as the client component.\nThe client component it turn runs in two distinct modes: a\n[Vue.js](https://vuejs.org/) based control mode for real-time adjusting\nthe scene parameters and a rendering mode for real-time rendering the\nscene with the help of the [Babylon.js](https://www.babylonjs.com/) game\nengine.\n\n![screenshot-11](doc/screenshot-11.png)\n\nControl User Interface\n----------------------\n\n**Studio-Canvas** is based on a client/server architecture.\nThe client runs in either control mode or render mode. The\nrender client(s) are remote controlled from control client(s).\nHere are screenshots of the user interface of the control client.\n\n![screenshot-01](doc/screenshot-01.png)\n![screenshot-02](doc/screenshot-02.png)\n![screenshot-03](doc/screenshot-03.png)\n![screenshot-04](doc/screenshot-04.png)\n![screenshot-05](doc/screenshot-05.png)\n![screenshot-06](doc/screenshot-06.png)\n![screenshot-07](doc/screenshot-07.png)\n![screenshot-08](doc/screenshot-08.png)\n![screenshot-09](doc/screenshot-09.png)\n![screenshot-10](doc/screenshot-10.png)\n\nUsage (Production)\n------------------\n\n- Under Windows/macOS/Linux install [Node.js](https://nodejs.org)\n  for the server run-time, [Google Chrome](https://www.google.com/chrome)\n  for the client run-time (control mode and either [OBS Studio](https://obsproject.com)\n  or [vMix](https://www.vmix.com) for the client run-time (renderer mode).\n\n- Install all dependencies:\u003cbr/\u003e\n  `npm install --production`\n\n- Run the production build-process once:\u003cbr/\u003e\n  `npm start build`\n\n- Run the bare server component:\u003cbr/\u003e\n  `npm start server`\n\n- Open the client component (control mode) in Google Chrome:\u003cbr/\u003e\n  https://127.0.0.1:12345/\n\n- Use the client component (renderer mode) in OBS Studio or vMix browser sources:\u003cbr/\u003e\n  https://127.0.0.1:12345/#/render/back/CAM2?ptzFreeD=true\n\nUsage (Development)\n-------------------\n\n- Under Windows/macOS/Linux install [Node.js](https://nodejs.org)\n  for the server run-time and [Google Chrome](https://www.google.com/chrome)\n  for the client run-time (both control mode and renderer mode),\n  plus [Visual Studio Code](https://code.visualstudio.com/) with its\n  TypeScript, ESLint and VueJS extensions.\n\n- Install all dependencies:\u003cbr/\u003e\n  `npm install`\n\n- Run the development build-process once:\u003cbr/\u003e\n  `npm start build-dev`\n\n- Run the development build-process and server component continuously:\u003cbr/\u003e\n  `npm start dev`\n\n- Open the client component (control mode) in Google Chrome:\u003cbr/\u003e\n  https://127.0.0.1:12345/\n\n- Open the client component (renderer mode) in Google Chrome:\u003cbr/\u003e\n  https://127.0.0.1:12345/#/render/back/CAM2?ptzFreeD=true\n\nArchitecture\n------------\n\n**Studio-Canvas** is based on a Client/Server architecture,\nas illustrated in the following diagram:\n\n![architecture](doc/architecture.png)\n\nSee Also\n--------\n\n- [TypeScript](https://www.typescriptlang.org/)\n- [Vue.js](https://vuejs.org/)\n- [BabylonJS](https://babylonjs.com)\n    - [BabylonJS Documentation](https://doc.babylonjs.com/)\n    - [BabylonJS Playground](https://playground.babylonjs.com/)\n    - [BabylonJS Sandbox](https://sandbox.babylonjs.com/)\n    - [BabylonJS Node Material Editor (NME)](https://nme.babylonjs.com/)\n    - [BabylonJS Editor](https://editor.babylonjs.com/)\n- [Node.js](https://nodejs.org)\n- [Blender](https://blender.org)\n\nCopyright \u0026 License\n-------------------\n\nCopyright \u0026copy; 2023-2025 [Dr. Ralf S. Engelschall](mailto:rse@engelschall.com)\u003cbr/\u003e\nLicensed under [GPL 3.0](https://spdx.org/licenses/GPL-3.0-only)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frse%2Fstudio-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frse%2Fstudio-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frse%2Fstudio-canvas/lists"}