Rendering many graphics to a SceneView causes entire browser to stutter

avecchi — Tue, 24 Aug 2021 19:28:50 GMT

Hello,

I am attempting to render around ~500 graphics at once to a SceneView using:

const view = new SceneView({...}) const graphics = [...arrayOfGraphics] view.set('graphics', graphics)

But whenever I do this, the entire browser hangs for a bit as you can see in the GIF below. I have an animated square in the top right corner to show that the stutter is affecting elements outside of the map container div.

Is there a better way for me to render a large amount of graphics to a SceneView at once? If there is no way to speed this up, is there at least a way to make it just halt the map and not halt the entire page?

Thank you

Re: Rendering many graphics to a SceneView causes entire browser to stutter

ReneRubalcava — Tue, 24 Aug 2021 19:47:17 GMT

You don't want to replace the graphics, you want to use view.graphics.addMany(graphics).

Not sure if this will fix the problem you are seeing, but is something to eliminate. Another option is to try using a client-side FeatureLayer.

Re: Rendering many graphics to a SceneView causes entire browser to stutter

avecchi — Tue, 24 Aug 2021 19:55:03 GMT

I am trying to clear and add all the graphics every time I need to add a new point to the line. I initially tried:

view.graphics.removeAll() view.graphics.addMany(graphics)

but I figured the 'set' operation was more efficient.

I just tried the FeatureLayer and it seems to experience the stutter as well.

Re: Rendering many graphics to a SceneView causes entire browser to stutter

ReneRubalcava — Tue, 24 Aug 2021 20:46:55 GMT

Do you have a sample to test against?

Re: Rendering many graphics to a SceneView causes entire browser to stutter

avecchi — Tue, 24 Aug 2021 22:00:05 GMT

<html> <head> <meta charset="utf-8" /> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <title>Add Graphics to a SceneView | Sample | ArcGIS API for JavaScript 4.18</title> <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light/main.css" /> <script src="https://js.arcgis.com/4.18/"></script> <script> const markerSymbol = { type: 'simple-marker', color: [0, 188, 238], outline: { color: [255, 255, 255], width: 2 } } const vertLineSymbol = { type: 'simple-line', color: [0, 188, 238], width: 2 } const connectingLineSymbol = { type: 'simple-line', color: [0, 188, 238], width: 4 } const fillSymbol = { type: 'simple-fill', color: [227, 139, 79, 0.8], outline: { color: [255, 255, 255], width: 1 } } require(['esri/Map', 'esri/views/SceneView', 'esri/Graphic'], function (Map, SceneView, Graphic) { const map = new Map({ basemap: 'hybrid', ground: 'world-elevation' }) const view = new SceneView({ container: 'viewDiv', map: map, center: { x: -105, y: 40.5 }, zoom: 10, environment: { atmosphere: { quality: 'high' } } }) const graphics = [] // Create points and vertical lines points.forEach(message => { const marker = { type: 'point', x: message.longitude, y: message.latitude, z: message.altitude } const polyline = { type: 'polyline', paths: [ [message.longitude, message.latitude, 0], [message.longitude, message.latitude, message.altitude] ] } const markerGraphic = new Graphic({ geometry: marker, symbol: markerSymbol }) const polylineGraphic = new Graphic({ geometry: polyline, symbol: vertLineSymbol }) graphics.push(markerGraphic) graphics.push(polylineGraphic) }) const stepPath = points.map(message => [message.longitude, message.latitude, message.altitude]) // Create connecting line const polyLine = { type: 'polyline', paths: stepPath } const polylineGraphic = new Graphic({ geometry: polyLine, symbol: connectingLineSymbol }) graphics.push(polylineGraphic) view.set('graphics', graphics) }) const points = [ { latitude: 40.268639, longitude: -105.239532, altitude: 1735 }, { latitude: 40.268639, longitude: -105.239525, altitude: 1736 }, { latitude: 40.268642, longitude: -105.239517, altitude: 1737 }, { latitude: 40.268639, longitude: -105.239525, altitude: 1736 }, { latitude: 40.268639, longitude: -105.239525, altitude: 1735 }, { latitude: 40.268642, longitude: -105.239517, altitude: 1735 }, { latitude: 40.268696, longitude: -105.239532, altitude: 1739 }, { latitude: 40.2686716, longitude: -105.2395486, altitude: 1758.8 }, { latitude: 40.268684, longitude: -105.239525, altitude: 1736 }, { latitude: 40.268692, longitude: -105.239532, altitude: 1738 }, { latitude: 40.2686584, longitude: -105.2395418, altitude: 1758.9 }, { latitude: 40.268696, longitude: -105.239525, altitude: 1740 }, { latitude: 40.268696, longitude: -105.239525, altitude: 1740 }, { latitude: 40.268696, longitude: -105.239532, altitude: 1740 }, { latitude: 40.2686878, longitude: -105.2395251, altitude: 1766.4 }, { latitude: 40.268696, longitude: -105.239525, altitude: 1740 }, { latitude: 40.268692, longitude: -105.239532, altitude: 1739 }, { latitude: 40.2686876, longitude: -105.2395438, altitude: 1762.9 }, { latitude: 40.268696, longitude: -105.239532, altitude: 1739 }, { latitude: 40.2686811, longitude: -105.2395461, altitude: 1772.9 }, { latitude: 40.269028, longitude: -105.239555, altitude: 1896 }, { latitude: 40.2703481, longitude: -105.2395359, altitude: 2182.2 }, { latitude: 40.271351, longitude: -105.239731, altitude: 2362 }, { latitude: 40.2704353, longitude: -105.2369653, altitude: 3015.7 }, { latitude: 40.270443, longitude: -105.236847, altitude: 2998 }, { latitude: 40.270771, longitude: -105.234909, altitude: 3142 }, { latitude: 40.2721376, longitude: -105.2313413, altitude: 3428.9 }, { latitude: 40.271618, longitude: -105.232353, altitude: 3304 }, { latitude: 40.273495, longitude: -105.229774, altitude: 3639 }, { latitude: 40.2810306, longitude: -105.2268993, altitude: 4291.6 }, { latitude: 40.2878613, longitude: -105.2249061, altitude: 4721.1 }, { latitude: 40.289284, longitude: -105.224312, altitude: 4776 }, { latitude: 40.292152, longitude: -105.222946, altitude: 4956 }, { latitude: 40.29525, longitude: -105.221115, altitude: 5150 }, { latitude: 40.2955886, longitude: -105.2208774, altitude: 5205.3 }, { latitude: 40.298389, longitude: -105.219467, altitude: 5355 }, { latitude: 40.302319, longitude: -105.218666, altitude: 5559 }, { latitude: 40.307102, longitude: -105.217392, altitude: 5765 }, { latitude: 40.311646, longitude: -105.215851, altitude: 5973 }, { latitude: 40.315693, longitude: -105.214058, altitude: 6178 }, { latitude: 40.323502, longitude: -105.208534, altitude: 6597 }, { latitude: 40.326744, longitude: -105.204979, altitude: 6819 }, { latitude: 40.330051, longitude: -105.201172, altitude: 7042 }, { latitude: 40.333675, longitude: -105.197052, altitude: 7281 }, { latitude: 40.336376, longitude: -105.194267, altitude: 7522 }, { latitude: 40.339565, longitude: -105.193069, altitude: 7762 }, { latitude: 40.342949, longitude: -105.190186, altitude: 8014 }, { latitude: 40.3439421, longitude: -105.1892593, altitude: 8122 }, { latitude: 40.346481, longitude: -105.187065, altitude: 8273 }, { latitude: 40.34919, longitude: -105.184631, altitude: 8526 }, { latitude: 40.3512223, longitude: -105.1823094, altitude: 8797.7 }, { latitude: 40.351391, longitude: -105.182114, altitude: 8785 }, { latitude: 40.35429, longitude: -105.178833, altitude: 9038 }, { latitude: 40.365768, longitude: -105.1614, altitude: 10084 }, { latitude: 40.366382, longitude: -105.1603456, altitude: 10154.7 }, { latitude: 40.369205, longitude: -105.155083, altitude: 10312 }, { latitude: 40.372887, longitude: -105.148636, altitude: 10546 }, { latitude: 40.3756538, longitude: -105.1436639, altitude: 10760.3 }, { latitude: 40.376339, longitude: -105.142181, altitude: 10784 }, { latitude: 40.379093, longitude: -105.135376, altitude: 11035 }, { latitude: 40.381668, longitude: -105.127632, altitude: 11316 }, { latitude: 40.3828998, longitude: -105.1246695, altitude: 11462.1 }, { latitude: 40.384285, longitude: -105.120384, altitude: 11600 }, { latitude: 40.387226, longitude: -105.113014, altitude: 11874 }, { latitude: 40.389935, longitude: -105.105347, altitude: 12146 }, { latitude: 40.3972498, longitude: -105.0813523, altitude: 12810.5 }, { latitude: 40.395294, longitude: -105.087288, altitude: 12641 }, { latitude: 40.402817, longitude: -105.068916, altitude: 13063 }, { latitude: 40.406723, longitude: -105.060928, altitude: 13260 }, { latitude: 40.410461, longitude: -105.054909, altitude: 13468 }, { latitude: 40.41415, longitude: -105.051651, altitude: 13689 }, { latitude: 40.4171438, longitude: -105.0483774, altitude: 13909.8 }, { latitude: 40.418064, longitude: -105.047554, altitude: 13925 }, { latitude: 40.42178, longitude: -105.043602, altitude: 14175 }, { latitude: 40.425121, longitude: -105.039368, altitude: 14439 }, { latitude: 40.4262571, longitude: -105.0377339, altitude: 14573.2 }, { latitude: 40.428093, longitude: -105.035156, altitude: 14709 }, { latitude: 40.432209, longitude: -105.031128, altitude: 14984 }, { latitude: 40.4523865, longitude: -105.0166285, altitude: 15791.5 }, { latitude: 40.454777, longitude: -105.01519, altitude: 15843 }, { latitude: 40.4594, longitude: -105.011459, altitude: 16112 }, { latitude: 40.464027, longitude: -105.004074, altitude: 16638 }, { latitude: 40.465012, longitude: -105.002281, altitude: 16866 }, { latitude: 40.467896, longitude: -105.000496, altitude: 17113 }, { latitude: 40.472107, longitude: -105.000778, altitude: 17337 }, { latitude: 40.476887, longitude: -105.002029, altitude: 17568 }, { latitude: 40.480232, longitude: -105.000748, altitude: 17792 }, { latitude: 40.4836951, longitude: -105.0001163, altitude: 18208.2 }, { latitude: 40.484028, longitude: -105.000214, altitude: 18198 }, { latitude: 40.491074, longitude: -105.006538, altitude: 18532 }, { latitude: 40.499554, longitude: -105.010216, altitude: 18826 }, { latitude: 40.507286, longitude: -105.013565, altitude: 18970 }, { latitude: 40.510838, longitude: -105.014557, altitude: 19030 }, { latitude: 40.5127075, longitude: -105.0147058, altitude: 19088.5 }, { latitude: 40.51384, longitude: -105.014687, altitude: 19070 }, { latitude: 40.516541, longitude: -105.014671, altitude: 19100 }, { latitude: 40.518795, longitude: -105.014915, altitude: 19112 }, { latitude: 40.5192313, longitude: -105.0150189, altitude: 19146.7 }, { latitude: 40.520802, longitude: -105.015549, altitude: 19120 }, { latitude: 40.5240355, longitude: -105.0169623, altitude: 19177.2 }, { latitude: 40.524391, longitude: -105.017105, altitude: 19146 }, { latitude: 40.526184, longitude: -105.017899, altitude: 19148 }, { latitude: 40.528011, longitude: -105.018555, altitude: 19138 }, { latitude: 40.5339031, longitude: -105.0203338, altitude: 19130 }, { latitude: 40.542011, longitude: -105.023666, altitude: 19071 }, { latitude: 40.545967, longitude: -105.025291, altitude: 19079 }, { latitude: 40.547989, longitude: -105.026024, altitude: 19072 }, { latitude: 40.566513, longitude: -105.031151, altitude: 19123 }, { latitude: 40.5689581, longitude: -105.0321183, altitude: 19155.8 }, { latitude: 40.570229, longitude: -105.032639, altitude: 19126 }, { latitude: 40.572201, longitude: -105.033546, altitude: 19134 }, { latitude: 40.574203, longitude: -105.034622, altitude: 19139 }, { latitude: 40.589756, longitude: -105.04213, altitude: 19066 }, { latitude: 40.5995501, longitude: -105.0423199, altitude: 19063.5 }, { latitude: 40.603951, longitude: -105.041885, altitude: 19012 }, { latitude: 40.6075194, longitude: -105.0415395, altitude: 19027.8 }, { latitude: 40.60704, longitude: -105.041565, altitude: 18996 }, { latitude: 40.610153, longitude: -105.041306, altitude: 18986 }, { latitude: 40.613277, longitude: -105.0411, altitude: 18972 }, { latitude: 40.626862, longitude: -105.042076, altitude: 18914 }, { latitude: 40.630589, longitude: -105.043106, altitude: 18894 }, { latitude: 40.6346523, longitude: -105.0444858, altitude: 18902.7 }, { latitude: 40.634327, longitude: -105.04435, altitude: 18874 }, { latitude: 40.649338, longitude: -105.049538, altitude: 18778 }, { latitude: 40.680386, longitude: -105.058273, altitude: 18675 }, { latitude: 40.685192, longitude: -105.059662, altitude: 18655 }, { latitude: 40.690136, longitude: -105.061066, altitude: 18647 }, { latitude: 40.695107, longitude: -105.062508, altitude: 18640 }, { latitude: 40.7146, longitude: -105.066925, altitude: 18575 }, { latitude: 40.719265, longitude: -105.067474, altitude: 18559 }, { latitude: 40.723976, longitude: -105.068016, altitude: 18523 }, { latitude: 40.736103, longitude: -105.073372, altitude: 17813 }, { latitude: 40.738789, longitude: -105.072586, altitude: 17490 }, { latitude: 40.744152, longitude: -105.073166, altitude: 17165 }, { latitude: 40.747898, longitude: -105.070702, altitude: 16799 }, { latitude: 40.74987, longitude: -105.068321, altitude: 16357 }, { latitude: 40.755531, longitude: -105.060982, altitude: 15407 }, { latitude: 40.759731, longitude: -105.055428, altitude: 14946 }, { latitude: 40.777832, longitude: -105.036011, altitude: 13317 }, { latitude: 40.781601, longitude: -105.027107, altitude: 12943 }, { latitude: 40.785397, longitude: -105.017151, altitude: 12571 }, { latitude: 40.789516, longitude: -105.007607, altitude: 12197 }, { latitude: 40.793633, longitude: -105.000565, altitude: 11829 }, { latitude: 40.797295, longitude: -104.995094, altitude: 11465 }, { latitude: 40.800182, longitude: -104.989929, altitude: 11113 }, { latitude: 40.802456, longitude: -104.984604, altitude: 10756 }, { latitude: 40.805653, longitude: -104.979118, altitude: 10399 }, { latitude: 40.80994, longitude: -104.974251, altitude: 10050 }, { latitude: 40.82032, longitude: -104.963829, altitude: 9362 }, { latitude: 40.825367, longitude: -104.960938, altitude: 9026 }, { latitude: 40.830486, longitude: -104.958206, altitude: 8686 }, { latitude: 40.8349, longitude: -104.955833, altitude: 8360 }, { latitude: 40.839096, longitude: -104.953575, altitude: 8061 }, { latitude: 40.844311, longitude: -104.950172, altitude: 7766 }, { latitude: 40.849205, longitude: -104.946877, altitude: 7487 }, { latitude: 40.853397, longitude: -104.943626, altitude: 7200 }, { latitude: 40.857365, longitude: -104.941017, altitude: 6913 }, { latitude: 40.861279, longitude: -104.938622, altitude: 6589 }, { latitude: 40.864994, longitude: -104.936195, altitude: 6278 }, { latitude: 40.868446, longitude: -104.934349, altitude: 5991 }, { latitude: 40.871861, longitude: -104.932014, altitude: 5717 }, { latitude: 40.875134, longitude: -104.930138, altitude: 5468 }, { latitude: 40.878098, longitude: -104.929001, altitude: 5212 }, { latitude: 40.880951, longitude: -104.928192, altitude: 4960 }, { latitude: 40.88319, longitude: -104.927895, altitude: 4710 }, { latitude: 40.885307, longitude: -104.92765, altitude: 4458 }, { latitude: 40.887836, longitude: -104.927071, altitude: 4218 }, { latitude: 40.890076, longitude: -104.926125, altitude: 3977 }, { latitude: 40.891754, longitude: -104.925194, altitude: 3741 }, { latitude: 40.892826, longitude: -104.924026, altitude: 3501 }, { latitude: 40.892277, longitude: -104.919189, altitude: 2568 }, { latitude: 40.891285, longitude: -104.919434, altitude: 2321 }, { latitude: 40.890442, longitude: -104.919769, altitude: 2072 }, { latitude: 40.890438, longitude: -104.919518, altitude: 1825 } ] </script> <style> html, body, #viewDiv { padding: 0; margin: 0; height: 100%; width: 100%; } #overlayDiv { position: absolute; top: 0; bottom: 0; right: 0; left: 0; pointer-events: none; } .box { animation-name: alertDanger; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; background-color: white; position: absolute; right: 0; top: 0; width: 100px; height: 100px; } @keyframes alertDanger { 0% { background: red; } 50% { background: white; } } </style> </head> <body> <div id="viewDiv"></div> <div id="overlayDiv"><div class="box"></div></div> </body> </html>

Re: Rendering many graphics to a SceneView causes entire browser to stutter

RalucaNicola1 — Thu, 02 Sep 2021 09:57:54 GMT

hey, an improvement would be to define the symbols using the class and not by autocasting. When using a class it will reuse the symbol instance for each graphic and when you use autocasting it will create a new symbol and that might lead to poor performance. I updated your app here: https://codepen.io/ralucanicola/pen/wveGxQm?editors=1000 can you try it out and let us know how it performs for you?

topic Re: Rendering many graphics to a SceneView causes entire browser to stutter in ArcGIS JavaScript Maps SDK Questions

Rendering many graphics to a SceneView causes entire browser to stutter

Re: Rendering many graphics to a SceneView causes entire browser to stutter

Re: Rendering many graphics to a SceneView causes entire browser to stutter

Re: Rendering many graphics to a SceneView causes entire browser to stutter

Re: Rendering many graphics to a SceneView causes entire browser to stutter

Re: Rendering many graphics to a SceneView causes entire browser to stutter