javascript - Three.js with instancing - can't get it to work without FrustumCulling = false -


i'm using three.js , instancing (as in this example), i'm having same problem others have reported: objects randomly clipped , keep disappearing camera

the proposed workarounds set

my_instanced_object.frustumculled = false; 

but means rendering every single object per each frame, , lot of objects killing framerate.

what alternatives this? how can have proper frustum culling if i'm using instancing?

i'm adding code i'm using in case wanted take look

var geometry = new three.instancedbuffergeometry(); geometry.maxinstancedcount = all_meshes_data.length;  geometry.addattribute( 'position', mesh.geometry.attributes.position ); geometry.addattribute( 'normal', mesh.geometry.attributes.normal ); geometry.addattribute( 'uv', mesh.geometry.attributes.uv );  var offsets = new three.instancedbufferattribute( new float32array( all_meshes_data.length * 3 ), 3, 1 );  ( var = 0, ul = all_meshes_data.length; < ul; i++ ) { // populate instancing positions (where spawn instances)     offsets.setxyz( i, all_meshes_data[i].x, all_meshes_data[i].y, all_meshes_data[i].z ); }  geometry.addattribute( 'offset', offsets );  var instancematerial = new three.rawshadermaterial( {     vertexshader: document.getelementbyid( 'vertexshader' ).textcontent,     fragmentshader: document.getelementbyid( 'fragmentshader' ).textcontent,     transparent: true } );  geometry.computevertexnormals(); geometry.boundingsphere = new three.sphere( new three.vector3(), 50 ); // not working, works 0;0;0 world positioned mesh 'base' of of instanced ones  var instanced_mesh = new three.mesh( geometry, instancematerial );  //instanced_mesh.frustumculled = false; // works, scene becomes slow (rendering if not in sight)  scene.add( instanced_mesh ); 

if using instancing, there 2 ways handle frustum culling.

one turn frustum culling off object:

object.frustumculled = false; 

the other option set bounding sphere of geometry manually -- if know it, or can estimate it:

geometry.boundingsphere = new three.sphere( new three.vector3(), radius ); 

three.js r.86


Comments

Popular posts from this blog

javascript - Create a stacked percentage column -

Optimising Firebase database by automatically overwriting data -

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -