Bifrost – Lessons Learned
Lesson #1
Code Sharing Strategy
Web-Based Marketplace
Megascans (2016)
- NextJS (React)
- JavaScript & TypeScript
- Redux / Zustand
- SWR
Desktop-Based Marketplace
Bridge (2016)
- Written in Electron
- React-based Web App
- JavaScript & TypeScript
- Redux
- Native OS features
- One click exports to DCCs
Desktop
Web/Electron Shared Pattern
The Challenge
- Unreal Engine is written in C++ 😬
- Bridge is Electron/React 👀
- Embedding Electron inside of UE ❌
- Limited time ⏳
- Limited expertise in C++ / UE 🧐
Web Front-End at Quixel
Web UI progression in its full glory
Integrated Plugin Marketplace
Bridge Plugin in UE5
Bridge inside of Unreal Engine 5
The Solution
WebBrowser Widget in UE
CEF (Chromium Embedded Framework)
✅ Load up web apps in UE5
✅ Call C++ code from JS
✅ Call JS code from C++
Started with
❌ Native features (Downloads/D&D)
The Solution
Background Service (Node JS)
✅ Downloads
✅ Library Management
✅ Analytics & other services
The Solution
Socket.IO
Background Service (Node JS)
C++
(CEF)
Tech Stack
Bridge Plugin in UE5
Tech Stack
Bridge Plugin in UE5
Pretty non-standard!
But works really well!
Tech Stack
Bridge Plugin in UE5
Pretty non-standard!
But works really well!
Bonus – iterate over UI independently!
Common Design System
Another Advantage
Shared Components Library
Storybook
Write Once
Use Everywhere
How does this all relate to the Metaverse?
It's going to be UGC centric 🎯
How does this all relate to the Metaverse?
Marketplaces
Web has been great at Marketplaces!
Web UI in 3D 👾
Possibly the next step!
The tech is not new
Web in 3D already exists
Game HUDs
Game HUDs
Non Standard
Not limited to a single UI domain
The Future
Mix and match
Web UI can be integral
It'll be magical! 🪄
Interested in what we do?
- Visit us in the exhibition area
- Visit https://futurefest.quixel.com
Thank you!
Bifrost – Lessons Learned
By Ahmed Rizwan
