Comments 18
Спасибо за обзор. Сам использовал только three.js (в основном мелочь, вроде vimeo.com/83977515), было интересно увидеть babylon.js. Попробую на досуге. В карму плюс ;)
Спасибо за обзор.

К минусам обоих библиотек: когда-то сам так писал, но теперь удивляет такой подход — перерисовывать сцену даже если она не изменилась.
а как вы будете определять, что стоит перерисовать?! Если камера повернулась или сместилась совсем немного, перерисовывать придётся всё.
Например, как в graphics2d: для изменения параметров используются методы (а не свойства) объекта, которые вызывают перерисовку.
// обычный подход: loop перерисует всё с другим значением параметра
object.x = 10;

// функция object.x изменяет параметр и вызывает одну перерисовку
object.x(10);


Вопрос не в том, чтобы перерисовывать часть объектов (это другой вопрос), а чтобы не перерисовывать, когда это не нужно. И вообще исключить любую обработку. Например, если ваша сцена меняется только при движении мыши, очевидно, перерисовка, когда мышь неподвижна, абсолютно бессмысленна. Но здесь она есть.
Если я не ошибаюсь, никто не навязывает перерисовку в цикле, вы вольны вызывать ее на свое усмотрение. Но для динамических сцен, где изменения могут происходить самостоятельно (дождь например), такой цикл необходим. Кроме того — это общепринятая практика для игр, и не забывайте что у рекомендуемого THREE.js цикла есть свои достоинства, например: ограничение частоты кадров и отключение когда вы переключаете вкладку в браузере.
Спасибо за статью. Давно хотел что-нибудь на JS написать в плане игрушек.
Скажите, а как обстоит дело с обфускацией кода? Это единственный способ защиты?
Ну как вариант разве что можно предложить на игровом движке blender сделать. И дальше просто экспортировать в браузер. Правда не уверен что там гладко все пройдет с многопользовательским вариантом. Но мне кажется что там тоже многое возможно.
Обфускация, увы, зачастую замедляет код, что в WebGL (по крайней мере, сейчас) вряд ли приемлемо.
Если у вас какие-то секретные алгоритмы, не связанные с отрисовкой, проще всего их перенести на сервер.
Чтобы вращать мышью камеру с объектом нужно вначале создать один new THREE.Object3D(), внутрь него поместить другой и внутри вращать. Тогда получится видимость поворота вокруг своей оси. Выглядит это все в сокращенном варианте примерно так:


Проблемы с вращением камеры происходят из-за того, что для поворота объекта используются Углы Эйлера
Такие повороты некоммутативны и конечное положение системы зависит от порядка, в котором совершаются повороты.
wikipedia.org

Для решения проблемы можно использовать один объект (или саму камеру) с измененным порядком осей вращения:
obj.rotation.order = 'YXZ';
В тексте и в комментариях выше вспоминали blender, blend4web это по сути тот же blender только может с десятком уже готовых сцен в платной версии. Ну и встроенном в него экспортере в веб.
У них есть еще многофункциональный редактор-просмотрщик и сложность проектов не ограничивается отдельными сценами. Вот пример полноценного уровня с физикой, NPC, даже трактором.
Самая первая картинка — это из вашей игрушки или…? :)
Давно пользуюсь three.js, на мой взгляд он все таки лидер среди всех остальных библиотек. Если где-то встречается WebGL, то можно почти быть увереным — это three.js.
Ее, на мой взгляд, надо рассматривать как графический движок, а не игровой. Тогда все встает на свои места.
Самая первая картинка из стандартного примера ландшафта babylon.js с наложением карты. Мне в написании игрушки показалось самым сложным это все таки не окружающий мир а взаимодействие друг с другом игроков синхронизация и все такое.
Замечательный обзор. Правда не дает понять о преимуществах и недостатках, не рассказывает в каких проектах лучше использовать babylon.js, а в каких three.js. Формально, одно можно назвать движком, а другое фреймворком.
Все написано понятно, я бы с особым вниманием читал это, если бы только начинал в этой сфере.
Стоило бы отметить, что babylon.js написан (переписан?) на TypeScript, будет приятно писать игры более-менее внятных объемов. К three.js тоже есть define types, но, если мне не изменяет память, то актуальность версий не сходится. Хотя можно дописывать самостоятельно.
Есть еще очень и очень хорошая штука под названием away3d. Это уже не только flash/as3, можно писать для webgl на js/ts. На сайте есть внушающая демка.
Only those users with full accounts are able to leave comments. Log in, please.