I have three layers (Object3D) each has about 20K sphere geometries. The rendering is making the whole browser stuck. Is there any way for faster rendering of these objects? As few other answers on SO, I am using same geometry and re-using three materials created only once. Also, these are dynamic objects and cannot use pre-generated json. Thanks in advance!
It’s slowing down because of the overhead involved when drawing each sphere.
Instancing here helps by reducing both the drawcall overhead and potentially removing nodes for the matrix updates.
Thee.js has a low level interface that does not work on the scene level.
You can try this 3rd part module https://www.npmjs.com/package/three-instanced-mesh
Related
i've been learning how to improve the performance of my 3d apps, i've been told that i can use Object3D.clone() to duplicate identical objects, and i can use InstancedMesh when rendering numbers of objects with same geometry and material to improve performance. Could someone please tell me what's the difference between them.
Using Object3D.clone() means each cloned 3D object is rendered with an individual draw call. However, this approach might downgrade the performance of your app since the number of draw calls is an an important performance metric of 3D applications. It should be as low as possible.
Using InstancedMesh can help to decrease the number of draw calls since all its instances are render with a single draw call.
So instead of cloning objects, you should use instanced rendering whenever possible.
I've read that Three.js triangulates all mesh faces, is that correct?
Then I realized that most of the gltf models I've been using have quad faces. It's very easy to triangulate faces in Blender so I'm curious if pre-triangulating the faces will result in quicker load of the mesh?
Thanks in advance, and if you have any other performance tips on three.js and gltf's (besides those listed at https://discoverthreejs.com/tips-and-tricks/) that would be super helpful!
glTF, in its current form, does not support quad faces, only triangles. Current glTF exporters (including Blender) triangulate the model when creating the glTF file. Some will automatically try to merge things back together on import.
By design, glTF stores its data in a similar manner to WebGL's vertex attributes, such that it can render efficiently, with minimal pre-processing. But there are some things you can do when creating a model, to help it reach these goals:
Combine materials when possible, to reduce the number of draw calls.
Combine meshes/primitives when possible, also to reduce draw calls.
Be aware that discontinuous normals/UVs increase vertex count (again because of vertex attributes).
Avoid creating textures filled with solid colors. Use Blender's default color/value node inputs instead.
Keep texture sizes web-friendly, and power-of-two. Mobile clients sometimes can't handle anything larger than 2048x2048. Might also try 1024x1024, etc.
I am rendering voxel data based on the approach described here. Unfortunately he uses face4 quads which was deprecated a long time ago (r60). I am reimplementing it to use tris and while I was initially going to go for a bufferGeometry as there is a huge amount of triangles (500,000), there are also a large amount of overlapping vertices in the data.
It is my understanding that geometries can reuse verts but bufferGeoms cannot, so calling mergeVertices wont work. Will I get more of a speed advantage from bufferGeometry or the geometry class?
Just to let anyone who may be interested know, I first created a geometry object and called mergeVertices. It worked well be started crawling for larger scenes. I converted it to bufferGeometry using bufferVol = new THREE.BufferGeometry().fromGeometry(vol); and managed to get a performance improvement.
I'm creating a game in three.js. It has a lot of objects, and I'm using hashtables and chunk data structures to increase performance.
However, every object (simple cubes/planes) is added to the scene by Scene.add(geometry);
So, three.js stores the objects in a datastructure which could be not the best structure.
My questions are:
Does it matter how three.js stores the added objects?
And is there a way to render objects in the render loop manually, without having to add it to the scene by using Scene.add(...); ?
How do other games, like voxel.js, solve this problem? It looks like voxel.js has a great performance compared to my game. And actually, a voxel game exists just of simple planes. My game is almost the same as a minecraft-like block world, where all blocks exist of planes. Only the visible planes are added to the scene. But I don't get the same good performance as a voxel.js game. I want to figure out what I can do to make it faster.
I'm loading several STL files (one by one) into the same scene. Those files are different LODs of the same model (from low-poly to high-poly). I'd like to simulate a continuous model update from low to high resolution.
I tried to create a separate mesh for each LOD and add it to the scene when removing the previous one. Unfortunately, as the LODs get bigger, there is a significant delay in rendering.
See the example and full code
My questions:
- would it help if I just replace the geometry in the same mesh without recreating the mesh? If so, how to force rendering update? I tried to use mesh.setGeometry, but it doesn't seems to work for STL geometry - the new geometry is shown (perfectly works for Cube, for some reason).
- is it possible to speed up the update somehow by any sort of pre-calculations or caching?
Thanks a lot in advance for any hints.
Simon