# Анатомия *объекта.* Лаборатория 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. —