Лаборатория 3D
Анатомия
объекта.
iPhone Duo · 4,90 МБ
glTF · Three.js · WebGL 2 · GLSL
67 494 треугольника · 27 костей
Модель и её текстуры. Обои и окружение — отдельно.
01Согнуть
27 костей управляют деталями через общий скелет. Это сохраняет согласованность сгиба: экран, рамка и шарнир движутся как один механизм. Пружина сглаживает ход ползунка и притягивает раскрытие к краям — даже резкое движение руки превращается в мягкий переход.
02Разобрать
62 объекта модели · 4 группы поверхностей.
Разборка показывает структуру рендера: два экрана, металлические и остальные поверхности. Слои расходятся с небольшой задержкой — так глаз успевает прочитать их порядок. Это графические поверхности, а не комплект физических запчастей.
Логотип построен геометрией: его контур держится при приближении, а не зависит от разрешения картинки. Каркас показывает, куда потрачены треугольники. Особенно полезно сравнить плотность сетки на плоских участках, скруглениях и мелких деталях.
03Свет и материал
Исходный свет меняется вместе с раскрытием и готовыми позами.
Мягче свет — спокойнее отражения и фон. Нейтральное заполнение сохраняет форму.
Постановки меняют отражаемое окружение, а не цвет материала. Металл, стекло и матовые поверхности реагируют на одни и те же источники по-разному. Изображение на дисплее сохраняет собственные цвета.
Форму металла рисуют отражения светлых и тёмных карт. Их расположение меняется между постановочными ракурсами. В исходной постановке используются три группы окружения: две смешивают заранее рассчитанные состояния, третья обновляет карту отражений по движущимся источникам.
Даже вспышка имеет собственные карты материала. Шероховатость управляет шириной блика, металличность — характером отражения, окклюзия затемняет стыки. Эти данные могут храниться в разных каналах одной текстуры: режимы выше разделяют их для просмотра.
Резкие отражения в линзах частично построены дубликатами геометрии. Для предметной сцены это практичный приём: нужный блик остаётся управляемым без дорогого расчёта отражений лучами.
04Обои — ещё одна сцена
Внутри экрана работает вторая 3D-сцена: небо, звёзды, горы и две дюны. Разная глубина слоёв создаёт параллакс. Камера пейзажа следует за раскрытием со своей пружиной — обои и корпус не обязаны двигаться синхронно.
05Проекция и размытие
Обои сначала рисуются в текстуру, затем проецируются на поверхность экрана. Размытие читает её mip-уровни — подготовленные уменьшенные версии. Такой переход помогает спрятать смену перспективы при сгибе. Эффект поставлен под камеру презентации; свободный ракурс позволяет увидеть границы этого приёма.
06Параметры обоев
Эти параметры меняют сцену внутри дисплея, не геометрию телефона. Смещение взгляда позволяет проверить параллакс, наклон — работу камеры пейзажа. Яркость и разблокировка входят непосредственно в шейдер обоев.
07Камера
Поворот следует за рукой. Shift или правая кнопка — сдвиг. Колесо и щипок — масштаб. На сенсорном экране: один палец — поворот, два — сдвиг и масштаб.
08Рендер и диагностика
Промежуточный проход отделяет пейзаж от корпуса и интерфейса экрана. Его можно рассмотреть до проекции и размытия. Когда параметры неподвижны, реализация переиспользует готовый результат; при движении перерисовывает его. Это сокращает лишнюю работу GPU.