Оптимизация 3D моделей на Javascript

Все кто работал с конструктивной сплошной геометрией (CSG), создавал свой воксельный движок или использовал готовые модели, сталкивался с проблемой оптимизации треугольников. Число и расположение треугольников у моделей может быть не оптимальным. Конечно, если дизайнер нарисовал для вас лично модель, его можно попросить её исправить. Но как быть, если модель процедурная, и дизайнер не может исправлять каждую процедурную деталь?

Нам придется делать это автоматически.

Читать дальше

Редактор моделей для различных форм жизни

При создании большого проекта Dreams Gate, постоянно нужны модели и не только зданий и сооружений, но и различных форм жизни. Это могут быть различные животные, рыбы, гуманоиды, фантастичные пришельцы, динозавры и даже роботы. Но рисовать их в стандартных редакторах Blender / 3D Max / Maya и других очень сложно, долго, а в итоге они будут занимать слишком много места (даже в сжатом виде модель одного человека получилась 43кб при 60 тыс треугольников и 1 текстуре 1024х1024 без анимации). Конечно процедурные модели экономят место, но в этом случае создание игры займет слишком много времени.

Читать дальше

Полет над планетой

Проснувшись утром и выглянув в окно, приходят мысли: какой волшебный вид из моего окна. Реальность, в компьютерном мире, далека от совершенства, но прогресс не стоит на месте. Каждый день, мы становимся наблюдателями, как рождаются десятки новых технологий, появляются тысячи строк кода. Это приближает нас к созданию полноценного виртуального мира.
Но сегодня, хочется поделиться с Вами, полетом над планетой. Работа над созданием качественных планет велась не один год и новая версия планет требовала определенного подхода к созданию. Были испробованы различные методы. От создание сферы из треугольников, до трассировки лучей. Но только с появлением современных видеокарт, стало доступно создание качественных планет при помощи трассировки лучами.

Так как, у нас браузерная игра и ограниченные возможности, было потрачено не мало времени и сил для получения качественного вида поверхности планет. При этом все создается без использования текстур и без использования треугольников (только два треугольника для трассировки и отображения). Поверхность планеты + атмосфера + облака, всё создается на лету, каждый кадр. Для создания облаков использовались формулы движения жидкостей.
При этом fps 60 и более на современной видеокарте.

Список современных видеокарт: Videocard Benchmark, если ваша карта от 5000 баллов и выше, то всё будет летать.

На пути к звездам!

Очередная суббота, а с ней и новости о проекте.
Вы спросите, а где же обновление?
Все верно, обновление готовится и это будет самое большое обновление с момента старта работы над проектом. Мне не терпится выложить и похвалиться проделанной работой, но прежде чем это случится еще необходимо приложить не мало усилий.

Продолжая серию рассказов о создании, хочется рассказать про планеты. А точнее, про изменения метода вывода, теперь, трассировкой лучей будут выводиться планеты и их поверхность на экран. Это самый медленный способ вывода графики на экран и видеокарты с трудом справляются, но перед открывающимися преимуществами, готов рискнуть и пойти на это. JavaScript по своей природе медленный, делать на нем генерацию кусков планеты оказалось очень накладно (даже через 1-2 кадра на сектор). Проведя несколько тестов, сравнив скорость работы с привычным выводом на экран, было принято решение по модернизации движка.

И вот результат:

Космос ближе и ближе

Перед обновлением, решил опубликовать несколько статей, о том, как же создавался космос в нашем проекте Dreams Gate. Конечно, наш проект имеет бурную историю и планеты уже создавались (в 2002 / 2008 / 2010 / 2012 и 2014), вместе с космосом (2011 / 2014). На этот раз, ушел значительно дальше. Огромная часть времени была потрачена на математические расчеты.

webgl-infinity-space

Можно легко представить как корабли летают вокруг планет, пролетают мимо галактик. Но, стоит задуматься о числах и начинаешь понимать, что обычному программисту доступны лишь небольшие числа, а дальше, потеря точности и просто ошибки.
Программистам доступны числа 32\64 бит, редко 128. Чтобы это означало? Например число двойной точности дает весомую погрешность, когда корабль находится например на краю планетной системы, даже если мы будем считать координаты не глобальные, а лишь относительно центра.
Например Астрономическая единица 149 597 870 700 метров, а вот Парсек уже 30 857 780 760 502 620 метров. Даже при этих «небольших» числах и доступных программисту (float / double), по полу корабля мы уже пройтись не сможем, с каждым шагом мы будем прыгать на несколько десятков метров.

Как же быть, что же делать?
Ответ прост: создать свою систему единиц.
Многие выбирают арифметику с фиксированной запятой 64.64 (64 бита до запятой и 64 бита после), если грубо, то: (9 223 372 036 854 775 807).(9 223 372 036 854 775 807), всего 38 десятичных цифр, но в реальности число будет чуть меньше, так как будет убран 1 бит на знак. Но этот метод не для нас, он слишком простой.

Так как нет предела совершенству, а в Javascript, все еще сложнее с математической частью, чем на c++.
Пошел другим путем, поставил задачу:
Считать числа без ограничения в точности.

После месяца разработки, получилось добиться чисел без ограничений, полностью, лишь объем доступной оперативной памяти для Javascript являлся пределом. Но при разработке сетевой части, всё же пришлось установить ограничения. Сервер хранит координаты в базе данных mysql, тестами было выяснено, что удобнее всего хранить координаты до 1000 десятичных цифр упакованных Base85. На этом и решил ограничиться.
В итоге: у нас числа от -10900, до +10900, но, так как пространство в проекте измеряется в метрах, можно понять какие у нас пределы.
Так же, помимо обычных операций (сложения, вычитания, умножения, деления, поиска остатка от деления), были созданы аналоги sin, cos, tan, atan, log для работы с большими числами. Скорость получилась не высокой, но её достаточно для работы игры.

Новости с передовой

Сегодня у нас долгожданное обновление. Основной приоритет это создание новой сетевой части, по этому, изменения в этом обновлении лишь косметические.

Основные изменения в этой версии:

  • Изменился интерфейс в режиме строительство баз
  • Подсветка выделенного здания
  • Появилась мини карта
  • Усовершенствован редактор кораблей


В редакторе кораблей появилась возможность вращения деталей, так же их растяжение.
Дополнительные клавиши:

  • Пробел — переключение на следующий режим (перемещение, вращение, растяжение)
  • T — перемещение
  • R — вращение
  • S — растяжение
  • E — переход между локальной и глобальной системой координат

Ссылка на проект: play.dg8.ru

Часть вторая: Детали кораблей

Это вторая часть рассказа об изменениях в этой версии. Редактор кораблей, еще в разработке и текущая версия лишь дает представление о том, что вы увидите. Детали для строительства кораблей сейчас в общей куче, они идут без сортировки, часть деталей от орбитальной верфи.
Понимаю, после предыдущей части, вы наверное устали, давайте просто посмотрим на изображения новых деталей для строительства кораблей:

Часть первая: Регистрация и авторизация

Это обновление, отличается от предыдущих. Сразу приведу короткий список изменений, в текущем обновлении:

  • Регистрация и авторизация пользователей.
  • Автоматическое определение языка пользователя.
  • Под модальными диалогами появилось затенение, блокирующее случайные нажатия мимо диалога.
  • Главное меню отображается поверх диалогов.
  • Созданы новые детали для строительства кораблей.

Начну свой рассказ с момента, почему у меня ушла дополнительная неделя, на создание системы регистрации. Мы все знаем, что почти на каждом сайте есть регистрация. Но, не всегда обращаем внимание, на то, что наши пароли гуляют в открытом виде. Даже протокол https, не сможет нас защитить, от их хищения. Почти на каждом сайте, пароли шифруют только на стороне сервера. Используют по большей части md5, уже реже sha-1 и другие алгоритмы. Так в чем же опасность? (Есть хорошая статья в журнале «Хакер»: Все методы взлома MD5) Во первых, с сайта могут украсть базу данных паролей и восстановить все пароли пользователей, которые, есть в ней. Бывает, что шифрования вообще нет и на сайте пароли лежат в открытом виде. Но вернемся к браузеру, если компьютер или браузер будет заражен трояном/вирусом или вы случайно оставите свой пароль на компьютере друзей или еще где, пароли с легкостью утекут и ими смогут воспользоваться злоумышленники. Более интересная часть, все твердят — протокол https вас спасет, увы это не так, да он спасет от перехвата трафика, но не от троянов, вирусов и плагинов которые могут быть установлены в браузере, либо на компьютере и иметь прямой доступ к вашим паролям.
Ну что, готовы? Давайте рассмотрим примеры, начнем прогулку с социальной сети «В контакте» (я мог выбрать и другую социальную сеть или просто сайт). Но «В контакте», больше всех радует своей защитой. Может после прочтения текста, они переделают свою авторизацию и регистрацию. Сегодня 5 марта 2016 года и мы приступаем к тесту, открываем контакт и переходим в режим отладки F12:
vk-testiruem-yiazvimosti

Шаг первый, введем вместо логина 123456789, а вместо пароля 987654321. И посмотрим, как эти данные, будут отправлены на сервер (в браузере хром — F12, далее, перейти на вкладку Network).
vk-yiazvimost-parolia

И что мы видим, данные пошли по протоколу http в открытом виде, еще и без шифрования (Такое случается постоянно, не каждый человек знает, что нужно руками вводить https:// для перехода на защищенный протокол). Для социальной сети такого масштаба, это очень плохо, так как пароли гуляют в открытом виде и к ним они придут, так же, в открытом виде. Не ясно, как они будут использованы сотрудниками или компанией.

Посмотрим как же у нас обстоят дела? Введем логин abc@mail.ru, а пароль 987654321.
dreams-gate-password-protection

Пароль не похож на свое начальное представление, на вид как MD5, но так ли это? (Есть несколько десятков утилит, вы можете самостоятельно посмотреть, получится ли у вас из этого вытащить свой реальный пароль).

Но это еще далеко не всё, а что будет если мы опять попробуем зайти под нашим логином и паролем? Введем логин abc@mail.ru и пароль 987654321.

dreams-gate-strong-password-protection
Пароль изменился?! Это покажется странно, на первый взгляд, но чтобы защитить ваши данные приходится применять необычный подход.

Подведем итоги: Так как, нам не важно какой у человека пароль, главное, чтобы введя свои данные, пользователь смог войти в систему. По этому, мы можем преобразовать пароль в другой вид, разрушив его оригинальную структуру. Все пароли шифруются на стороне клиента (в браузере), а после отправки еще и на стороне сервера. Таким образом «реальный пароль» был зашифрован еще до отправки на сервер. Для шифрования пароля воспользовался SHA-3 Кечак (Keccak), в измененном виде, также обернул его под MD5, чтобы добавить любителям взлома «видимую легкость». Конечно этот подход совершенно не гарантирует 100% защиты, любую систему можно взломать, но такой подход, в разы, затруднит получение доступа к вашему «реальному» паролю.

Ссылка на проект: play.dg8.ru

1 2 3 4 5