My .svg files work fine in Firefox, but get WebGL: INVALID: texSubImage2D: bad Image message in Chrome.
Test using Billboards sandcastle app:
function addBillboard(scene, ellipsoid) {
Sandcastle.declare(addBillboard); // For highlighting in Sandcastle.
var image = new Image();
image.onload = function() {
var billboards = new Cesium.BillboardCollection();
var textureAtlas = scene.getContext().createTextureAtlas({
image : image
});
billboards.setTextureAtlas(textureAtlas);
billboards.add({
position : ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-75.59777, 40.03883)),
imageIndex : 0
});
scene.getPrimitives().add(billboards);
};
// image.src = ‘…/images/Cesium_Logo_overlay.png’;
image.src = ‘…/images/my.svg’;
}
Let me know if there is a work around. I’m really using it in the dynamic scene.
UPDATE: Using Cesium 25b and Chrome 32.0.1700.107 does not get the bad image message anymore.
Not all is perfect yet. I’m trying to animate svg wind barbs and the images get piled on top of one another in Cesium (but not Firefox). Note all the images were the same height and width. If I change the height by one pixel so none of the images have the same height, it works perfectly.
Hi Ellen, Cesium is a fairly high-volume list, so it’s most likely that your original question just slipped through the cracks.
I just tested a simple use case and everything works as expected (as you pointed out in your update); but I need to better understand what your goal is in order to help you. When you say you are trying to animate wind barbs, what exactly does that mean? Do you have an animated SVG? Or are you trying to update an existing billboard with a new static image so give the appearance of animation? Or perhaps something else? Depending on the answer, there are several possible options to explore.
Matt
Hey Matt,
I’m using the Dynamic Scene to show wind barbs animating through time. See the attached example. I create the windbarb objects at same location but with different time interval and different images. If you run this in Firefox it works fine, but in Chrome the second interval shows both images.
I added a 3rd wind barb at a different location using the 2nd svg file, it displays the combined image. So its not an animation issue. But if I make the image 1 pixel different from first, the problem goes away.
Ellen
show_svg_problem.html (7.69 KB)
Ellen, I spent some time looking into this and was able to reproduce the problem by editing the html file and getting it to run on my system. At this time, I’m leaning to this being a Chrome bug related to SVGs, which unfortunately means there’s not much we can do about it in Cesium. The three things that lead me to this conclusion are: 1) The problem is not present in Firefox. 2) Cesium’s billboard support doesn’t have any SVG specific code in it, when using svgs we simply rely on the browser’s Image support. As a test, I converted the SVG files to PNGs (same size and transparency) and the problem seems to have gone away). and 3) The texture atlas we generate from the SVG has the overlapping image in it, which makes it very likely that Chrome itself is the one doing the overlapping. I did a quick search of existing Chromium issues in their repository but nothing popped out immediately. If I have some spare time, I may try and reproduce this in an even simpler test case, but I don’t have a solution for you that doesn’t involve not using SVGs.
1 Like
This has now been fixed in Chrome 47.
1 Like