Handling Resource.fetchImage Error

CesiumJS
1

I am attempting to replace the texture on models displayed in Cesium during runtime. Here’s the code I’m using:

// Replace the texture with the correct one for this airline

// New texture must be the same size as the original texture

this.Model.readyPromise.then(function(model) {

var textureIndexToReplace = 0;

var textures = model._rendererResources.textures;

var texture = textures[textureIndexToReplace];

Cesium.Resource.fetchImage({

url : “resources/liveries/” + model[‘ModelId’] + “_” + model[‘Airline’] + “.jpg”

}).then(function(image) {

texture.copyFrom(image);

texture.generateMipmap(); // Also replaces textures in mipmap

});

});

``

I am successfully updating the texture on the models. However, it appears that when the fetchImage URL points to a location that doesn’t exist (an image doesn’t exist for the model/airline combination being requested) the last image successfully fetched is applied to the model.

I don’t have much experience with promises, and I’ve been reviewing all I can find in the Cesium documentation and forum as well as general JavaScript documentation and the When.JS documentation. But I have not been able to figure this out.

I have attempted to add .otherwise to the fetchImage function/promise, but the incorrect image is still applied to the model when the URL points to an invalid image. I’ve also tried wrapping the fetchImage function/promise in a try/catch but I get the same result. I do end up in the .otherwise or catch code when the image is not found (indicating an error or response of some sort is happening, but the incorrect image is still applied to the model.

If someone could help point me in the right direction to resolve this I’d really appreciate it!

Thanks,

Rob

2

It looks like this question was also asked here:

https://github.com/AnalyticalGraphicsInc/cesium/issues/5094#issuecomment-415803804

And Sean provided an example to get around this cache issue. Feel free to follow up here or there if it’s still not resolved!

3

I wasn’t sure how often the Github location would be reviewed so I asked here as well. Yes, providing a unique cache key resolved the issue. Thanks!

4

One more question about this…

I have a bunch of airline liveries (paint jobs) and am now applying them to aircraft models during runtime based on the aircraft type and airline. However, I don’t have every airline livery for every aircraft type / airline combination. When the code above (Cesium.Resource.fetchImage) is unable to return an image from the URL specified I get an error printed in the browser console that states “Failed to load resource: net::ERR_EMPTY_RESPONSE”.

This makes total sense since the specified URL/image could not be found. However, I’d like to be able to catch this error so that I don’t fill the console with these messages. I’ve tried wrapping the fetchImage call in a try/catch and I’ve also tried wrapping the whole Model.readyPromise in a try/catch but neither of these approaches prevents the error from being printed in the console.

Do you know how I can catch this error?

Thanks!

Rob

5

Seems like there must be a way to catch this error…

6

It turns out the reason your try/catch isn’t working is that code isn’t actually throwing any errors! This is something the browser reports:

7

Omar, thank you for the response. Although I hadn’t found that particular post I had pretty well figured this was the case since I have tried everything I can think of without success. Thank you for looking into this and responding!