Alfais Adilkhan
Кейс

Этот сайт

Портфолио на WebGPU: покрытая инеем Земля, которую стирает курсор, колонка текста поверх мира, финал на орбите и архив, до которого нужно долететь. Одна траектория камеры, одно значение прокрутки, без склеек.

2026

Около 1,1 МБ до нажатия Enter, меньше 100 вызовов отрисовки

Роль

Дизайн, код и тексты. Один человек.

Результат

  • Около 1,1 МБ на критическом пути до нажатия Enter, измерено
  • Меньше 100 вызовов отрисовки в кадре чтения
  • Режим уменьшенного движения и управление с клавиатуры с самого запуска

Условия

  • Шесть цветов, жёсткий лимит; один акцент в кадре
  • Меньше 100 непрозрачных вызовов отрисовки в кадре чтения
  • Каждый 3D-ассет необязателен: отсутствующий файл заменяется процедурной версией, а не ошибкой
  • Все тексты живут в файлах контента; в коде сцены нет биографии

Процесс

  1. Сначала грейбокс: каждая точка камеры, взаимодействие и переход были собраны на примитивах до появления моделей.
  2. Одна траектория камеры Catmull-Rom, одно значение прокрутки; Lenis и цикл рендера делят один тикер, чтобы DOM и WebGL не расходились.
  3. Шейдеры написаны один раз на TSL и компилируются в WGSL и GLSL: рендер на WebGPU с автоматическим откатом на WebGL2.
  4. Тонмаппинг AgX, процедурное окружение полярной ночи и глубинное размытие за колонкой текста.

Другие кейсы