Merge pull request #13304 from mrdoob/videotexture-framerate

VideoTexture: Added frameRate property

examples/webgl_kinect.html

@@ -142,6 +142,8 @@
 
 					texture = new THREE.VideoTexture( video );
 					texture.minFilter = THREE.NearestFilter;
+					texture.format = THREE.RGBFormat;
+					texture.frameRate = 30;
 
 					var width = 640, height = 480;
 					var nearClipping = 850, farClipping = 4000;

examples/webgl_materials_video.html

@@ -108,6 +108,7 @@
 				texture.minFilter = THREE.LinearFilter;
 				texture.magFilter = THREE.LinearFilter;
 				texture.format = THREE.RGBFormat;
+				texture.frameRate = 24;
 
 				//
 

examples/webgl_video_panorama_equirectangular.html

@@ -79,6 +79,7 @@
 				var texture = new THREE.VideoTexture( video );
 				texture.minFilter = THREE.LinearFilter;
 				texture.format = THREE.RGBFormat;
+				texture.frameRate = 25;
 
 				var material   = new THREE.MeshBasicMaterial( { map : texture } );
 

examples/webvr_video.html

@@ -69,7 +69,7 @@
 				texture.minFilter = THREE.NearestFilter;
 				texture.maxFilter = THREE.NearestFilter;
 				texture.format = THREE.RGBFormat;
-				texture.generateMipmaps = false;
+				texture.frameRate = 24;
 
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0x101010 );

src/textures/VideoTexture.js

@@ -9,6 +9,7 @@ function VideoTexture( video, mapping, wrapS, wrapT, magFilter, minFilter, forma
 	Texture.call( this, video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
 
 	this.generateMipmaps = false;
+	this.frameRate = 30;
 
 }
 
@@ -18,17 +19,30 @@ VideoTexture.prototype = Object.assign( Object.create( Texture.prototype ), {
 
 	isVideoTexture: true,
 
-	update: function () {
+	update: ( function () {
 
-		var video = this.image;
+		var prevTime = 0;
 
-		if ( video.readyState >= video.HAVE_CURRENT_DATA ) {
+		return function () {
 
-			this.needsUpdate = true;
+			var video = this.image;
+
+			if ( video.readyState >= video.HAVE_CURRENT_DATA ) {
+
+				var time = performance.now();
+
+				if ( prevTime + ( 1 / this.frameRate ) < time ) {
+
+					this.needsUpdate = true;
+					prevTime = time;
+
+				}
+
+			}
 
 		}
 
-	}
+	} )()
 
 } );