stats.js показывает FPS 0 ~ 2, рендеринг слишком медленный - PullRequest
Новая
       113

stats.js показывает FPS 0 ~ 2, рендеринг слишком медленный

0 голосов
/ 24 октября 2019

Я начинающий для three.js, также использую его для проекта BIM , когда я загружаю gltf файл ~ 25 МБ , я едва могу переместитьвесь объект и stats.js монитор показывает fps 0 ~ 2 в максимальном файле gltf: https://github.com/xeolabs/xeogl/tree/master/examples/models/gltf/schependomlaan im, используя ТРИ js с vuejs 

//package.json
"stats.js": "^0.17.0",
"three": "^0.109.0",


import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

this.scene = new THREE.Scene();

this.stats = new Stats();
this.stats.showPanel( 0, 1, 2 ); // 0: fps, 1: ms, 2: mb, 3+: custom
let div = document.createElement('div')
div.appendChild(this.stats.dom)

div.style.position = 'absolute';
div.style.top = 0;
div.style.left = 0;
document.getElementsByClassName('gltfViewer')[0].appendChild( div );
// Camera 
this.camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1500 );
this.camera.position.set( this.pos, this.pos, this.pos );
// renderer
this.raycaster = new THREE.Raycaster();
this.renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gltfViewerCanvas'), alpha: false });
this.renderer.setClearColor( 0xefefef );
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize(window.innerWidth, window.innerHeight);
// adding controls

this.controls = new OrbitControls( this.camera, this.renderer.domElement );
this.controls.dampingFactor = 0.1;
this.controls.rotateSpeed = 0.12;
this.controls.enableDamping = true;
this.controls.update();

window.addEventListener('resize', _ => this.render());
this.controls.addEventListener('change', _ => this.render());

// light
var ambientLight = new THREE.AmbientLight( 0xcccccc );
this.scene.add( ambientLight );

var directionalLight = new THREE.DirectionalLight( 0xffffff );
directionalLight.position.set( 0, 1, 1 ).normalize();
this.scene.add( directionalLight );
// loading gltf file

// Instantiate a loader
this.gltfLoader = new GLTFLoader();

// Optional: Provide a DRACOLoader instance to decode compressed mesh data
this.dracoLoader = new DRACOLoader();
this.dracoLoader.setDecoderPath( 'three/examples/js/libs/draco' );
this.gltfLoader.setDRACOLoader( this.dracoLoader );

// Load a glTF resource
this.gltfLoader.load( this.src, this.onGLTFLoaded, this.onGLTFLoading, this.onGLTFLoadingError );
//onGLTFLoaded()
this.scene.add( optimizedGltf.scene );
// gltf.scene.getObjectById(404).visible = false;
this.listGltfObjects(gltf);

this.render();
// render ()

this.renderer.render( this.scene, this.camera );
this.stats.update();
// on mounted component :
animate()
// animate() 
this.stats.begin()
this.render();
this.stats.end();

даже после применения сжатия Draco с использованием https://github.com/AnalyticalGraphicsInc/gltf-pipeline ничего не меняется.

Спасибо

1 Ответ

4 голосов
/ 24 октября 2019

При размере файла -

Сжатие Draco уменьшает размер сети, но не конечный объем несжатых данных, которые должны быть отправлены в графический процессор и обработаны. Если ваша исходная сетка была 100 МБ, а вы сжали ее до 25 МБ, вы все равно получите частоту кадров исходной 100 МБ. В сторону: использование опции -b glTF-Pipeline уменьшит размер еще на 50%, до 13 МБ, но опять же не влияет на FPS.

На частоте кадров -

Эта модель содержит 4280 мешей 1 , каждая из которых требует вызова отрисовки графическим процессором. Это источник вашей низкой QPS, и, к сожалению, это общая проблема в моделях BIM. Вам нужно будет объединить эти сетки (в такой программе, как Blender, или после загрузки в three.js) как можно меньше. Для такой модели требуется <100 вызовов отрисовки или даже всего 1. </p>

1 Чтобы увидеть это, попробуйте открыть модель на https://gltf -viewer.donmccurdy.com / и открытие консоли JavaScript. Вы должны увидеть распечатку графа сцены, которая будет содержать много разных сеток.

...