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
Post a Comment