Pull to refresh
  • by relevance
  • by date
  • by rating

Three.js — 3D в браузере своими руками или WebGL становится ближе

JavaScript *
Sandbox
Тема про three.js от mrdoob в свое время проскакивала на хабре, но детально еще не рассматривалась. В этой и(возможно) последующих статьях я постараюсь исправить это упущение. К сожалению, three.js не предоставляет никакой внятной документации, поэтому все знания по нему получены экспериментальным путем и ковырянием спеки WebGL, т.е. любые дополнения автору топика только приветствуются.

В этой статье мы создадим простенькое приложение, которое продемонстрирует базовые возможности этого движка, поработаем с камерой, светом и тенью, а также научим наши объекты перемещаться. В конце статьи ссылка на файлы демки и скриншот. Итак, к делу!
Читать дальше →
Total votes 40: ↑39 and ↓1 +38
Views 31K
Comments 21

CSS 3D эффекты

Website development *

Стивен Виттенс переработал свой сайт Acko.net. Виттенс применил 3D функции CSS 3 и небольшую часть JavaScript для создания ошеломляющего 3D заголовка страницы.

Чтобы увидеть 3D в действии вам надо использовать браузер WebKit (Safari или Chrome) т.к. пока только они поддерживают CSS 3D эффекты. В других браузерах, которые еще не поддерживают 3D эффекты сайт все равно нормально просматривается. Чтобы увидеть полный 3D эффект обязательно прокрутите страницу.

Виттенс в своем блоге подробно написал как он создал 3D эффекты и даже сделал 3D редактор, с которым вы можете поиграть.
Читать дальше →
Total votes 35: ↑31 and ↓4 +27
Views 13K
Comments 49

Платформа для экспериментов на Three.JS и WebGL

Website development *WebGL *
Sandbox
Если не играть и не рассматривать фотографии знакомых девушек в контакте, то программирование является моим любимым занятием за компьютером. Особенно мне нравится «быстрое» программирование. Это такое программирование, когда проект небольшой и когда мы не занимаемся фундаментальными изысканиями, а планирование не нуждается в документации. К слову, на работе все проекты не такие, да ещё и ориентированы на закрытую аудиторию. В основном поэтому вы сейчас читаете мою статью, а ещё я желаю попасть на Хабр.

Хочу поделиться с вами результатами проекта моих выходных. Это чисто клиентское javascript/html приложение, которое состоит из редактора исходных кодов на языке Javascript и GLSL-шейдеров, мини-линкера, окна с Three.JS/WebGL и небольшого рантайм-интерфейса. Всё это склеено на jquery, а поверх прикручена галерея с видео. В галерее представлено несколько демонстраций. Можно выбрать понравившуюся демонстрацию и поиграть с её кодом, а также экспортировать и импортировать целые проекты из нескольких файлов через JSON.
Читать дальше →
Total votes 22: ↑20 and ↓2 +18
Views 14K
Comments 9

Как сделать 3D шутер на JavaScript за пару дней

Website development *JavaScript *WebGL *
imageВ субботу у меня ближе к полуночи появилось свободное время и жгучее желание сделать игрушку под браузер, забавы ради и увеличения опыта для. С жанром определился довольно быстро: т.к. на MMORPG в этот раз у меня точно не хватило бы времени, я решил делать просто мясорубку. Минут 20 ушло на написание базового кода для управления игроком и его противниками. И тут встал вопрос — 2D или 3D (вернее так: Canvas/SVG или все же полноценный WebGL)?
Читать дальше →
Total votes 102: ↑98 and ↓4 +94
Views 83K
Comments 65

HTML5 круговая панорама на three.js

JavaScript *
Sandbox
    В последнее время все чаще можно наткнуться на круговую панораму в интернете. Взять к примеру тот же сырный домик. Это эффектная штучка возможно вскоре станет обыкновенным делом для сайтов ресторанов, гостиниц, отелей и т. п. Однако, что делать, если существуют проблемы с flash на компьютере? Это реальная ситуация, которая возникла у меня на работе, по причине жесткой политики безопасности IT-отдела.
    В этой небольшой статье я расскажу вам о трудностях, которые встретил на пути создания интерактивной панорамы на WebGL + THREE.js.
Читать дальше →
Total votes 45: ↑43 and ↓2 +41
Views 39K
Comments 18

Визуализируем в 3D, или как подружить D3 и Three.js

CodeOrchestra corporate blog JavaScript *Data visualization
Tutorial
Если Вы уже слышали о D3 и Three.js, эта статья может показаться Вам интересной. В ней речь пойдёт о том, как заставить эти библиотеки работать вместе для создания динамических трёхмерных сцен, на примере этой простой гистограммы:



Да, мне интересно
Total votes 34: ↑32 and ↓2 +30
Views 14K
Comments 4

Карта галактики на Three.js/WebGL

JavaScript *Game development *WebGL *

Доброго времени дня или ночи. В свободное время я занимаюсь разработкой игры на космическую тематику на Three.js/WebGL и задумал написать небольшую серию статей по некоторым компонентам игры, в этой статье мы поговорим о карте галактики. Рассказ пойдет уже привычным мне способом — по шагам.
Читать дальше →
Total votes 18: ↑16 and ↓2 +14
Views 18K
Comments 11

Карта звездной системы на Three.js/WebGL

JavaScript *Game development *WebGL *

Доброго времени дня или ночи, Хабр!
В наших краях как всегда зима пришла неожиданно, но в космосе времен года нет, так что снова поговорим о различных космических штуках на webgl. Предыдущую статью о карте галактики можно прочитать здесь. Сегодня же речь пойдет про карта звездной системы.
Как всегда, рассказ пойдет по шагам. Итак…
Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Views 12K
Comments 6

WebGL Эксперимент + Google Analytics + Leap Motion

WebGL *
Добрый день! В течение некоторого времени изучал замечательную библиотеку three.js, кроме того приобрел Leap Motion, в результате получилась следующая вещь:



Попробовать можно здесь: http://cerebro.maxmert.com
Для написания использовал библиотеки three.js, sparks.js и dancer.js. Для управления веселее всего использовать Leap Motion, но можно и мышкой. К сожалению с webgl хорошо дружит только Google Chrome, так что лучше использовать его.

Обновление: Теперь можно запускать и без логина в Google Analytics.
Total votes 28: ↑24 and ↓4 +20
Views 10K
Comments 6

Реализуем 3D картинку в браузере

JavaScript *WebGL *
HTML 3D LOGO В этой статье я хочу продолжить рассказ о моих экспериментах с 3D монитором.В первой статье было описано как выводить стерео изображение из видео потока (в VLC виде плеере) сейчас я расскажу как получить стерео картинку прямо в вашем браузере. Для демо я взял замечательную библиотеку Three.js об ней уже много писали на Хабре, она позволяет быстро и просто создавать красивые web приложения на WebGL. Ниже я покажу как сделать так чтобы пользователь увидел глубокую 3D картинку а не плоскую проекцию.

Кого заинтересовал, добро пожаловать под кат
Total votes 24: ↑19 and ↓5 +14
Views 19K
Comments 11

Платформер на Three.js

JavaScript *Game development *WebGL *
Tutorial
На днях мистер Дуб принял мой первый pull request с примером в Three.js, и на радостях я решился написать о нём хабропост. Если вам вдруг захочется написать трёхмерный платформер на Three.js, но вы не особо представляете себе, как это сделать, этот пример — для вас:



Весь код примера занимает менее 300 строк, щедро разбавленных переносами, разобраться в которых самостоятельно не составит особого труда. Однако, чтобы ещё больше облегчить вашу участь, я напишу немного ниже пару слов о ключевых моментах.
Почитать, что ли...
Total votes 81: ↑76 and ↓5 +71
Views 37K
Comments 7

Музейные приключения с телефоном

JavaScript *WebGL *
Sandbox
Приветствую уважаемых читателей. Меня зовут Андрей, в последнее время я работаю в Центральном Музее Великой Отечественной войны. Помимо создания обычных музейных занимаюсь ещё и разработкой виртуальных выставок. Поэтому в своём обзоре Nokia Lumia 1520 я покажу, как можно использовать данный телефон для создания небольшой виртуальной экскурсии, используя 20-мегапиксельную камеру и JavaScript библиотеку Three.JS.
Читать дальше →
Total votes 27: ↑19 and ↓8 +11
Views 10K
Comments 11

Программирование в шлеме VR

Programming *


Разработчик по имени Брайан Петрис (Brian Peiris) создал концептуальное приложение для написания кода внутри виртуальной реальности в шлеме Oculus Rift. Изюминка в том, что по мере изменения JavaScript-кода в Three.js меняется и мир вокруг вас. Запрограммировал куб — и тот появился над головой (видео под катом).
Читать дальше →
Total votes 65: ↑59 and ↓6 +53
Views 48K
Comments 53

Игровой мир WebGL или Three.js vs Babylon.js

Website development *JavaScript *Game development *HTML *WebGL *
Tutorial


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

Введение
1. Базовые элементы
2. Группировка
3. Движение
4. Частицы
5. Анимация — 1
6. Анимация — 2
7. Простой ландшафт
8. Статические коллизии
9. Динамические коллизии
10. Импорт моделей
11. Встраивание физических движков
12. Тени, туман
Продолжение — многопользовательский шутер

Далее подробней с небольшими примерами
Total votes 54: ↑53 and ↓1 +52
Views 71K
Comments 18

Тренды JavaScript на 2015 год

Microsoft corporate blog Website development *JavaScript *TypeScript *


Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать дальше →
Total votes 108: ↑88 and ↓20 +68
Views 112K
Comments 76

Звездное небо на WebGL с использованием Three.js

Website development *JavaScript *Canvas *WebGL *
В посте про «Звездное небо на Canvas» я уже описывал свой проект, где при помощи JavaScript на канвасе 2d формируется изображение глобуса Земли на фоне звезд, планет и орбит космических аппаратов. Для создания трехмерной картины звездного неба на плоскости я использовал формулы перевода трехмерных координат X, Y, Z отображаемых объектов: звезд, планет, космических аппаратов (КА), — в плоские декартовые координаты X, Y. Основную часть этих формул я взял из проекта Marble из состава KDE. Портированный с C++ на JavaScript код я сохранил в файле starry.js.

Starry Sky 3D
Читать дальше →
Total votes 22: ↑21 and ↓1 +20
Views 20K
Comments 4

Трёхмерный фон для сайта в реальном времени на JavaScript при помощи three.js

JavaScript *
Translation
Tutorial


Обучающий материал с ресурса Phyramid, у которых именно такая шапка сайта.



Обновив в 2014 свой сайт, мы сделали трёхмерный фон в шапке, состоящий из геометрических фигур в 3D Max. Но потом мы подумали, что было бы гораздо круче генерить его в реальном времени на JS. Сказано – сделано, и при помощи замечательного фреймворка three.js мы сделали простенькую сценку. И вот, как это было.

Замечание по стилю кода: мы сначала хотели использовать только функциональный стиль, но из-за особенностей веба и работы алгоритма переключились на ООП.
Читать дальше →
Total votes 31: ↑27 and ↓4 +23
Views 35K
Comments 10

Создание мультиплеерного 3D-шутера на Webgl без опыта и денег

Game development *
Sandbox
Это первая часть истории о том, как маленькая команда веб-разработчиков разработала мультиплеерный 3d-шутер без опыта в геймдеве, больших денег и штата сотрудников.

Дисклеймер: некоторые описанные в статье решения могут вызывать фейспалм.




2011 год. С чего все началось


В 2011 году мы были маленькой питерской веб-студией из 4 человек. Тимлид/сеошник, программист (вернее считал себя программистом), дизайнер и менеджер по продажам. На тот момент тимлид и программист занимались сайтами уже 3 года, но особых успехов на этом поприще не достигли. Хотя мы имели уже несколько постоянных клиентов на продвижении и обслуживании, но львиную долю дохода съедали налоги, аренда офиса и прочие расходы. Оставшихся копеек на четырех человек явно не хватало. Хроническое безденежье и отсутствие перспектив угнетали. Дизайнер уже навострил лыжи, да и остальные члены команды едва держались. Вот в такой обстановке и пришла в голову потрясающая по наивности мысль: «чего это мы все для всяких дядь делаем проекты, а давайте свое что-нибудь сделаем, например, игру браузерную и запилим её во вконтакте». Все, кроме дизайнера, восприняли идею с воодушевлением.
Читать дальше →
Total votes 41: ↑37 and ↓4 +33
Views 35K
Comments 23

Пересчет изображений под разные картографические проекции в WebGL

Website development *JavaScript *Canvas *WebGL *
В посте на своем блоге «gdal_translate и gdalwarp для перепроицирования изображений» описывался процесс получения картинок под разные проекции с помощью утилит GDAL. Полученные изображения я использовал как подложки для карт в примерах проекта dbCartajs. Позже, работая над портированием канвасной версии своего планетария на WebGL, описанной в статье «Звездное небо на WebGL с использованием Three.js» на Хабре, у меня возникла мысль со временем перенести не только глобус, но и плоские на карты на WebGL, используя вместо фона текстуры. То есть для создания карты обойтись только использованием браузера и JavaScript без использования серверных компонентов.

image
Читать дальше →
Total votes 18: ↑14 and ↓4 +10
Views 8K
Comments 2