https://github.com/Digidr0/glint-icons
Открыть редактор: https://digidr0.github.io/glint-icons/
Маленькая форма. Большие возможности. Превратите логотип в объёмную иконку — настройте материал, поймайте свет и заберите готовый PNG.
3D в реальном времени · До 4K · Пакетный экспорт · Обработка в браузере
Glint — браузерная студия для создания 3D-иконок на основе готовой модели. Загрузите свой логотип или паттерн и настройте внешний вид без работы в 3D-редакторе.
| Возможность | Что можно сделать |
|---|---|
| 🎨 Материалы | Выбрать металл, пластик, резину или автомобильную краску; настроить лак, микрорельеф и перламутр. |
| 🖼️ Изображения | Добавить логотип и паттерн, выбрать одну из трёх UV-развёрток, настроить масштаб и положение. |
| 💡 Свет и камера | Подобрать студийную HDRI или загрузить свою, изменить ракурс и переключить перспективу. |
| 💾 Пресеты | Сохранить любимые материалы, ракурсы и окружения для следующей работы. |
| 📦 Экспорт | Скачать PNG от 512 до 4096 px с прозрачным или серым фоном; обработать до 100 логотипов в ZIP. |
Как это работает: Логотип → Материал → Свет → Ракурс → PNG
Изображения обрабатываются локально в браузере и не отправляются на сервер.
Под капотом: React · Three.js · Vite
Бесплатные форки разрешены, продажа проекта — нет. Можно изучать, изменять, бесплатно распространять и размещать Glint и его модификации, сохраняя авторство, лицензию и уведомления о сторонних компонентах. Изменённые версии необходимо обозначать как модификации. Без письменного разрешения автора нельзя продавать приложение или его форки, включать код в платный продукт или предоставлять платный доступ к приложению, API либо подписке. Это собственная source-available лицензия, не MIT и не OSI-approved open source. Автор: Digidro (GitHub: Digidr0).
Созданные PNG можно использовать коммерчески, в том числе продавать, изменять и использовать в клиентских проектах, без обязательного указания Glint. Разрешено использовать приложение в коммерческой работе для создания изображений. Права на загруженные логотипы и другие сторонние материалы необходимо получить самостоятельно. Полные условия: LICENSE. Сторонние компоненты сохраняют свои лицензии: THIRD_PARTY_NOTICES.md.
При первом посещении экспорт содержит надпись Make by Digidro on Glint
Под кнопкой скачивания находится ссылка на GitHub:
нажатие открывает репозиторий и отключает вотермарку для последующих экспортов
в этом браузере.
(glint-icons.watermark-disabled.v1), включая повторные посещения.
Готовый пакетный архив после изменения
режима необходимо сформировать заново. Удаление данных сайта сбрасывает выбор.
Локальный редактор 3D-иконки: React, Three.js, Vite. Исходные ассеты находятся в 3D/; приложение не изменяет модель и не загружает изображения на сервер.
Под разрешением указан примерный вес одного файла, под кнопкой экспорта —
суммарный вес ZIP (после обработки — фактический). Оценка: 512 px — 256 КБ,
1024 px — 1 МБ, 2048 px — 4 МБ, 4096 px — 16 МБ на изображение;
реальный вес зависит от содержимого и формата. Имена файлов и ZIP содержат
разрешение, например logo_x2048.png и glint-icons-batch_x2048.zip.
При отключённом прозрачном фоне доступны цвет подложки и формат PNG/JPG.
Эти параметры применяются ко всем файлам пакета и одиночному экспорту.
При загрузке пакета первый файл становится общим активным логотипом. Нажмите на любую карточку, чтобы выбрать другой: он отмечается рамкой и галочкой и отображается во всех вкладках, в том числе «Материал» и «Изображения». Файлы не сохраняются после перезагрузки страницы.
Вкладка «Пакетная обработка» показывает цепочку Файлы → Камера → HDRI → Материал → панель экспорта. Добавьте логотипы PNG/JPEG/WebP и выберите пресеты. Если текущие настройки ещё не сохранены, при запуске создаются соответствующие пресеты камеры, HDRI и материала с уведомлением. Собственная HDRI сохраняется вместе с файлом в IndexedDB.
Размер PNG и прозрачность берутся из панели экспорта. Кнопка меняется: «Начать пакетную обработку» → «Обработка N/M» → «Скачать архив». В ZIP каждый логотип получает отдельный PNG с исходным именем; совпадения имён получают числовой суффикс. Выбранные настройки не меняются, исходный логотип восстанавливается и при успехе, и при ошибке. Изменение файлов или настроек сбрасывает устаревший архив. Во время обработки настройки заблокированы. Лимиты: 100 логотипов, 20 МБ на файл, 512 МБ суммарных PNG в одном архиве. Всё обрабатывается локально.
Во вкладке «Шаблоны» также можно сохранять собственные пресеты краски: введите название и нажмите «Сохранить пресет». Сохраняются цвет, металличность, шероховатость, частицы, микрорельеф, лак и перелив. Нажатие на карточку применяет материал, крестик удаляет пользовательский пресет. Они хранятся в localStorage (icon-studio.material-presets.v1); камера, HDRI, логотип и паттерн не меняются. Встроенные материалы остаются отдельной группой.
Общий материал «Туман» — классы .material-fog / .glass-surface и переменные --surface-glass-* в src/theme.css: тёмно-серая заливка 18%, hover 28%, blur 14 px. Он применяется к шагам пакетной обработки, панели экспорта, панелям камеры/FOV/проекции, пресетам камеры и HDRI, настройкам окружения/света, полю HEX, загрузчикам логотипа/паттерна, шаблонам материалов, селектору размера изображения и полю названия пресета. Основные параметры материала меняются в одном месте.
Переиспользуемый класс .preset-glass в src/theme.css задаёт тёмную полупрозрачную подложку, светлый текст, тонкую границу и backdrop blur 14 px. Он автоматически применяется к .presets > button и остаётся тёмным в обеих темах. Этот класс можно использовать для новых карточек с тем же оформлением.
Под настройками окружения и освещения находятся квадратные пресеты: «+» сохраняет выбранную HDRI, интенсивность, поворот и экспозицию, крестик удаляет пресет. Встроенные окружения сохраняются по ID. Для пользовательских .hdr/.exr сохраняются сами файлы в IndexedDB, а не временные blob:-ссылки: после перезагрузки пресет восстанавливает файл без повторной загрузки. Файлы не отправляются на сервер. При недоступном/переполненном хранилище показывается ошибка, текущие пресеты продолжают работать в открытой вкладке. Удаление последнего пресета с файлом освобождает его из сохранённого набора; уже активная HDRI остаётся доступна до закрытия вкладки.
Публикация выполняется через .github/workflows/pages.yml при пуше в
master или ручном запуске workflow. В настройках репозитория
Settings → Pages → Source должен быть выбран GitHub Actions.
Workflow устанавливает зависимости и собирает приложение с
--base=/glint-icons/, включая автоматическую генерацию превью текстур.
Сборка публикуется целиком из dist/, отдельная ветка gh-pages не нужна.
Локальный запуск по-прежнему использует корень /.
Для проверки опубликованного пути локально:
npm run build -- --base=/glint-icons/
npm run preview -- --base=/glint-icons/Откройте /glint-icons/ на адресе preview-сервера.
Светлая/тёмная тема переключается кнопкой луны/солнца в шапке. При первом запуске учитывается системная тема, затем выбор сохраняется в браузере. Акцент интерфейса — #fc7703; стеклянные панели сохраняют прозрачность и backdrop blur в обеих темах. Тема не изменяет материалы, освещение, ракурс или фон PNG-экспорта. Палитры находятся в src/theme.css.
Задний фон всего main — GradientASCII из React Bits (https://reactbits.dev/), JavaScript + CSS, исходник предоставлен пользователем. Компонент находится в src/components/GradientASCII.jsx, не требует новых зависимостей и работает отдельным WebGL2-слоем за блоками интерфейса, не внутри 3D-превью. workspace и editor-main полупрозрачные, с backdrop blur 20/18 px; фон виден сквозь них как через стекло. Панель экспорта сохраняет отдельную подложку. Используются rise, оранжевая палитра, cellSize=22, glyphOpacity=0.4, variation=7, DPR 1 для умеренной нагрузки. Фон не перехватывает мышь, не меняет HDRI и не входит в PNG. Кнопка «ASCII» в шапке приостанавливает анимацию; prefers-reduced-motion делает фон статичным. При отсутствии WebGL2 остаётся обычная тема страницы. Локальные дополнения к компоненту: paused, динамическое уменьшение анимации, безопасная очистка GPU-ресурсов.
npm install
npm run devОткройте адрес, который напечатает Vite (обычно http://127.0.0.1:5173).
npm run build создаёт production-сборку в dist/. Проверить её можно через npm run preview. Открывать index.html напрямую через file:// нельзя: загрузке GLB/HDR нужен HTTP-сервер.
В разделе «Изображения» у логотипа и паттерна независимые селекторы с тремя каналами: UV 1 — Растянуть, UV 2 — Заполнить, UV 3 — только Фронт. В GLB/Three.js им соответствуют uv, uv1, uv2. Используются развёртки из модели, а не автоматически рассчитанный stretch/cover. Третий канал дополнительно ограничивает паттерн лицевой поверхностью, логотип по-прежнему наносится только на фронт. Для старых моделей без uv2 третий режим использует uv1 с маской фронта. Масштаб, поворот, смещения и влияние на цвет/шероховатость работают с выбранным каналом. Выбор применяется к превью, одиночному PNG и пакетному экспорту. Исходные каналы по умолчанию не изменены: паттерн — первый, логотип — второй; normal map всегда использует первый.
Настройки краски по умолчанию: #D1D5DE, metalness 0.90, roughness 0.20, flakes 0.85, normal 0.05, clearcoat 1.00, clearcoat roughness 0.10, iridescence 0.50. Общий источник значений — src/defaults.js.
Исходная камера: азимут 26.6°, наклон −19.4°, дистанция 5.04. Свет: HDRI 1.50, поворот 138°, экспозиция 1.00. Серая рамка PNG · 1:1 показывает точный кадр экспорта и не входит в изображение. Квадрат вписывается в превью, в том числе на узком экране.
На превью отображаются азимут и наклон камеры в градусах, а также расстояние до центра модели. Азимут 0° и наклон 0° соответствуют виду спереди; положительный наклон — сверху. Кнопка «Сделать ракурсом по умолчанию» сохраняет текущий вид и приближение в localStorage браузера. Он применяется при загрузке, выборе «Перспектива» и сбросе ракурса; настройка локальная, не изменяет исходный код и не добавляется в PNG.
3D/Icon.glb: исходная модель, фронт по +Y, толщина по Y. Приложение поворачивает её для просмотра и использует один материал краски на всей модели; логотип ограничен лицевой частью в шейдере.UV0— общий атлас для паттерна и normal.UV1— фронтальная проекция для логотипа. В редакторе можно переключить UV логотипа для проверки.- При загрузке автоматически пересчитываются нормали: auto smooth с углом 60°, угловыми весами и сглаживанием через UV-швы. Лицевая и задняя плоскости сохраняют плоские нормали, скругления плавно переходят к лицу. Позиции и UV не меняются; сглаживание нормалей не добавляет сегментов силуэту. Проверка:
npm test. 3D/Normal.webp— нормали основного слоя, регулируемые ползунком.3D/studio_small_01_1k.hdr— студийное окружение, с управлением интенсивностью и поворотом.
На превью справа сверху находится выбор HDRI: готовые студии и загруженные пользователем панорамы .hdr / .exr (до 64 МБ; рекомендуются 1K–4K). Под ним — «Свет и отражения»: интенсивность, поворот и экспозиция выбранного окружения. Все настройки света доступны прямо на канвасе, нижняя вкладка «Освещение» и отдельный блок «Ракурс» удалены. Загруженные файлы доступны в списке до перезагрузки страницы и не отправляются на сервер. При ошибке загрузки сохраняется предыдущее окружение. Переключение ракурсов и сброс находятся слева над камерой; стеклянные панели не попадают в PNG.
Готовый набор — Studio Small 01–09 от Poly Haven с оригинальными thumbnail.webp: выбор из списка или галереи «Выбрать по превью». Локальные копии 1K и превью находятся в 3D/hdri/; Studio 01 использует исходный HDRI из 3D/. Файлы скопированы из пользовательской библиотеки S:\3D\Poly Haven, оригиналы не изменяются. Приложение и production-сборка не зависят от диска S: или внешнего CDN. HDR загружается только при выборе. Источник: https://polyhaven.com/ (ассеты CC0).
Краска: физический PBR-материал, отдельный слой лака, процедурные микронормали металлических частиц и регулируемый тонкоплёночный перелив. Это realtime-приближение, не спектральная симуляция автомобильной краски. Логотип смешивается с основой до освещения и нанесения лака; его область неметаллическая.
Логотипы и паттерны: PNG, JPEG, WebP. Для логотипов рекомендуется квадратный PNG с прозрачностью. Паттерн повторяется на UV0, влияет на цвет или шероховатость; доступны масштаб, поворот и независимые смещения X/Y от −1 до 1 (по умолчанию 0). Сдвиг применяется после масштаба и поворота в координатах текстуры, не затрагивает логотип и normal. Швы соответствуют исходной UV-развёртке. Отдельных цветов и текстур боковин и задника нет.
Экспорт: квадратный PNG 512–4096 px, текущий ракурс и приближение, прозрачный либо серый фон. На широком превью видна дополнительная область по бокам, итоговый PNG имеет квадратное поле. Изображения не сохраняются после перезагрузки. Для интерфейса Google Fonts опционально загружает Manrope; без сети используется системный шрифт.
Фон main использует исходную форму rise со свечением снизу. Подложка workspace имеет непрозрачность 15%, viewport и его canvas прозрачны. Футер удалён.