Рассказ о том, как я попробовал построить красивые трехмерные тени не выходя за рамки уютного двухмерного гейм-девелопмента, и что из этого получилось.
Рубрика «three.js» - 3
Тень на плетень, или 25 елок для Адама Дженсена
2017-01-15 в 21:19, admin, рубрики: 3d, phaser.js, raycasting, shadow mapping, three.js, ненормальное программирование, разработка игр, тени, метки: тени
Как я писал игру на конкурс, или чудесное превращение «Линий» в «Морской бой»
2016-10-26 в 14:54, admin, рубрики: javascript, php, three.js, WebGL, Разработка веб-сайтов, разработка игр
Эта история о том, как я делал очередную 3D веб-игру. История терзаний и сомнений, история недосыпаний и лени. История о том, как все сделать в самый последний момент. В общем, чего тянуть кота за рога – перейду к рассказу. Но сперва – еще кое-что, чтобы покончить со всеми формальностями. «Мадам, вам кофе в постель?» «Нет, лучше в чашку». Кофе был моим ежедневным спасением из лап Морфея, особенно когда я хотел поработать над игрой с утра, перед всеми остальными дневными заботами. Надо отдать ему должное. Я просто не могу не упомянуть о нем, так как для меня это стало воистину одной из составляющих успеха, под коим я понимаю доведение игры до релиза. (Здесь могла быть ваша реклама кофе).
Конкурс
На самом деле, я вписался не в тот конкурс, для которого я бы мог что-то сделать. По его условиям требовалось создать игру под Windows, скачиваемую и запускаемую по exe-файлу. Я же люблю программировать под браузеры. Я не знаю C++ и C#, у меня даже нет Visual Studio. Но тут внезапно у меня появилась отличная идея игры, и я подумал – а какого черта! Буду просто делать игру. А получится ли соблюсти все условия конкурса или нет – не так важно. В конце концов, просто запущу ее в социальных сетях.
Читать полностью »
WebGL + WebAudio = Tower Defense
2016-09-08 в 18:52, admin, рубрики: game development, html, html5, javascript, three.js, web audio api, WebGL, разработка игрДелаем Tower Defense на WebGL. В отличии от других обучающих уроков, в данной статье на примере готового приложения показано откуда и для чего брать ресурсы.
Конечная цель выглядит так:
Постановка задачи:
- сделать быстро и красиво
- по возможности использовать готовое
Рендер в текстуру с использованием Three.js
2016-07-11 в 11:44, admin, рубрики: javascript, three.js, Блог компании Plarium, игры, объекты, Программирование, разработка, разработка игр, разработка мобильных приложений, метки: рендерВсё, что вы рендерите в Three.js, по умолчанию отображается на экране. Зачем вообще нужен рендеринг, если нельзя увидеть результат? Оказывается, затем, чтобы собрать данные, прежде чем они выведутся на экран (и, следовательно, будут утеряны). Это намного упрощает применение эффектов постобработки, таких как коррекция/искажение цветов и размытие изображения, а также очень полезно для шейдерных эффектов. Такой прием называется рендеринг в текстуру или рендеринг в буфер кадра. Конечный результат сохраняется в текстуре, которую затем можно отобразить на экране. В этой статье я покажу, как это делается, на конкретном примере рендеринга анимированного куба на поверхность другого анимированного куба.
Введение в программирование шейдеров: часть 3
2016-04-21 в 9:49, admin, рубрики: glsl, GPUGame, graphics, html, javascript, Platform Agnostic, programming, shaders, three.js, Web Platform, Блог компании Plarium, Программирование, Работа с 3D-графикой, разработка игрОсвоив азы работы с шейдерами, мы попытаемся на практике обуздать всю мощь GPU, создав систему реалистичного динамического освещения.
Введение в программирование шейдеров: часть 2
2016-04-14 в 11:01, admin, рубрики: glsl, GPUGame, graphics, html, javascript, Platform Agnostic, programming, shaders, three.js, Web Platform, Блог компании Plarium, Программирование, Работа с 3D-графикой, разработка игрНаучившись писать шейдеры, вы сможете максимально эффективно использовать всю вычислительную мощь современных графических чипов, тысячи ядер которых работают параллельно в одном потоке, ведь все шейдерные вычисления производятся на GPU, а не на CPU. Программирование шейдеров требует другого мышления и подхода к написанию кода, нежели написание обычных программ, однако их практически безграничный потенциал с лихвой окупает все проблемы на начальных этапах.
3D революция на Arduino
2016-04-14 в 10:01, admin, рубрики: 3d, AMS, arduino, Arduino Mega Server, DIY, diy или сделай сам, IoT, processing, three.js, Беспроводные технологии, Интернет вещей, сделай сам, Сетевое оборудование, сеть, умный дом 
До последнего момента контроллеры (и Ардуино, в частности) работали либо вообще без интерфейса, либо с примитивными интерфейсами, условно говоря, с одной — двумя кнопками. С появлением Arduino Mega Server ситуация кардинально изменилалась и появилась возможность сделать любой интерфейс к вашему проекту на Ардуино.
Сегодня мы пойдём ещё дальше и поговорим о том, как сделать полноценный интерактивный 3D интерфейс для вашего проекта на Ардуино. Все эксперименты будем проводить на новом микроконтроллере Genuino 101 совместного производства Intel и Arduino и любезно предоставленным компанией Intel для портирования на него системы Arduino Mega Server.
Читать полностью »
Создание мультиплеерного 3D-шутера на Webgl без опыта и денег
2015-04-01 в 10:52, admin, рубрики: game development, Gamedev, three.js, WebGL, метки: webglЭта история о том, как маленькая команда веб-разработчиков разработала мультиплеерный 3d-шутер без опыта в геймдеве, больших денег и штата сотрудников.
Дисклеймер: некоторые описанные в статье решения могут вызывать фейспалм.
2011 год. С чего все началось
В 2011 году мы были маленькой питерской веб-студией из 4 человек. Тимлид/сеошник, программист (вернее считал себя программистом), дизайнер и менеджер по продажам. На тот момент тимлид и программист занимались сайтами уже 3 года, но особых успехов на этом поприще не достигли. Хотя мы имели уже несколько постоянных клиентов на продвижении и обслуживании, но львиную долю дохода съедали налоги, аренда офиса и прочие расходы. Оставшихся копеек на четырех человек явно не хватало. Хроническое безденежье и отсутствие перспектив угнетали. Дизайнер уже навострил лыжи, да и остальные члены команды едва держались. Вот в такой обстановке и пришла в голову потрясающая по наивности мысль: «чего это мы все для всяких дядь делаем проекты, а давайте свое что-нибудь сделаем, например, игру браузерную и запилим её во вконтакте». Все, кроме дизайнера, восприняли идею с воодушевлением.
Читать полностью »
Игровой мир WebGL или Three.js vs Babylon.js
2015-01-26 в 8:54, admin, рубрики: babylon.js, blender, game development, javascript, three.js, WebGL, Веб-разработка, Работа с анимацией и 3D-графикой 
Когда я начинал писать свою первую игрушку на three.js я и не думал, что на самом деле three.js это верхушка айсберга в мире WebGL и что есть десятки разнообразных фреймворков и у каждого из них свой специфический уклон, а three.js просто один из них.
Введение
1. Базовые элементы
2. Группировка
3. Движение
4. Частицы
5. Анимация — 1
6. Анимация — 2
7. Простой ландшафт
8. Статические коллизии
9. Динамические коллизии
10. Импорт моделей
11. Встраивание физических движков
12. Тени, туман
Читать полностью »
Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js
2015-01-13 в 20:04, admin, рубрики: javascript, three.js, Работа с анимацией и 3D-графикой 
Обучающий материал с ресурса Phyramid, у которых именно такая шапка сайта.
Обновив в 2014 свой сайт, мы сделали трёхмерный фон в шапке, состоящий из геометрических фигур в 3D Max. Но потом мы подумали, что было бы гораздо круче генерить его в реальном времени на JS. Сказано – сделано, и при помощи замечательного фреймворка three.js мы сделали простенькую сценку. И вот, как это было.
Замечание по стилю кода: мы сначала хотели использовать только функциональный стиль, но из-за особенностей веба и работы алгоритма переключились на ООП.
Читать полностью »