Что это?
Liquid Orb Editor — редактор реального времени для создания анимированных эффектов жидкого стеклянного шара, построенный на React и WebGPU/WGSL. Вы настраиваете цвет, скорость, форму, преломление стекла и свечение, а затем экспортируете результат как отдельную веб-страницу или как код SwiftUI/Metal для приложений iOS.
Liquid Orb Editor — редактор реального времени для создания анимированных эффектов жидкого стеклянного шара, построенный на React и WebGPU/WGSL. Вы настраиваете цвет, скорость, форму, преломление стекла и свечение, а затем экспортируете результат как отдельную веб-страницу или как код SwiftUI/Metal для приложений iOS.Это визуальный редактор или библиотека кода?Это визуальный редактор в браузере: вы подбираете параметры ползунками с живым предпросмотром, а он генерирует для вас готовый веб-код или код SwiftUI/Metal, а не является библиотекой для импорта.
Это визуальный редактор в браузере: вы подбираете параметры ползунками с живым предпросмотром, а он генерирует для вас готовый веб-код или код SwiftUI/Metal, а не является библиотекой для импорта.Как запустить редактор?Есть онлайновая версия, либо можно склонировать репозиторий и запустить локально через pnpm (скрипты dev/build/preview работают на Vite).
Есть онлайновая версия, либо можно склонировать репозиторий и запустить локально через pnpm (скрипты dev/build/preview работают на Vite).Что нужно установить для локального запуска?Нужны Node.js 22 и pnpm 11, плюс браузер, который реально поддерживает WebGPU, чтобы видеть и редактировать шар.
Нужны Node.js 22 и pnpm 11, плюс браузер, который реально поддерживает WebGPU, чтобы видеть и редактировать шар.Заработает ли он в любом браузере?Нет — живой предпросмотр зависит от поддержки WebGPU, поэтому браузеры без WebGPU не смогут отрисовать или отредактировать шар; проект к тому же всё ещё активно развивается, пресеты и согласованность вывода продолжают меняться.
Нет — живой предпросмотр зависит от поддержки WebGPU, поэтому браузеры без WebGPU не смогут отрисовать или отредактировать шар; проект к тому же всё ещё активно развивается, пресеты и согласованность вывода продолжают меняться.Какие пресеты в него встроены?В комплекте 12 редактируемых анимированных пресетов шаров с разными цветами, стилями движения и видами стекла — их можно подстроить или взять за отправную точку.
В комплекте 12 редактируемых анимированных пресетов шаров с разными цветами, стилями движения и видами стекла — их можно подстроить или взять за отправную точку.Можно поделиться созданным дизайном с кем-то?Да — все выбранные параметры кодируются в хеш URL страницы, так что ссылка воспроизводит ровно тот шар, который вы настроили.
Да — все выбранные параметры кодируются в хеш URL страницы, так что ссылка воспроизводит ровно тот шар, который вы настроили.Какую роль здесь играет OpenAI Codex?Автор использует OpenAI Codex, чтобы помогать писать код, прогонять регрессионную проверку экспорта в Web/SwiftUI и готовить релизы.
Автор использует OpenAI Codex, чтобы помогать писать код, прогонять регрессионную проверку экспорта в Web/SwiftUI и готовить релизы.Поддерживает ли редактор китайский и английский?Да, он определяет язык браузера и показывает китайский или английский интерфейс, а переключаться между ними можно в любой момент.
Да, он определяет язык браузера и показывает китайский или английский интерфейс, а переключаться между ними можно в любой момент.What are similar projects?shaders, threejs-architecture-effects, empire, natural-disasters, RhineLabUI, framefields, iw4L, ascii
shaders, threejs-architecture-effects, empire, natural-disasters, RhineLabUI, framefields, iw4L, asciiWhich topics is it in?openai-codex, shader, webgpu, design-tools, pnpm, creative-coding, metal, swiftui, graphics, vite, 3d, animation
openai-codex, shader, webgpu, design-tools, pnpm, creative-coding, metal, swiftui, graphics, vite, 3d, animation