morph3d-js
Описание
Morph3D - это анимация в реальном времени: морфящаяся фигура из облака точек. Единственный объект, состоящий из нескольких сотен маленьких точек, непрерывно вращается, перемещается по экрану и плавно превращается в три геометрические фигуры - шар, куб и бублик (тор). Проект имеет две цветовые темы: Light (по умолчанию) рисует точки чёрным и серым на белом фоне, а Dark - в мягком неоновом цвете на чёрном фоне, причём цвет плавно меняется между цветами палитры. В обеих темах оттенок каждой точки определяется её глубиной, поэтому плоское облако точек воспринимается как объёмная трёхмерная форма.
Проект - это демосцена на JavaScript / HTML5 Canvas 2D без внешних зависимостей, сделанный из оригинального Windows-скринсэйвера на OpenGL. Исходная логика анимации взята с проекта morph3d-src - генерацию фигур, машину состояний морфинга, вращение, движение по экрану и перспективную проекцию - заменяя нативный рендеринг OpenGL чистой реализацией на Canvas 2D, которая работает в любом современном браузере.
Технологии
- JavaScript (ES6) - современный синтаксис, strict mode, полностью самодостаточный
- HTML5 Canvas 2D - вся отрисовка через 2D-контекст canvas (заполненные круги); без WebGL
- requestAnimationFrame - цикл анимации ведётся колбэком кадров браузера
- Обновление по дельте времени - движение и морфинг идут по реальному прошедшему времени, поэтому скорость одинакова на дисплеях 60 Гц и 144 Гц
- Масштабирование по devicePixelRatio - фоновое хранилище canvas масштабируется под плотность дисплея для чёткой отрисовки
- Без внешних зависимостей - без npm-пакетов, без Three.js, без инструментов сборки