Errors on Internet explorer 11 and edge when texture.needsUpdate

I am making a 360 video player. Now I am testing the player on Internet explorer 11 and edge but it seems to give me some errors I don’t get on chrome or firefox.
Errors:

  • WEBGL11072: INVALID_VALUE: texImage2D: This texture source is not supported
    three.min.js (674,297)
  • WEBGL11098: drawArrays: The texture is a non-power-of-two texture or not mipmap complete
    three.min.js (621,105)

It shows the errors only every time I call
renderer.render(scene, camera);
and texture.needsUpdate = true;

The texture is a video element.
texture is made like this. _videoobj is the video.

_videoobj = document.getElementById("video");

texture = new THREE.Texture(_videoobj);

I get the same error when I make the texture like this:

texture = new THREE.VideoTexture(_videoobj);

The result is that the renderer will not render anything in the canvas.

Author: Fantashit

1 thought on “Errors on Internet explorer 11 and edge when texture.needsUpdate

  1. i just made a little workaround based on the idea of Brian Chirls.
    The idea is to create a canvas for the video texture, draw the video in the canvas and use this canvas for the texture… it will use more CPU/Memory but it will work on IE.
    For me it’s a workaround not a real fix.

    // add this to the THREE vars
    THREE.noVideoTextureSupport = false;
    
    // replace the videoTexture function
    THREE.VideoTexture = function ( video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) {
        if (THREE.noVideoTextureSupport)
        {
            this.video = video;
            this.ctx2d = document.createElement('canvas').getContext('2d');
            var canvas = this.ctx2d.canvas;
            canvas.width = video.width;
            canvas.height = video.height;
            this.ctx2d.drawImage(this.video, 0, 0, this.width, this.height);
            THREE.Texture.call( this, this.canvas, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
        } else {
            THREE.Texture.call( this, video, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy );
        }
        this.generateMipmaps = false;
        var scope = this;
        if (THREE.noVideoTextureSupport) {
            function update() {
                requestAnimationFrame( update );
                if ( video.readyState >= video.HAVE_CURRENT_DATA ) {
                    scope.ctx2d.drawImage(scope.video, 0, 0, scope.video.width, scope.video.height);
                    scope.needsUpdate = true;
                }
            }
        } else {
            function update() {
                requestAnimationFrame( update );
                if ( video.readyState >= video.HAVE_CURRENT_DATA ) {
                    scope.needsUpdate = true;
                }
            }
        }
        update();
    };

    then you just have to set THREE.noVideoTextureSupport to true if it’s IE, and the VideoTexture will work.

Comments are closed.