Кейс · Лендинг
ОКСО Т1: 3D-лендинг
Лендинг вымышленного датчика воздуха (демо): объект рисуется одним фрагментным шейдером на чистом WebGL2 без библиотек, четыре SDF-формы перетекают по скроллу, есть SVG-фолбэк, reduced-motion и пауза вне экрана.
- HTML5
- CSS3
- Vanilla JS
- WebGL2
- GLSL ES 3.00
- Raymarching/SDF
- Scroll choreography
- GitHub Actions
01 · Как выглядит
Скриншоты
02 · О проекте
Что это и зачем
Лендинг вымышленного датчика воздуха «ОКСО Т1». Продукта, компании, клиентов и показателей не существует, на странице это помечено «демо».
Объект рисуется одним фрагментным шейдером на чистом WebGL2 без библиотек: около 250 строк JavaScript и GLSL ES 3.00. Четыре SDF-формы перетекают друг в друга по мере скролла.
Ограничения
Производительность на реальной видеокарте не измерялась: сцену проверяли на программном рендере (SwiftShader).
Бренд, тексты и комплекты придуманы, реальных клиентов и отзывов нет. Шрифты идут с Google Fonts, без сети подставятся системные.
Что внутри
- Raymarching по полям расстояний (SDF): сфера, тор, скруглённый параллелепипед с лункой и сфера с волнами; морфинг через mix расстояний
- Скролл-хореография: sticky-секция высотой 420svh, значение сглаживается экспоненциально
- Освещение в шейдере: нормаль по SDF, ambient occlusion, процедурная студийная среда, френель и блик
- DPR ограничен, при кадрах дольше 26 мс разрешение автоматически снижается
- Отрисовка только пока сцена на экране (IntersectionObserver) и пока вкладка видима
- SVG-фолбэк без WebGL2 или при потере контекста; prefers-reduced-motion
- Демо-форма проверяется на клиенте и ничего не отправляет; проверка ссылок в GitHub Actions
03 · Как запустить
Запуск одной командой
git clone <репозиторий по запросу> landing-3d
cd landing-3d
python -m http.server 8094 # http://localhost:809404 · Код
Репозиторий приватный
Исходники лежат в приватном репозитории. Открою доступ по запросу: напишите, и пришлю приглашение.
Запросить код