Каталоги Сервисы Блограйдеры Обратная связь Блогосфера
Какой рейтинг вас больше интересует?
|
Must see: видеозаписи митапа MoscowJS 372017-05-31 15:38:46+ развернуть текст сохранённая копия В четверг, 25 мая, в офисе Avito прошла очередная встреча сообщества фронтенд-разработчиков MoscowJS. Обсуждали отладку анимации, создание WebGL визуализации, сборку webpack’ом и код-ревью. Сегодня публикуем видеозаписи докладов — профессионалам будет интересно. Приятного просмотра! Читать дальше → Тэги: 3d-моделирование, avito, javascript, moscowjs, webgl, webpack, анимация, блог, веб-сайтов, кода, компании, программирование, разработка, ревью WebRTC, Safari2017-04-08 18:49:58+ развернуть текст сохранённая копия
В апреле прошлого года по сети прокатился пресс-релиз о том, что Apple выкатывает поддержку WebRTC в браузерах Safari для Mac OS и iOS. С момента выхода пресс-релиза скоро пройдет ровно год, как Apple продолжает выкатывать WebRTC для Safari. Ждем. Однако ждут не все. Кому-то требуется реал-тайм видео в Safari прямо сейчас и в этой статье мы расскажем как обходиться без WebRTC в браузере iOS Safari и Mac OS Safari и чем можно его заменить. Читать дальше → Тэги: apple, flash, flashphoner, hls, ios, ip-camera, ipad, iphone, javascript, rtsp, safari, webcam, webgl, webrtc, websocket, блог, веб-сайтов, компании, программирование, разработка Как я писал игру на конкурс, или чудесное превращение «Линий» в «Морской бой»2016-10-26 17:54:22< ... + развернуть текст сохранённая копия Эта история о том, как я делал очередную 3D веб-игру. История терзаний и сомнений, история недосыпаний и лени. История о том, как все сделать в самый последний момент. В общем, чего тянуть кота за рога – перейду к рассказу. Но сперва – еще кое-что, чтобы покончить со всеми формальностями. «Мадам, вам кофе в постель?» «Нет, лучше в чашку». Кофе был моим ежедневным спасением из лап Морфея, особенно когда я хотел поработать над игрой с утра, перед всеми остальными дневными заботами. Надо отдать ему должное. Я просто не могу не упомянуть о нем, так как для меня это стало воистину одной из составляющих успеха, под коим я понимаю доведение игры до релиза. (Здесь могла быть ваша реклама кофе). КонкурсНа самом деле, я вписался не в тот конкурс, для которого мог бы что-то сделать. По его условиям требовалось создать игру под Windows, скачиваемую и запускаемую по exe-файлу. Я же люблю программировать под браузеры. Я не знаю C++ и C#, у меня даже нет Visual Studio. Но тут внезапно у меня появилась отличная идея игры, и я подумал – а какого черта! Буду просто делать игру. А получится ли соблюсти все условия конкурса или нет – не так важно. В конце концов, просто запущу ее в социальных сетях. Читать дальше → Тэги: javascript, php, three.js, webgl, веб-сайтов, игр, разработка Blend4Web vs Unity. Битва на ринге. Раунд 22016-09-15 16:07:50Очередные «попугаи»?! О, нет. Три реальных теста, три разных направления, различные устройства и ... + развернуть текст сохранённая копия Очередные «попугаи»?! О, нет. Три реальных теста, три разных направления, различные устройства и интересные факты. Читать дальше → Тэги: blend4web, unity3d, webgl, браузеры, веб-сайтов, игр, мобильная, мобильных, приложений, разработка Введение в BabylonJS2016-08-04 03:00:08В этой статье мы познакомимся с популярным WebGL-фреймворком BabylonJS на
...
В этой статье мы познакомимся с популярным WebGL-фреймворком BabylonJS на примере создания прототипа игры. Полные листинги программы доступны на github. О BabylonJSBabylonJS является Open Source проектом, распространяемым под лицензией Apache License 2.0.
Некоторые возможности: Что будет сделаноИтак, что же за игру мы сделаем. Базовые понятия и структура приложенияСамое первое, что нужно сделать - подготовить html с элементом canvas и подключить библиотеку Babylon.js.
Кроме самого фреймворка, подключаются сразу библиотека физического движка cannon.js, а также файлы игры.
Все пустые методы мы заполним позже.
Итак, после загрузки страницы, создается главный объект игры и конструктору передается id элемента canvas.
Engine можно назвать сердцем или двигателем фреймворка. Первым аргументом при создании экземпляра BABYLON.Engine передается элемент canvas. Второй аргумент включает / отключает поддержку сглаживания (antialias). Обязательным элементом является сцена. Приложение может иметь несколько сцен. Для создания сцены используется класс BABYLON.Scene, которому нужно передать объект BABYLON.Engine.
Сцена имеет такие часто используемые свойства, как clearColor - цвет фона, meshes - список мешей, lights - список источников света, materials - список материалов, textures - список текстур, cameras - список камер, activeCamera - активная камера. На этапе разработки, особенно для улучшения производительности приложения, очень полезной может оказаться панель отладки. Ее можно включить следующим образом:
Панель отладки включает много информации, напр. fps, количество вызовов рендеринга сцены (draw calls), дерево мешей. Следующий обязательный элемент - это камера. С помощью камеры мы “видим” сцену и все ее объекты.
В коде выше используется камера BABYLON.FreeCamera. Это стандартная камера для шутеров от первого лица.
Ею удобно пользоваться при разработке, т.к. она позволяет свободно оглянуть всю сцену с любой позиции. Для указания позиций используется класс BABYLON.Vector3. Для управления камерой, нужно вызвать метод attachControl:
Следующий код важен для сохранения пропорций и разрешения картинки при изменении размеров браузера
В методе initSounds будут загружаться используемые звуковые файлы. В методе run происходит необходимый вызов метода runRenderLoop. Этому методу передается функция, которая будет вызываться
каждые 60 фреймов в секунду (в идеальном случае). Кстати, замечу, что на данный момент рендеринг в WebGL ограничен числом 60 fps.
Пустая сцена готова и показывается стандартный цвет фона, если он не был переопределен с помощью свойства clearColor, например таким образом
То есть, класс BABYLON.Color3 используются для задания цвета и это еще один класс, без которого вы навряд ли обойдетесь. Навряд ли вы обойдетесь и без такой важной составляющей, как свет, хотя это необязательный элемент и приложение будет работать и без него. HemisphericLight определяется направлением к солнцу, диффузным цветом (diffuse, цвет пикселей, направленных вверх), цветом земли (groundColor, цвет пикселей, направленных к земле) и отраженным цветом (specular). Свойства diffuse и specular, а также intensity относятся ко всем классам источников света. Каждый свет можно отключить / включить, вызвав метод setEnabled(true/false). Прежде, чем что-то добавить в сцену для удобства разработки добавим оси мировой системы координат, что реализовано в методе createWorldAxis. Mesh - еще одно базовое понятие 3d-программ. В BabylonJS они создаются статическими методами класса BABYLON.Mesh. Отмечу также возможность в BabylonJS загрузки подготовленных моделей из файлов. Заполним кодом метод createWorldAxis
после чего можно будет увидеть следующий результат. Самыми важными свойствами мешей являются position и rotation. Создание уровняВся информация по уровням игры содержится в файле levels.js. Каждый уровень представлен в виде массива, который представляет из себя карту располагаемых объектов. Каждый элемент карты уровня - это обозначение типа блока данного участка карты. Уровни создаются классом Level в методе Level.Create на основе карты уровня.
Конструктор класса Level:
Классы GameObject и BlockВсе объекты уровня основываются на классе GameObject, который в свою очередь наследуется от класса BABYLON.Mesh.
Другой подход - не расширять класс BABYLON.Mesh, а инкапсулировать соответствующий экземпляр BABYLON.Mesh внутри игрового объекта. Рассмотрим класс Block.
В Block.TYPES находятся все типы блоков.
Второе - поскольку блоков много, мы сначала создаем прототип блока, на основание которого создаются все остальные блоки.
Улучшение производительности с помощью инстанцированияВ BabylonJS есть удобные средства для оптимизации. В данном приложении мы повсюду используем инстанцирование. Это позволяет отрендерить множество однотипных объектов с помощью одного “draw call”. Уменьшение количества необходимых вызовов прорисовки - эффективное средство для улучшения производительности. Если количество fps вас не устраивает, в первую очередь обратите внимание на значение “draw calls” в панели отладки. Пример инстанцирования блоков:
С этой целью также можно использовать способ склеивания мешей. В BabylonJS это делается очень просто: в метод BABYLON.Mesh.MergeMeshes первым параметром нужно передать массив мешей. На выходе получится один единственный меш, поэтому применять этот способ имеет смысл только тогда, когда вам не нужны больше исходные меши как отдельные объекты, например, если не нужно изменять их позиции. Второй параметр метода BABYLON.Mesh.MergeMeshes позволяет оставить исходные объекты, если указать его равным false (по умолчанию равен true). Упомяну еще, что BabylonJS поддерживает LOD (Level Of Detail). LOD - это способ улучшения производительности за счет уменьшения уровня детализации объекта при удалении от него. Класс CoinДля создания монеток используется BABYLON.VertexData.CreateCylinder.
Отличие монеток CX и CZ состоит в их ориентации. CX “смотрит” на плоскость yz, а CZ - на xy.
rotation.x и rotation.z используются для разворота монеты. Углы задаются в радианах. Класс PlayerВ классе Player используется метод CSG для задания геометрии. CSG расшифровывается как
Constructive Solid Geometry и это способ моделирования геометрических тел с помощью комбинирования нескольких
примитивов.
АнимацияПрименим анимацию к монеткам. Для начала создадим объект BABYLON.Animation, указав свойство, которое будет изменяться
Третий параметр - количество фреймов в секунду для анимации, Следующим шагом нужно создать набор значений для каждого фрейма (animation keys) и добавить его в свойство animations меша:
И, наконец, с помощью метода beginAnimation сцены, анимация начинает работать:
Четвертый параметр метода beginAnimation установлен в true для зацикливания анимации. Если вы управляете анимацией вручную, обратите внимание на метод сцены getAnimationRatio. Использование этого метода позволяет сделать скорость анимации независимой от fps игры. Что получается на данный момент: Физический движокBabylonJS имеет хорошую интеграцию с двумя физическими движками: Oimo.js и Cannon.js. Мы будем использовать последний. Чтобы использовать физический движок в BabylonJS всего лишь нужно подключить файл с кодом движка и вызвать метод enablePhysics. Добавим этот вызов в начало метода run:
enablePhysics принимает два аргумента. Первый - это gravity с характиристиками притяжения в виде вектора BABYLON.Vector3.
По умолчанию gravity равняется BABYLON.Vector3(0, -9.807, 0). После включения физического движка пока ничего видимого не произойдет. Pacman остается висеть и не падает на платформу.
Чтобы применить физику к мешу, ему нужно добавить так называемое “rigid body” (в переводе - твердое тело). Каждое
“rigid body” имеет какую-то форму. Чем проще форма (по другому - impostor), тем легче движку выполнять свою работу.
Коллизии рассчитываются с учетом выбранной формы, то есть они не применяются непосредственно к мешу. Добавим к мешу игрока “rigid body”:
Как видите, нужно создать экземпляр BABYLON.PhysicsImpostor и присвоить его свойству меша physicsImpostor. Конструктор PhysicsImpostor должен получить первым параметром сам меш, вторым - вид тела для расчета физики, третьим - миксин с физическими характеристиками, четвертым, что привычно при работе с BabylonJS - объект сцены. Смысл физических характеристик, которые мы указываем, ясен из названий: mass - масса тела (в кг), friction - коэффициент трения при соприкосновении с другими “rigid body”, restitution - коэффициент сопротивления (попробуйте увеличить это число и вы увидите, что увеличилась “прыгучесть”). Сейчас pacman все еще висит в воздухе. Это потому что мы указали нулевую массу. После
он начнет падать. Есть несколько способов как перемещать или вращать меш с применением физического движка.
Конечно, это не заставит тело двигаться с постоянной скоростью вверх, т.к. на него действует сила притяжения. Для вращения существует аналогичный метод setAngularVelocity. Пример:
Единственным аргументом метода является объект BABYLON.Quaternion. Другим способом изменить положение тела является применение силы или импульса. Чтобы применить импульс, нужно использовать метод applyImpulse, например:
Первый параметр - вектор импульса, второй - место приложения вектора импульса. Еще одним объектом, к которому нужно применить физику, является платформа. Иначе, pacman падает вниз сквозь нее.
Конечно же, для блоков платформы нужно указать массу равной нулю. Настала пора добавить управление pacman-ом. Обозначу основные моменты.
Если pacman сваливается с платформы уровень сбрасывается и возвращается на начальную позицию. Заменим камеру FreeCamera на FollowCamera.
Эта камера будет следовать за pacman при его перемещениях. Но для этого нужно присвоить свойство target:
Промежуточные результаты: Спрайтовое привидениеСоздадим класс Ghost, который как и остальные объекты наследует класс GameObject. Но этот объект будет
реализован на основе спрайтов. Чтобы использовать спрайты в BabylonJS, нужно создать вспомогательный менеджер спрайтов. В разбираемом коде это делается в методе pacman3d.prototype.init перед вызовом run:
Самый главный параметр - это конечно же путь к спрайтовому изображению. Привидение является мешом, а точнее кубом, но сам меш является невидимым, вместо этого к кубу привязываем спрайт таким образом (см. метод Ghost.prototype.init):
Как видно, конструктору BABYLON.Sprite нужно передать, кроме имени, спрайтовый менеджер. Потом позиция спрайта привязывается
к позиции меша с помощью присваивания свойства position. После вызова sprite.playAnimation начинает работать
анимация спрайта, картинки входящие в спрайт начинают сменять друг друга, начиная с самой первой под номером 0. Чтобы привидение двигалось и правильно выбирало дорогу, не падая вниз, я наделил его зачатками AI (см. файл EnemyBrain.js):
Промежуточные результаты: Обработка коллизий, подсчет монеток и логика смены уровнейBabylonJS предоставляет встроенные средства для проверки коллизий. Каждый меш имеет свойство showBoundingBox. Если его установить в true, вы увидите ограничивающий куб вокруг меша. Именно он и используется для расчета коллизий. Проверка коллизий в нашем приложении запускается в каждом фрейме следующим кодом в pacman3d.prototype.run:
Для проверки коллизий между мешами у каждого меша есть метод intersectsMesh. В этот метод нужно передать другой меш, коллизиции с которым проверяются. Например, в следующем коде проверяются коллизии с мешами-привидениями:
Если происходит коллизия “pacman и привидение”, уровень сбрасывается и игрок возвращается на первоначальную позицию.
Кроме пересечения с другим мешом, можно проверить коллизию с точкой в пространстве (BABYLON.Vector3). Для этого у меша
есть метод intersectsPoint. Еще один схожий метод, а именно intersects проверяет коллизию с лучом (см. класс BABYLON.Ray). Еще один вид коллизий, который наверняка пригодится - это выбор объектов мышкой. Объект сцены имеет метод pick, которому нужно передать координаты указателя, например:
В этом примере, pickInfo содержит схожую с результатом intersects информацию, включая pickedMesh (меш, который выбран мышкой). Функционал уже реализован, осталось приукрасить графику и добавить звуки: Материал и текстурыМатериал и текстуры - еще одни важнейшие элементы 3d-приложений, особенно игровых. На данный момент все объекты, кроме привидений и осей координат раскрашены дефолтным серым цветом. Сейчас мы все раскрасим! Начнем с главного игрового персонажа.
BABYLON.StandardMaterial является стандартным материалом BabylonJS. Конструктору этого класса нужно передать название материала и конкретную сцену. В дальнейшем этот материал можно достать с помощью метода getMaterialByName сцены. Все остальное достигается путем использования соответствующих свойств материала.
Материал применяется к объекту очень просто
После этих действий pacman становится желтым. Раскрашиваем монетки
Итак, о некоторых свойства материалов. Следующий код, демонстрирует некоторые дополнительные эффекты, которые можно реализовать в BabylonJS достаточно просто.
После этого монетки стали блестеть. Что касается платформы, то для нее мы добавим текстуры
Конструктору BABYLON.Texture нужно передать путь к изображению текстуры и объект сцены, после чего
присвоить полученную текстуру свойству diffuseTexture материала. Из свойств текстур хочу обратить внимание на следующие: Это конечно же не все возможности, которые предоставляет BabylonJS с помощью текстур. Например, поддерживаются видеотекстуры (BABYLON.VideoTexture), имитация зеркал с помощью BABYLON.MirrorTexture, бамп маппинг (см. свойство материала bumpTexture). В нашей программе используется skybox с помощью кубической текстуры для создания окружения:
ЗвукВ заключение обзора добавим звуки к игре. Ниже пример как инициализируется звуковой объект (см. метод pacman3d.prototype.initSounds):
Инициализация звука не выделяется из подхода, прослеживаемого по всему фреймворку. В конструктор передаются: имя, путь к файлу, объект сцены. Следующий параметр позволяет выполнить код после успешной загрузки файла. Последним параметром можно указать дополнительные опции, например зациклить воспроизведение. В нужных участках кода, когда нужно воспроизвести звуковой файл вызывается следующий метод:
Конечный результат: Тэги: webgl
Главная / Главные темы / Тэг «websql»
|
Категория «Художники»
Взлеты Топ 5
Падения Топ 5
Популярные за сутки
300ye 500ye all believable blog bts cake cardboard charm coat cosmetic currency disclaimer energy finance furniture house imperial important love lucky made money mood myfxbook poetry potatoes publish rules salad seo size trance video vumbilding wardrobe weal zulutrade агрегаторы блог блоги богатство браузерные валюта видео вумбилдинг выводом гаджеты главная денег деньги звёзды игр. игры императорский календарь картинка картон картошка клиентские косметика летящий любить любовь магия мебель мир настроение невероятный новость обзор онлайн партнерские партнерских пирожный программ программы публикация размер реальных рубрика рука сайт салат своми событий стих страница талисман тонкий удача фен феншуй финансы форекс цитата шкаф шуба шуй энергия юмор 2009 |
Загрузка...
Copyright © 2007–2024 BlogRider.Ru | Главная | Новости | О проекте | Личный кабинет | Помощь | Контакты |
|