Войти
Креативная библиотека
WebGL · ogl

OGL

Крошечная альтернатива Three — один шейдер без жира

Tier 3ТяжелоОсторожно на мобилеfree (MIT)JavaScript (минимальный WebGL)

Design DNA

«Один точный визуальный жест: полноэкранный шейдер или меш — без экосистемы Three.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Если нужен один шейдер/эффект — рассмотри OGL вместо полного Three.
Минимальная сцена, resize, dispose. Mobile fallback (CSS/картинка).
reduced-motion → стоп. Не подключай R3F «на всякий случай».

Что умеет

  • ·Малый бандл
  • ·Кастомные шейдеры
  • ·Простые меши/текстуры

Чего не умеет

  • ·Нет огромной экосистемы как у Three/R3F
  • ·Не no-code

Когда брать

  • ·Один эффект/шейдер на лендинг
  • ·Важен размер бандла

Когда не брать

  • ·Большая 3D-продуктовая сцена → Three/R3F
  • ·Нужны готовые хелперы → drei

С чем сочетается

GSAPLenisCurtains (схожий дух)

Альтернативы

Three.jsCurtains.jsraw WebGL

Типичные ошибки

  • ·Писать «свой Three» на OGL без нужды
  • ·Без fallback
  • ·Не проверил производительность на iPhone SE. WebGL и AI-модели могут убить батарею или вызвать краш. Всегда делай фоллбэк на статику через matchMedia или детект мощности устройства.

Демо и ссылки

OGL GitHub

Похожие

Spline
3D в браузере без Blender — визуальный редактор + экспорт
Three.js
Стандарт WebGL — свой 3D-мир в браузере
React Three Fiber
Three.js декларативно в React
drei (@react-three/drei)
Готовые хелперы для R3F: Environment, OrbitControls, Text, Float…