具有实例化的 Three.js - 没有 FrustumCulling = false 就无法让它工作 [英] Three.js with instancing - can't get it to work without FrustumCulling = false

问题描述

我正在使用three.js和实例化(如这个例子)，但是我遇到了其他人报告的同样问题:对象被随机剪裁并不断从相机中消失

I'm using three.js and instancing (as in this example), but I'm having the same problem others have reported: the objects are randomly clipped and keep disappearing from the camera

• 网格在three.js中突然消失了.剪辑?
• 移动相机关闭后Three.js buffergeometry消失

建议的解决方法是设置

my_instanced_object.frustumCulled = false;

但这意味着每帧渲染每个对象，并且有很多对象会导致我的帧率下降.

but this means rendering every single object per each frame, and with a lot of objects this is killing my framerate.

我的替代方案是什么?如果我使用实例化，我如何进行适当的视锥剔除?

What are my alternatives to this? How can I have proper frustum culling if I'm using instancing?

我正在添加我正在使用的代码，以防有人想看看

I'm adding the code I'm using in case someone wanted to take a 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 );

for ( var i = 0, ul = all_meshes_data.length; i < ul; i++ ) { // Populate all instancing positions (where to 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, it works just for a 0;0;0 world positioned mesh that is the 'base' of all of the instanced ones

var instanced_mesh = new THREE.Mesh( geometry, instanceMaterial );

//instanced_mesh.frustumCulled = false; // Works, but the scene becomes very slow (rendering everything even if not in sight)

scene.add( instanced_mesh );

推荐答案

如果您正在使用实例化，有两种方法可以处理视锥体剔除.

If you are using instancing, there are two ways to handle frustum culling.

一种是关闭对象的视锥剔除:

One is to turn frustum culling off for the object:

object.frustumCulled = false;

另一个选项是手动设置几何体的边界球体——如果您知道或可以估计它:

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

geometry.boundingSphere = new THREE.Sphere( new THREE.Vector3(), radius );

three.js r.86

three.js r.86

这篇关于具有实例化的 Three.js - 没有 FrustumCulling = false 就无法让它工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！