4k60fps MSE Three.js

by dustinkerstein

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/92/three.min.js"></script>
<div id="container"></div>

JavaScript

var container, sourceBuffer, mesh, geometry, video, camera, scene, renderer, texture;
var video = document.createElement('video');
var url = "https://files.panomoments.com/hd60fps_dashinit.mp4";
var ms = new MediaSource();
container = document.getElementById('container');
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1100);
camera.target = new THREE.Vector3(0, 0, 0);
scene = new THREE.Scene();
geometry = new THREE.SphereBufferGeometry(500, 60, 40);
geometry.scale(-1, 1, 1);
video.crossOrigin = "anonymous";
video.preload = 'none';
video.autoplay = true;
video.loop = true;
video.muted = true;
video.src = window.URL.createObjectURL(ms);
texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
mesh = new THREE.Mesh(
  new THREE.PlaneGeometry(1920, 1080),
  new THREE.MeshBasicMaterial({
    map: texture
  }));
mesh.position.set(0, 0, -1000);
scene.add(mesh);
camera.add(mesh);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);
ms.addEventListener('sourceopen', onMediaSourceOpen);

fetch(url).then(function(response) {
  response.arrayBuffer().then(function(myArrayBuffer) {
    sourceBuffer.appendBuffer(myArrayBuffer);
    video.play();
    animate();
  });
});

function animate() {
  renderer.animate(render);
}

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


function onMediaSourceOpen() {
  sourceBuffer = ms.addSourceBuffer('video/mp4; codecs="avc1.640033"');
  //sourceBuffer.mode = 'sequence';
}