Progressive rendering of a substantial mesh using three.js

Question

Progressive rendering of a substantial mesh using three.js

How can I efficiently render a large static mesh in three.js, even if it's 2 GB with tens of millions of polygons?

My plan is to stream the mesh geometry buffers into indexedDB and render them progressively to the screen, all while maintaining an interactive frame rate. I will implement a MemoryManager class to prevent crashing the browser by loading data into a fixed-size buffer from indexedDB. In my animation loop, I will render as many geometries as possible within 16ms, continuing to render meshes until the user stops interacting.

While I have a high-level strategy in place, I know there will be numerous optimizations required (such as object pools, octree, occlusion queries, etc).

My main question is: Is there a more efficient way to achieve this, and has it been attempted before? (Considering I am using WebGL1, knowing WebGL2 occlusion queries would simplify this process)

Additionally, what is the optimal method for customizing the Three.js WebGLRenderer class? I know there are private closure variables (like WebGLState) that I may need to access in order to enhance performance for my specific scenario.

javascript performance graphics three.js webgl

Answer 1

Answer №1

Utilizing WebGL2 occlusion queries may not provide significant benefits in this context. It could be feasible to implement them, but performing culling on the CPU might be a more effective option, especially if your scene is mostly static.

If you aim to gradually render geometry when the user stops interacting, you can simply refrain from clearing the render buffer. In THREE.js, you can achieve this by enabling preserveDrawingBuffer on the renderer and setting autoClear to false.

In case the camera moves or the scene undergoes changes requiring a reset, you can clear the view by calling renderer.clear().

When it comes to streaming data in, employing BufferGeometry and adjusting the necessary BufferAttributes each frame would be recommended. It seems like you already have some strategies in place for optimizing and determining which geometry needs to be rendered.

Example

The scene redraws continuously on the same frame. Click on the scene to clear it and initiate the drawing process again. The crucial JavaScript lines are marked with NOTE:

// NOT: enabling preserveDrawingBuffer
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
renderer.setClearColor(0x263238);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.clear();
document.body.appendChild( renderer.domElement );

// NOTE: disabling autoclear
renderer.autoClear = false;

// Scene setup
const scene = new THREE.Scene();
const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(.4, 1, .1);
scene.add(dirLight);

// Camera setup
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
camera.position.z = 10;

const geom = new THREE.TorusKnotGeometry(.5, .2, 200, 100);
const mesh = new THREE.Mesh(geom, new THREE.MeshPhongMaterial({ color: 0xE91E63 }));
scene.add(mesh);


// NOTE: Clearing on user interaction
renderer.domElement.addEventListener('click', () => renderer.clear());

(function renderLoop() {
    mesh.position.y = Math.sin(performance.now() * 0.001);
    renderer.render( scene, camera );
    requestAnimationFrame( renderLoop );
})();

<script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/r92/build/three.js"></script>

<style>
  canvas {
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }

  div {
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
  }
</style>

<div>Click to clear</div>

I hope this information is beneficial to you!

Answer 2

Utilizing WebGL2 occlusion queries may not provide significant benefits in this context. It could be feasible to implement them, but performing culling on the CPU might be a more effective option, especially if your scene is mostly static.

If you aim to gradually render geometry when the user stops interacting, you can simply refrain from clearing the render buffer. In THREE.js, you can achieve this by enabling preserveDrawingBuffer on the renderer and setting autoClear to false.

In case the camera moves or the scene undergoes changes requiring a reset, you can clear the view by calling renderer.clear().

When it comes to streaming data in, employing BufferGeometry and adjusting the necessary BufferAttributes each frame would be recommended. It seems like you already have some strategies in place for optimizing and determining which geometry needs to be rendered.

Example

The scene redraws continuously on the same frame. Click on the scene to clear it and initiate the drawing process again. The crucial JavaScript lines are marked with NOTE:

// NOT: enabling preserveDrawingBuffer
const renderer = new THREE.WebGLRenderer({ antialias: true, preserveDrawingBuffer: true });
renderer.setClearColor(0x263238);
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.clear();
document.body.appendChild( renderer.domElement );

// NOTE: disabling autoclear
renderer.autoClear = false;

// Scene setup
const scene = new THREE.Scene();
const dirLight = new THREE.DirectionalLight(0xffffff);
dirLight.position.set(.4, 1, .1);
scene.add(dirLight);

// Camera setup
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)
camera.position.z = 10;

const geom = new THREE.TorusKnotGeometry(.5, .2, 200, 100);
const mesh = new THREE.Mesh(geom, new THREE.MeshPhongMaterial({ color: 0xE91E63 }));
scene.add(mesh);


// NOTE: Clearing on user interaction
renderer.domElement.addEventListener('click', () => renderer.clear());

(function renderLoop() {
    mesh.position.y = Math.sin(performance.now() * 0.001);
    renderer.render( scene, camera );
    requestAnimationFrame( renderLoop );
})();

<script type="text/javascript" src="https://rawgit.com/mrdoob/three.js/r92/build/three.js"></script>

<style>
  canvas {
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
  }

  div {
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
  }
</style>

<div>Click to clear</div>

I hope this information is beneficial to you!

Progressive rendering of a substantial mesh using three.js

Answer №1

Example

Similar questions

Controller unable to properly increment values

When jQuery's `foo.html("<span>bar</span>")` doesn't alter `foo[0]`, what implications does it have?

Which special characters are restricted in a JSON.parse function?

Top method for handling chained ajax requests with jQuery

Creating a series of image files from CSS and Javascript animations using Selenium in Python

Maximizing Python efficiency - the ultimate strategy for parallel computing

Is there a way to store div content in a PHP Session?

What's a quick way in Javascript to add a string to all elements in an array?

The following item in the .each() sequence

NextJS was throwing a warning at me, while Firebase hosting was giving me an error regarding the absence of unique keys for children in lists, even though I

The issue with logging out feature

I'm looking to integrate Jest in my React project with npm. How can I achieve

Creating an array object in TypeScript is a straightforward process

Ways to eliminate an item in a JSON structure?

Encountering a problem when trying to send an API request for multer in order to save

Seamless transitions while deactivating a conditionally displayed component in React

What is the best way to extract valid objects from a string in JavaScript?

Ajax seems to be interacting with an empty session variable

Tips on capturing a URL using JQuery

What is the best way to implement rate limiting for Next.js server actions?