Светящаяся пирамида — 3D-виджет на WebGL

Хотелось обойтись без модели вообще и получить виджет, который вставляется в любой сайт — Tilda, WordPress, статический HTML — двумя строками и без сборки.

Ход работы

• пирамида описана математически: SDF-функция анизотропного октаэдра, пересечённого полупространством, — файла модели не существует в принципе;
• объём и свечение набираются raymarch-циклом, сто шагов на пиксель, с накоплением цвета вдоль луча;
• логотип не наклеен сверху текстурой, а подмешивается в материал внутри цикла марширования — поэтому он светится тем же светом, что и грань, и живёт под её поверхностью;
• палитра выведена в параметры: фазы R/G/B — главный регулятор, от них зависит весь характер свечения;
• собственное вращение дополнено обратной зависимостью от курсора с инерцией — пирамида уходит от мыши, а не следует за ней;
• защита производительности: потолок devicePixelRatio и площади буфера, остановка рендера за пределами экрана, уважение системного «уменьшить движение».

Результат

Один файл на 30 КБ, 10 КБ после сжатия, без единой зависимости и без шага сборки. Живая пирамида в шапке этой страницы — это она и есть, а не видео.

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