Использование IndexedDB для управления активами 3D WebGL

В этой статье я хотел бы поделиться всем, чему я научился при разработке поддержки IndexedDB в нашем игровом движке 3D WebGL Babylon.JS . Действительно, начиная с версии 1.4.x, мы теперь поддерживаем хранение и загрузку сцен JSON, содержащих наши 3d-сетки и их текстуры .PNG или .JPG в виде BLOB-объектов из IndexedDB.

Эта статья основана на моем собственном опыте по этой теме. Он основан на том, как я решил различные проблемы, с которыми я столкнулся при работе с IDB. Затем вы найдете некоторые пояснения и советы о том, на что следует обратить внимание при работе с IndexedDB. Я также поделюсь, как и почему мы используем его в нашем движке 3d WebGL. Тем не менее, эта статья может быть полезна для всех, кто смотрит на IndexedDB в целом. 3D-игры просто послужат иллюстрацией его использования.

• Введение в IndexedDB
• Зачем использовать IndexedDB в наших игровых сценариях?
• Понимание рабочего процесса выполнения IndexedDB и обработка исключений
  • Открытие базы данных
  • Обработка хранилища блобов изображений во всех браузерах
  • Обработка квоты достигнута
• Несколько советов, которые я выучил и использовал в процессе разработки
  • Как очистить / удалить проиндексированные базы данных в различных браузерах
  • Знаете ли вы о просмотре InPrivate / Incognito?
  • Как проверить, действительно ли загружены ресурсы из БД
  • Некоторые внутренние детали IE, Firefox и Chrome
• Как мы используем это внутри Babylon.JS

Введение в IndexedDB

IndexedDB — это нереляционная база данных, использующая механизм ключей / значений . Это БД noSQL. Вы могли видеть это как третье поколение хранилища, обработанного браузером. Первый — печенье, второй — локальное хранилище.

Это спецификация W3C , которая в настоящее время находится в Рекомендации кандидата . Это реализовано большинством современных браузеров: IE10 +, Chrome / Opera & Firefox. Более того, эта спецификация поддерживается в версии без префиксов начиная с IE10, Firefox 16 и Chrome 24 / Opera 15. Похоже, она готова к использованию! Вот почему мы используем его на нашем сайте сегодня: http://www.babylonjs.com

Я не буду рассказывать об основах IndexedDB, так как в Интернете для этого есть хорошие ресурсы. Тем не менее, я потратил много времени на поиск современной документации и хорошо объясненных руководств. Действительно, поскольку спецификация развивалась в течение нескольких лет, большинство статей, которые вы найдете в Интернете, будут устаревшими.

Если вы не хотите терять время на это устаревшее содержимое, вот мои 4 рекомендуемые статьи для чтения:

1 — Сама спецификация W3C : http://www.w3.org/TR/IndexedDB/ . Он действительно содержит все и его относительно легко читать. Я часто заканчивал тем, что читал спецификацию, чтобы действительно понять, как она работает, чтобы решить некоторые из моих проблем. Иногда мы просто забываем, что спецификация W3C может быть лучшей документацией. ?
2 — Работа с IndexedDB от Рэймона Камдена . Это совсем недавно, очень хорошо объяснил и идеально подходит для начинающих. Моя статья, вероятно, будет дополнять эту, так как я буду хранить изображения в виде больших двоичных объектов, которые не рассматриваются в этой статье.
3 — IndexedDB на нашем MSDN . Он содержит некоторые интересные детали и большой учебник.
4 — Использование IndexedDB на MDN . Хорошая документация как всегда на MDN.

Поэтому, пожалуйста, прочитайте хотя бы вторую ссылку, если вы еще ничего не знаете об IndexedDB.

После этого, основываясь на моем опыте, позвольте мне поделиться самым большим предупреждением, которое вы должны иметь в виду: действительно понять, что IndexedDB полностью асинхронный и основан на транзакциях . Вам нужно дождаться завершения асинхронных операций чтения / записи, а также дождаться завершения асинхронных транзакций, чтобы убедиться, что в вашем коде все в порядке. Я проиллюстрирую это несколькими маленькими диаграммами ниже.

Зачем использовать IndexedDB в наших игровых сценариях?

Я начал думать об использовании IndexedDB во время моих летних каникул. Я был дома со своей невероятной 2-мегабайтной ADSL-линией, и я был подавлен каждый раз, когда мне нужно было перезагрузить сцену с нашего сайта. Для загрузки некоторых сцен может потребоваться более 5 минут. Тогда мне стало интересно: « Поскольку я уже скачал все ресурсы один раз, зачем мне их повторно скачивать? »

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

Я хотел что-то лучшее для игрового процесса. Как игрок, я могу загрузить ресурсы во время первого запуска игры. Но я не хочу терять время на повторную загрузку, потому что мой браузер решил очистить часть своего кеша. Когда я играю в игру, я хочу играть в нее немедленно. Изолируя данные игры в IndexedDB, у нас меньше шансов попасть в различные сценарии очистки кэша. Мы тогда приобретаем большую независимость.

Более того, мы недавно отправили в BabylonJS инкрементальный загрузчик . Это означает, что сцена будет загружена почти сразу, и мы будем загружать ресурсы по требованию в зависимости от того, куда в данный момент смотрит камера. Небольшая проблема с этим подходом заключается в том, что ресурсы (сетки геометрии и текстуры) будут сначала загружаться с веб-сервера и внедряться в 3D-движок. Мы будем страдать от задержки сети. Инкрементная геометрия не будет отображаться сразу и внезапно появится через пару секунд после того, как игрок переместит камеру. Используя наш подход IndexedDB, мы можем предварительно загрузить ресурсы в БД в фоновом режиме и загрузить их практически мгновенно с помощью инкрементного загрузчика. Затем мы удалим проблему с задержкой в ​​сети. Над этим нужно еще поработать, но теперь у нас есть все, чтобы построить его в будущей версии.

  // Открыть транзакцию в базе данных 
  varaction = that.db.transaction ([ " scene " ], "readwrite" ); 
  // транзакция может быть прервана из-за ошибки QuotaExceededError 
  транзакция.onabort = функция (событие) { 
     попытаться { 
         if (event.srcElement.error.name === "QuotaExceededError" ) { 
             that.hasReachedQuota = true ; 
         } 
     } 
     catch (ex) {} 
     обратный вызов (sceneText); 
  ; 
  транзакция.oncomplete = функция (событие) { 
     обратный вызов (sceneText); 
  ; 

  Манифест кэша 
   Версия 1.1 
  КЭШ:  
  abylon.js 
  and.minified-1.1.1.js 
  ndex.html 
  ndex.css 
  ndex.js 
  creenshots / heart.jpg 
  creenshots / omegacrusher.jpg 
  ssets / BandeauEmbleme.png 
  ssets / Bandeauhaut.png 
  ssets / BtnAbout.png 
  ssets / BtnDownload.png 
  ssets / gradient.png 
  ssets / Logo.png 
  ssets / SpotDown.png 
  ssets / SpotLast.png 
  Cenes / Сердце / Heart.babylon.manifest 
  Cenes / SpaceDek / SpaceDek.babylon.manifest 
  СЕТЬ: