Unusual artifacts in the background using WebXR visible in oculus quest

Questions
1

This is what I see in my desktop browser using WebXR emulator. There are no background artifacts, I’m able to pan around a little to see my surroundings.

image
image1550×1412 213 KB

But…

This is what I see in the oculus quest: As my head is moving around, it’s as if something drawn isn’t cleaned up properly and producing lines based on the geometry in the background.

image
image944×770 54.4 KB

Even the laser pointer coming out of the controller (see the white lines in the photo above), are not being cleaned up. This only applies to the portion in the sky. The ground plane seems to redraw itself correctly.

Has anyone encountered something like this before? Any ideas on how to fix?

Below is scene code:

    import {
      Engine
    } from "@babylonjs/core/Engines/engine";
    import {
      Scene
    } from "@babylonjs/core/scene";
    import {
      SceneLoader
    } from "@babylonjs/core/Loading";
    import {
      Vector3
    } from "@babylonjs/core/Maths/math";
    import {
      FreeCamera
    } from "@babylonjs/core/Cameras/freeCamera";
    import {
      HemisphericLight
    } from "@babylonjs/core/Lights/hemisphericLight";
    import {
      Light
    } from "@babylonjs/core/Lights/light";
    import {
      Mesh
    } from "@babylonjs/core/Meshes/mesh";
    import {
      AbstractMesh
    } from "@babylonjs/core/Meshes/abstractMesh";
    import {
      WebXRDefaultExperience
    } from "@babylonjs/core/XR/webXRDefaultExperience";

    //import { SceneLoader } from "@babylonjs/core/Loading/sceneLoader";
    import "@babylonjs/loaders/glTF"

    // Required side effects to populate the Create methods on the mesh class. Without this, the bundle would be smaller but the createXXX methods from mesh would not be accessible.
    // import "@babylonjs/core/Meshes/meshBuilder";
    import "@babylonjs/core/Helpers/sceneHelpers";
    import { Channel } from "phoenix"
    import { GLTF2 } from "@babylonjs/loaders/glTF";

    export class Game {
      private _canvas: HTMLCanvasElement;
      private _channel: Channel;
      private _engine: Engine;
      public _scene?: Scene;
      private _camera?: FreeCamera;
      private _light?: Light;
      private _xrHelper?: WebXRDefaultExperience

      constructor(canvasElement: string) {
        // Create canvas and engine.
        this._canvas = document.getElementById(canvasElement) as HTMLCanvasElement;
        this._engine = new Engine(this._canvas, true);
      }

      async createScene(channel: Channel) {
        this._channel = channel;

        this._scene = new Scene(this._engine);
        this._camera = new FreeCamera("camera1", new Vector3(0, 5, -10), this._scene);
        this._camera.setTarget(Vector3.Zero());
        this._camera.attachControl(this._canvas, true);
        this._light = new HemisphericLight("light1", new Vector3(0, 1, 0), this._scene);
        this._light.intensity = 0.3;
        // var sphere = Mesh.CreateSphere("sphere1", 16, 2, this._scene);
        // sphere.position.y = 1;

        const env = this._scene.createDefaultEnvironment({
          createSkybox: false, groundSize: 100
        });

        // here we add XR support
        this._xrHelper = await this._scene.createDefaultXRExperienceAsync({
          floorMeshes: [env?.ground as AbstractMesh],
          inputOptions: {
            forceInputProfile: 'oculus-touch-v2'
          }

        });

        // this._xrHelper.baseExperience.camera.pos

        if (!this._xrHelper.baseExperience) {
          // no xr support
          console.log("no xr support")
        } else {
          console.log("xr is supported")
          // all good, ready to go
        }

        SceneLoader.Append("./gltf/", "backyard2.glb", this._scene, (scene) => {
          console.log("loaded a scene");
        });

      
        return this._scene;

      }


      doRender(): void {
        // Run the render loop.
        this._engine.runRenderLoop(() => {
          this._scene?.render();
        });

        // The canvas/window resize event handler.
        window.addEventListener('resize', () => {
          this._engine.resize();
        });
      }
    }
2

It seems a skybox fixes it.

1 Like