rectangle primitive with image material causes large drop in frame rate when displayed

CesiumJS
1

I’m seeing some performance issues when I display an image in a rectangle primitive. Whenever the rectangle is visible, the frame rate drops significantly. It doesn’t appear to be CPU bound based on the chrome profiler, and the system CPU reports low usage (< 10%). When the rectangle is on the other side of the globe and no longer visible, the frame rate picks back up. This drop in framerate happens even if I don’t have any other custom primitives added. The image is small (54x25) and less than one KB. I have also tried swapping it for a PNG of the same image.

Any suggestions?

var material = Cesium.Material.fromType(‘Image’);
material.uniforms.image = ‘Capture.gif’;
rectangle = new Cesium.RectanglePrimitive({
rectangle : Cesium.Rectangle.fromDegrees(-80.0, 20.0, -75.0, 25.0),
material: material
});
window.viewer.scene.primitives.add(rectangle);

2

I wouldn’t expect this. Have you tried Chrome and Firefox? What is the video card? Are the drivers up to date? How is performance if you use the default material? What if you change the texture to be a power-of-two, e.g., 32x32?

I don’t think it is related, but you could also try this: https://groups.google.com/forum/#!searchin/cesium-dev/oit/cesium-dev/AV6la4vZzwM/ch9pZYbJcRIJ

Patrick

3

Thanks for the ideas. I’m primarily doing this in Chrome. Firefox has poor framerates for me either way and doesn’t appear to get any worse when I add the image. My graphics card is a Radeon HD 6450. The driver was older, but I just updated it to the beta one that came out this month. I’ll try adjusting back to default material and the dimension change and will report back.

4

The default material is still slow, as is a 32x32 image. However, if I make a Color material with a 1.0 opacity, that works with no noticeable slowdown:

material = Cesium.Material.fromType(‘Color’);

material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

If the slowdown is because of the less than 1 opacity, I suppose it could be due to trying to check the image for alpha channel information. I’ll try playing with the image and maybe load it from a JPG where there wouldn’t be any.

5

The driver is switching to software rendering (I would not expect it on that card though). Try the workaround I sent earlier: https://groups.google.com/forum/#!searchin/cesium-dev/oit/cesium-dev/AV6la4vZzwM/ch9pZYbJcRIJ

Patrick

6

Using a JPG was still slow. I don’t know how to tell if the image slowness is from the same thing as the slowness from the lower opacity.

7

Also, another workaround is to use the ‘Diffuse’ material, which does not have an alpha channel. Just replace ‘Image’ with ‘Diffuse’

Patrick

8

Having scene._oit.isSupported return false works very nicely. Thanks for the help!

Changing it to diffuse did not improve the framerate, but I shouldn’t need it with the other fix working.