Make the renderer work without a loop

[liberostelios]

In the current examples, you use a loop to render the scene. I believe that there are many use cases for the renderer that do not really require a loop and a more conservative strategy (like only rendering when orbiting or due to certain events) would benefit performance and, mostly, energy efficiency (especially for laptops and mobile devices).

I've experimented with this and for the most part it works fine. Thanks to the onLoadModel event, you can force three.js to render every time a new tile is a available. Unfortunately, the problem is at the first load of the page. When you create the instance of the renderer, you have to wait for it to receive and parse the tileset json and then run a couple of renders before it fires up.

Maybe this could be fixed by firing an event when the tileset response arrives and the parsing is done? It's, also, unclear how many times you need to update the renderer before it starts downloading the actual tiles. Sometimes it need two updates, I think.

[gkjohnson]

Maybe this could be fixed by firing an event when the tileset response arrives and the parsing is done? It's, also, unclear how many times you need to update the renderer before it starts downloading the actual tiles. Sometimes it need two updates, I think.

It's at least twice. The first call to update will trigger the download of the tileset.json and once that's downloaded the next call will traverse the tileset and download the tiles.

I think this is a good idea -- I've been debouncing a render with the onLoadModel callback but it doesn't handle the tileset case. What were you thinking in terms of API? Something like tiles.onLoadTileset?

let needsRerender = false;
tiles.onLoadModel = () => needsRerender = true;
tiles.onLoadTileset = () => needsRerender = true;

function renderLoop() {
  
  requestAnimationFrame(renderLoop);
  if ( needsRerender ) {

    tiles.update();
    renderer.render( scene, camera );

  }

}

[liberostelios]

I think this is a good idea -- I've been debouncing a render with the onLoadModel callback but it doesn't handle the tileset case. What were you thinking in terms of API? Something like tiles.onLoadTileset?

Yes, I think that would work.

let needsRerender = false;
tiles.onLoadModel = () => needsRerender = true;
tiles.onLoadTileset = () => needsRerender = true;

function renderLoop() {
  
  requestAnimationFrame(renderLoop);
  if ( needsRerender ) {

    tiles.update();
    renderer.render( scene, camera );

  }

}

That's a good example, but it's still a loop. Another option is to have a render function that is triggered only when OrbitControls move of when the onLoadModel is triggered.

[gkjohnson]

That's a good example, but it's still a loop. Another option is to have a render function that is triggered only when OrbitControls move of when the onLoadModel is triggered.

Yes in practice I've wound up using a debounce function to trigger a render but either scenario works. One pitfall to calling the render function immediately with these callbacks is that onLoadModel could be called multiple times per frame or called on the same frame that OrbitControls on-change is called which would cause the scene to render multiple times on a single frame.