OXF Player

Onirix OXF Player

Onirix OXF Player is a JavaScript-built utility that allows playing Onirix Experience Format (OXF) files in a web browser using WebGL and HTML5 canvas.

Limitations

The OXF format and its related tools still don't support all of the Onirix Studio features. For example the following are still not supported:

  • Holograms
  • Scene load events
  • Primitives
  • Curved images

Usage

In order to load an OXF file, you must follow these steps:

  1. Import the library from your JavaScript code or via a HTML script tag.
  2. Create a new config object specifying the canvas element on which to load the OXF file and the host of you OXF files.
  3. Instantiate a new OnirixPlayer with the config object.
  4. Use the load(file, placement) to load a OXF file that will be placed on the placement position of the Scene.
  5. Create a renderLoop function to call the render method on each animation frame.

Below you will find an example that includes all the steps:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>OXF Example</title>
    <script type="module">
      import OnirixPlayer from 'https://cdn.jsdelivr.net/npm/@onirix/oxf-player@1.0.0/+esm";
      import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.167.1/+esm";

      const canvas = document.querySelector("#canvas");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      const config = { canvas, host: "http://127.0.0.1:5003/oxf-samples/" };

      const onirixPlayer = new OnirixPlayer(config);

      async function init() {
        const center = {
          position: new THREE.Vector3(0, 0, 0),
          rotation: new THREE.Quaternion(),
        };

        await onirixPlayer.load("sample.oxf", center);

        const camera = onirixPlayer.getCamera();
        const renderer = onirixPlayer.getRenderer();

        function renderLoop() {
          requestAnimationFrame(renderLoop);
          onirixPlayer.render();
        }

        window.addEventListener("resize", () => {
          canvas.width = window.innerWidth;
          canvas.height = window.innerHeight;
          const fov = 45;
          const aspect = canvas.width / canvas.height;
          onirixPlayer.updateCameraParameters({ fov, aspect });
          onirixPlayer.onResize();
        });

        renderLoop();

      }

      init();
    </script>
  </head>
  <body>
    <canvas id="canvas"></canvas>
  </body>
</html>

Table of Contents

Results