Hot front end blog

Three. js is a WebGL third-party library written in JavaScript. Provides a lot of 3D display capabilities. In use, although three.js is optimized, there is a performance penalty when using inappropriate code. The lower the frame rate, the more cramped it feels. This is me in the development of their own Baidu summary, have wrong can contact me ah

1. Before loading the page, you can give a buffer for loading the page, because the scene model will have a black screen when it is not loaded, and the performance problems such as flash screen may occur at the moment of loading, which will affect the user experience very much.

2. Use BufferGeometry instead of Geometry as far as possible. BufferGeometry will cache the grid model, and the performance should be efficient.

Principle of grid model generation

1. The model of Geometry generation looks like this: (code) -> (DATA is processed by CUP and converted into virtual 3D data) -> (data is assembled by GPU and converted into pixels for rendering) -> These processes are repeated for the second operation of the display. 2. BufferGeometry generation model flow (code) -> (DATA is processed by CUP and converted into virtual 3D data) -> (data is assembled by GPU and converted into pixels for rendering) -> (thrown into cache) -> When the display is modified for the second time, Modify the cache data directly through the API, the flow goes like this (code) -> (CPU does the data processing and converts it into virtual 3D data) -> (modify the cache data) -> Display saves the computing performance of the GPU performance.

Don’t do anything under requestAnimationFrame() because requestAnimationFrame() executes 60 times per second and if you put a for loop in it, your code will explode. Also reduce floating point calculation, the system for floating point calculation expenses are relatively large, as far as possible written decimal multiplication.

4. Learn to use the Clone () method

Var box = new THREE. BoxGeometry,10,10 (10); Var box2 = box-.clone (); // clone geometry box2.scale.set(2,2,2); // Resize by scalingCopy the code

Clone () returns a new geometry object containing the original geometry vertex data, vertex index data, and UV coordinate data. You don’t have to recreate the same object, wasting time

Use new three.textureLoader ().load(” water.jpg “) to load the texture map. If it is not a power of 2, then three.js will automatically change to the most appropriate power of 2. And a yellow warning is printed on the console. This is not set by three.js, it is limited by WebGL and is set to fit Mipmap (maps are processed as a series of pre-calculated and optimized images to speed up rendering and reduce image jagging) Settings. Images should be as small as possible and merged. Larger images are not necessarily clearer, but also related to texture filtering and other attributes. Reduce image size and memory footprint.

6. Frame hopping Settings

var skip;
function render(){
  requestAnimationFrame();
  if(skip ! == 0) { skip = ++skip % 2;return;
  } else {
	skip = ++skip % 2;
  }
  console.log("i",i);
}Copy the code

In this way, rendering execution is skipped every skip to reduce the number of rendering times, and as many frames are skipped as possible without affecting user experience.

7. Transforming a swarm of particles rather than using THREE.Sprite for each particle gives better control over individual particles, but when using a large number of particles, the performance of this method is reduced and becomes more complex. At this time, you can use three. SpriteCloud, which can easily manage a large number of particles for overall operation. At this time, the control ability of a single particle will be weakened.

8, the less the model, the better, the model is too detailed will increase the rendering overhead. Three scene import model, can ensure the lowest definition of the time, reduce the complexity of the model, the more faces, the larger the model, the greater the loading overhead

9, performance check plugin (stats.js) use this plugin to check the frame rate, there are many tutorials online, you can baidu

Use the Three-. js inspector to debug and view the various models in a scene on the console