Three.js + requestAnimationFrame

MAKE SURE TO CLICK INTO THE RESULT IFRAME OR ELSE SAFARI WILL ONLY RENDER RAF / SETINTERVAL AT MAX 30FPS DUE TO POWER SAVING CODE

by dustinkerstein

HTML

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

CSS

body {
  margin: 0;
  padding: 0;
  background-color: black; 
}

JavaScript

// MAKE SURE TO CLICK INTO THE RESULT IFRAME OR ELSE SAFARI WILL ONLY RENDER RAF / SETINTERVAL AT MAX 30FPS DUE TO POWER SAVING CODE

var container, mesh, camera, scene, renderer, texture;
var index = 0;
var url = "https://files.panomoments.com/uhd60fps16x9_dashinit.mp4"; // 100% I-Frames
var video = document.createElement('video');
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();
video.preload = "auto";
video.muted = true;
video.autoplay = true; // Needed for iOS to trigger readyState = 4
video.loop = true;
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);


var animationStrategy = 1; 

if (animationStrategy == 1) {
	window.requestAnimationFrame(render); // Slower performance than setInterval
} else if (animationStrategy == 2) {
	renderer.setAnimationLoop(render); // Results in same performance as requestAnimationFrame
} else if (animationStrategy == 3) {
	setInterval(render, 1000/60);
}

function render() {
	if (animationStrategy == 1) {
  	window.requestAnimationFrame(render);
  }
  if (video.readyState >= 3) { 
    texture.needsUpdate = true;
    index = (index + 1) % 242;
    video.currentTime = index;
  }
  renderer.render(scene, camera);
}

fetch(url).then(function(response) {
  response.blob().then(function(myBlob) {
    video.src = window.URL.createObjectURL(myBlob); // Seeking with blob occasionally shows XPC memory issue on Safari but even with...