Examples: Use onLoad() in webgpu_materials.

[andyleiserson]

This fixes intermittent "Texture marked for update but image is incomplete" errors running the demo in Firefox, by waiting until the onLoad event has fired before adding the object to the scene.

[Mugen87]

running the demo in Firefox

webgpu_materials doesn't run in Firefox because it's a WebGPU only example. How did you test that?

When testing webgpu_materials in Chrome, there are no console warnings or errors.

[andyleiserson]

Sorry, I should have specified. I am testing in Firefox Nightly, on Mac.

The test serializes an object definition to JSON and then restores it. In serialized form, the texture is represented as a data URL. When reconstructing the texture, an <img> is created for the data URL and then loaded with copyExternalImageToTexture. My theory of the problem is that the image doesn't need to be loaded from the network, but it does still need to be decoded, and that there is some difference between Chrome and Firefox in whether content can see !image.complete in the interval when the image is being decoded. It is possible the application should not be able to see !image.complete in this case, I haven't studied the specs.

The problem is intermittent. It is more likely to happen on the initial page load and less likely to happen on a subsequent reload. If I comment out the call to testSerialization, the problem goes away.