Community

Rendering many graphics to a SceneView causes entire browser to stutter

902
5
08-24-2021 12:28 PM
avecchi
by
New Contributor II
‎08-24-2021 12:28 PM

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.

stutter.gif

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

0 Kudos
5 Replies
ReneRubalcava
by
Frequent Contributor
‎08-24-2021 12:47 PM

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.

0 Kudos
avecchi
by
New Contributor II
‎08-24-2021 12:55 PM

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.  

0 Kudos
ReneRubalcava
by
Frequent Contributor
‎08-24-2021 01:46 PM

Do you have a sample to test against?

0 Kudos
avecchi
by
New Contributor II
‎08-24-2021 03:00 PM 
<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>
0 Kudos
RalucaNicola1
by Esri Contributor
Esri Contributor
‎09-02-2021 02:57 AM

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?

0 Kudos