Собираем сцену…

Лаборатория 3D

Анатомия
объекта.

iPhone Duo · 4,90 МБ

glTF · Three.js · WebGL 2 · GLSL
67 494 треугольника · 27 костей

Модель и её текстуры. Обои и окружение — отдельно.

01Согнуть

0.33
ЗакрытРаскрыт

27 костей управляют деталями через общий скелет. Это сохраняет согласованность сгиба: экран, рамка и шарнир движутся как один механизм. Пружина сглаживает ход ползунка и притягивает раскрытие к краям — даже резкое движение руки превращается в мягкий переход.

02Разобрать

0%
ВместеПо отдельности

62 объекта модели · 4 группы поверхностей.

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

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

03Свет и материал

Исходный свет меняется вместе с раскрытием и готовыми позами.

50%

Мягче свет — спокойнее отражения и фон. Нейтральное заполнение сохраняет форму.

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

Форму металла рисуют отражения светлых и тёмных карт. Их расположение меняется между постановочными ракурсами. В исходной постановке используются три группы окружения: две смешивают заранее рассчитанные состояния, третья обновляет карту отражений по движущимся источникам.

Даже вспышка имеет собственные карты материала. Шероховатость управляет шириной блика, металличность — характером отражения, окклюзия затемняет стыки. Эти данные могут храниться в разных каналах одной текстуры: режимы выше разделяют их для просмотра.

Резкие отражения в линзах частично построены дубликатами геометрии. Для предметной сцены это практичный приём: нужный блик остаётся управляемым без дорогого расчёта отражений лучами.

04Обои — ещё одна сцена

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

05Проекция и размытие

Обои сначала рисуются в текстуру, затем проецируются на поверхность экрана. Размытие читает её mip-уровни — подготовленные уменьшенные версии. Такой переход помогает спрятать смену перспективы при сгибе. Эффект поставлен под камеру презентации; свободный ракурс позволяет увидеть границы этого приёма.

0.00
1.00

06Параметры обоев

Эти параметры меняют сцену внутри дисплея, не геометрию телефона. Смещение взгляда позволяет проверить параллакс, наклон — работу камеры пейзажа. Яркость и разблокировка входят непосредственно в шейдер обоев.

0.00
1.00
0.000
0.000
0

07Камера

Поворот следует за рукой. Shift или правая кнопка — сдвиг. Колесо и щипок — масштаб. На сенсорном экране: один палец — поворот, два — сдвиг и масштаб.

08Рендер и диагностика

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

—