В посте про «Звездное небо на Canvas» я уже описывал проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезды, планеты, космические аппараты (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble для KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.
Рубрика «WebGL» - 14
Звездное небо на webGL с использованием three.js
2015-01-11 в 11:17, admin, рубрики: canvas, dbcartajs, html5, javascript, three.js, WebGL, Веб-разработка, звездное небо, планетарий
Тренды 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».
Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать полностью »
Сказ о том, как мы в хакатонах участвовали, или Страх и Ненависть в Кремниевой Долине
2014-12-14 в 11:46, admin, рубрики: WebGL, Веб-разработка, помогитя, Программирование 
Все началось минувшим летом, когда нам с товарищем «по оружию» немного взгрустнулось, и мы решили, что примем участие в значимых и интересных нам «развлекательно развивающих соревнованиях с элементами программирования», или, как их называют треклятые буржуи, хакатонах. Не долго думая, мы остановили наш взор на Долине из Кремния, так как событий подобной тематики тут много и есть высокий шанс найти интересные нам. С тех пор мы поучавствовали в ни много ни мало 3 хакатонах, тем самым лишившись порядка 40 часов сна. Сей сказ повествует о наших впечатлениях, сделанных нами проектах и атмосфере вокруг описываемых событий.
WebGL-галактика из статей Википедии
2014-12-09 в 22:55, admin, рубрики: WebGL, WikiGalaxy, wikipedia, Википедия, дополненная реальность, интерфейсы, космонавтика 
Нечто похожее на Глаз Саурона на скриншоте — это результат рендеринга в браузере статей из Википедии с построением связей между ними. Звёздные кластеры — тематически связанные между собой и залинкованные статьи. Такова идея автора проекта WikiGalaxy, французского студента Оуэна Корнека (Owen Cornec).
Читать полностью »
Blend4Web, открытая платформа для создания трехмерных веб-приложений
2014-10-20 в 7:50, admin, рубрики: 3d графика, blender, open source, web-разработка, WebGL, Работа с анимацией и 3D-графикойНиже изложено содержание обзорной статьи о платформе Blend4Web, написанной мной для ресурса Mozilla Hacks, с изменениями и дополнениями.
В марте 2014 года командой российских разработчиков был представлен первый публичный релиз Blend4Web, открытой платформы для создания трехмерных веб-приложений. В этой статье рассматривается история развития платформы и перспективы ее применения.
Читать полностью »
Музейные приключения с телефоном
2014-09-16 в 8:33, admin, рубрики: javascript, Nokia Lumia 1520, Oculus Rift, three.js, WebGL, Смартфоны и коммуникаторы, ЦМ ВОВ. Приветствую уважаемых читателей. Меня зовут Андрей, в последнее время я работаю в Центральном Музее Великой Отечественной войны. Помимо создания обычных музейных занимаюсь ещё и разработкой виртуальных выставок. Поэтому в своём обзоре Nokia Lumia 1520 я покажу, как можно использовать данный телефон для создания небольшой виртуальной экскурсии, используя 20-мегапиксельную камеру и JavaScript библиотеку Three.JS.
Читать полностью »
Платформер на Three.js
2014-08-02 в 22:52, admin, рубрики: game development, javascript, three.js, WebGLНа днях мистер Дуб принял мой первый pull request с примером в Three.js, и на радостях я решился написать о нём хабропост. Если Вам вдруг захочется написать трёхмерный платформер на Three.js, но Вы не особо представляете себе как это сделать, этот пример — для Вас:
Весь код примера занимает менее 300 строк, щедро разбавленных переносами, разобраться в которых самостоятельно не составит особого труда. Однако, чтобы ещё больше облегчить Вашу участь, я напишу немного ниже пару слов о ключевых моментах.
Особенности разработки WebGL игры Digital Trip
2014-07-18 в 9:49, admin, рубрики: deviceorientation, javascript, webaudio api, WebGL, websockets, Блог компании Hot Dot Production, Веб-разработка 
Привет! В этой статье я хочу поделиться собственным опытом разработки WebGL игры Digital Trip. Помимо WebGL, в игре использованы такие технологии, как WebAudio API, WebSockets, getUserMedia, Vibration API, DeviceOrientation, а также библиотеки three.js, hedtrackr.js, sicket.io и пр. В статье будут описаны наиболее интересные детали реализации. Я расскажу о движке игры, управлении при помощи мобильного, управлении веб-камерой, скажу пару слов о back-end’e на node.js, работающем в связке с dogecoin демоном.
В конце статьи приведены ссылки на использованные библиотеки, исходный код на GitHub, описание игры и саму игру.
Всех, кому интересно, прошу под кат.
Читать полностью »
Собственный движок WebGL. Статья №3. Примитивы
2014-06-24 в 11:29, admin, рубрики: javascript, WebGL, учимся вместе, метки: javascript, WebGL, учимся вместеВ продолжении статьи
В первой статье уже использовался самый первый примитив, который можно назвать просто «произвольная форма».
Перед описанием примитивов-объектов еще раз повторю два основных требования-замечания от нашей системы:
- Каждый примитив должен содержать вектор вершин и вектор индексов (vertex, indices).
- Строится каждый примитив по индексам через треугольники (TRIANGLE), то есть каждые 3 точки образуют независимый треугольник.
По мимо требований к каждому примитиву мы можем подключить матрицу. После подключения можно с легкостью производить следующие манипуляции:
- Перемещение по любой из осей. Перемещение на определенное кол-во единиц или перемещение к любой точки в пространстве
- Поворот вокруг любой точки. При подключении матрицы нам становится известен центр, соответственно, мы можем поворачивать примитив вокруг любой точки указав точку или же вокруг собственного центра.
Сами примитивы можно разделить:
- Простые. Состоят только из одного примитива.
- Сложные-составные. Состоят из нескольких примитивов
Собственный движок WebGL. Статья №2. Матрица
2014-06-23 в 14:25, admin, рубрики: javascript, matrix, WebGL, матрица, учимся вместе, метки: matrix, матрица, учимся вместеВ продолжении статьи
Матрица.
Когда только начал разрабатывать матрицу, даже не предполагал — на сколько она в дальнейшем нам упростит жизнь. У матрицы много свойств, но в нашей задаче я бы их все свел к одному — «отделение мух от котлет», то есть массива точек от общего массива координат. С точки зрения нашего кода — это будет выделение массива строк, каждая из которых является точкой и массива столбцов, массив одной из координат x,y,z или w. У меня упрощенная модель, поэтому «w» использовать не буду.
Описав наш объект через матрицу, можно с легкостью перемещать объект по любой из осей и поворачивать, а также можно сразу определить центр нашего объекта.
Читать полностью »