KML image overlays cause WebGL crash in 1.44

1. A concise explanation of the problem you're experiencing.

When loading KML files that include image overlays, "WebGL hit a snag" in Chrome. Typically, image loads correctly, shows on globe. Then perfomance slows dramatically (typically after ten to twenty seconds) followed by WebGL crash. This problem presented itself when upgrading from Cesium 1.39 to 1.44. Here is the error:

Cesium.js:23 An error occurred while rendering. Rendering has stopped.
undefined
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
TypeError: Failed to execute 'shaderSource' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLShader'.
    at f (http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:267365)
    at y (http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:270502)
    at d._bind (http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:271517)
    at V (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:46011)
    at k.draw (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:49646)
    at n.execute (http://climateviewer.org/lib/cesium/1.44/Cesium.js:22:240533)
    at d.executeCopyColor (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:546276)
    at it (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:725822)
    at lt (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727634)
    at ut (http://climateviewer.org/lib/cesium/1.44/Cesium.js:23:727792)
x.showErrorPanel @ Cesium.js:23
(anonymous) @ Cesium.js:23
i.raiseEvent @ Cesium.js:18
ut @ Cesium.js:23
we.render @ Cesium.js:23
x.render @ Cesium.js:23
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23
requestAnimationFrame (async)
r @ Cesium.js:22
t @ Cesium.js:23

​2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

EXAMPLE ANIMATION FILE: http://tropic.ssec.wisc.edu/real-time/atlantic/movies/kml/tiles/RT.atlantic.g8irn.tiles-8.kml

VIEW LIVE EXAMPLE OF CRASH:

EXAMPLE SINGLE IMAGE FILE: http://climateviewer.org/layers/kml/2018/honshu_tsunami_2011-03-11.kmz

VIEW LIVE EXAMPLE OF CRASH:

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I am trying to display live data from various weather and climate sources, along with mapping pollution using image overlays in KML format.

MY CODE:

function loadKml(layerId, geoDataSrc, proxy, zoom, markerImg, markerScale, markerLabel, markerMod, noList, timeline, rectangle, noClamp) {
    if (proxy) {
        var resource = new Cesium.Resource({
            url: geoDataSrc,
            proxy: {
                getURL: function (geoDataSrc) {
                    return proxyURL + encodeURIComponent(geoDataSrc);
                }
            }
        });
        new Cesium.KmlDataSource.load(resource, {
            //sourceUri: geoDataSrc,
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
            clampToGround: noClamp
        }).then(function (geoData) {
            console.log('loaded proxied kml');
            if (markerMod) {
                modKML(layerId, geoData, markerLabel, markerScale, noList, proxy);
                console.log('modified proxied kml');
            }
            //console.log(geoData.entities);
            viewer.dataSources.add(geoData); // add to map
            activeLayers[layerId] = geoData; // store for removal
            if (zoom === true) {
                viewer.flyTo(geoData);
            }
            loaded(layerId, timeline, rectangle);
        }, function (error) {
            loadError(layerId, geoDataSrc, error);
        }); // end then
    } else {
        new Cesium.KmlDataSource.load(geoDataSrc, {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas,
            clampToGround: noClamp
        }).then(function (geoData) {
            console.log('loaded kml');
            if (markerMod) {
                modKML(layerId, geoData, markerLabel, markerScale, noList);
                console.log('modified kml, no proxy');
            } // end markerMod
            viewer.dataSources.add(geoData);
            activeLayers[layerId] = geoData;
            if (zoom === true) {
                viewer.flyTo(geoData);
            }
            loaded(layerId, timeline, rectangle);
        }, function (error) {
            loadError(layerId, geoDataSrc, error);
        }); // end then
    } // end proxy
}

noClamp = false, therefore clamptoground is off for these layers.

modKML allows me to build lists of markers, but is not used on these layers with the issue:

function modKML(layerId, geoData, markerLabel, markerScale, noList, proxy) {
    //console.log(noList);
    var entities = geoData.entities.values,
        items, markerList;
        console.log('nolist - ' + noList);
    if (noList === false) {
        var layerTarget = \(&#39;\.&#39; \+ layerId \+ &#39;\-details&#39;\); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;markerList = ('<div class="details ' + layerId + '-list marker-list" />').insertAfter(layerTarget);
        items = ;
    }
    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
            //console.log(entity);
        if (typeof entity.billboard !== 'undefined' && typeof entity.billboard.image !== 'undefined') {
            if (typeof entity.name != 'undefined') {
                name = entity.name;
            } else {
                name = 'unnamed location';
            }

            if (markerLabel == 'none') {
                var label = new Cesium.LabelGraphics();
                label.text = "";
                entity.label = label;
                console.log('removed kml label');
            }

            if (markerScale) {
                entity.billboard.scale = markerScale;
            }

            entity.billboard.width = 32;
            entity.billboard.height = 32;
            //entity.label.text = '';
            entity.billboard.alignedAxis = Cesium.Cartesian3.ZERO;
            entity.billboard.scaleByDistance = defaultScaleByDistance;

            if (noList === false) {
                var v = entity.position.getValue();
                var carto = Cesium.Ellipsoid.WGS84.cartesianToCartographic(v);
                var lon = Cesium.Math.toDegrees(carto.longitude);
                var lat = Cesium.Math.toDegrees(carto.latitude);
                //console.log(lon, lat);

                var name,
                    bcolor,
                    rgba,
                    hex;

                if (typeof entity.billboard.color != 'undefined') {
                    console.log('marker has color');
                    var t = entity.billboard.color.getValue();
                    var blkstr = ;
                    $.each(t, function(idx2,val2) {
                        if (idx2 === 'red' || idx2 === 'green' || idx2 === 'blue') {
                          //var str = idx2 + ":" + val2;
                          blkstr.push(val2 * 255);
                        }
                    });
                    rgba = blkstr.join(", ");
                    hex = rgb2hex('rgba(' + rgba + ',1)');
                } else {
                    hex = 'none';
                }

                //console.log(hex);
                //hex = 'none';

                var icu = entity.billboard.image.getValue()._url;

                //console.log(icu);

                items.push('<li data-lon="' + lon + '" data-lat="' + lat + '"><canvas width="20" height="20" class="marker-icon" data-src="' + icu + '" data-tint="' + hex + '"></canvas> &nbsp;' + name + '</li>');
            }

        }
    } // end for loop

    //console.log('loop kml complete');
    if (noList === false) {

        \(&#39;&lt;h5&gt;&lt;i class=&quot;fa fa\-fw fa\-map\-marker&quot;&gt;&lt;/i&gt; Map Markers &lt;span&gt;Click to fly to location&lt;/span&gt;&lt;/h5&gt;&#39;\)\.appendTo\(markerList\); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;('<ol/>', {
            'class': 'markers',
            html: items.join('')
        }).appendTo(markerList);

        \(&#39;\.&#39; \+ layerId \+ &#39;\-list li&#39;\)\.click\(function \(\) \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var lon = (this).attr('data-lon');
            var lat = $(this).attr('data-lat');
            viewer.camera.flyTo({
                destination: Cesium.Cartesian3.fromDegrees(lon, lat, 1500.0)
            });
        });

        \(&#39;\.&#39; \+ layerId \+ &#39;\-list li canvas\.marker\-icon&#39;\)\.each\(function \(\) \{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var hexColor = (this).attr('data-tint');
            var icUrl = $(this).attr('data-src');

            var tintCanvas = document.createElement('canvas');
            tintCanvas.width = 20;
            tintCanvas.height = 20;
            var tintCtx = tintCanvas.getContext('2d');

            var ctx = $(this)[0].getContext('2d');
            var x = 0;
            var y = 0;

            var pic = new Image();

            if (hexColor !== 'none') {
                pic.onload = function () {
                    tintCtx.fillStyle = hexColor;
                    tintCtx.fillRect(x,y,20,20);
                    tintCtx.globalCompositeOperation = "destination-atop";
                    tintCtx.drawImage(pic, x, y);

                    ctx.drawImage(pic, x, y, pic.width = 20, pic.height = 20);
                    ctx.globalAlpha = 0.9;
                    ctx.drawImage(tintCanvas, x, y);
                }
            } else {
                pic.onload = function () {
                    ctx.drawImage(pic, x, y, pic.width = 20, pic.height = 20);
                    ctx.globalAlpha = 1;
                    ctx.drawImage(tintCanvas, x, y);
                }
            }
            pic.src = icUrl;
        });
    }
}

4. The Cesium version you're using, your operating system and browser.
Cesium version 1.44
Windows 7 64bit ultimate
Chrome Version 65.0.3325.181 (Official Build) (64-bit)

Hi there,

I was unable to duplicate the error in the app on my machine.

Can you put together a simple Sandcastle demo to duplicate the error on your system? That will help us track down the issue here.

Thanks!

Gabby

Devs were able to confirm, made an issue on github. Is flagged high importance:
https://github.com/AnalyticalGraphicsInc/cesium/issues/6567