Versatility of Web Front-End
From Browsers to the Metaverse
Lead Front-end Engineer @ Quixel
Ahmed Rizwan
Who is this for?
Who is this for?
UI/UX Enthusiasts 👨🎨
Front-end developers 💻
Not just front-end developers 💡
Web is still growing 🚀
The Present
Browsers
Pretty standard 🤓
Browsers
Web Apps are the norm
Browsers
Tons of Frameworks
Browsers
Tons of Frameworks
Browsers
Tons of Frameworks
And Powerful Tools
Mobile
Getting better and better 😎
Mobile
Popular Frameworks
React Native
Flutter
Mobile
Lots of Apps
React Native
Flutter
Desktop
Web Apps with super powers 💪
Desktop
The Frameworks
Electron
Tauri
🔥
Desktop
The Frameworks
Electron
Tauri
🔥
Desktop
Not just third party apps 👀
Source — Jim Nielson
The secret?
The secret?
Iterating over UI is blazingly fast 🔥
Web Front-End at Quixel
Web UI progression in its full glory
Megascans
Web-Based Marketplace
Largest and Fastest growing 3D Scan Library
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 features
- One click exports to Content tools
Quixel gets acquired by Epic Games (2019)
Task – bring library inside of Unreal Engine
Integrated Plugin Marketplace
Bridge Plugin in UE5
Bridge inside of Unreal Engine 5
The Challenge
- Unreal Engine is written in C++ 😬
- Bridge is Electron/React 👀
- Embedding Electron inside of UE ❌
- Limited time ⏳
- Limited expertise in C++ / UE 🧐
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!
Frontend for the Metaverse
By Ahmed Rizwan
