Repolode
Предложить
achrefelouafi

achrefelouafi/LinearAbiltyCastingThreeJS

Песочница на Three.js и GLSL для настройки игровых эффектов способностей с прицеливанием: параметры можно менять ползунками даже на паузе.

Открыть на GitHub
Звёзды
1,015
Форки
202
Открытые issues
9
Последний коммит
27 дней назад

Что это?

Elemental Sandbox — браузерная песочница визуальных эффектов на Three.js, Vite и вручную написанных шейдерах GLSL. В ней показаны шесть способностей в стиле League of Legends: четыре направленных выстрела с прицелом-стрелкой на земле и две дальнобойные способности с прицельным кругом. Каждая способность построена на процедурной геометрии, шейдерах с функциями знакового расстояния и GPU-частицах; текстуры и спрайты не используются, за исключением модели персонажа и её цветовой карты.

В основе проекта — идея, что любой параметр можно менять ползунком в реальном времени (всего их 938), причём даже на паузе. Настройки хранятся в одном общем объекте, к которому каждый кадр обращаются шейдеры, системы частиц и источники света. Поэтому застывшее извержение или удар можно менять, ориентируясь на неподвижный кадр. Встроенный редактор (открывается клавишей G) также позволяет сохранять, экспортировать и импортировать пресеты.

Код организован вокруг базового класса способностей с пулом объектов, контроллера прицеливания, конвейера рендеринга с предварительным проходом по глубине, bloom, тональным отображением ACES и цветокоррекцией, а также GPU-системы частиц. В репозитории для справки сохранена архивная ранняя версия с заклинаниями огня, воды, земли и воздуха.

Ключевые возможности

  • 01Шесть способностей с режимами прицеливания для направленных и дальнобойных выстрелов.
  • 02Процедурная геометрия и шейдеры с функциями знакового расстояния без текстур спрайтов.
  • 03938 параметров с ползунками, которые можно менять в реальном времени даже на паузе.
  • 04Сохранение пресетов, экспорт и импорт JSON во встроенном редакторе.
  • 05GPU-система частиц с пулом объектов и повторным использованием слотов кольцевого буфера.
  • 06Конвейер рендеринга с предварительным проходом по глубине, bloom, тональным отображением ACES и цветокоррекцией.

Сценарии использования

  • Создание прототипов эффектов направленных атак или способностей с AoE для игры на Three.js.
  • Изучение приёмов GLSL, например стрелок на SDF, лент молний и объёмных лучей.
  • Интерактивная настройка внешнего вида частиц и освещения перед переносом значений в код.
  • Изучение того, как строить проект real-time VFX вокруг одного общего объекта настроек.

Быстрый старт

  1. 1

    Установите зависимости

    npm install
  2. 2

    Запустите сервер разработки

    npm run dev
  3. 3

    Откройте URL, который выводит Vite (по умолчанию: http://127.0.0.1:5173)

Темы

#threejs#glsl#webgl#vfx#particles#shaders#game-dev#vite

Частые вопросы

Что такое LinearAbiltyCastingThreeJS?
Песочница на Three.js и GLSL для настройки игровых эффектов способностей с прицеливанием: параметры можно менять ползунками даже на паузе. Elemental Sandbox — браузерная песочница визуальных эффектов на Three.js, Vite и вручную написанных шейдерах GLSL. В ней показаны шесть способностей в стиле League of Legends: четыре направленных выстрела с прицелом-стрелкой на земле и две дальнобойные способности с прицельным кругом. Каждая способность построена на процедурной геометрии, шейдерах с функциями знакового расстояния и GPU-частицах; текстуры и спрайты не используются, за исключением модели персонажа и её цветовой карты.
LinearAbiltyCastingThreeJS можно использовать бесплатно? Какая у него лицензия?
LinearAbiltyCastingThreeJS распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
LinearAbiltyCastingThreeJS всё ещё поддерживается?
Активно поддерживается. Последний коммит в LinearAbiltyCastingThreeJS — 23 сент. 2026 г..
Для чего можно использовать LinearAbiltyCastingThreeJS?
Создание прототипов эффектов направленных атак или способностей с AoE для игры на Three.js. Изучение приёмов GLSL, например стрелок на SDF, лент молний и объёмных лучей. Интерактивная настройка внешнего вида частиц и освещения перед переносом значений в код. Изучение того, как строить проект real-time VFX вокруг одного общего объекта настроек.
Как установить LinearAbiltyCastingThreeJS?
Установите зависимости: npm install Запустите сервер разработки: npm run dev Откройте URL, который выводит Vite (по умолчанию: http://127.0.0.1:5173)
Где скачать LinearAbiltyCastingThreeJS?
Исходный код и инструкции по установке — на GitHub: https://github.com/achrefelouafi/LinearAbiltyCastingThreeJS

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты