From 0d0a2b33bab381d6f71b0eaf5bc8eb69bbdfd142 Mon Sep 17 00:00:00 2001 From: phit <2097483+phit@users.noreply.github.com> Date: Fri, 16 Oct 2026 23:30:44 +0200 Subject: [PATCH] fix: antialias the headset's image three.js passes the renderer's antialias setting on to the XR layer, so this turns on multisampling in VR. Co-Authored-By: Claude Opus 5.5 --- src/vr-player.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/vr-player.js b/src/vr-player.js index 30631e1..6ec8da0 100644 --- a/src/vr-player.js +++ b/src/vr-player.js @@ -184,7 +184,6 @@ function eacStereoMeshes(material) { // screen group, 3m in front of the viewer to start with. const SCREEN_DISTANCE = 3; const BACKGROUND = 0x101010; - function flatScreenMesh(material) { const video = material.map.image; const aspect = video.videoWidth && video.videoHeight ? video.videoWidth / video.videoHeight : 16 / 9; @@ -233,7 +232,9 @@ export class VRPlayer { this.onVideoResize = () => this.setProjection(this.projection); video.addEventListener('resize', this.onVideoResize); - this.renderer = new THREE.WebGLRenderer(); + // antialias also turns on multisampling for the headset's image (three.js passes it on + // to the XR layer), which smooths the edges of the screen, panel and lasers + this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setPixelRatio(window.devicePixelRatio); this.renderer.setSize(window.innerWidth, window.innerHeight); this.renderer.xr.enabled = true;