Three js performance

Question

Hy! I am working with huge vertice objects, I am able to show lots of modells, because I have split them into smaller parts(Under 65K vertices). Also I am using three js cameras. I want to increase the performance by using a priority queue, and when the user moving the camera show only the top 10, then when the moving stop show the rest. This part is not that hard, but I dont want to put modells to render, when they are behind another object, maybe send out some Rays from the view of the camera(checking the bounding box hit) and according hit list i can build the prior queue.

What do you think?

Also how can I detect if I can load the next modell or not.(on the fly)

Thx, I have read it somewhere long time ago, but it dropped out of my mind ;) — Balázs Szántó, Sep 05 '14 at 16:29
Seems so I have to do my own occlusion culling, I didn't find solution for it, just this: https://github.com/wivlaro/three.js/blob/master/examples/webgl_occlusion_culling.html — Balázs Szántó, Sep 05 '14 at 16:50
That example might work but is off a forked three.js distribution of r58. — gaitat, Sep 05 '14 at 17:14
Also I will check this:https://www.udacity.com/course/viewer#!/c-cs291/l-124106599/m-175393429 — Balázs Szántó, Sep 05 '14 at 17:28
And found similar problem here:http://stackoverflow.com/questions/17233172/state-of-the-art-culling-and-batching-techniques-in-rendering — Balázs Szántó, Sep 05 '14 at 17:57

Ender Doe · Accepted Answer · 2017-01-21T20:54:00.557

Option A: Occlusion culling, you will need to find a library for this.

Option B: Use a AABB Plane test with camera Frustum planes and object bounding box, this will tell you if an object is in cameras field of view. (not necessarily visible behind object, as such a operation is impossible, this mostly likely already done to a degree with webgl)

Implementation: Google it, three js probably supports this

Option C: Use a max object render Limit, prioritized based on distance from camera and size of object. Eg Calculate which objects are visible(Option B), then prioritize the closest and biggest ones and disable the rest.

pseudo-code:

    if(object is in frustum ){
       var priority = (bounding.max - bounding.min) / distanceToCamera 
    }

Make sure your shaders are only doing one pass. As that will double the calculation time(roughly depending on situation)

Option D: raycast to eight corners of bounding box if they all fail don't render the object. This is pretty accurate but by no means perfect.

Option A will be the best for sure, Using Option C is great if you don't care that small objects far away don't get rendered. Option D works well with objects that have a lot of verts, you may want to raycast more points of the object depending on the situation. Option B probably won't be useful for your scenario, but its a part of c, and other optimization methods. Over all there has never been an extremely reliable and optimal way to tell if something is behind something else.

Three js performance

1 Answers1