We’ve been developing ScreenLab by BuildVR, a Three.js-based tool for previewing and testing video content across different immersive display geometries.
The idea came from a practical challenge: how can content teams understand how a video may appear on a curved screen, dome, or large immersive display before accessing the physical venue?
A standard video player cannot show how content behaves when mapped onto a curved surface, viewed from different audience positions, or displayed inside a dome. ScreenLab provides a browser-based 3D environment where users can test these conditions earlier in the production workflow.
Supported display environments
ScreenLab currently supports:
-
Flat screens
-
Curved screens
-
Full domes
-
Half-domes
The uploaded video is mapped as a texture onto the selected Three.js geometry, allowing the same content to be tested across multiple display configurations.
Geometry controls
Depending on the selected display type, users can adjust:
-
Screen height
-
Screen radius
-
Curvature arc
-
Horizontal coverage
-
Vertical coverage
-
Dome size
-
Screen distance
-
Audience viewing distance
These controls can help approximate different installation environments, from slightly curved screens to wide immersive displays and dome-based projection setups.
Audience and camera simulation
ScreenLab also allows the environment to be inspected from different viewing positions.
Available scene controls include:
-
Audience-distance adjustment
-
Viewer-position preview
-
Scene navigation
-
Fit scene to view
-
Camera reset
-
Grid and axis references
-
Snapshot capture
This helps users examine how content composition, text placement, scale, and distortion may change depending on the audience position.
Video testing tools
Users can upload their own videos and test them directly inside the selected display environment.
Playback controls include:
-
Play and pause
-
Timeline seeking
-
Loop playback
-
Mute and unmute
-
Playback-speed adjustment
-
Restart and reset
-
Current time and duration
-
Fit view during playback
Why we created ScreenLab
Content teams often complete a video before testing it on the final display environment. This can lead to issues being discovered late in the process, including:
-
Important visuals appearing too close to curved-screen edges
-
Text becoming difficult to read on dome surfaces
-
Incorrect assumptions about display scale
-
Distortion from certain audience positions
-
Uncertainty about whether existing content is suitable for an immersive installation
ScreenLab is designed to move part of this testing process into the browser, making early experimentation and review more accessible.
Three.js implementation
Three.js is used for:
-
Procedural screen geometry
-
Video textures
-
UV mapping
-
Camera positioning
-
Audience-view simulation
-
Real-time geometry updates
-
Scene navigation
-
Display-specific controls
-
Lighting and environment presentation
One of the key challenges has been creating controls that remain understandable across very different geometries. Curved screens rely on radius and arc settings, while dome environments require different coverage, mapping, and camera considerations.
We would be interested in feedback from the Three.js community around:
-
Video UV mapping for dome geometries
-
Camera presets for audience simulation
-
High-resolution video texture performance
-
Useful parameters for immersive displays
-
Configuration import and export
-
Improving real-world scale representation
We’ve included a few images showing ScreenLab across its different display modes and viewing configurations.
Demo: ScreenLab