title: How to avoid loading low-detail imagery in Cesium?
body: <p><strong>Background</strong></p>
  
  <p>I'm using <a href="https://cesiumjs.org/" rel="nofollow noreferrer">Cesium</a> to run a simulation while capturing images with <code>Viewer.canvas.toDataURL</code>. The simulation has some action in it, and I would like the map imagery to be completely loaded when the action starts. However, for the first few renders, the imagery is always very low detail.</p>
  
  <p>I only want to capture images at 15fps, so I render at most 15fps, for the sake of efficiency. The problem is that imagery starts low-detail and only updates when I render. It takes around 75 renders for the high-detail imagery to load, meaning that the first ~5 seconds of output images are rendered with low-detail imagery.</p>
  
  <p><strong>Question</strong></p>
  
  <p>I would like to reduce the number of output images with low-detail imagery to less than 15, ideally 0.</p>
  
  <p>How can I </p>
  
  <p>a) pre-load the imagery so that it's completely loaded by the time I start rendering</p>
  
  <p>or</p>
  
  <p>b) use the time in between renders to load the imagery, so that I minimize the number of frames with low-detail imagery?</p>
  
  <p>Or maybe there is another solution I haven't thought of yet.</p>
  
  <p><strong>Things I've tried</strong></p>
  
  <p>1) I've tried restricting the area of the imagery provider, to load fewer images. This causes no discernible change, and in fact it does not cause any change to <code>Viewer.imageryLayers._layers[0]._imageryProvider.rectangle</code>.</p>
  
  <pre><code>var Viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: Cesium.BingMapsImageryProvider({
      url: 'https://dev.virtualearth.net',
      rectangle: Cesium.Rectangle.fromDegrees(
        Params.Lon - 5, Params.Lat - 5, Params.Lon + 5, Params.Lat - 5)
    })
  </code></pre>
  
  <p>2) I've tried raising the <code>minimumLevel</code> of the imagery provider, hoping that would prevent it from loading the low-detail imagery at all. Again, this doesn't fix the problem and <code>Viewer.imageryLayers._layers[0]._imageryProvider.minimumLevel</code> is unaffected, always 0.</p>
  
  <pre><code>var Viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: Cesium.BingMapsImageryProvider({
      url: 'https://dev.virtualearth.net',
      minimumLevel: 15
    })
  });
  </code></pre>
  
  <p><strong>Minimal working example</strong></p>
  
  <pre><code>var Viewer = new Cesium.Viewer('cesiumContainer')
  Viewer.useDefaultRenderLoop = false;
  
  var CameraTarget = new Cesium.ConstantPositionProperty(
    new Cesium.Cartesian3(
      -1673357.9867530654,
      -4597650.657420824,
      4077993.9927027463
    )
  );
  var CameraOffset = new Cesium.ConstantPositionProperty(
    new Cesium.Cartesian3(20, 2, 15)
  );
  
  var RenderInterval = 1 / 15; // seconds
  var TimeDelta = 0;
  var LastRenderTime = 0;
  
  function ScreenCapture()
  {
    console.log('capture');
  }
  
  function Render()
  {
    var CurrentTime = Viewer.clock.currentTime.secondsOfDay;
    var TimeDelta = CurrentTime - LastRenderTime;
    if (TimeDelta &gt; RenderInterval)
    {
      Viewer.camera.lookAt(
        CameraTarget.getValue(Viewer.clock.currentTime),
        CameraOffset.getValue(Viewer.clock.currentTime)
      );
      Viewer.render();
      LastRenderTime = CurrentTime;
    }
    else
    {
      Viewer.clock.tick();
    }
  
    Cesium.requestAnimationFrame(Render);
  }
  Cesium.requestAnimationFrame(Render);
  </code></pre>