Three.js 与实例 - 如果没有 FrustumCulling = false 则无法使其工作

2024-03-16

我正在使用 Three.js 和实例化(如这个例子 https://threejs.org/examples/webgl_buffergeometry_instancing.html),但我遇到了其他人报告的同样问题:对象被随机剪切并不断从相机中消失

  • Mesh 在 Three.js 中突然消失了。剪裁? https://stackoverflow.com/questions/21184061/mesh-suddenly-disappears-in-three-js-clipping
  • Three.js 移动相机关闭后 buffergeometry 消失 https://stackoverflow.com/questions/32855271/three-js-buffergeometry-disappears-after-moving-camera-to-close

建议的解决方法是设置

my_instanced_object.frustumCulled = false;

但这意味着每帧渲染每个对象,并且对于很多对象,这会降低我的帧率。

我有什么替代方案?如果我使用实例,如何进行正确的视锥体剔除?

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

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 );

如果您使用实例化,有两种方法可以处理视锥体剔除。

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

object.frustumCulled = false;

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

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

三.js r.86

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Three.js 与实例 - 如果没有 FrustumCulling = false 则无法使其工作 的相关文章