Three.js: SMAAPass: Texture marked for update but image is incomplete

Created on 29 Oct 2018 · 4Comments · Source: mrdoob/three.js

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:

Three.js version

[ ] Dev
[x ] r97
[ ] ...

Browser

[x] All of them
[ ] Chrome
[ ] Firefox
[ ] Internet Explorer

OS

[x] All of them
[ ] Windows
[ ] macOS
[ ] Linux
[ ] Android
[ ] iOS

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

Bug

Source

cnsdato

Most helpful comment

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;
};

WestLangley on 29 Oct 2018

👍2 ❤1

All 4 comments

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?

Mugen87 on 29 Oct 2018

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;
};

WestLangley on 29 Oct 2018

👍2 ❤1

Indeed, that's nicer 👍

Mugen87 on 29 Oct 2018

I will change it to onload callbacks.

cnsdato on 29 Oct 2018

Was this page helpful?

0 / 5 - 0 ratings