Как загрузить модели .obj в объекты на three.js для мобильной производительности

Как правильно загружать модели .obj с помощью objLoader и MTLLoader? Я задаю этот вопрос, потому что моя мини-игра three.js состоит из нескольких моделей obj и mtl, которые загружаются перед запуском цикла анимации космических игр. Игра отлично отображается и загружается на компьютерах, но не загружается в браузере телефонов. точнее; когда вы заходите в браузер телефона, он пытается загрузиться, терпит неудачу, а затем автоматически обновляется до тех пор, пока браузер не отправит сообщение об ошибке. Эта война браузера рабочего стола и телефона началась, когда я создал несколько астероидов для игры, используя модели obj. Вы можете просмотреть мою игру на " zeyeland.com/dungeon-space". Если вы входите в консоль на рабочем столе, вы можете просматривать информацию журнала. Однако, если вы посещаете веб-сайт с телефона, возникает ошибка, указанная выше. Эта неспособность загрузить меня поражает. На веб-сайте threejs.org есть множество более сложных игр, которые загружаются в браузере моего телефона. Любая помощь будет принята с благодарностью. Вот часть моего кода, который может определять некоторые важные факторы для рендеринга поддержки мобильных устройств.

Этот набор кода загружает все мои объекты перед запуском основного цикла анимации.

            var RESOURCES_LOADED = false;

            var loadingManager = new THREE.LoadingManager();

            loadingManager.onProgress = function(item, loaded, total){
                console.log(item, loaded, total);
            };

            loadingManager.onLoad = function(){
                console.log("loaded all resources");
                RESOURCES_LOADED = true;
            };

Большинство моих загрузчиков объектов obj и mtl написаны примерно так:

function loadMesh(name, callback){
var objLoader = new THREE.OBJLoader(loadingManager);
var matLoader = new THREE.MTLLoader(loadingManager);
matLoader.load('models/space-shuttle-orbiter.mtl', function(materials){
   materials.preload();
    objLoader.setMaterials(materials);
    objLoader.load('models/space-shuttle-orbiter.obj', function(obj){
        spaceshipPlayer = obj;
        collidableMeshList.push(spaceshipPlayer);
        callback(obj);
    });
});

Мои объекты-астероиды загружаются аналогично, но в большем количестве. Я создал около 25 астероидов, используя цикл for и рандомизируя их положение.

function makeAstroid(laneNumber,x,y){
var objLoader = new THREE.OBJLoader(loadingManager);
var matLoader = new THREE.MTLLoader(loadingManager);
this.laneNumber = laneNumber;
this.x = x;
this.y = y;
var parentThis = this;
this.thisOBJECT;
astroidArray.push(this);
this.update = function(){
    if(parentThis.thisOBJECT != null && parentThis.thisOBJECT != false){
       checkRockCollision(parentThis);
        orbitRocks(parentThis.thisOBJECT); 
    }    
}
matLoader.load('models/rock/rock_3.mtl', function(materials){
materials.preload();
    objLoader.setMaterials(materials);
    objLoader.load('models/rock/rock_3.obj', function(obj){

        //newAstroid = obj;
        parentThis.thisOBJECT = obj;


        collidableMeshList.push(obj);
        obj.scale.x = 100;
        obj.scale.y = 100;
        obj.scale.z = 100;

        obj.position.x = parentThis.x;
        obj.position.y = parentThis.y;
        obj.position.z = 790;
        addMesh(obj);
    });
});
//we need to set the new astroids positions

Другие объекты включают космический корабль и планеты на заднем плане, созданные с использованием сферической геометрии. Все эти объекты отрисовывались в мобильном браузере до того, как астероиды были добавлены в игру.


person z Eyeland    schedule 12.06.2018    source источник


Ответы (1)


Проблема связана с разрешением ваших текстур. Просматривая исходники своей игры, вы используете текстуры, которые смартфоны просто не могут обработать. Смотрите прикрепленный скриншот...

Слишком тяжелый

Я бы сказал, что вы можете использовать 256*256 текстур без потери визуальной точности, учитывая размер ваших моделей.

Попробуйте изменить размер всех текстур и повторите попытку. Кроме того, убедитесь, что все они имеют степень двойки (POT), так как некоторые из ваших текстур не являются таковыми.

Текстуры без POT

На заметку: имейте в виду, что если ваша игра будет онлайн (т. е. не локальное приложение), пользователям придется перезагружать вещи снова и снова (в зависимости от того, как они кешируют ресурсы). По возможности следует избегать загрузки десятков мегабайт изображений каждый раз, когда вы хотите играть в игру.

person Console-buche    schedule 12.06.2018
comment
Спасибо за вашу помощь. Ive обратился ко всем изображениям не сила двух предупреждений. Я всегда удалял некоторые изображения размером 8k и заменял их на 2k или меньше. Моя игра теперь отображается на телефоне, однако я все еще в шоке от того, сколько времени это занимает по сравнению с тем, как быстро мой телефон отображает игры на сайте threejs.org. - person z Eyeland; 12.06.2018
comment
Вы упомянули, что следует избегать загрузки пользователем десятков мегабайт изображений. Что ж, в моем случае я использую загрузчик threejs и obj вместе с mtlLoader, как мне это сделать? - person z Eyeland; 12.06.2018
comment
@z_Eyeland это совсем другая тема, но изменение размера ваших текстур до 128x128 и использование размера атласа текстур 2048x2048 может быть хорошим началом и значительным улучшением времени загрузки и производительности. - person Console-buche; 12.06.2018