Create circular/planar elements from points

Questions
,
1

I am pretty new to three.js and extremely new to OpenGL. In the past few days, I have been trying to develop an online web-hosted solution which can be used to show real-time 3D reconstruction from Implicit 3D voxel-grid. My problem at the moment is that I am using BufferGeometry with PointsMaterial to show the points and they look very ugly at sparse regions (See

image
image1117×764 191 KB
).

I am trying to replace these points to some planar or circular geometry where I can manipulate properties (such as width, height and orientation) to piece together a relatively better looking meshes. I have already tried to add bunch of planes from PlaneBufferGeometry and replaced them with Points but the system is terribly inefficient and gives ~5fps with 20000 planes.

I am aware that in traditional OpenGL, a handmade shader can be used to achieve these results but my lack of knowledge and experience (and internet resources) have restricted me to implement such in three.js.

Question: Is there an efficient way already implemented in three.js in which I can draw planes (with height,width and orientation) instead of points?

Any help is highly appreciated?
I have asked this question on SO: but I was not aware at that time that system will perform so bad (i.e. 5fps with array of planebuffergeometry) at https://stackoverflow.com/questions/60225942/how-to-create-splats-from-points-with-normals-in-three-js?noredirect=1#comment106544932_60225942

2

The performance of your app is probably degraded by the amount of draw calls. Hence, consider to use instanced rendering. An easy way to do this (without modifying shaders) is the usage of THREE.InstancedMesh. Check out the documentation page and the respective examples in order to get familiar with this class.

1 Like
3

Dear @Mugen87,
Thank you for your reply, at the moment I am experimenting with THREE.InstacedMesh and it seems that at-least adding 20000 planar object is not a problem. However is there any way I can change the color of each mesh at run-time? because even if I initiate sufficient meshes in advance, I cannot know the color of each vertex.

4

Using an instanced color attribute is not supported by default. However, there is an official example that demonstrates how to implement this feature:

https://threejs.org/examples/webgl_instancing_modified

2 Likes
5

Thanks again for quick reply. I am already trying to get myself familiarize with the referenced example, however those colors are still at the time of creation and not “run-time”. I am afraid that I may have to re-create InstancedMesh with each update.

6

It should be sufficient to just update the color attribute.

2 Likes
7

Thank you, that helped a lot. just one last question. It is working nicely but since I am using THREE.MeshMatcapMaterial it does not goes well with lighting with it. Is there any way to add light as everything seems very dim. (Screenshot of sub-sampled mesh)

image
image951×669 74.2 KB

8

As mentioned in the documentation, MeshMatcapMaterial does not respond to lights since the matcap image file encodes baked lighting.

https://threejs.org/docs/index.html#api/en/materials/MeshMatcapMaterial

1 Like
9

Thanks @Mugen87 for your help along the way. Lot of things to figure out but at-least I got what I was looking for :slight_smile:

image
image540×534 70.2 KB