Сцена WebGL не отображается из-за потерянного контекста

у меня есть 3D модель с текстурами и без.

когда я загружаю дорогу без текстур, все работает нормально ~ 60fps. Но когда я загружаю дорогу текстурами, есть 2 варианта:

1) Если 3D-модель не большая, то она загружается и работает, но с очень низким fps ~ 10-20

2) Если 3D-модель большая, она загружается без каких-либо ошибок и предупреждений, но после этого я получаю эту ошибку:

WebGL: CONTEXT_LOST_WEBGL: loseContext: context lost
THREE.WebGLShader: gl.getShaderInfoLog() null

эта ошибка здесь:

animate = function() {
    renderer.render(scene, camera); <--- error occurs here
    stats.update();
    controls.update(clock.getDelta());
    return requestAnimationFrame(animate);
};

Я читал что эта ошибка означает: "браузер или ОС решает сбросить GPU, чтобы вернуть контроль", но как я могу решить эту проблему?

8
three.js webgl

1 ответов

это именно то, что вы уже сказали.

Ваш браузер получает повешен из WebGL и останавливает его, чтобы предотвратить ваш GPU (и компьютер), чтобы повесить на неопределенный срок, либо ваша машина не имеет достаточно графической мощности для запуска текстурированной модели на WebGL или вы на самом деле сжимая слишком много, пытаясь отобразить тяжелый объект с действительно большим разрешением текстуры, как вы сказали:

Если 3D-модель не большая, то она загружается и работает, но с очень низким fps ~ 10-20

заставляет меня думать, что ваша машина на самом деле не может обрабатывать 3D в браузере очень хорошо. Первый совет-отменить разрешение вашей сцены, вы можете сделать это наполовину на 2 или 3 setSize вашего объекта визуализации.

для игр с интенсивной производительностью вы также можете дать setSize меньшие значения, такие как window.innerWidth/2 и окно.innerHeight / 2, для половины разрешения. Это не означает, что игра будет заполнять только половину окна, но скорее выглядят немного размытыми и увеличенными.

Это означает, что вам нужно добавить это в свой рендерер:

renderer.setSize( window.innerWidth/2, window.innerHeight/2 );

также tweking дальнюю дистанцию рендеринга вашей камеры и помогает получить некоторое представление. Как правило, это наиболее используемые значения:new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );, Если вы снизите дальность до 800 или 700, Вы можете сжать дополнительные FPS с вашей сцены (по цене расстояния рендеринга, конечно.)

Если ваше приложение после этих tweakings тогда начните работать нормально, тогда вы на самом деле столкнулись с проблемами нехватки ресурсов, что означает, что ваш компьютер не подходит для запуска WebGL. Вы также можете протестировать свое приложение на другом, лучшем компьютере и посмотреть, как оно работает и как гладко оно работает, если у вас нет доступа к другим машинам, я приглашаю вас поделиться ссылкой вашего приложения WebGL, чтобы мы могли посмотреть на него и дать также обратную связь.

Если ваш компьютер режущий край высокого класса монстр игровой автомат, то единственное, что я могу предложите вам начать также смотреть на разрешение вашей текстуры и масштабировать ее немного вниз, Также вам нужно начать смотреть на свою модель и посмотреть, можете ли вы нарезать ее в разных моделях и разместить их по кусочкам в сцене.

оставлю и эту ссылку:WebGL-HandlingContextLost (вероятно, вы уже видели это), который предоставляет некоторые устранение неполадок и способы восстановления разбитого экземпляра WebGL.

Edit: для peeps глядя на этот ответ.

после быстрого разговора с Евгением проблема в корне его проекта заключалась в использовании ОЗУ, его 3D-модель потратила впустую много ОЗУ, которое Chrome занимал до 1,6 ГБ.
Ram usage screenshot Синие шишки, когда его приложение WebGL работает.

пометив это ему, он вернулся со своим решением:

Я решил свою проблему. Я объединил дороги в один файл и изменил размер рендерера

8