Texture and CubeTexture fails using blob buffers

Description of the problem

If a content image is the result of a blob. (in this case a binary file with embedded jpg’s or png’s).
Texture will fail.
If texture.needUpdate is set, warning is triggered that the image isn’t complete but somehow allows the texture to be rendered properly.
Tried as a work around, to wait a short delay for the images to be complete and then declare the texture with the image: fails.

Same for CubeTexture, except no warning is triggered and always fails, even if needUpdate is set when all images are complete or setting images array with all images.complete true.

Note that if added to the html page, the images/blobs are displayed, all displayed in browser resources list as well. And when complete is true, the correct width/height are also available.

Example of the blob constructs for a jpg (imType:jepg)

		var imLen = this.readU32();
		var imBuffer = new Uint8Array(imLen);
		var i = 0;
		var buff = this.bytes.buffer;
			imBuffer[i] = this.readU8();
 		var blob = new Blob( [ imBuffer ], { type: "image/"+imType } );
 		var url = URL.createObjectURL(blob);

		var image = new Image();
    		image.crossOrigin = "Anonymous";
    		image.src = url;
    		var texture = new THREE.Texture();
    		texture.format = (imType == "jpeg") ? THREE.RGBFormat : THREE.RGBAFormat;
    		texture.image = image;
    		texture.needsUpdate = true;  // will trigger warning because image not complete, but display the map ok.

	 	return texture;

The threejs code assumes image.width/height are other than 0, while image constructor params width & height are updated once the blob sets the image flag complete to true.

Three.js version
  • r89
  • r88
  • r87
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

1 thought on “Texture and CubeTexture fails using blob buffers

  1. I’ve been able to use Blob URLs successfully through the TextureLoader interface:

    var url = URL.createObjectURL( blob );
    var loader = new THREE.TextureLoader();
    loader.load( url, function ( texture ) {
      URL.revokeObjectURL( url );

    EDIT: Full example.

Comments are closed.