SMAAPass: Texture marked for update but image is incomplete

[ghost]

Description of the problem

When using the SMAAPass, a warning is logged:
THREE.WebGLRenderer: Texture marked for update but image is incomplete
This warning occurs because the Image.complete is false, after setting Image.complete it looks like it is asynchronous.

Please also include a live example if possible. You can start from these templates:

• https://threejs.org/examples/?q=smaa#webgl_postprocessing_smaa
• https://codepen.io/DaTo/pen/rqZQEB

Three.js version

• Dev
• [x ] r97
• ...

Browser

• All of them
• Chrome
• Firefox
• Internet Explorer

OS

• All of them
• Windows
• macOS
• Linux
• Android
• iOS

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

You're right. A simple fix could look like the following code section. Ideally it would be place after this line in SMAAPass:

var self = this;

setTimeout( function () {

        // assigning data to HTMLImageElement.src is asynchronous (see #15162)
        // using setTimeout() avoids the warning "Texture marked for update but image is incomplete"

	self.searchTexture.needsUpdate = true;
	self.areaTexture.needsUpdate = true;

}, 0 );

Would you like to do a PR with the changes?

[WestLangley]

That looks like a hack to me. Please consider a more conventional pattern:

var image = new Image();
image.src = dataURL;

var texture = new THREE.Texture( image );

image.onload = function () {
    texture.needsUpdate = true;
};

[Mugen87]

Indeed, that's nicer 👍

[ghost]

I will change it to onload callbacks.