WebGL Video Texture Size

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, material, video, camera, scene, renderer, texture;
var video = document.createElement('video');
var url = "https://files.panomoments.com/cinemascope_dashinit.mp4"; // Note that this video was originally 2:1 and was changed to 2.35:1 with ffmpeg -i uhd10frame.mp4 -c copy -aspect 2.35 outcinemascope.mp4 (apparently Firefox still reads the original 2:1 AR)
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.loop = true;
video.muted = true;
video.src = window.URL.createObjectURL(ms);
texture = new THREE.VideoTexture(video);
texture.minFilter = THREE.LinearFilter;
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
scene.add(camera);
geometry = new THREE.PlaneGeometry(1, 1);
material = new THREE.MeshBasicMaterial({map: texture});
mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -10);
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);

video.addEventListener( "loadedmetadata", function (e) {
 	var windowAspectRatio = window.innerWidth / window.innerHeight;
  var videoAspectRatio = this.videoWidth / this.videoHeight;
  var distanceToPlane = Math.abs(mesh.position.z);
  var limit;
  if (videoAspectRatio < windowAspectRatio) {
    limit = (Math.tan (THREE.Math.degToRad(camera.fov * 0.5)) * distanceToPlane * 2.0) * videoAspectRatio; 
  } else {
    limit = (Math.tan (THREE.Math.degToRad(camera.fov * 0.5)) * distanceToPlane * 2.0) *...