PhotoDome offset creates streaked left image for 180º stereo photos

First post!

I’m trying to create a gallery of stereo 180º photos and running into trouble with PhotoDome (4.2.0-alpha.35).

When halfDome is true and imageMode is MODE_SIDEBYSIDE, textureDome.ts sets the right and left eye offsets to 0 and 0.5, respectively.

This creates a color streak in Chrome’s 2D preview, and in the left eye of my Oculus Go. The right eye displays correctly in the Oculus.

Changing leftOffset to -0.5 fixes the issue.

I’m happy to issue a PR, just wanted to post here first and be sure I’m not missing anything.

On a related note, my photos are in the default format created b my EVO ONE and Vuze XR – “LR”. But it’s also common to publish photos in “RL” (cross-eyed) mode, since this can be viewed more easily in 3D by more people without goggles. So it would be awesome if a flag could be set to support both possibilities!

Here’s my sample code illustrating the issue. Attached is a sample photo (one of my grandmother’s miniature dollhouses, a decent test of various depths, taken with a Vuze XR).

var canvas = document.getElementById("vrPreview")
var engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
var scene = new BABYLON.Scene(engine)
var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI / 2, Math.PI / 2, 5, BABYLON.Vector3.Zero(), scene)
camera.attachControl(canvas, true)
camera.inputs.attached.mousewheel.detachControl(canvas)

var dome = new BABYLON.PhotoDome(
	"testdome",
	"./testphoto.jpg",
	{
		resolution: 32,
		size: 1000,
	},
	scene
)
dome.halfDome = true
dome.imageMode = BABYLON.PhotoDome.MODE_SIDEBYSIDE

// My code to correct the issue reported here
const rightOffset = 0
const leftOffset = -0.5
dome._onBeforeCameraRenderObserver = dome._scene.onBeforeCameraRenderObservable.add((camera) => {
	dome.photoTexture.uOffset = camera.isRightCamera ? rightOffset : leftOffset
})

var experience = await BABYLON.WebXRDefaultExperience.CreateAsync(scene, {
	disableTeleportation: true,
	ignoreNativeCameraTransformation: true,
	useStablePlugins: true,
})

scene.actionManager = new BABYLON.ActionManager(scene)

// ... boring stuff here registering actions

engine.runRenderLoop(function () {
	scene.render()
})
window.addEventListener("resize", function () {
	engine.resize()
})

Welcome to the forum !!!

Adding our own VR mastermind @RaananW who will be answering after the week end :slight_smile:

Interesting!

I actually just added 180 image support a few weeks ago and tested with different images. I didn’t have any issue, but I guess there is always a first time :blush:

I’ll check with your image and check the negative offset solution. I also like the idea of adding this extra cross eye flag, which makes a lot of sense. I’ll add it when fixing the issue

Just wanted to update - this is the github issue to track this - [Investigation] PhotoDome 180 · Issue #8897 · BabylonJS/Babylon.js · GitHub

1 Like