3D в браузере: Как сделать 3D в браузере? — Хабр Q&A

Можем ли мы связать текстуру со сферой Canvas (HTML5) 3D ? Я имею в виду этот пример- http: / / www.bitstorm.it / blog/ru/2011/05/3d-sphere-html5-canvas / Спасибо, EDIT : альтернативная ссылка -…

Я должен создать пользовательский интерфейс 3D с HTML5 и любой необходимой библиотекой JS, которая обеспечивает такую функциональность. 3D сцена состоит из цилиндрической трубы и поверхности. Он…

У меня есть простая концепция, для которой я хочу использовать HTML5, но я полный новичок, когда дело доходит до просмотра холстов и моделей, написанных на Javascript. У меня есть модель 3D стола…

Есть ли HTML5/javascript/webgl просмотрщик объектов KMZ KML 3D ? я хотел бы использовать технологию WEBGL для рендеринга объекта kmz/kml 3d (здания), созданного в sketchup и загруженного в Google…

кто-нибудь знает, можно ли поместить модель здания 3D, сделанную,например, в 3ds Max, на веб-страницу HTML5 и сделать ее интерактивной, например, панорамировать и масштабировать, может быть, даже. ..

Я работаю над этим новым проектом, который является для меня новой технологией… Я работаю с Appcelerator Titanium, создавая это приложение 3d… Мои приложения предполагают быть чем-то вроде 3d…

Я ищу библиотеку 3D, похожую на что-то вроде проекта Away3D (flash) в javascript. В частности мне нужно следующее: Камеры (с наклоном панорамирования и т. д.) предпочтительно с опциями плавного…

Я разрабатываю открытый конструктор жестов на языке жестов, в чем — то очень похожий на конструктор жестов Vcom3D-см. демонстрацию продукта внизу этой страницы . Основная цель состоит в том, чтобы…

У меня есть логотип, как показано ниже .. В нем есть 3D куба с разными цветными гранями. Мне нужно заставить этот куб вращаться с помощью HTML5/CSS3., и он должен работать во всех современных…

Пожалуйста, предложите мне решение для отображения аннотаций (текста или изображений) для объекта модели 3D на iOS. Для получения более подробной информации, до сих пор я могу загрузить и отобразить…

Google предлагает экспериментальную функцию по добавлению 3D объектов дополненной реальности в браузеры

Компания Google рассказала о новой экспериментальной возможности по внедрению функций дополненной реальности в мобильный и настольный браузер при помощи Chrome. Благодаря этому веб-дизайнеры, медиа компании и другие создатели контента смогут создавать виртуальные трёхмерные объекты и внедрять их на сайты. В дальнейшем такие 3D объекты посетители смогут просматривать при помощи настольного браузера или загружать через мобильный браузер для последующего их размещения в своём реальном окружающем пространстве.

Для использования новой функции дополненной реальности в браузерах, первоначально потребуется использовать просмотрщик 3D-моделей для браузеров. Он получил предварительное название Article. Если этот просмотрщик загружен вместе с 3D моделью в настольном браузере, то пользователь сможет видеть такой объект в качестве интерактивного изображения, которое можно вращать для обзора со всех сторон. При размещении такого объекта на веб-страницу, модель может отображаться в анимированном виде, подобно GIF-изображению, по мере того, как пользователь прокручивает его.

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

Подобные возможности можно будет применять в сферах развлечений и образования. Например, прямо со страницы Wikipedia, посвящённой высадке на Луну, можно будет загрузить модель астронавта и отобразить её в классной комнате для более детального ознакомления и проведения интерактивных экспериментов в процессе обучения детей.

Как отмечают в Google, просмотрщик Article – это только один из серии прототипов, и существуют ещё многие другие потенциальные сферы исследования применения объектов дополненной реальности.

Заинтересованные разработчики уже могут экспериментировать с новыми возможностями. Для этого им потребуются библиотека javascript, three.ar.js, прототипы браузеров для ARCore для Android и ARKit для iOS.

Источник: The Verge

Оптимизация 3D-графики под WebGL (опыт PLANT-SIM) | by PHYGITALISM | PHYGITALISM

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

• Нелогичные наименования объектов
• Много отдельных элементов
• Сложная топология

Сам Reactor имел 21998 треугольников. По плану нам было необходимо избавиться от всего лишнего и малозначительного, и получить 8800 треугольников. Перед тем, как начать оптимизировать, мы проанализировали объекты вновь и заметили новую важную деталь: модели OutPutTank, Reactor и Striper имели одни и те же элементы — основание и лестницу. Это означало, что эти элементы можно дублировать и использовать для них один материал.

В итоге, после работы над Reactor объектом (это первый объект, с которого началась оптимизация), мы получили новую модель в 7258 треугольников. Напомню, что по плану было 8000. При условии, что теперь UV карта одна, объект представляет собой объединенный меш и один материал — стало ясно, что задачу мы сможем реализовать, а итоговая сумма треугольников окажется намного меньше, чем планировали изначально.

• Исправили наименования объектов
• Уменьшили количество отдельных элементов
• Упростили и оптимизировали топологию

Объект ReactorExplosion имел сложную анимацию взрыва, красивую и эффектную — разлет маленьких кусков реактора с сохранением только его основания. После первой полной сборки сцены наш FPS сильно проседал непосредственно на моменте взрыва, который помимо этой анимации меша так же имел и анимацию, состоящую из 1000 частиц инструмента Particle System. Появился вопрос, что создавало трудности для отрисовки: анимация или частицы? Мы обсудили задачу с Unity разработчиком и выявили, что оба фактора слишком тяжелые для WebGL движка, поэтому было решено оптимизировать эффект взрыва, используя 5 частиц (это возможно благодаря FlipBook текстурам). Со стороны разработки так же была необходима оптимизация анимации внутри Unity.

FlipBook — это покадровая анимация, вложенная в одну текстуру. Соответственно, чем больше кадров, тем больше разрешение самой текстуры и ее вес. Этот способ отрисовки анимации наиболее оптимальный, так как вместо огромного количества частиц и сложных симуляций мы обходимся одной или несколькими частицами, в которых за один цикл проигрывается наш взрыв. Таким образом, используя всего 5 частиц, был оптимизирован эффект с исходными 1000.

С анимацией было сложнее, так как каждый осколок Reactor был индивидуальным и имел свою запеченную анимацию — это и тянуло WebGL вниз по FPS. Со стороны Unity разработки было предложено запечь всю анимацию в один объект, а метод отрисовки с Mesh renderer переключить на Skinned mesh renderer. Таким образом вместо одновременного перемещения тысячи transform points у нас была цепочка костей и один transform points (Origin самого объекта). Как итог, FPS вырос с 3–5 во время воспроизведения эффекта до 15–20 во время запуска анимации, благо этот фриз сохранялся лишь 0,5 секунды. Кстати, ReactorExplosion объект имел 41220 треугольников, и в угоду экономии времени, которого было мало, было решено не создавать новую анимацию с нуля, а использовать старую, оптимизируя описанным способом.

В итоге работа по оптимизации меша закончилась успешно. Выше мы упоминали, что на сцене располагалось 189736 треугольников (если не учитывать ReactorExplosion, то 148516 треугольников). Отнимая 60% всей геометрии, мы хотим получить на выходе 59403 треугольника (после оптимизации). У нас получилось 61064 треугольника, что превысило наши планы по оптимизации, но все равно было намного ниже полигонального бюджета, выставленного в самом начале проекта. С учетом ReactorExplosion было 102284 треугольника, что так же было около границы обозначенного бюджета.

Задача выполнена, переходим к текстурированию.

Общие сведения — Руководство пользователя Blend4Web 18.05.0

Что такое Blend4Web

Blend4Web — это программная среда для подготовки и интерактивного отображения трехмерного аудиовизуального контента в браузерах, т. е. трехмерный «движок» (жаргонизм от англ. «engine»).

Платформа предназначена для создания визуализаций, презентаций, интернет-магазинов, игр и других “насыщенных” web-приложений.

Фреймворк Blend4Web имеет тесную интеграцию с пакетом 3D моделирования и анимации Blender (отсюда название). Отображение контента осуществляется средствами WebGL и других браузерных технологий без использования плагинов.

Технически Blend4Web представляет собой программную библиотеку, подключаемую к веб-странице, аддон (дополнение) к программе Blender, а также инструменты для отладки и оптимизации.

3D движок Blend4Web разрабатывается сотрудниками ООО «Триумф» с 2010 г. Первый релиз движка состоялся 28 марта 2014 г.

“Движок”

Движок — это обособленная часть программного кода, используемая внешними приложениями для реализации нужного им функционала.

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

Графический движок, трехмерный движок

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

• высокоуровневой прикладной частью (игровой логикой, бизнес-логикой) и

• низкоуровневой системной частью (например, графической библиотекой WebGL и нижележащими драйверами).

Графический движок может объединяться со звуковой системой, физическим движком, системой, реализующей искусственный интеллект, сетевой системой, а также редактором сцен и логики, образуя интегрированный инструментарий для создания 3D приложений — трехмерный движок.

Что такое WebGL

WebGL (Web Graphics Library, т. е. графическая библиотека для использования в веб-приложениях) — одна из современных браузерных технологий, позволяющая создавать трехмерные графические веб-приложения. Другими словами, WebGL — это “3D в браузере”.

Поддержка WebGL в браузерах

В настоящий момент технология WebGL в той или иной степени поддерживается во всех браузерах.

Мобильные платформы

• Android
• BlackBerry
• Firefox OS
• iOS 8
• Sailfish OS
• Tizen
• Ubuntu Touch

Более подробно поддержка WebGL описана в соответствующем разделе главы “Проблемы и решения”.

Преимущества WebGL

• работает в браузерах без установки дополнительных программ (плагинов)

• кроссплатформенный, предназначен для работы во всех стационарных и мобильных системах

• является открытым стандартом, не требует лицензионных отчислений

• поддерживается ведущими участниками рынка IT (Google, Apple, Microsoft, Nvidia, Samsung, Adobe и др.)

• основан на знакомой разработчикам технологии OpenGL

• интегрируется с другими браузерными технологиями

Что такое Blender

Blender — это популярная программа для создания 3D-моделей и анимации, бесплатная и с открытым кодом. Подготовленные в программе модели и сцены могут быть отображены, например, с помощью трехмерного движка на странице веб-сайта.

3D моделирование

Создание графических ресурсов требует наличия подготовленных специалистов — 3D-художников.

Типичный рабочий процесс может состоять из следующих этапов:

• подбор фотографий и/или создание концепта и скетчей (“спереди”-“сбоку”-“сверху”) будущей модели или сцены

• моделирование — создается трехмерная модель, состоящая из многоугольников (полигонов)

• текстурная развертка — на модели создается разметка для последующего наложения текстур (плоских изображений)

• текстурирование — на 3D-модель накладываются текстуры

• подбор материалов — назначение различным частям модели материалов и их настройка (например, деревянная дверь с металлической ручкой)

• риггинг (от англ. rigging, т.е. “оснастка”) — к модели прикрепляются управляющие элементы (“кости” “скелета”) с целью дальнейшей анимации

• анимация — модель приводится в движение с целью визуализации действий (например, для персонажей)

• экспорт — выполняется на любом этапе с целью отображения 3D-модели в ее конечном виде, например, на веб-странице

Кроме того, в процессе создания 3D-моделей часто используются техники повышения реализма, требующие отдельных этапов:

• создание высокополигональной модели — создается детализированная версия модели

• “запекание” карты нормалей — детали из высокополигональной модели переносятся на основную модель в виде специальной текстуры (карты нормалей)

• создание карты отражения — различным частям модели назначается различный цвет и степень отражения света

• запекание карт окружения — производится с целью реализации эффекта отражения окружающей среды на поверхности модели

• настройка камеры и источников света на сцене

• настройка параметров физической симуляции — частицы, ткань

Затраты времени при изготовлении 3D-моделей и анимации зависят от их сложности и требуемого качества, и могут изменяться от 1-2 дней (например, игровой предмет) до 1-2 недель (например, детализованная модель самолета) и даже нескольких месяцев (реалистичные персонажи с наборами одежды, волос, лиц, с анимацией и настройкой пропорций фигуры).

Браузерные технологии

Браузер (от англ. “browser”, т.е. “просмотрщик”) — программа для воспроизведения содержимого сети Интернет. На заре развития интернет-технологий роль браузера сводилась к просмотру текстовых страниц с включениями статических изображений (“гипер-текст”). Современные браузеры представляют собой полнофункциональные платформы для создания мультимедийных веб-приложений.

Среди реализованных в браузерах перспективных возможностей, используемых в Blend4Web, можно отметить следующие технологии:

• трехмерная графика, WebGL

• типизированные массивы, Typed Array

• временной контроль анимации (requestAnimationFrame), Timing control for script-based animations

• двухмерная графика, HTML Canvas 2D Context

• обработка звука, Web Audio API

• загрузка бинарных данных, XMLHttpRequest Level 2

• полноэкранный режим, Fullscreen

• захват курсора мыши, Pointer Lock

• многопоточные вычисления, Web Workers

• ориентация и перемещение мобильных устройств, Device Orientation

Другие перспективные технологии:

Интерактивная графика

Термин “интерактивный” в приложении к компьютерной графике означает, что пользователь имеет возможность взаимодействовать с постоянно меняющимся изображением. Например, пользователь может изменять направление взгляда в 3D сцене, перемещать объекты, инициировать анимацию и выполнять другие действия, обычно ассоциирующиеся с компьютерными играми.

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

Близким по смыслу термином является также “графика реального времени”, или “рендеринг реального времени” (от англ. rendering, т.е. “отображение”).

Видео-карты и драйверы

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

Основные производители графических процессоров (в скобках указаны их торговые марки), для настольных компьютеров — Nvidia (GeForce, Quadro), AMD (Radeon), Intel (HD), для мобильных устройств — ARM (Mali), PowerVR (SGX), Nvidia (Tegra), Qualcomm (Adreno).

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

Браузерные 3D онлайн игры — каталог трехмерных игр в браузере

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

Такие игры практически неотличимы от клиентских проектов, разве что слегка уступают в плане графики и спецэффектов. Однако этот недостаток компенсируется одним важной особенностью – браузерные 3D игры не требуют скачивания и установки клиента. Более того, практически все они распространяются бесплатно, чем и привлекают к себе орды юных (и не очень) геймеров.

Одним из первых представителей 3D браузерных игр является проект Танки Онлайн. Игра была запущена в 2009 году и сразу же поразила всех своей картинкой, где абсолютно трехмерные танки задорно катались между не менее трехмерными домами и сараями. Геймплей Танков Онлайн во многом схож со знаменитой World of Tanks, хотя и гораздо примитивнее. Управление танком просто как пробка, но аркадные стрелялки именно этим и привлекают игроков уже более 20-ти лет – простотой и ненавязчивостью происходящего на экране.

В том же 2009 году выходит игра Battlefield Heroes – побочная ветвь знаменитой серии, которая легко запускается в браузере и представляет собой мультяшную аркаду с видом от третьего лица. Здесь геймплей также не отличается особой сложностью, но картинка выглядит куда более качественнее, чем в тех же «Танках». Смысл игры – в противостоянии двух команд: немцев и англичан, которые носятся по небольшим картам и убивают друг друга с помощью ручного вооружения, танков и даже самолетов.

В 2010 году браузерные онлайн игры в 3D пополнились еще одним достойным экземпляром. На этот раз на сцену вышла не менее знаменитая серия шутеров Quake. Игру назвали просто – Quake Live, и представляла она собой ничто иное, как адаптированную под современные браузеры Quake 3. Урезав модели персонажей и спецэффекты, авторы одновременно с этим повысили разрешение и добавили картам текстур, так что в целом игра осталась на том же уровне.

Вообще, браузерные шутеры можно считать одним из самых бурно развивающихся жанров. Не последнюю роль в этом сыграл движок Unity3D, который способен впихнуть в окно браузера вполне достойную по сегодняшним меркам картинку. Sanctioned Renegades, Red Crusible 2, UberStrike, Interstellar Marines – все эти браузерные 3д игры работают именно на Unity3D.

Однако не только шутеры барабанят в двери браузеров руками и ногами. Классические MMORPG тоже не прочь попробовать себя в этом формате. В качестве примера можно привести проект City of Steam (в русском варианте «Пароград»). Игра выполнена в популярном нынче сеттинге «стимпанк», отличается большим количеством классов и неплохой графикой.

В общем, остается подождать еще немного, и браузерные 3D онлайн игры смогут стать практически вровень с клиентскими. Если не качественно, то хотя бы количественно.

Тестирование 3D графики в современных браузерах, уменьшение нагрузки на процессор

При просмотре тестовой страницы трафик около 2Мбайт без учёта gzip. Тестовая страница с 3D-объектами

Выбор средств и начало работы

Потребовалось селать сервис для цветового подбора покупаемых стройматериалов, мебели и т.д. Что делать и как быть?

Необязательно ограничиваться привычным интернет-сайтом, можно без проблем сделать и десктопное приложение, используя Lazarus и Chromium (см. Lazarus fpCEF3 — приложение с браузером).

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

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

• 1. ThreeJS подгружает модели и текстуры через XMLHttpRequest — пришлось править исходный код библиотеки в некоторых местах, чтобы обеспечить загрузку моделей и текстур только в виде передаваемых как параметры функций текстовых строк (base64 для текстур, JSON для моделей).
  Наладить обмен текстовыми блоками данных с JavaScript на веб-странице можно как угодно, в том числе с помощью сервера. Считаю это самым правильным решением, дело 3D библиотеки — моделировать изображение, а уж как что подгрузить и откуда, мне лучше знать 🙂
• 2. Где брать модели? Их надо рисовать, плюс импортировать в виде JSON.
  После некоторых поисков остановился на Blender, довольно удобный 3D-редактор, с возможностью экспортировать в формат TrheeJS (при скачивании ThreeJS там есть аддоны для Blender для экспорта).

В итоге потратил больше времени на обучение работе с Blender, разные вопросы, связанные с правильным созданием и экспортом моделей (модель обязательно должна иметь массив faceVertexUvs — для наложения текстур, иначе можно будет менять только цвет).

Русская документация Blender , а скачать программу можно отсюда: https://www.blender.org/download/

Скачивать лучше ZIP-архив (без установки), экспорт в JSON для ThreeJS настраивается копированием некоторых файлов из комплекта ThreeJS.

Тестовая 3D страница

Как обычно, набросал тестовую страницу для тестирования 3D графики в разных браузерах. Тестовая страница с трафиком — примерно 2 Мбайта, их сервер сжимает в gzip, если клиент не против. Всё это дело одинаково работает и локально, на любом компе, так что можно спокойно сохранить все файлы себе на компьютер.

Хочу сообщить, что при поиске готовых моделей, крайне редко попадаются пригодные для загрузки в браузер «лёгкие» модели, почти все предназначены для специализированных графических программ. Поэтому так или иначе, нужно работать с 3D — редактором, а так же оптимизировать везде где можно — разумно уменьшать количество полигонов, при работе многократно клонировать исходные JSON-объекты с небольшими изменениями и т.д.

На тестовой странице примерно около 1 Мб исходников текстур и моделей — ThreeJS шевелится отлично (его исходник тоже около 1 Мб — это форк и он не сжат). Визуально, по отзывчивости и плавности страницы, выигрывают браузер Chrome и веб-движок Chromium, IE11 и FireFox могут подтормаживать, в зависимости от нагрузки. Памяти расходуется относительно мало, по сравнению с «современными» сайтами, которые съедают иногда до 1Гб и более.

Конечно, реалистично выглядящие объекты требуют более навороченных моделей и текстур, поэтому нужно как-то соблюдать компромисс между реалистичностью и комфортом работы. Для тестовой страницы выбраны самые лёгкие модели, которые удалось найти, одну пришлось самому делать.

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

При просмотре тестовой страницы трафик около 2Мбайт без учёта gzip. Тестовая страница с 3D-объектами

Уменьшение нагрузки на процессор

Как известно, 3D-изображение рендерится через вызовы requestAnimationFrame()
Но если нет анимации, то постоянные вызовы renderer.render(scene, camera) создают неслабую нагрузку на процессор.

Вызов рендеринга сцены необходим только в случае пользовательских действий (поворот, масштабирование и т.д.). Поэтому нужно завести переменную — флаг (или счётчик) и повесить обработчики на события mousemove и wheel (для Chromium и браузера Chrome — mousewheel — но это детали тестовой страницы). Обработчики вызывают функцию, которая обнуляет флаг (счётчик). Соответственно, новый рендеринг сцены происходит только при нулевом флаге (счётчике). Можно делать рендеринг реже с помощью чётных/нечётных значений счётчика и т.д.

Если оптимизировать вызовы рендеринга сцены, то можно загружать довольно объёмные и реалистичные модели — памяти потребляется относительно мало, при добавлении моделей рост занимаемой памяти небольшой, зато проблема в быстром росте нагрузки на процессор.

Для текущей тестовой страницы, в таблицах ниже приведены примерные характеристики загрузки процессора и используемой памяти на моём рабочем компьютере (4х ядерный процессор 3Ггц, встроенная графика Radeon HD 4250). Обращаю внимание, что веб-движок Chromium, используемый из десктопного приложения, часто нагружает процессор в 1.5 раза меньше, чем браузер Chrome, да и памяти потребляет меньше.

Данные ниже соответствуют последним версиям браузеров на период тестирования — Июнь 2016г.

Таблица 1. До оптимизации — безостановочный рендеринг через requestAnimationFrame

Таблица 2. После оптимизации — рендеринг через requestAnimationFrame только при действиях пользователя

Вялые действия — как правило прокрутка колеса мыши. Максимальная загрузка 1 ядра равна 25%

При перемещении HTML-окон с выбором текстур и цветов на тестовой странице, все браузеры (кроме Chrome и Chromium) увеличивали нагрузку на процессор, поэтому при перемещении окон за заголовок, или изменении их размера, рендеринг сцены тоже отключается. Это особенно благотворно влияет на IE 11, так же и FireFox меньше грузит процессор. Отзывчивость страницы соответственно возрастает.

Это показывает важность оптимизации абсолютно всех объектов и стилей на любой веб-странице. Хорошо, если это получается сделать.

Июнь 2016г.

Будущее Интернета: визуализируйте интерактивное 3D в своем браузере | Константин Чутис

Помните 90-е и начало 2000-х годов, когда передовые веб-сайты представляли собой не что иное, как кучу пиксельных GIF-файлов вместе с текстом в виде картинок? (Серьезно, если вы не помните, вы можете загрузить все Geocities ( только 652 ГБ! ) и прогуляться по переулку памяти.)

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

Прежде чем мы перейдем к библиотеке three.js, нам нужно рассказать, что такое WebGL. WebGL означает библиотеку веб-графики и, по сути, представляет собой трехмерный API, написанный на Javascript. WebGL поддерживается всеми современными настольными и мобильными браузерами. (На момент написания этой статьи уровень поддержки во всем мире немного превышал 96%). Сама библиотека представляет собой «движок растеризации» с ускорением на GPU, который может рисовать точки, линии и треугольники в браузере. Эти 3 объекта составляют основу всего 3D-моделирования. Однако объем кода, необходимый для того, чтобы сделать что-нибудь среднее, не особенно удобен для среднего веб-разработчика.Многие программы 3D-скульптуры и игровые движки имеют возможность экспорта в WebGL, однако для этого также требуются знания о том, как использовать эти среды.

Three.JS — это библиотека, которая это исправляет. Он основан на библиотеке WebGL и максимально упрощает перенос 3D-контента и мультимедиа на веб-страницу. Он обрабатывает множество основных функций, таких как освещение, тени, камеры, сцены, материалы и текстуры, и это лишь некоторые из них.

Установить three.js довольно просто. Чтобы отобразить, три.js будет использовать элемент холста HTML5.

Все настройки выполняются с помощью JavaScript. Создание новых моделей с геометрией (с размерами x, y, z) и материалами осуществляется путем создания новых объектов JS, которые предварительно настроены в three.js.

Вы можете аналогичным образом настроить другие параметры, такие как сцена, камера, освещение, материал и текстуры.

Для типичного погружения в новый язык программирования или библиотеку мы часто идем с традиционным экспериментом «Hello World».Сегодня мы собираемся создать Hello Cube, поскольку это самая простая из всех примитивных форм.

Мы создали простой документ HTML5 и установили для рисования нашей 3D-модели. Мы также должны предоставить библиотеку three.js в качестве ссылки, чтобы мы могли создавать экземпляры новых объектов, используя их библиотеку.

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

Давайте добавим камеру (созданную с помощью поля обзора, соотношения сторон, ближнего и дальнего отсечения), источник света (в нашем случае настроенный как направленный свет) и немного анимации, чтобы объект не просто быть статическим изображением (добавлено небольшое вращение вокруг оси x и y)

Вот окончательный код для нашего Hello (Spinning) Cube

Если вы хотите поиграть с некоторыми параметрами или даже добавить свои собственные, вы можете поиграть с ручкой ниже.

Blender: полнофункциональный 3D-редактор с открытым исходным кодом

Что такое Blender

Blender — это профессиональный пакет компьютерной 3D-графики, разработанный некоммерческой организацией Blender Foundation из Амстердама. Как указано в его миссии, Фонд стремится «предоставить всемирному Интернет-сообществу доступ к 3D-технологиям в целом, с Blender в качестве ядра». Blender может эффективно использоваться как небольшими студиями, так и крупными компаниями и признан одним из ведущих решений в области 3D-графики.

Зачем нужен Blender

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

Хотя Blender — это профессиональное программное обеспечение с открытым исходным кодом, оно полностью бесплатное.Он отлично работает в Windows, Linux и macOS. Пользовательский интерфейс полностью настраивается и поддерживает все основные языки мира.

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

Как это относится к Blend4Web

В начале своей разработки Blend4Web предназначался для использования в качестве инструмента для создания содержимого WebGL в Blender (отсюда и название). На сегодняшний день Blend4Web представляет собой законченное интегрированное 3D-веб-решение, ключевым компонентом которого по-прежнему является Blender. Обе команды тесно сотрудничают друг с другом, чтобы обеспечить совместимость и надежность. Наша компания вносит большой вклад в Фонд развития Blender, а также направляет разработчиков на полную ставку для работы над функциями Blender.

Все наши услуги, связанные с Blend4Web, также охватывают сам Blender. Это означает, что вы также можете получить техническую поддержку, обучение и консультации по использованию Blender.

Начните использовать Blender и Blend4Web прямо сейчас

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

Для получения дополнительной информации о Blender и услугах, предоставляемых Blend4Web, свяжитесь с нами.

Blend4Web PRO | Blend4Web

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

Высококачественная техническая поддержка

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

Богатая библиотека материалов

Blend4Web PRO включает большую, простую в использовании и тщательно продуманную коллекцию высококачественных материалов, которые могут значительно сократить время, затрачиваемое на создание модели.В эту коллекцию входят только качественные материалы, такие как металлы, пластмассы, стекло и т. Д.

Готовые решения для бизнеса

Blend4Web PRO обеспечивает доступ к готовым бизнес-решениям, таким как демонстрация продуктов, электронное обучение, разработка игр и веб-дизайн. Эти решения включают код приложения и 3D-модели, которые можно использовать в качестве обучающих примеров и отличной отправной точкой для ваших собственных проектов.

Просмотрите страницу made with, чтобы узнать, как можно применить эти решения в своих собственных приложениях.

Долгосрочная поддержка (LTS)

Версия с долгосрочной поддержкой значительно упрощает обслуживание ваших приложений в течение длительного периода времени. Наша последняя LTS-версия Blend4Web PRO (17.06) будет получать обновления и исправления ошибок до середины 2018 года. Это гарантирует, что ваши бизнес-решения всегда будут работать независимо от любых изменений в браузерах, драйверах графических процессоров, операционных системах или недавно выпущенных мобильных устройствах.Узнайте больше о различиях между LTS и последними версиями Blend4Web PRO.

Защитите свою интеллектуальную собственность

Коммерческая лицензия позволяет создавать интерактивный трехмерный веб-контент без ограничений, налагаемых GPL. Лицензия Blend4Web PRO защищает вашу интеллектуальную собственность — только вы можете монетизировать свои решения. Приобретая лицензию, вы освобождаетесь от права делиться своими исходными файлами.Таким образом, вы можете уверенно создавать решения для любых коммерческих целей, таких как демонстрация продуктов, настройка, электронное обучение, онлайн-игры, реклама и веб-дизайн, не беспокоясь о лицензионных ограничениях.

Полный набор доступных вариантов лицензирования см. В этой блок-схеме.

Программа выгодного партнерства

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

Комплект разработчика программного обеспечения (SDK)

Для быстрой и простой установки мы предоставляем полный пакет, включающий все необходимое для разработки приложений.

Варианты, отвечающие вашим потребностям

Ознакомьтесь с бонусными функциями, которые вы получаете с Blend4Web PRO, в сравнении ниже.

Получите доступ к Blend4Web PRO прямо сейчас

Вы можете приобрести Blend4Web PRO онлайн, используя нашу форму заказа.

Если вам нужна дополнительная информация, свяжитесь с нами.

Онлайн-3D-моделирование, 3D-рендеринг, Бесплатные 3D-модели

Начните создавать, рендерить и публиковать 3D с Clara.io прямо сейчас, бесплатно !

Без загрузок, без лицензий, без конфигурации. Все, что вам нужно, это ваш веб-браузер.

Наш пользовательский интерфейс смоделирован на основе традиционных настольных инструментов, поэтому вы можете быстро работать.

Визуализируйте что угодно и быстро. Импортируйте свои модели или создавайте их с нуля.

Если вы просто настраиваете нормали или строите персонажа целиком, мы вам поможем.