三个js 25000 BoxGeometry 200模型如何提升性能 [英] Three js 25000 BoxGeometry 200 models How to increase performance
本文介绍了三个js 25000 BoxGeometry 200模型如何提升性能的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道 WebGL 和三个 js 已经能够将足够的代码放在一起，能够添加 25K BoxGeometry 网格和大约 200 个同时移动并与 BoxGeometry 交互的模型.我需要能够通过这些盒子平稳地移动相机.所以，我试图将所有几何图形合并在一起(从谷歌搜索中得到这个想法)，这使性能变得更糟.我看了几个 YouTube 视频，并没有太多关于性能的内容.如果有帮助，我目前正在使用 mrdoob-three.js-4bab468.
I am knew to WebGL and Three js having been able to get enough code together to be able to add 25K BoxGeometry Meshes and about 200 models which move simultaneously and interact with the BoxGeometry. I need to be able to move the camera smoothly through these boxes. So, I have tried to merge all the geometry together (got that idea from a google search) and that made the performance worse. I watched several YouTube videos and did not a lot about performance. I am currently using mrdoob-three.js-4bab468 if that helps.
函数 addCube20 addCube40 被调用超过 25,000 次，并使用不同的坐标显示.然后他们不会再次被调用，除非场景中的某些东西改变了他们的位置.
The functions addCube20 addCube40 are called a little over 25,000 times with different coordinates to display at. then they are not called again unless something in the scene alters their position.
MJMotion.js 是我不需要包含的键盘相机视图控件.您可以通过更改渲染部分取出来删除它们键盘控制()；更新相机()；并用您自己的控件替换它们.这东西大约 3 fps.
MJMotion.js is my keyboard camera view controls that do not need to be included. You can remove them by altering the render section taking out keyboardControls(); updateCamera(); and replacing them with your own controls. this thing gets about 3 fps.
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>CubeTest</title>
<style>
body {
margin: 0;
}
</style>
<script>
var pageE;
</script>
</head>
<body style="touch-action:none">
<div id="canvas_container" style="position: absolute; left:0px; top:0px; touch-action:pan-y;"></div>
<script src="js/three.js"></script>
<script src="js/Cache.js"></script>
<script src="js/DDSLoader.js"></script>
<script src="js/MTLLoader.js"></script>
<script src="js/OBJMTLLoader.js"></script>
<script src="js/OBJLoader.js"></script>
<script src="js/XHRLoader.js"></script>
<script src="js/LoadingManager.js"></script>
<script src="js/JSONLoader.js"></script>
<script src="js/MJMotion.js"></script>
<script src="js/stats.min.js"></script>
<script>
// Our Javascript will go here.
var domContainer = null;
domContainer = document.getElementById("canvas_container");
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.zIndex = 100;
domContainer.appendChild( stats.domElement );
var camera = new THREE.PerspectiveCamera( 30, window.innerWidth/window.innerHeight, 0.1, 500.0);
var aspectratio = window.innerWidth/window.innerHeight;
var renderer = new THREE.WebGLRenderer();
var connected = false;
var SaveAUseB = true;
var UpdateCount = 0;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.cullFace = THREE.CullFaceFrontBack;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
domContainer.appendChild( renderer.domElement );
var INTERSECTED;
var mouse = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var scene = new THREE.Scene();
var objects = [], plane;
var mouseDown = 0;
scene.add(camera);
scene.fog = new THREE.Fog( 0xaaccff,10,150);
window.addEventListener('resize', resize, false);
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
renderer.domElement.addEventListener('mousewheel',onMouseWheel, false);
renderer.domElement.addEventListener( 'touchstart',touchstart, false );
renderer.domElement.addEventListener( 'touchend', touchend, false );
renderer.domElement.addEventListener('touchmove', touchmove, false);
// this must be defined before MJMotion.js
// we use it in there.
var scenesizereduction = 100.0;
// defined in MJMotion.js
SetScreenReduction(scenesizereduction);
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.15);
directionalLight.position.set(-100/scenesizereduction, 1000/scenesizereduction,2000/scenesizereduction);
scene.add(directionalLight);
var hemiLight = new THREE.HemisphereLight(0xAAAAAA, 0x080808, 0.25);
hemiLight.position.set(0, 500/scenesizereduction, 0);
scene.add(hemiLight);
var dirLight = new THREE.DirectionalLight( 0xffffff, 0 );
dirLight.color.setHSL( 0.1, 1, 0.95 );
dirLight.position.set( -1, 1.75, 1 );
dirLight.position.multiplyScalar( 50 );
scene.add( dirLight );
dirLight.castShadow = true;
dirLight.shadowMapWidth = 2048;
dirLight.shadowMapHeight = 2048;
var d = 150;
dirLight.shadowCameraLeft = -d;
dirLight.shadowCameraRight = d;
dirLight.shadowCameraTop = d;
dirLight.shadowCameraBottom = -d;
dirLight.shadowCameraFar = 3500;
dirLight.shadowBias = -0.00005;
// 50 perccent
var pixelsperfoot = 2.0 / scenesizereduction;
var GroundWidth = 30346/scenesizereduction;
var GroundLength = 6001/scenesizereduction;
var xoffset = (GroundWidth / 2.0) - (87.0390550000001 * pixelsperfoot);
var zoffset = (GroundLength/2.0) - (607.80843 * pixelsperfoot);
var textures20Geometry = new THREE.BoxGeometry(20 * pixelsperfoot, 9.5 * pixelsperfoot, 8.0 * pixelsperfoot);
var textures40Geometry = new THREE.BoxGeometry(40 * pixelsperfoot, 9.5 * pixelsperfoot, 8.0 * pixelsperfoot);
var Cube20Mesh= new THREE.Mesh( textures20Geometry);
var Cube40Mesh= new THREE.Mesh(textures40Geometry);
var CubeGeometry = new THREE.Geometry();
var cubeMaterial1 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube01.png')
});
var cubeMaterial2 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube02.png')
});
var cubeMaterial3 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube03.png')
});
var cubeMaterial4 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube04.png')
});
var cubeMaterial5 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube05.png')
});
var cubeMaterial6 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube06.png')
});
var cubeMaterial7 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube07.png')
});
var cubeMaterial8 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube08.png')
});
var cubeMaterial9 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube09.png')
});
var cubeMaterial10 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube10.png')
});
var cubeMaterial11 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube11.png')
});
var cubeMaterial12 = new THREE.MeshLambertMaterial({
map: THREE.ImageUtils.loadTexture('textures/cube12.png')
});
for(var i = 0; i < 2500; i++)
{
addCube20("cube" + i, Math.random() * 800 - 400,Math.random() * 800 - 400,Math.random() * 2 * Math.PI,1);
addCube40("cube" + i, Math.random() * 800 - 400,Math.random() * 800 - 400,Math.random() * 2 * Math.PI,1);
}
DisplayCubes();
function addCube20(name, x1,z1,azimuth,MaterialIndex)
{
Cube20Mesh.position.set(x1, ((0.5 + 4.25) * pixelsperfoot) + ((MaterialIndex - 1) * (9.5 * pixelsperfoot)), z1);
Cube20Mesh.rotation.y = (Math.PI / 180.0) * azimuth;
Cube20Mesh.name = name;
Cube20Mesh.updateMatrix();
CubeGeometry.merge(Cube20Mesh.geometry, Cube20Mesh.matrix,MaterialIndex);
};
function addCube40(name, x1,z1,azimuth,MaterialIndex)
{
Cube40Mesh.position.set(x1, ((0.5 + 4.25) * pixelsperfoot) + ((MaterialIndex - 1) * (9.5 * pixelsperfoot)), z1);
Cube40Mesh.rotation.y = (Math.PI / 180.0) * azimuth;
Cube40Mesh.name = name;
Cube40Mesh.updateMatrix();
CubeGeometry.merge(Cube40Mesh.geometry, Cube40Mesh.matrix, MaterialIndex);
};
function DisplayCubes()
{
var CubeMaterials = [];
CubeMaterials.push(cubeMaterial1);
CubeMaterials.push(cubeMaterial2);
CubeMaterials.push(cubeMaterial3);
CubeMaterials.push(cubeMaterial4);
CubeMaterials.push(cubeMaterial5);
CubeMaterials.push(cubeMaterial6);
CubeMaterials.push(cubeMaterial7);
CubeMaterials.push(cubeMaterial8);
CubeMaterials.push(cubeMaterial9);
CubeMaterials.push(cubeMaterial10);
CubeMaterials.push(cubeMaterial11);
CubeMaterials.push(cubeMaterial12);
var CubeGroup = new THREE.Mesh(CubeGeometry, new THREE.MeshFaceMaterial(CubeMaterials));
CubeGroup.matrixAutoUpdate = false;
CubeGroup.updateMatrix();
scene.add(CubeGroup);
};
function resize()
{
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
};
function animate()
{
requestAnimationFrame( animate );
render();
stats.update();
};
function render()
{
keyboardControls();
updateCamera()
renderer.render(scene, camera);
};
animate();
</script>
推荐答案
我发现了这个问题.是材料.如果我使用图像，它会减慢到 7 fps.如果我使用像 MeshNormalMaterial 这样简单的东西，它会以 60fps 的速度运行.有什么办法可以解决这个问题吗?
I have found the issue. It is the materials. If I use images it slows down to 7 fps. If I use something simple like a MeshNormalMaterial it works at 60fps. Is there any way to rectify this?
这篇关于三个js 25000 BoxGeometry 200模型如何提升性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
