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()
})
