На чем базируется трехмерная графика в андроид
Перейти к содержимому

На чем базируется трехмерная графика в андроид

  • автор:

2.1 Архитектура ос Android

Операционная система Androidсостоит из набора компонентов таких как приложения, каркас приложения, библиотеки, среды исполнения и ядра линукс. На Рисунок представлена диаграмма основных компонентов операционной системы Android [6].

Рисунок 2.1 — Основные компоненты ОС Android

Уровень приложений

В состав ОС Android входит комплект базовых приложений: клиенты электронной почты и SMS, календарь, различные карты, браузер, программа для управления контактами и многое другое. Все приложения, запускаемые на платформе Android, написаны на языке Java.

Уровень каркаса приложений

ОС Android позволяет полностью использовать API, используемый в приложениях ядра. Архитектура построена таким образом, что любое приложение может использовать уже реализованные возможности другого приложения при условии, что последнее откроет доступ на использование своей функциональности. Таким образом, архитектура реализует принцип многократного использования компонентов ОС и приложений.

Основой всех приложений является набор систем и служб:

  1. менеджер действий (ActivityManager) управляет жизненным циклом приложений и предоставляет систему навигации по истории работы с действиями;
  2. контент-провайдеры (ContentProviders) – это службы, которые позволяют приложениям получать доступ к данным других приложений, а также предоставлять доступ к своим данным;
  3. система представлений (ViewSystem) – это богатый набор представлений с расширяемой функциональностью, который служит для построения внешнего вида приложений, включающий такие компоненты, как списки, таблицы, поля ввода, кнопки и т.п.;
  4. менеджер ресурсов (ResourceManager) предназначен для доступа к строковым, графическим и другим типам ресурсов;
  5. менеджер извещений (NotificationManager) позволяет любому приложению отображать пользовательские уведомления в строке статуса.
  1. SystemClibrary— BSD-реализация стандартной системной библиотеки C (libc) для встраиваемых устройств, основанных на Linux;
  2. MediaLibraries– библиотеки, основанные наPacketVideo‘sOpenCORE, предназначенные для поддержки проигрывания и записи популярных аудио- и видео- форматов (MPEG4, H.264, MP3, AAC, AMR, JPG, PNG и т.п.);
  3. LibWebCore– ядро встроенного web-браузера;
  4. SurfaceManager– менеджер поверхностей управляет доступом к подсистеме отображения 2D- и 3D- графических слоев;
  5. SGL (ScalableGraphicsLibrary)– библиотека для работы с 2D-графикой, основанная на библиотеке SDL (SimpleDirectMediaLayer);
  6. 3Dlibraries– библиотеки для работы с 3D-графикой, основанные наOpenGLES 1.0 API;
  7. FreeType– библиотека, предназначенная для работы со шрифтами.
  8. SQLite– легковесная реляционная система управления базами данных.

Трёхмерный мир на плоском экране: как отобразить банковскую 3D-карту в приложении на Android

Привет, меня зовут Дмитрий Гайдук, я Android-разработчик KODE. В 2018 году к нам пришёл новый заказчик — болгарский банк TBI. У нас был опыт разработки банковских приложений, и в TBI был знакомый функционал: заявки на кредит, платежи и переводы. Кроме реализации кода, вёрстки и сетевых запросов, заказчик попросил добавить трёхмерности и покрутить банковскую карту вокруг своей оси.

Хорошо, сказали сделать — значит, сделаем. Всё же век цифровых технологий, кругом 3D, дополненная реальность и много разных библиотек для реализации. Но не всё было так просто, как я думал. Рассказываю о трудностях, с которыми мы столкнулись, и как в итоге решили такую нестандартную и интересную задачу.

Примечание. TBI Bank — один из лидеров болгарского рынка. С 2018 года компания KODE помогает банку создать digital-инфраструктуру, чтобы перевести процессы выдачи кредита и обслуживания клиентов полностью в онлайн. Подробнее о кейсе на нашем сайте.

Часть 1. Задача и поиск решений

Задача: отобразить 3D-объект банковской карты с интерактивными возможностями. Объект представлен одним OBJ и двумя PNG-файлами для каждой стороны карты.

Начинаем искать библиотеку.

  • Минимум усилий на добавление 3D-карты, адекватное время на изучение и реализацию задачи. Так как мы занимаемся разработкой мобильного приложения, а не геймдевом, мы хотели обойтись без погружения в тонкости OpenGL.
  • Хорошо документированное API.
  • Возможность добавить библиотеку в обычную вёрстку вместе с остальным GUI и использовать её как обычный компонент View. Данный компонент нужно было добавить в RecyclerView.
  • Интерактивность. Возможность крутить карту жестами.

Нашли не так много вариантов:

  • Библитека min3d. Похоже, проект заброшен.
  • Фреймворк libGDX. Подойдет только для отображения карты, нельзя использовать совместно с остальным GUI.
  • Движок Filament. Посмотрел демо для Android — не совсем то, что нужно: слишком много специфичного кода для рендера, чтобы просто добавить 3D-карту.
  • Библиотека ARCore для дополнительной реальности от Google. Построена на основе Filament.

Выбор пал на ARCore. Мы учитывали опыт разработчиков приложения Revolut: в статье Interactive 3D cards for Revolut Android app было описано использование этой библиотеки без дополненной реальности. Код выглядел несложным — кажется, то, что нужно.

Часть 2. Welcome to Android

Читаем статьи, как всё хорошо в Android, затем добавляем банковскую карту в приложение и радуемся. Эх, мечты!

Сначала коротко расскажу о том, как добавить 3D-объект на экран, используя библиотеку ARCore. Более подробную инструкцию можно найти в интернете.

  1. Добавляем файлы 3D-объекта в проект. В нашем случае это OBJ и PNG для каждой стороны карты.
  2. В конфигурации build.gradle добавляем плагин Sceneform
apply plugin: 'com.google.ar.sceneform.plugin' sceneform.asset('card/card.obj', 'default', 'card/card.sfa', 'src/main/assets/card')

3. Консольная команда для генерации SFB-файлов для ScenefForm:

./gradlew compileSceneformAssets

4. Добавляем отображение 3D-объекта на экране

ModelRenderable.builder() .setSource(this.context, Uri.parse("card.sfb")) .setRegistryId("card.sfb") .build() .thenAccept < model: ModelRenderable ->// Добавление ModelRenderable на сцену com.google.ar.sceneform.SceneView > .exceptionally < e: Throwable? ->e?.printStackTrace() null >

Немного кода, и трёхмерный мир на экране вашего устройства!

Далее я рассмотрю проблемы, выявленные во время разработки с ARCore без дополненной реальности. Многие решения не идеальны. Нам пришлось прибегнуть к некому workaround: в документации нет информации, как это сделать правильно с помощью API.

Проблема 1. Источник света

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

Sceneform adds an environment light based on an image (IBL/image-based lighting). This environment light cannot be customized currently, hopefully in a future version.

Sceneform добавляет освещение на основе конкретного изображения (IBL). Сейчас его нельзя настроить, но, надеюсь, будет возможно в будущем.

На карте отражаются объекты, которых не должно быть

Нам нужен только источник света без каких-либо объектов из окружающего мира. В классе com.google.ar.sceneform.Scene освещение окружающей среды задаётся таким образом:

LightProbe.builder() .setAssetName("custom light probe") .setSource(this, R.raw.custom_light_probe) .build().thenAccept

Где custom_light_probe — это файл .sfb. По умолчанию используется R.raw.sceneform_default_light_probe .

В этом же классе можно увидеть код создания объекта Light Probe

 private void setupLightProbe(SceneView var1) < Preconditions.checkNotNull(var1, "Parameter \"view\" was null."); int var2; if ((var2 = LoadHelper.rawResourceNameToIdentifier(var1.getContext(), "sceneform_default_light_probe")) == 0) < Log.w(TAG, "Unable to find the default Light Probe. The scene will not be lit unless a light probe is set."); >else < try < LightProbe.builder().setSource(var1.getContext(), var2).setAssetName("small_empty_house_2k").build().thenAccept(new n(this)).exceptionally(m.a); >// . >

Возможно, файл sceneform_default_light_probe.sfb создан на основе small_empty_house_2k.exr.

Изображение внутри EXR-файла, которое видно в отражении карты

Как создать собственный файл .sfb из .exr — неизвестно. Есть утилита cmgen для 3-движка Filament, которая позволяет получить Image Based Lighting из файла .exr. Но нужно собирать из исходников, и не подходит из-за формата: нам нужен именно .sfb. Команда Gradle — compileSceneformAssets — тоже это делать не умеет.

Решение

Шаг 1. Убираем источник света от LightProbe и используем только источник от Scene.sunlight :

scene.lightProbe.dispose() scene.sunlight?.isEnabled = true scene.setUseHdrLightEstimate(true)

Не совсем то, что нужно: получается темноватое изображение.

Шаг 2. Пробуем добавить ещё один источник света.

В поле Scene.sunlight находится объект класса com.google.ar.sceneform.Sun , который наследуется от Node. Получается, нужно добавить на сцену ещё один Node с определённой конфигурацией. С использованием HDR должно выглядеть круто!

scene.lightProbe.dispose() scene.sunlight?.isEnabled = false scene.setUseHdrLightEstimate(true) val light = Node() light.light = Light.builder(Light.Type.DIRECTIONAL) .setColor(Color(1f, 1f, 1f)) .setIntensity(200f) .setShadowCastingEnabled(true) .build() light.worldPosition = Vector3(1f, 1f, 1f) light.setLookDirection(Vector3(0f, 0f, 0f)) sceneView.scene.addChild(light)

Картинка стала ярче, но нам нужно более «охватывающее» освещение, без резких тёмных сторон при повороте карты. В процессе проверки разных вариантов освещения выяснилось, что через Node нельзя добавить несколько источников света.

Шаг 3. Сводим к минимуму отражение внешнего мира.

Такое решение было принято, так как мы не можем обойтись без источника света LightProbe и изменить картинку по умолчанию. Чтобы убрать отражение, нужно повернуть «освещение окружающей среды»:

val lightProbe = scene.lightProbe lightProbe.rotation = Quaternion(Vector3.up(), 78F) lightProbe.intensity = 2.5f scene.lightProbe = lightProbe

Проблема 2. Материал объекта

Далее нам нужно настроить материал для сторон карты и сделать отражение немного размытым. Для этого открываем файл .mtl и редактируем нужные параметры. Как устроен этот файл и какие параметры доступны можно посмотреть в Wiki, а всю исчерпывающую информацию ищите здесь.

Для уменьшения «зеркальности» материала нужно изменить значение для Ns — коэффициента зеркального отражения. Подбираем остальные параметры:

Ns 40.000000 Ka 1.000000 1.000000 1.000000 Kd 0.800000 0.800000 0.800000 Ks 0.500000 0.500000 0.500000 Ke 0.000000 0.000000 0.000000 Ni 1.450000 d 1.000000 illum 2

Теперь карта выглядит практически так, как нужно.

Проблема 3. Цвет фона

В тёмной теме мы заметили, что фон области просмотра 3D отличается от остального приложения: у 3D-сцены он немного темнее. Сделать фон прозрачным не получилось. Если выставить цвет color/transparent или null , то фон становится чёрным.

Вёрстка с цветом для тёмной темы, цвет общего фона и фона SceneView одинаковый.

Как выглядит карта на данном этапе

Выяснилось, что это из-за специфической логики работы библиотеки. Конвертирование цвета происходит в классе com.google.ar.sceneform.rendering.Color :

public void set(@ColorInt int argb)

Мы не нашли универсальной логики для вычисления цвета фона. Если делать обратную формулу для логики в классе Color, то получается цвет с RGB-составляющими, значения которых будут выходить за допустимые границы. Следовательно, мы не можем получить нужным нам цвет.

Решение

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

Проблема 4. Определение поддержки 3D на устройстве

Библиотека ARCore не работает на Android ниже 7 версии. Но не всё так просто. На некоторых устройствах приложение падает и на Android 7. Нужно индивидуально определять: есть поддержка или нет.

Решение

Создаём объект SceneView:

fun isSceneViewAvailable(context: Context): Boolean < return try < SceneView(context).destroy() true >catch (e: Throwable) < false >>

Проблема 5. Асинхронная инициализация SceneView

В ходе тестирования обнаружилась ещё одна ошибка: если многократно открывать экран с 3D-картой, в какой-то момент она может не отобразиться.

Выяснилось, что инициализация объекта Scene происходит асинхронно. То есть после создания Scene поле lightProbe какое-то время имеет значение null . Более того, если попытаться получить значение Scene.lightProbe до того, как произошла инициализация, то получим исключение, и приложение упадёт.

Реализация метода getLightProbe() в библиотеке ARCore:

public LightProbe getLightProbe() < if (this.lightProbe == null) < throw new IllegalStateException("Scene's lightProbe must not be null."); >else < return this.lightProbe; >>

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

Решение

Создаём цикличную проверку, которая будет регулярно определять, всё ли инициализировалось. И только после этого будет начинаться работа с библиотекой.

val checkLightProbeIntervalMilliseconds = 50L val disposable = Observable.interval(checkLightProbeIntervalMilliseconds, TimeUnit.MILLISECONDS) .map < try < card_info_scene_view?.scene?.lightProbe == null >catch (e: IllegalStateException) < true >> .takeUntil < lightProbeIsNull ->!lightProbeIsNull > .filter < lightProbeIsNull ->!lightProbeIsNull > .subscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThread()) .subscribe( < setupScene() >, < e ->e.printStackTrace() > )

Часть 3. Наслаждаемся результатом и подводим итоги

Запускаем приложение — карта крутится. Классно!

Был получен хороший опыт работы с 3D в Android, потому что нам удалось реализовать поставленную задачу с помощью небольшого объёма кода: чуть более 200 строк на отображение карты и добавление интерактивности.

Пример кода со всеми наработками — на GitHub.

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

Подсмотрел, как это выглядит при разработке iOS-приложений

Довольно простой импорт модели, в IDE встроен 3D-редактор, можно настроить освещение и параметры материала. Будем надеяться, что и в Android Studio появится что-то подобное.

Редактор для 3D-моделей в Xcode

Возможно, стоит посмотреть в сторону Filament, на которой построена ARCore. Она позволит настраивать построение 3D-сцены более точно. А время на изучение Filament должно компенсировать время, потраченное на подводные камни ARCore.

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

Почему графика состоит из треугольников? Разбор

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

aka_opex 16 сентября 2022 в 08:25

Все объекты в реальном мире состоят из частиц — молекул и атомов. А в виртуальном 3D-мире из треугольников, то есть полигонов.

Так статуя, созданная на движке Unreal Engine 5, состоит из 33 миллионов полигонов. Выглядит невероятно реалистично и на глаз отличить от реального мира невозможно.

Но. Почему треугольники? Хотя на самом деле не только они. Сегодня разберемся, как устроен 3D-рендер, каким образом единички и нолики превращаются в потрясающие миры, объемная объекты отображаются на плоском экране? Тут куча всего интеренсного.

Хранение

И начнем с чайника. Это один из эталонных объектов в компьютерной графике. Благодаря своей форме он хорошо подходит для тестов разных поверхностей. Чайник — это что-то вроде программы Hello World! среди программистов. Давайте сперва давайте поймем, как трехмерный мир видит компьютер?

В 3D-мире всё состоит из точек. Отличие этих точек от тех, что в 2D, наличие дополнительной координаты Z. То есть чтобы создать точку в 3D мире нужно 3 числа, X, Y и Z, длина, высота и ширина.

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

Но, чтобы создать объект, одних точек не достаточно, поэтому давайте проведем линию из точки A в точку B. Но одной линии тоже не хватает, давайте создадим третью точку и соединим её линиями с точками A и B. Теперь у нас есть треугольная поверхность из которой можно строить 3D фигуры. На первый взгляд может показаться, что фигура слишком простая, как из неё можно хоть что-то сделать. На самом деле всё.

Посмотрите на детализацию этой статуи, а теперь на то, из чего она состоит… да, треугольники. Эти детали называются полигонами и из них строится всё, что вы видите в 3D играх. Треугольник — это минимальное количество точек, используемых для создания полигона, который может загрузить видеокарта.

Взглянем на ту же картинку, но с новой таблицей. Правая таблица хранит информацию о треугольниках. Вся суть в том, что чтобы нарисовать треугольник, нам всего лишь нужно указать ссылки на 3 точки. Интересно, что треугольники не хранят сами точки, а именно ссылки на местонахождение этих точек в памяти. Это очень важно знать, дабы избежать создания лишних копий. А вот так выглядит хранение треугольников в текстовом файле. Один треугольник = 3 ссылки на точки.

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

Самый простой способ — перемножить сетку 4 на 4 на координаты объекта. Вдаваться в подробности не будем, просто скажем, что перемножив сетку на координаты объекта, можно изменить его положение, вращение, размер и даже систему координат.

Только треугольники?

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

Но, когда 3D-модель (или ассет) создан, все квады превращаются в треугольники, так как точек меньше и математика с ними гораздо проще.

Смотрите, плоские полигоны гораздо проще рендерить, по этому они более предпочтительны. Если мы возьмем квадратный плоский полигон и изменим расположение одной точки, он перестанет быть плоским и выйдет из так называемой полигонной сетки. Из-за этой фичи, нужно проводить дополнительные вычисления, чтобы проверить плоский ли полигон или нет. Треугольники от этого не страдают, так как какую точку не перемести, треугольный полигон останется плоским. Профит.

Нюансы хранения

Также важно упомянуть Level of Detail, или же LOD. Удалённые объекты занимают очень малую часть экрана и их детали рассмотреть невозможно. Философия проста, зачем дальним объектам много полигонов, если их не видно. В кратце LOD сокращает количество полигонов на всём, что находится далеко от камеры и плохо видно.

Рендеринг

Есть одна важная вещь, о которой немногие догадываются: 3д игры на самом деле не трехмерные. Мы смотрим на них через дисплей, который плоский. И имеет только две координаты.

С хранением 3D-штук разобрались, теперь о том как превратить их в 2D изображение, которое мы видим на экране. И делать это желательно 60 раз в секунду.

Перспективная проекция

Ну начнём с того, что всё, что мы видим на экране на самом деле 2D. Определённый цвет пикселей на экране меняющийся в правильной последовательности дает иллюзию трехмерного пространства.

То есть, нам надо трехмерный мир спроецировать в плоскую картинку. Как это делается? Чтобы добиться этой иллюзии, используется техника перспективной проекции.

Эта техника создает плоское изображение 3D объектов, которое отображается на экране так, что результат кажется трехмерным.

Подход простой: удаленные объекты кажутся меньше, близкие больше. Работает это так, нам нужно спроецировать каждую точку объекта на экран в перспективе. Далее начинается школьная геометрия. мы видим такой треугольник, а точнее 2. Есть высота дерева в 3д мире — это У. Нам нужно найти значение Ys, что является высотой объекта на экране. Из уроков математики мы знаем, что боковые стороны подобных треугольников пропорциональны друг другу. Из этого мы делаем вывод, что боковая сторона первого треугольника, деленная на расстояние до экрана равна боковой стороне второго треугольника, деленного на расстояние до объекта. После перестановки, мы видим, что финальное значение равно расстоянию до экрана, деленного на расстояние до объекта, умноженного на его высоту. С иксом тоже самое, просто нужно заменить y на x.

Но на этом не всё. Чтобы объект попал на экран нам нужно совершить ещё 2 действия. Для начала перевести полученные координаты в орфографическое пространство, чтобы соответствовать плоскости наших мониторов. После чего их нужно централизовать, переведя в Vulkan’s Canonical view volume. Это уже то, что мы видим на экране.

Обрезка

Если просто забросать 3D-сцену треугольниками, может возникнуть проблема, игра начнет лагать. Благо есть читерские методы, которые позволяют легко ускорить рендер.

Например можно рендерить только те объекты, которые находятся в направлении, куда смотрит игрок. Этот способ называется frustum culling.

Слово Фрустум — это конусовидная призма, форма, которую принимает область видимости камеры.

У этого способа есть старший брат, называется occlusion culling, который работает хитрее: удаляет те объекты, которые перекрывают другие! То есть те объекты, на которые вы не смотрите — реально не существуют.

Например, можно посмотреть как это реализовано на движке анриал: в специальном режиме видно, что все объект вне зоны видимости просто пропали из сцены.

Ещё одна важная техника в 3D-рендеринге называется clipping или обрезка по нашему. Как следует из названия, всё, что не попало в угол обзора, срезается для лучшей производительности. Clipping отличается тем, что она может обрезать часть объектов.

Кстати, разница clipping’a и ранее упомянутого culling’a в том, что первый метод удаляет полигоны, которые не попали в кадр, в то время как culling удаляет сами объекты на программном уровне.

После этого, значения нужно перемножить снова, но уже на сетку окна приложения. Это нужно например если вы играете в оконном режиме.

Растеризция

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

GPU

За рендер 3D-объектов отвечает GPU. Да, тот самый графический чип, который позволяет нам играть в игры 4K 120 FPS. В этом ему помогает огромное количество ядер, гораздо больше, чем у центрального процессора. К примеру у RTX 3090 10496 ядер, в то время как у ryzen 7 5800x всего 8.

И тут вы можете спросить, а что нам мешает использовать графический процессор вместо центрального, ведь в нём так много ядер, а значит он мощнее. На самом деле нет. Ядра GPU отличаются от CPU тем, что они гораздо глупее и предназначены для простых, монотонных работ с графикой. CPU же в свою очередь имеет очень умные ядра, которые способны работать над очень сложными задачами быстро и независимо друг от друга. Другими словами если ядра в графическом процессоре это муравьи, которые строят домик, их много, но работа не требует много интеллекта. То ядра в центральном процессоре это учёные, создающие вакцину от коронавируса.

Скорость современных видюх просто поражает. Например вот видео где парень рендерит 312 миллиардов полигонов на RTX 3090 в реальном времени.

Итог

На этом всё. Есть ещё много того, что мы не разобрали, к примеру трассировка лучей или Ray Tracing, Shading и Anti-Aliasing. В общем, это еще несколько интересных тем, которые можно разобрать в будущем…

Веб в трех измерениях: пять сервисов для работы с 3D-графикой в браузере

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

Компьютерная «трехмерка» стала более качественной, а дизайнеры перестали использовать 3D там, где это не нужно. Наглядным примером такого неуместного использования 3D можно назвать игру Worms, которая потеряла свою привлекательность, как только из нее попытались создать трехмерную аркаду.

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

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

Стоит, однако, иметь в виду, что сервисы, работающие на WebGL, требуют наличия браузеров Google Chrome или Firefox (в Opera поддержку технологии так и не доработали — она осталась тестовой функцией). Если судить по нашему опыту, лучше все же отдать предпочтение Chrome — во многих случаях 3D в Firefox не отображается, хотя его поддержка официально заявлена.

⇡#Просмотр 3D-моделей в браузере

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

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

Сервис P3d.in дает возможность загружать модели в формате OBJ на сайт и делиться ими. После загрузки генерируется ссылка вида http://p3d.in/BIcqM. Если перейти по ней, можно рассмотреть модель со всех сторон, повращать ее, приблизить. Очень удобно, что для просмотра могут использоваться разные представления: сетка, сплошной цвет, сетка на сглаженной поверхности и так далее.

Владелец учетной записи может работать со своими моделями в веб-галерее, сортировать их, используя метки, добавлять описания, управлять начальным видом камеры. Возможна и базовая настройка материалов: можно управлять цветом и наличием текстуры для параметров Diffuse и Specularity, а также размещением текстуры на объекте. При переключении на платный аккаунт добавляются возможности по управлению материалами: появляются дополнительные типы карт (Bump, Ambient Occlusion), увеличивается максимально допустимое разрешение текстур, появляется возможность загружать картинки в PNG. Пока что Pro-акаунты только тестируются, поэтому воспользоваться всеми их преимуществами можно совершенно бесплатно.

Sketchfab можно рассматривать как более продвинутый вариант P3d.in. Если предыдущий сайт хорошо подходит для тех, кому нужно время от времени демонстрировать отдельные 3D-модели заказчикам, Sketchfab — это место, где можно создать настоящее онлайн-портфолио.

За 7 долларов в месяц Sketchfab предлагает хостинг полноценного сайта-портфолио вида myname.sketchfab.me, на котором можно разместить информацию о себе и на который можно закачать все свои модели (просто модели, а не изображения, на рендеринг которых нередко уходят долгие часы). Потенциальный работодатель сможет увидеть все модели в 3D и рассмотреть их со всех сторон.

Впрочем, сайтом можно пользоваться и бесплатно. В этом случае создается страница вида sketchfab.com/3dnews, которая похожа на профиль тематической социальной сети. На ней можно увидеть все модели, загруженные пользователем, и число их просмотров. Другие пользователи Sketchfab могут оставить комментарий к модели, сделать пометку «нравится», а также подписаться на обновления.

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

Впрочем, разработчики Sketchfab позаботились о том, чтобы пользователи могли представить свои модели в наилучшем виде. Можно выбирать отображение с использованием шейдеров и сетки или без них, управлять многими параметрами материала, добавлять один из четырех вариантов однотонного фона или размещать модель на фоне изображения (звездного неба, зимнего леса и так далее — всего более 10 вариантов).

Для более качественного показа модели можно также использовать Screen Space Ambient Occlusion (SSAO). В режиме редактирования доступна полезная информация о модели: число треугольников и вершин. Sketchfab поддерживает множество форматов, среди которых OBJ, 3ds, blend, DAE.

⇡#Verold Studio

Verold Studio — самый молодой участник нашего обзора. Проект, запущенный лишь летом прошлого года, создавался уже тогда, когда на рынке существовали Sketchfab и P3d.in, поэтому его разработчики попытались предложить то, чего нет у конкурентов. Первое — это более широкие возможности работы с материалами. В Verold Studio встроен миниатюрный редактор материалов, поэтому возможностей сделать модель красивой тут гораздо больше. Можно добавлять отражения, блики и так далее.

Также доступны разнообразные параметры освещения, причем отдельно можно управлять задним светом, светом заливки, подсветкой. Как и в Sketchfab, на этом сайте можно использовать фоновые изображения и гибко настраивать фон. А вот вариантов представления модели гораздо больше. Можно, например, включить режим визуализации нормалей или UV. Еще одна приятная особенность Verold Studio — загрузка моделей простым перетаскиванием из файлового менеджера.

В Verold Studio также уделено внимание совместной работе над проектами. Сервис предлагает много социальных функций, в частности многопользовательское обсуждение проектов в реальном времени. Как и на Sketchfab, тут есть возможность подписываться на новые модели пользователя. Правда, по части пользовательских страниц Verold Studio явно отстает — страница профиля с адресом вида studio.verold.com/users/519dd09d6e7eb82000000a2 явно проигрывает простому адресу, который получают пользователи Sketchfab. Да и редактор моделей Sketchfab нам показался нагляднее, так что молодому проекту Verold Studio еще есть над чем работать.

⇡#3D-графика в браузере — для 3D-печати

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

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

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

⇡#3DTin

3DTin — это онлайновый трехмерный редактор, созданный небольшой группой энтузиастов из Мумбаи (Индия) в 2010 году. За относительно короткий срок сервис набрал большое количество пользователей. В мае этого года число зарегистрированных пользователей превысило 100 тысяч человек. Такая популярность закономерна — еще несколько лет назад трехмерный редактор в браузере казался невозможным.

3DTin имеет лишь базовый набор функций для трехмерного моделирования (примитивные трехмерные формы, инструменты трансформации, объемный текст), но даже этого минимального набора инструментов вполне достаточно для построения 3D-сцен. В веб-приложении имеется даже возможность создания анимации!

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

Созданные в веб-приложении модели могут быть отправлены на популярные сервисы для 3D-печати или же экспортированы в STL, OBJ, DAE. Все данные хранятся в «облаке», поэтому можно не волноваться о сохранности работы. Завершив моделирование на одном компьютере, вы можете спустя некоторое время продолжить работу на другом.

⇡#Tinkercad

Tinkercad был первым 3D CAD-редактором, работающим в браузере. Его основное назначение — создание моделей для 3D-печати. Интерфейс редактора очень напоминает внешний вид программы SketchUP — тут так же просто добавлять трехмерные объекты и манипулировать ими. Изменение размера, перемещение и поворот выполняются перемещением маркеров, которыми окружен объект. При изменении размера можно сразу же увидеть величину модели в миллиметрах или в дюймах — по выбору пользователя. Также присутствуют инструменты для выравнивания и зеркального отображения. В Tinkercad есть множество уже готовых моделей. Это не только геометрические объекты, но и все буквы английского алфавита, цифры, знаки препинания, другие популярные символы (сердце, звездочка). Также можно быстро создать куриные лапы, яйцо и уши зайца.

Готовые проекты могут быть сохранены в форматах STL, OBJ, VRML, X3D и SVG. При желании пользователь может не забивать себе голову форматами, а просто сразу же отправить проект на один из четырех поддерживаемых сервисов для 3D-печати. Файл будет загружен на сервис, а тот уже автоматически определит стоимость печати.

В марте этого года Tinkercad чуть было не закрыли. Его создатели решили сосредоточиться на новом проекте Airstone, закрыли регистрацию бесплатных учетных записей и сообщили о полном прекращении работы сервиса в середине лета 2014 года. К счастью, интересным проектом заинтересовалась компания Autodesk, которая в последнее время активно разрабатывает не только программное обеспечение для работы с 3D и CAD, но и тематические веб-сервисы и мобильные приложения. Неделю назад канадская компания купила Tinkercad, благодаря чему регистрация снова была открыта и пользователи бесплатных учетных записей получили дополнительные возможности. Для freeware-аккаунтов ныне работают все возможности импорта и экспорта проектов, сняты ограничения на число создаваемых дизайнов. Также в рамках обычной учетной записи можно использовать Shape Scripts, создавая собственные 3D-объекты средствами скриптового языка.

⇡#Заключение

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *