Всё, что вы рендерите в Three.js, по умолчанию отображается на экране. Зачем вообще нужен рендеринг, если нельзя увидеть результат? Оказывается, затем, чтобы собрать данные, прежде чем они выведутся на экран (и, следовательно, будут утеряны). Это намного упрощает применение эффектов постобработки, таких как коррекция/искажение цветов и размытие изображения, а также очень полезно для шейдерных эффектов. Такой прием называется рендеринг в текстуру или рендеринг в буфер кадра. Конечный результат сохраняется в текстуре, которую затем можно отобразить на экране. В этой статье я покажу, как это делается, на конкретном примере рендеринга анимированного куба на поверхность другого анимированного куба.
Рубрика «three.js» - 3
Рендер в текстуру с использованием Three.js
2016-07-11 в 11:44, admin, рубрики: javascript, three.js, Блог компании Plarium, игры, объекты, Программирование, разработка, разработка игр, разработка мобильных приложений, метки: рендер
Введение в программирование шейдеров: часть 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 мы сделали простенькую сценку. И вот, как это было.
Замечание по стилю кода: мы сначала хотели использовать только функциональный стиль, но из-за особенностей веба и работы алгоритма переключились на ООП.
Читать полностью »
Звездное небо на webGL с использованием three.js
2015-01-11 в 11:17, admin, рубрики: canvas, dbcartajs, html5, javascript, three.js, WebGL, Веб-разработка, звездное небо, планетарийВ посте про «Звездное небо на Canvas» я уже описывал проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезды, планеты, космические аппараты (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble для KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.
Тренды JavaScript на 2015 год
2015-01-02 в 14:29, admin, рубрики: 2015, adobe edge, angular, atscript, babylon.js, bower, cylon.js, d3.js, device api, ecmascript 6, ember, espruino, firefoxos, future, gamepads, harmony, io.js, IoT, javascript, js rocks!, node.js, npm, phonegap, React, tessel, three.js, trends, TypeScript, unity 5, Visual Studio, WAT, web components, WebGL, windows, winjs, xbox one, Блог компании Microsoft, Веб-разработка 
Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».
Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать полностью »
Программирование в шлеме VR
2014-10-06 в 10:17, admin, рубрики: Firefox, javascript, Oculus Rift, RiftSketch, three.js, Демосцена, дополненная реальность, Программирование, шлем VR 
Разработчик по имени Брайан Петрис (Brian Peiris) создал концептуальное приложение для написания кода внутри виртуальной реальности в шлеме Oculus Rift. Изюминка в том, что по мере изменения JavaScript-кода в Three.js меняется и мир вокруг вас. Запрограммировал куб — и тот появился над головой (видео под катом).
Читать полностью »