Performance with small polygons in 3D mode

I’ve noticed a massive performance drop zooming / panning about 10 000 polygons (just material and outline color) in 3D mode. When I switch to 2D, user actions such as zooming / panning is seamless with a good frame rate. The data is fairly small polygons and only visible below 200 meters. These geometries are added as entities (not primitives) as interaction such as selection is required. Must be stated that for testing purposes, we only used one data source and manually added the geometries as entities. Secondly, we switched over to czml, streaming packets, and yet get the same sluggish behavior. Must be noted that it is only on very low zoom levels (below 200 meters). Data is just added, without any blocking callbacks / events on a entity. Also, standard configuration of the viewer and scene is used, without terrain modeling.

Current configuration:

Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(0.0, -90.0, 45.0, 90.0);

  _viewer = new Cesium.Viewer("cesiumContainer", {

timeline: false,

animation: false,

baseLayerPicker: false,

mapMode2D: Cesium.MapMode2D.ROTATE,

homeButton: false,

fullscreenButton: false,

geocoder: false,

selectionIndicator: true,

infoBox: false,

sceneModePicker: false,

navigationHelpButton: false,

imageryProvider: basemapProvider,

navigationInstructionsInitiallyVisible: false

});

var imageryLayers = _viewer.scene.imageryLayers;

var layer = imageryLayers.get(0);

layer.brightness = 1.66;

layer.contrast = 0.98;

layer.hue = 0;

layer.saturation = 0.12;

layer.gamma = 0.64;

_viewer.scene.debugShowFramesPerSecond = true;

_viewer.scene.skyBox.show = false;

_viewer.scene.sun.show = false;

_viewer.scene.moon.show = false;

_viewer.scene.skyAtmosphere.show = false;

_viewer.scene.globe.enableLighting = false;

_viewer.scene.globe.baseColor = Cesium.Color.BLACK;

_viewer.scene.globe.showWaterEffect = false;

_viewer.scene.fog.enabled = false;

``

For example, here a sample of a polygon:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var smallPolygon = viewer.entities.add({

name : 'Red polygon on surface',

polygon : {

    hierarchy : Cesium.Cartesian3.fromDegreesArray([

        27.2747099421817, -25.60108977515325,

        27.274709150589174, -25.601113652028488,

        27.27472252196618, -25.601136392020674,

        27.2747224601031, -25.601174664970276,

        27.274735483425083, -25.601175777853587,

        27.274747320254114, -25.60117171169012,

        27.27480902991559, -25.60115443613326,

        27.274851417384834, -25.6011371336864,

        27.274900758640445, -25.601117841325756,

        27.27492124935889, -25.60111084328236,

        27.274939898269473, -25.601108118286657,

        27.274993484092036, -25.60109052394304,

        27.275028164504903, -25.60108537673233,

        27.275054080340446, -25.601086997906502,

        27.275062098454974, -25.601128153198367,

        27.27506835401938, -25.60112990161953,

        27.27507483777725, -25.601126964799768,

        27.275071461303934, -25.601056554555057,

        27.2750718196103, -25.60102172018674,

        27.27507936103499, -25.60101116291679,

        27.275096311518336, -25.601001418392602,

        27.275094710012627, -25.60098889246872,

        27.27508925501885, -25.60097157163726,

        27.275087367389122, -25.600951463897686,

        27.275089145387877, -25.600928009415334,

        27.27508313718588, -25.60083858504905,

        27.275076372390273, -25.600845476722813,

        27.2750666706811, -25.600855360391964,

        27.275066491536432, -25.600890185397396,

        27.27506937018571, -25.600951858820245,

        27.275070524925716, -25.60099101408948,

        27.275071156207044, -25.600994081082547,

        27.275053781858926, -25.600995694291356,

        27.27505117223284, -25.60097328612354,

        27.27503839350152, -25.60097029527289,

        27.275015390831466, -25.60097580866637,

        27.274996161847223, -25.600977343249827,

        27.27498403908589, -25.600982601483853,

        27.274925681804482, -25.60099879664417,

        27.274879334314992, -25.601016927978836,

        27.274872789605293, -25.601023683161305,

        27.27485514686277, -25.601031082041924,

        27.274826020267152, -25.601040181455424,

        27.274819749228648, -25.60104472460128,

        27.274800623388007, -25.601047838622282,

        27.274754225821276, -25.60105714198523,

        27.2747369454194, -25.601057571626473,

        27.274733949365757, -25.60105580632495,

        27.2747099421817, -25.60108977515325]),

    material: Cesium.Color.WHITE.withAlpha(0.5),

    height: 0,

    outline: true,

    outlineColor: Cesium.Color.WHITE

}

});

viewer.zoomTo(viewer.entities);

``

Just a few questions on this:

  1. I’ve read through the documentation / forums and tried various performance tweaking, but still get slow user interaction with regards to panning / zooming. Since the user experience in 2D is great, what would cause this in 3D? Don’t think it’s related to the amount of data (geometries). Should I rather switch to primitives, and discard entities?
  2. There is a bug on the mouse wheel when zooming in on these smaller polygons, where it just all the sudden snaps to the opposite side of the globe. Any tips to prevent this? The delta on the mouse-wheel on such a low levels is also not ideal.
  3. What would cause this semi-transparent circle in the center of the screen? See attached image. Is it part of some internal diagnostics? Verified on Firefox and Chrome (latest versions)
    I’m using the latest version (1.30)…

Any advice / tips for improvement will be appreciated.

Andries

Hello,

  1. I’ve read through the documentation / forums and tried various performance tweaking, but still get slow user interaction with regards to panning / zooming. Since the user experience in 2D is great, what would cause this in 3D? Don’t think it’s related to the amount of data (geometries). Should I rather switch to primitives, and discard entities?

I’m surprised you’re seeing better performance in 2D than 3D. I haven’t seen that issue before. I don’t think switching to primitives would give you any better performance, the entity layer uses the primitive layer optimally. You can try using a higher granularity to see if that helps.

  1. There is a bug on the mouse wheel when zooming in on these smaller polygons, where it just all the sudden snaps to the opposite side of the globe. Any tips to prevent this? The delta on the mouse-wheel on such a low levels is also not ideal.

We just fixed this bug and it will be included in the 1.31 release available on March 1st

3.What would cause this semi-transparent circle in the center of the screen? See attached image. Is it part of some internal diagnostics? Verified on Firefox and Chrome (latest versions)

That circle looks like a multi-frustum artifact to me. I haven’t seen something like that come up recently in our testing, do you have a code example that reproduces that?

Best,

Hannah

Hi Hannah,

Appreciate the feedback. Before we start tweaking settings such granularity on polygons, please look at the file (GeoJSON, about 10Mb) shared for illustration purposes. Unfortunately the file size is slightly bigger than allowed in the forums… What is important is than cesium struggles with the actual geometries, and is not related to the data source itself (ie GeoJSON, CZML, or manually adding entities and / or primitives). The link to the file below contains about 10K polygons, which are pretty small:

https://drive.google.com/drive/folders/0B6E-SIBD0O8kSGE0WVBRNDE3N00?usp=sharing

This affects general user interaction such as panning and zooming in 3D, and is very sluggish and slow. When switching to 2D, general performance is much better. Although I do get the occasional error zooming:

An error occurred while rendering. Rendering has stopped.

RangeError: Maximum call stack size exceeded

RangeError: Maximum call stack size exceeded

at updateMembers (http://…/CesiumUnminified/Cesium.js:141796:27)

at Camera.get (http://…/CesiumUnminified/Cesium.js:142047:17)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168381:31)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

at createPotentiallyVisibleSet (http://…/CesiumUnminified/Cesium.js:168525:13)

``

So in essence:

3D:

Slow performance (not loading, but navigation interaction) and issues with computing multiple frustums

2D:

Maximum call stack size exceeded

I’ve used the default initialization settings for the viewer and globe and everything is pretty much stock standard compared the sandcastle demos, without any callbacks / events.

Any advice would greatly be appreciated.

Regards,

Andries

Hi Andries,

Yes, I do see the same performance problems with that GeoJSON file. With that many polygons, I think it’s reaching the limits of the browser memory which is why performance is slow.

For large datasets like this, the better solution will be to use the 3D Tiles vector format. You can learn more about 3D tiles in this forum post: https://groups.google.com/d/msg/cesium-dev/tCCooBxpZFU/7hxT_E4pGgAJ

Best,

Hannah

Ok, thanks for the heads-up. Pitty the 3D Tiles vector format is still in progress…

Just find it strange that in the older versions (1.28) , using the same data sets, I didn’t have any issues. Something have definitely changed (1.30) and is causing performance issues. This includes the behavior noticed on multiple frustum artifacts.

Cheers,

Andries

Oh sorry, I didn’t realize this was a regression. That’s something we can try to look into. However, I checked out 1.28 and I see about the same performance on my computer. What browser, OS and graphics card are you using?

-Hannah

Hi Hannah,

I’ve performed extensive profiling / testing on versions ranging from 1.26 to 1.31, and can confirm that the issue is not related to any breaking changes or enhancements from cesium. Initially I thought it was the amount of polygons rendered, but even reducing them to about 50 polygons (with a constant height), my fps drop to 10 - 15 zooming to lower levels. They do have transparency (30%) on the material with a solid outline color. What I find very strange is that testing the rendering remotely on other machines, with a similar spec, the performance is great with an average 60 fps.This means the issue is isolated to my machine and not related to cesium.

What really bothers me as well is the circle I get dead center in the middle of my screen zooming in / out. I’ve attached the webgl report for illustration. This has been tested on the latest version of chrome and firefox, yielding the same results.

Machine Specifications:

Windows 10 (64 bit)

16GB RAM

AMD Radeon HD 7570M

Chrome settings with /gpu flag:

Graphics Feature Status

  • Canvas: Hardware accelerated
  • Flash: Hardware accelerated
  • Flash Stage3D: Hardware accelerated
  • Flash Stage3D Baseline profile: Hardware accelerated
  • Compositing: Hardware accelerated
  • Multiple Raster Threads: Enabled
  • Native GpuMemoryBuffers: Software only. Hardware acceleration disabled
  • Rasterization: Hardware accelerated
  • Video Decode: Hardware accelerated
  • Video Encode: Hardware accelerated
  • VPx Video Decode: Hardware accelerated
  • WebGL: Hardware accelerated
  • WebGL2: Hardware accelerated

Driver Bug Workarounds

  • clear_uniforms_before_first_program_use
  • disable_discard_framebuffer
  • disable_dxgi_zero_copy_video
  • disable_framebuffer_cmaa
  • disable_nv12_dxgi_video
  • exit_on_context_lost
  • force_cube_complete
  • scalarize_vec_and_mat_constructor_args
  • texsubimage_faster_than_teximage

Problems Detected

  • Some drivers are unable to reset the D3D device in the GPU process sandbox
    Applied Workarounds: exit_on_context_lost
  • TexSubImage is faster for full uploads on ANGLE
    Applied Workarounds: texsubimage_faster_than_teximage
  • Clear uniforms before first program use on all platforms: 124764, 349137
    Applied Workarounds: clear_uniforms_before_first_program_use
  • Always rewrite vec/mat constructors to be consistent: 398694
    Applied Workarounds: scalarize_vec_and_mat_constructor_args
  • ANGLE crash on glReadPixels from incomplete cube map texture: 518889
    Applied Workarounds: force_cube_complete
  • Framebuffer discarding can hurt performance on non-tilers: 570897
    Applied Workarounds: disable_discard_framebuffer
  • NV12 DXGI video hangs or displays incorrect colors on AMD drivers: 623029, 644293
    Applied Workarounds: disable_dxgi_zero_copy_video, disable_nv12_dxgi_video
  • Limited enabling of Chromium GL_INTEL_framebuffer_CMAA: 535198
    Applied Workarounds: disable_framebuffer_cmaa
  • Native GpuMemoryBuffers have been disabled, either via about:flags or command line.
    Disabled Features: native_gpu_memory_buffers

Version Information

Data exported
3/2/2017, 6:55:09 PM
Chrome version
Chrome/56.0.2924.87
Operating system
Windows NT 10.0.14393
Software rendering list version
0
Driver bug list version
9.24
ANGLE commit id
a4aaa2de57dc
2D graphics backend
Skia/56 bf2d9e02d58ea01f1c239f7e2fc024cba140ccb1
Command Line Args
Files (x86)\Google\Chrome\Application\chrome.exe" --flag-switches-begin --enable-gpu-rasterization --ignore-gpu-blacklist --flag-switches-end

Driver Information

Initialization time
55
In-process GPU
false
Sandboxed
false
GPU0
VENDOR = 0x1002, DEVICE= 0x6841
Optimus
false
AMD switchable
false
Desktop compositing
Aero Glass
Diagonal Monitor Size of \.\DISPLAY1
15.5"
Driver vendor
Advanced Micro Devices, Inc.
Driver version
15.201.1301.0
Driver date
8-19-2015
Pixel shader version
5.0
Vertex shader version
5.0
Max. MSAA samples
8
Machine model name
Machine model version
GL_VENDOR
Google Inc.
GL_RENDERER
ANGLE (AMD Radeon HD 7570M Direct3D11 vs_5_0 ps_5_0)
GL_VERSION
OpenGL ES 3.0 (ANGLE 2.1.0.a4aaa2de57dc)
GL_EXTENSIONS
GL_ANGLE_depth_texture GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_float GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_norm16 GL_EXT_texture_rg GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_EGL_image_external_essl3 GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_texture_float GL_OES_texture_float_linear GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object
Disabled Extensions
Window system binding vendor
Google Inc. (adapter LUID: 00000000009163d7)
Window system binding version
1.4 (ANGLE 2.1.0.a4aaa2de57dc)
Window system binding extensions
EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture_nv12 EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource
Direct rendering
Yes
Reset notification strategy
0x8252
GPU process crash count
0

Compositor Information

Tile Update Mode
One-copy
Partial Raster
Enabled

GpuMemoryBuffers Status

ATC
Software only
ATCIA
Software only
DXT1
Software only
DXT5
Software only
ETC1
Software only
R_8
Software only
RG_88
Software only
BGR_565
Software only
RGBA_4444
Software only
RGBX_8888
Software only
RGBA_8888
Software only
BGRX_8888
Software only
BGRA_8888
Software only
YVU_420
Software only
YUV_420_BIPLANAR
Software only
UYVY_422
Software only

Diagnostics

0
b3DAccelerationEnabled
true
b3DAccelerationExists
true
bAGPEnabled
true
bAGPExistenceValid
true
bAGPExists
true
bCanRenderWindow
true
bDDAccelerationEnabled
true
bDriverBeta
false
bDriverDebug
false
bDriverSigned
false
bDriverSignedValid
false
bNoHardware
false
dwBpp
32
dwDDIVersion
11
dwHeight
900
dwRefreshRate
60
dwWHQLLevel
0
dwWidth
1600
iAdapter
0
lDriverSize
1498112
lMiniVddSize
0
szAGPStatusEnglish
Enabled
szAGPStatusLocalized
Enabled
szChipType
AMD Radeon Graphics Processor (0x6841)
szD3DStatusEnglish
Enabled
szD3DStatusLocalized
Enabled
szDACType
Internal DAC(400MHz)
szDDIVersionEnglish
11.2
szDDIVersionLocalized
11.2
szDDStatusEnglish
Enabled
szDDStatusLocalized
Enabled
szDXVAHDEnglish
Not Supported
szDXVAModes
ModeMPEG2_A ModeMPEG2_C
szDescription
AMD Radeon HD 7570M
szDeviceId
0x6841
szDeviceIdentifier
{D7B71EE2-2B01-11CF-F076-A337BEC2C535}
szDeviceName
\.\DISPLAY1
szDisplayMemoryEnglish
4844 MB
szDisplayMemoryLocalized
4844 MB
szDisplayModeEnglish
1600 x 900 (32 bit) (60Hz)
szDisplayModeLocalized
1600 x 900 (32 bit) (60Hz)
szDriverAssemblyVersion
15.201.1301.0
szDriverAttributes
Final Retail
szDriverDateEnglish
8/19/2015 2:00:00 AM
szDriverDateLocalized
8/19/2015 02:00:00
szDriverLanguageEnglish
English
szDriverLanguageLocalized
English
szDriverModelEnglish
WDDM 1.3
szDriverModelLocalized
WDDM 1.3
szDriverName
aticfx64.dll,aticfx64.dll,aticfx64.dll,amdxc64.dll
szDriverNodeStrongName
oem18.inf:cb0ae4147bfe0e8d:ati2mtag_R476:15.201.1301.0:pci\ven_1002&dev_6841&subsys_17a9103c
szDriverSignDate
Unknown
szDriverVersion
8.17.0010.1404
szKeyDeviceID
Enum\PCI\VEN_1002&DEV_6841&SUBSYS_17A9103C&REV_00
szKeyDeviceKey
\Registry\Machine\System\CurrentControlSet\Control\Video{203F55A9-F377-4A88-A131-3BF60253E0CF}\0000
szManufacturer
Advanced Micro Devices, Inc.
szMiniVdd
unknown
szMiniVddDateEnglish
Unknown
szMiniVddDateLocalized
unknown
szMonitorMaxRes
Unknown
szMonitorName
Generic PnP Monitor
szNotesEnglish
No problems found.
szNotesLocalized
No problems found.
szOverlayEnglish
Not Supported
szRankOfInstalledDriver
00D10001
szRegHelpText
Unknown
szRevision
Unknown
szRevisionId
0x0000
szSubSysId
0x17A9103C
szTestResultD3D7English
Not run
szTestResultD3D7Localized
Not run
szTestResultD3D8English
Not run
szTestResultD3D8Localized
Not run
szTestResultD3D9English
Not run
szTestResultD3D9Localized
Not run
szTestResultDDEnglish
Not run
szTestResultDDLocalized
Not run
szVdd
unknown
szVendorId
0x1002

Log Messages

  • GpuProcessHostUIShim: The GPU process exited normally. Everything is okay.

``

My graphics card driver is up to date with the latest version using hardware acceleration. We develop low level graphics for desktop applications using DX11 / DX12 and have not had any issues on my machine. We really like cesium and would like to use it, but I’m pulling my hair out at the moment and would like any advice / guidance. Unfortunately my knowledge with WebGL is a bit limited.

What I did not mention is that I’ve also added the WebGL Inspector as an extension in chrome for diagnostics, and what makes me bash my head on the table is that the moment I enable the inspector in the browser, the problems go away (fps goes up, performance is great and the dreaded circle in the center disappears). If I disable it again, I’m stuck with the same issues.

Not sure what to look for next? Any other tools I can use, or perhaps something you noticed in the information I provided above?

Cheers,

Andries

Sorry, but I’m not sure what is causing that artifact. I wasn’t able to reproduce that problem on my machine. I’ll see if someone else on the team with an AMD graphics card is able to see this.

-Hannah

Attached gpu settings as document, since information got truncated in previous post…

gpu.pdf (213 KB)

Hannah, the issue can also be reproduced in sandcastle on v1.31 using one of the existing samples:

Spheres and Ellipsoids

I’ve attached a screen shot as illustration… Something is interfering with the frustum artifacts and causing performance issues.

Attachments does not like spaces in the file name. Re-uploaded.

Hi Andries,

Have you tried updating your graphics card driver? The GPU settings you posted has a driver date of 8-19-2015.

Dan

I’ve also experienced a lot of slowness for a couple months now. I have an AMD graphics card and with bootcamp the drivers are stuck at about that same date. One thing that helps a lot for me is using Chrome Canary, which leads me to think there is some strange regression when using regular Chrome + old AMD drivers.

The support on this forum is fantastic! Thanks for all the feedback.

Earlier I tried disabling OIT (Order Independent Translucency), which removed the dreaded circle (perhaps causing issues with the frustum artifacts) and upping the fps drastically, but this caused issues with zooming to lower levels using the mouse wheel. Could be a problem with calculating the z-buffer / depth on my machine… I know three.js had similar issues.

I followed Sean’s advice, and indeed after installing / using Chrome Canary, all my issues disappeared. Excellent performance…

Thanks all!