Skip to content

Getting Started

A web-based volumetric video player powered by 8i Technology.

Using the 8i Web Player, you can play back 8i volumetric videos within THREE.js, @react-three/fiber, and ComfyUI.

Alternatively, you can embed volumetric video into tradtional websites.

Explore our library of 1000+ volumetric videos at our Playground → application.

Or try our ComfyUI Node for integration with ComfyUI workflows.

Installation

THREE.JS CDN version

The 8i Web Player is available in two build formats for different use cases:

Build Format Link Description
ESM DashPlayer.esm.js ES Module build for modern JavaScript environments
UMD DashPlayer.umd.js Universal Module Definition build for broader compatibility

ComfyUI Node

ComfyUI Node is a custom node for ComfyUI providing an interactive 3D viewer for 8i volumetric videos (MPD format), allowing frame capture and integration into workflows.

Developed for Kartel.ai by Lovis Odin.

8i Web Player Background

Quick Start

When you embedded a build of the player, you can make use of THREE.JS or @react-three/fiber in order to embed a volumetric video into your scene.

THREE.JS Example

The 8i Web Player can be initialized using THREE.JS using the DashPlayer class as described below.

In case you cannot use ES modules as specified below, you can use the UMD build instead which will define window.DashPlayer.

<!doctype html>
<html>
  <head>
    <style>
      body {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.174.0/three.module.js",
          "DashPlayer": "/assets/javascripts/eighti-player/DashPlayer.esm.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      import DashPlayer from "DashPlayer";

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        60,
        window.innerWidth / window.innerHeight,
        0.1,
        1000,
      );

      const renderer = new THREE.WebGLRenderer({
        antialias: true,
        alpha: true,
      });

      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

      camera.position.z = 2;

      const initialize = async () => {
        const player = new DashPlayer(renderer, {
          loop: true,
          autoplay: true,
          muted: true,
        });

        await player.loadManifest(
          "https://dash-cdn.8i.com/31/shows/279/takes/nfkzmqko/manifest.mpd",
        );

        scene.add(player.mesh);
        player.mesh.scale.set(0.01, 0.01, 0.01);
        player.mesh.position.y -= 0.75;
        player.startRenderLoop();

        renderer.setAnimationLoop(function animate(time) {
          renderer.render(scene, camera);
        });
      };

      window.addEventListener("DOMContentLoaded", initialize);
    </script>
  </body>
</html>