Code Monkey home page Code Monkey logo

3dtilesrendererjs's People

Contributors

aiden-jeffrey avatar aierklk avatar alaricbaraou avatar alex-lancer avatar dependabot[bot] avatar gkjohnson avatar gmadges avatar jeffpamer avatar jesse-small avatar jo-chemla avatar jonnxie avatar junior2ran avatar justinmanley avatar liberostelios avatar lojjic avatar nickguletskii avatar patricknausha avatar peiyu7921 avatar pettergs avatar phoenixbf avatar pizza3 avatar powerocean avatar rennzie avatar robertlong avatar rvouilloz avatar segments-tobias avatar tobias74 avatar usefulthink avatar xxzefgh avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

3dtilesrendererjs's Issues

Foreground child tiles are empty for a period

When prioritizing the download and parsing of tiles they're sorted by 1 / depth, meaning that coarser tiles load in first before higher detail tiles. However, when the camera is near the terrain parent tiles can have an apparent error of Infinity because the camera is inside the bounding box meaning the tile won't render (due to the skipTraversal phase) while its children will. However the children will always be deeper than the parent -- this means that distant tiles that are shallower will always be loaded and parsed before these children tiles which are actually closer to the camera leaving a gap in the foreground until the far tiles have resolved.

It would be best if at least these first renderable child tiles could be loaded with some priority so there isn't a gap in the terrain for so long.

  • Sort by 1 / distance_to_furthest_rendered_parent

  • Render with priority of 1 if no parent tiles are to be rendered

The issue is that this means that the priorities will now change based on camera movement and the priority queues will have to be resorted every frame.

Related to #31

Cache: Tune unload percentage

Unloading the LRUCache when tiles are no longer needed can wind up taking between 5 to 10ms even on a more powerful machine to unload the cache, which includes deleting data from maps and disposing of the geometry and materials.

Unload amount

The logic to calculate the amount of nodes to unload seems flawed:

let nodesToUnload = Math.max( itemList.length - targetSize, targetSize ) * unloadPercent;
nodesToUnload = Math.ceil( nodesToUnload );
nodesToUnload = Math.min( unused, nodesToUnload );

Instead we should try to unload a fixed amount every frame until the unused list is emptied:

const excess = itemList.length - targetSize;
let nodesToUnload = Math.min( excess, targetSize * unloadPercent );

In this case maybe it's best to not model the unload amount as a fixed size rather than a percentage? The amount unloaded should also be reduced so we don't unload so many at once. Or maybe it should be a ratio relative to the excess in the cache?

Material key iteration

When unloading textures / materials we iterate over all keys in the material to find textures:

for ( let i = 0, l = materials.length; i < l; i ++ ) {
const material = materials[ i ];
for ( const key in material ) {
const value = material[ key ];
if ( value && value.isTexture ) {
value.dispose();
}
}
material.dispose();
}

This is 64+ keys most of which won't have textures. It might be best to cache the textures
in a separate array on load so we don't have to iterate over so many key unnecessarily on unload.

Add Draco Compression Support

Should this be baked into the loader? It's a big file to require people to include. Besides how does loading the draco assembly work with general build processes?

Test performance in Firefox, Safari, Edge

Looks like we should also set the website to scale properly and work with mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Various Bugs

1. Raycasting does not work on the root tile.

  • Set depth to 0
  • Enable raycasting

2. Depth value is not consistent

  • Set maxDepth to 1
  • Reported displayed tile depth is 0

Unsupported Features

Unsupported Features

Model Formats

Batch and Feature Table Features

  • Add feature / batch table tests (Issue #65)
  • Remaining i3dm feature semantic interpretation (Issue #83)
  • Remaining pnts feature semantic interpretation (Issue #84)

Tileset Features

ImageLoader: Verify createImageBitmap are consistent across browsers.

See

// TODO: We should verify that `flipY` is false on the resulting texture after load because it can't be modified after
// the fact. Premultiply alpha default behavior is not well defined, either.
// TODO: Determine whether or not options are supported before using this so we can force flipY false and premultiply alpha
// behavior. Fall back to regular texture loading
manager.addHandler( /(^blob:)|(\.png$)|(\.jpg$)|(\.jpeg$)/g, {
load( url, onComplete ) {
const loader = new ImageBitmapLoader();
loader.load( url, res => {
onComplete( new CanvasTexture( res ) );
} );
}
} );

LRUCache: Use a shared unload function

Right now every tile gets its own function created but you should be able to set it per cache object:

const cache = new LRUCache();
cache.unloadCallback = tile => {
  
  // ...

};

Models : Add a method to allow for updating materials on objects

Add a method to update all meshes with a custom material so the terrain can be displayed with custom shaders.

Some ideas:

tiles = new TilesRenderer( url );
tiles.forEachLoadedModel( scene => {

  scene.traverse( c => {

    // set the material

  } );

} );

tiles.onModelLoaded = scene => {

  // set the material

};

API : Clean up ThreeTilesRenderer API

  • Each camera should be able to have it's own render target screen size
  • Remove renderer from signature and allow for providing a resolution field
  • Add API to add or remove cameras
  • Add API for updating camera resolution
  • Add caches to constructor signature
  • Add way to iterate over all loaded geometry / preprocess geometry before load so custom materials can be set.

Cache: Dispose of ImageBitmap data when possible

ImageBitmap includes a close function which allows for immediately discarding of image data when it's no longer needed. We could at least call this on disposeTile if not sooner. It should not be called earlier than first render, though, because it cannot be closed before upload to GPU. If the renderer is being used in multiple WebGLRenderers then it shouldn't ever be discarded until the tile is disposed.

Traversal: Loaded parent tiles jump when zooming out

There is a set of tiles with SSE above "errorThreshold" that never gets loaded (or gets unloaded) when the camera is zoomed far into the terrain. When zooming back out though those tiles start to meet the screen space error requirements causing it to jump back to a coarse level of detail.

Current Behavior

If a tile meets the SSE requirement load and render it. Once loaded load and render all children. Only render children if they're all ready.

New Behavior

If a tile meets the SSE requirement load and render it if a child tile was not rendered the previous frame. If a child was rendered previously or if this tile is loaded then load and render all children. Only render children if they're all ready.

Traversal : Improve performance and memory usage of tree traversal

TODO

  • Avoid new keyword in update
  • Reuse functions as much as possible

Places to Improve

Example: Add fly controls option

Easiest option is to repurpose and constrain OrbitControls to achieve the first person controls.

When fly controls is enabled:

  • Move controls target to be barely in front of the camera
  • Constrain the min and max distance to that distance
  • Repurpose zoom to move the target forward and back
  • Track WASD buttons and move the camera and target in the direction relative to the camera orientation (QE for up down?)
  • When reenabling orbit controls reset the target to the distance it was at when starting fly controls

Multicamera: Allow each camera to have a different resolution

Right now it's expected that all cameras are rendering to the same resolution which is incorrect.

Some options:

Maintain a separate list of resolutions

const tiles = new TilesRenderer( url );
tiles.camera = camera;
tiles.resolution.set( ... );

// or

tiles.cameras = [ camera, camera, camera ];
tiles.resolutions = [ res, res, res ];

Add an API to set it:

const tiles = new TilesRenderer( url );
tiles.addCamera( camera );
tiles.setCameraResolution( camera, vec2 );
tiles.setCameraResolution( camera, renderer );
tiles.removeCamera( camera );

Screen Space Error : Reevaluate ErrorThreshold metric

The way it's being used now:

const errorRequirement = renderer.errorTarget * renderer.errorThreshold;

Means that as errorTarget approaches 0 the requirement to be rendered becomes 0. However the intent is that we allow for more tiles to be rendered as the lower level ones get loaded. Maybe it should be something more like errorTarget + errorThreshold? Or ( errorTarget + 1 ) * errorThreshold?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.