Все потоки
Поиск
Написать публикацию
Обновить
3.27

WebGL *

Программная библиотека для JavaScript

Сначала показывать
Порог рейтинга
Уровень сложности

Отчет и презентации с Moscow JS в офисе Superjob

Время на прочтение3 мин
Количество просмотров5.1K
В офисе Superjob состоялась встреча JavaScript-разработчиков MoscowJS. Рассказываем, что обсуждали участники, и делимся презентациями.



Александр Савин, Superjob

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

Трехмерная графика в вебе

Время на прочтение7 мин
Количество просмотров35K
Веб-технологии прочно вошли в нашу повседневную жизнь. Мы проводим во всемирной паутине достаточно большое количество времени — смотрим новости, совершаем покупки, общаемся и работаем. Индустрия услуг и развлечений в сети Интернет стремительно развивается, ведущие разработчики программного обеспечения улучшают поддержку трехмерной графики в своих продуктах. Традиционно ее поддержка ограничивалась высокопроизводительными компьютерами или специализированными игровыми консолями, а программирование требовало применения сложных алгоритмов. Однако благодаря росту производительности персональных компьютеров и расширению возможностей браузеров стало возможным создание и отображение трехмерной графики с применением веб-технологий.

В отличие от других технологий для работы с трехмерной графикой (таких как OpenGL и Direct3D), WebGL предназначена для использования в веб-страницах и не требует установки специализированных расширений или библиотек. Одно из преимуществ WebGL — приложения конструируются как веб-страницы, то есть одна и та же программа будет успешно выполняться на самых разных устройствах (к примеру, на смартфонах, планшетных компьютерах и игровых консолях). Это означает, что WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков и станет одним из основных инструментов программирования графики.

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

Создание вашей первой игры на Phaser. Часть 3 — Создание игрового мира

Время на прочтение2 мин
Количество просмотров14K

Phaser


Оглавление


0. Подготовка к работе
1. Введение
2. Загрузка ресурсов
3. Создание игрового мира [Вы тут]
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


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


Не забывайте читать комментарии в коде, они важны!


Весь код, как и в прошлый раз, лежит в Github репозитории с тегом part-3.

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

Прямая трансляция MoscowJS из офиса Superjob

Время на прочтение1 мин
Количество просмотров2.5K
Сегодня в 19:00 по московскому времени в офисе Superjob состоится встреча JavaScript-разработчиков «MoscowJS». Присоединяйтесь к прямой трансляции!


VR Design: содержимое сцен

Время на прочтение4 мин
Количество просмотров9.2K
Данная статья является пятой в цикле про качественную разработку VR-проектов. Ранее мы уже изучили принципы VR-дизайна в статье «VR-Design: User Interface». Ссылки на другие материалы можно найти в обзорной статье.

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

В этой статье мы рассмотрим, на что следовало бы обратить внимание, учитывая как практические соображения, так и этический аспект.

Что стоит показывать, а что нет, какой посыл несет наша работа и как мы хотим общаться с пользователем. При разработке VR-проектов необходимо придерживаться определенных рамок.

Глубокое погружение дает нам большое влияние на эмоции пользователей. С этой большой ответственностью нужно обходиться очень осторожно.
image

Создание вашей первой игры на Phaser. Часть 2 — Загрузка ресурсов

Время на прочтение5 мин
Количество просмотров9.9K

Phaser


Оглавление


0. Подготовка к работе
1. Введение
2. Загрузка ресурсов [Вы тут]
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Продолжим серию уроков, посвященных использованию Phaser в связке с TypeScript. В этом уроке, мы рассмотрим загрузку ресурсов в Phaser, а также немного "причешем" код из предыдущей части.


Как и в прошлых статьях, не пропускайте комментарии в коде.


Полный код, написанный в этой статье, вы найдете в Github репозитории с тегом part-2.


Приступим!

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

Создание вашей первой игры на Phaser. Часть 1 — Введение

Время на прочтение3 мин
Количество просмотров20K

Phaser


Оглавление


0. Подготовка к работе
1. Введение [Вы тут]
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).


Что такое Phaser?


Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.

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

Создание вашей первой игры на Phaser. Часть 0 — Подготовка к работе

Время на прочтение7 мин
Количество просмотров23K

Phaser


Оглавление


0. Подготовка к работе [Вы тут]
1. Введение
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.

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

Шейдер меха на WebGL 2

Время на прочтение5 мин
Количество просмотров16K

Идея


Новый стандарт WebGL 2 стал недавно доступен в последних версиях Firefox и Chrome, так что возникло желание опробовать некоторые новые возможности. Одна из наиболее полезных и востребованных функций WebGL 2 (и OpenGL ES 3.0, на котором он основан) это дублирование геометрии (англ. instanced rendering). Эта фича позволяет уменьшить количество вызовов отрисовки (draw calls) путем многократной отрисовки одной и той же геометрии с измененными параметрами. Эта функция присутствовала и в некоторых реализациях WebGL 1, но требовала наличия определенного расширения. Наиболее часто эта функция применяется для создания систем частиц и растительности, но также довольно часто она используется для симуляции меха.

VR/AR в браузере. Как быстро влиться и сделать свое первое приложение, используя WebVR API

Время на прочтение14 мин
Количество просмотров45K


Виртуальная и дополненные реальности активно развиваются и начинают предъявлять права на захват мира. Причем применение этих технологий разнообразно и не ограничивается только играми. А с появлением инструментов для работы с VR/AR технологиями в браузере интерес возрос еще больше. Уже сейчас можно экспериментировать и создавать MVP(Minimum Viable Product) веб-проекты с помощью JavaScript API, которое так и называется — WebVR. Давайте разбираться, что это и как с этим работать. И можно ли обойтись без этого самого WebVR API?
Читать дальше →

Руководство начинающего программиста графических шейдеров

Время на прочтение8 мин
Количество просмотров47K
Умение писать графические шейдеры открывает перед вами всю мощь современных GPU, которые сегодня уже содержат в себе тысячи ядер, способных выполнять ваш код быстро и параллельно. Программирование шейдеров требует несколько иного взгляда на некоторые вещи, но открывающийся потенциал стоит некоторых затрат времени на его изучение.

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

image
Сцена в Minecraft до и после применения нескольких шейдеров.

Цель этой инструкции


Программирование шейдеров иногда кажется загадочной черной магией. Тут и там можно встретить отдельные куски кода шейдеров, которые обещают вам невероятные эффекты и, возможно, вправду способны их обеспечить — но при этом совершенно не объясняют, что именно они делают и как добиваются столь впечатляющих результатов. Данная статья попробует закрыть этот пробел. Я сфокусируюсь на базовых вещах и терминах, касающихся написания и понимания шейдерного кода, так что впоследствии вы сами сможете менять код шейдеров, комбинировать их или писать свои собственные с нуля.
Читать дальше →

VR-Design: User Interface

Время на прочтение5 мин
Количество просмотров15K
Данная статья является четвертой в цикле про качественную разработку VR-проектов. Ранее мы уже изучили основы работы со звуком в статье «Звуковые эффекты в виртуальных мирах». Ссылки на другие материалы можно найти в обзорной статье.

User Interface — это прямое взаимодействие между человеком и машиной. Это средство, с помощью которого компьютер оповещает нас о возможностях, а мы передаем ему свои намерения.

Качество и предсказуемость общения в значительной степени влияют на то, как мы воспринимаем ПО и как быстро достигаем целей.

User Interface (UI) очень важен, и при разработке наших VR-проектов мы должны уделять внимание этому аспекту.

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

Но также возникают и новые проблемы, так как взаимодействие с этими устройствами намного сложнее — к примеру, клик мышкой намного проще распознать нежели неявный жест на контроллере.

Идеальный UI должен быть понятным, неброским и интуитивным, чтобы действия сами напрашивались. Как достичь этой высокой цели в VR-разработке, мы рассмотрим далее более подробно.

Осязаемый User Interface


image

Звуковые эффекты в виртуальных мирах

Время на прочтение4 мин
Количество просмотров5.7K
Данная статья является третьей в цикле про качественную разработку VR-проектов. Ранее мы уже изучили принципы оптимизации в статье «Рендеринг и оптимизация в VR-разработке». Ссылки на другие материалы можно найти в обзорной статье.

До сих пор звуковые эффекты играли при разработке ПО второстепенную роль и едва ли были заметны. Но при VR-разработке они становятся неотъемлемой составляющей проекта.

Правильное звуковое сопровождение VR-проекта значительно повышает погружение пользователя и усиливает эмоции.

Хороший VR-проект переносит нас в виртуальные миры и позволяет ощутить эту смоделированную реальность на эмоциональном уровне. Однако существуют определенные ожидания и, если наши проекты не смогут им соответствовать, погружение и правдоподобность пропадут.

Один из аспектов этих ожиданий — звуковые эффекты, которые возникают в реальной жизни. Когда стакан ставят на деревянный стол, нажимают на дверную ручку или проводят рукой по креслу — во всех этих ситуациях возникают звуки, которые мы, несомненно, ожидаем.

В классических играх или приложениях мы принимаем не такое большое участие, поэтому отсутствие звука беспокоит нас не так сильно. Но в VR все не так. Поэтому появляется новая проблема, но также и шанс перенести впечатления на новый уровень.

Тут нам пригодится тот факт, что мы знаем точное положение, и поворот головы, и, например, в случае Vive также положение рук по отношению к голове. О том, какие классные эффекты можно внедрить в свой проект, опираясь на эти данные, мы рассмотрим в конце статьи.

Сначала пробежимся по аппаратному и программному обеспечению и узнаем, почему даже сегодня при симуляции звука прибегают к обману.

Ближайшие события

Через тернии к облакам: создание облачного сервиса для 3D проектирования и дизайна помещений на базе ядра C3D и WebGL

Время на прочтение12 мин
Количество просмотров9.3K

Нынче в интернетах только и говорят об облаках, как они бесконечны и прекрасны… о серверах, которые они там видели… А ты? Вот и я решил поделиться с читателями своим опытом разработки онлайн сервиса проектирования помещений и интерьеров в 3D. Здесь я постараюсь рассказать об архитектуре проекта в целом и о деталях реализации.


image


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

Как сделать кроссплатформенное десктопное приложение на базе веб-технологий

Время на прочтение15 мин
Количество просмотров46K


Дмитрий Дудин (xbSoftware)


Сегодня я вам расскажу про технологию nw.js, большинство слайдов моей презентации будет посвящено ей. Это технология позволяет разрабатывать десктопные приложения и писать их на html, javascript и css. Причем приложение будет кроссплатформенное — под Windows, Linux и Mac. Можно их сбилдить и они будут иметь доступ к графическому интерфейсу системы, т.е. смогут еще работать с менюшками и т.д.

Новые перспективные площадки для игр HTML5

Время на прочтение7 мин
Количество просмотров12K

В последнее время все чаще возникают разговоры по поводу пресыщения проектами стандартных игровых рынков, таких как мобильный, Steam, онлайн. Начинающим, инди или небольшим компаниям становится всё сложнее продвигать свой продукт и хотя-бы отбивать затраты на его создание. В том же Google Play ежедневно выходят десятки новых игр и для попадания в заветные топы тратятся значительные деньги на продвижение. Сложилась ситуация, когда верхние строчки топов постоянно забиты проектами с очень серьезными бюджетами. То же самое касается и Steam. Так что же делать?

В октябре этого года в Москве прошла уже привычная конференция по разработке и продвижению игр White Nights 2016. В этот раз прозвучали некоторые обнадеживающие новости по образованию перспективных рынков сбыта.
Читать дальше →

Неигровой VR: перспективы и возможности в вебе, – интервью с VR-энтузиастом Martin Splitt, Archilogic

Время на прочтение7 мин
Количество просмотров7.6K
В последнее время у моих друзей начали появляться странные коробочки, в которые они вставляют свой мобильный, вешают все это на голову и куда-то пропадают.

image

Удивительно, что виртуальную реальность можно сделать из мобильника и куска картона. Но другой вопрос: зачем она нужна и что мы можем с ней сделать? Игры понятно, но это все равно очень узкий сегмент. Может ли веб стать той точкой роста, которая сделает VR действительно распространенной технологией? Каким образом можно использовать виртуальную реальность уже сейчас?

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

Портирование Android-приложения на WebGL

Время на прочтение5 мин
Количество просмотров7.6K

Идея портирования Android-приложения на WebGL


Сейчас WebGL поддерживается практически любым устройством и работает достаточно стабильно и быстро даже на мобильных устройствах, поэтому было весьма интересно попробовать реализовать что-нибудь на этой технологии. У нас уже имеется большой опыт работы с OpenGL ES 2.0 в Android — создали довольно много различных трехмерных живых обоев.


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

Как я писал игру на конкурс, или чудесное превращение «Линий» в «Морской бой»

Время на прочтение8 мин
Количество просмотров14K


Эта история о том, как я делал очередную 3D веб-игру. История терзаний и сомнений, история недосыпаний и лени. История о том, как все сделать в самый последний момент. В общем, чего тянуть кота за рога – перейду к рассказу. Но сперва – еще кое-что, чтобы покончить со всеми формальностями. «Мадам, вам кофе в постель?» «Нет, лучше в чашку». Кофе был моим ежедневным спасением из лап Морфея, особенно когда я хотел поработать над игрой с утра, перед всеми остальными дневными заботами. Надо отдать ему должное. Я просто не могу не упомянуть о нем, так как для меня это стало воистину одной из составляющих успеха, под коим я понимаю доведение игры до релиза. (Здесь могла быть ваша реклама кофе).

Конкурс


На самом деле, я вписался не в тот конкурс, для которого мог бы что-то сделать. По его условиям требовалось создать игру под Windows, скачиваемую и запускаемую по exe-файлу. Я же люблю программировать под браузеры. Я не знаю C++ и C#, у меня даже нет Visual Studio. Но тут внезапно у меня появилась отличная идея игры, и я подумал – а какого черта! Буду просто делать игру. А получится ли соблюсти все условия конкурса или нет – не так важно. В конце концов, просто запущу ее в социальных сетях.
Читать дальше →

Создаем игру для WebGL с помощью Unity 5 и JavaScript

Время на прочтение10 мин
Количество просмотров56K


Unity – это кроссплатформенный игровой движок, позволяющий создавать игры для ПК, консолей, мобильный устройств и веб-сайтов. Последняя версия движка (Unity 5) имеет возможность экспорта в WebGL, благодаря чему разработчики могут без труда публиковать свои игры в вебе. Как следует из названия, данный экспортер использует WebGL – JavaScript API для рендеринга интерактивной компьютерной 3D графики, а также asm.js – подмножество JavaScript, которое было разработано компанией Mozilla и преподносилось как «язык ассемблера для веба». Больше информации о Asm.js и WebGL для Unity и Unreal Engine доступно здесь.

В этом уроке я хочу показать, как настроить работу с Unity. А также продемонстрирую, как создать простую игру на Unity с помощью JavaScript и выполнить ее экспорт для веба.
Читать дальше →

Вклад авторов