I am trying to update a THREE.Texture
".image" property with an HTML5 canvas object. This works on Chromium (MacOSX) on my laptop. However, iPhone Safari and iPhone Chrome both does not work. What could be the root cause and how to fix this?
Using Web Inspector in Safari, I get this error message:
WebGL: INVALID_VALUE: texImage2D: no canvas.
I made sure the canvas is completely drawn before being updated, using the below code to update the material:
material.map.image = loaded_canvas[curr_id]; // loaded_canvas stores canvas that has been completed loaded already, drawn by Image() objects.
material.map.needsUpdate = true;
Here is how material is used:
var geometry = new THREE.SphereGeometry(100.0, 32, 32);
var material = new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture(image_path),
side: THREE.BackSide,
});
Strangely, if I use THREE.ImageUtils.loadTexture
to load an image, it works fine. However, my use case is that I have to use an canvas object (multiple images on a canvas).
Thanks.
According to the
Texture
docs, the .image property is more of a "getter" for the image element created via theTextureLoader.load()
method. If you want to create a texture with a<canvas>
element, you can create it withnew THREE.Texture(canvas);
as demonstrated via the snippet below. The texture creation takes place in themakeCanvasTexture()
function:Keep in mind that WebGL texture size is limited depending on each device's graphics card capabilities, so you'll get errors if you try to create a canvas that breaches this limitation. You can see the limit of your current device by visiting https://webglreport.com/ and looking at the "Max texture size" readout on the right. Mine is 8192px².
Likewise, you can access this information programmatically with
THREE.WebGLRenderer.capabilities.maxTextureSize
as explained in this documentation page so you can use this number to prevent canvas sizes from going beyond the device's limit.