Three.js Shadersавтор CloudAI-X

Three.js Shaders Skill.

Используйте собственное поведение вершин или пикселей, когда готовые пресеты материалов не позволяют получить нужный эффект.

3D
Three.js

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Three.js ShadersSKILL.md

Задача 3D Результат • Пара шейдеров или ограниченное расширение материала • Задокументированный контракт обновления uniform-переменных • Проверки компиляции и диагностические визуализации Перед началом Нужны рабочий проект Three.js и рендерер; сверяйте примеры из источника с установленным релизом. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Three.js Shaders: создание пользовательских GPU-эффектов

GLSL: структура материалов, uniform-переменные, varying-переменные, процедурные эффекты, хуки и отладка.

Рабочий процесс на основе источникаНе тест производительности выполнения

Рабочий подход

Three.js Shaders объясняет связь параметров JavaScript с GPU-шейдингом. Uniform-переменные передают общие значения, атрибуты описывают геометрию, а varying-переменные переносят информацию между стадиями шейдера. Навык разграничивает ShaderMaterial и более явный RawShaderMaterial.

Примеры включают градиенты, смещение, эффекты контура, шум и растворение, а также хуки для расширения встроенных материалов. Системы координат, шейдерные чанки и версии GLSL — важные детали. Это руководство для проверяемой работы с шейдерами, а не обещание, что скопированные примеры проверены в рабочей среде.

Ожидаемые результаты

Пара шейдеров или ограниченное расширение материала
Задокументированный контракт обновления uniform-переменных
Проверки компиляции и диагностические визуализации

Посмотреть пример задания

От задания до проверки

01
Определите место эффекта
Решите, относится ли изменение к вершинам, шейдингу поверхности или экранному проходу.
02
Выберите путь материала
Используйте собственный шейдер или сохраните встроенный шейдинг через точечное расширение.
03
Отладьте поток данных
Перед тонкой настройкой внешнего вида проверьте объявления, пространства, входные данные и результаты компиляции.

02 Когда использовать

Когда использовать

Нужны рабочий проект Three.js и рендерер; сверяйте примеры из источника с установленным релизом. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

Хорошо подходит

Процедурные поверхностиПолезно для узоров, зависящих от времени, градиентов, смещения или масок растворения.
Расширения материаловШейдерный хук может изменить одну стадию, сохранив существующее поведение шейдинга.

Ограничения для проверки

Зависит от версииСинтаксис и чанки Three.js должны соответствовать установленной конфигурации.
Важна детализация мешаСмещение вершин работает с существующими вершинами и не создаёт произвольную недостающую детализацию.

Что подготовить

Референс эффектаОпишите желаемое визуальное поведение.
Контекст геометрииУкажите атрибуты и предположения о системе координат.
Параметры времени выполненияПеречислите время, прогресс, цвета и параметры текстур.

03 Важные решения

Важные решения

Явные параметры
Контракт uniform-переменных связывает элементы управления интерфейса с результатом на GPU.
Диагностические представления
Представления UV, нормалей и масок выявляют неверные входные данные до визуальной доводки.

04 Пример задания

Попробуйте точечное задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте соответствующий каталог threejs-skills как руководство для агента. Это не среда выполнения Three.js, и он не устанавливает ресурсы сцены.

Исходный файл в апстриме

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-shaders/SKILL.md

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания

Используйте threejs-shaders, чтобы создать прототип управляемого эффекта растворения на этом меше. Объясните прогресс, шум, обработку края и поведение глубины. Покажите диагностическую маску перед финальным эффектом и проверьте синтаксис шейдера на соответствие нашей конфигурации Three.js.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

Компиляция не сообщает о неразрешённых входных данных.
Диагностика подтверждает нужную маску и координаты.
Элементы управления меняют эффект без нежелательных артефактов.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

На этой странице описана зафиксированная ревизия источника, ссылка на которую приведена ниже. Поведение и требования апстрима могут измениться.

Владелец источника: CloudAI-X
Репозиторий: CloudAI-X/threejs-skills
Файл навыка: skills/threejs-shaders/SKILL.md
Лицензия: Не подтверждена — перед повторным использованием изучите условия апстрима.
Проверенный снимок: 2026-10-07 · b1c623076c66

Редакционное резюме источника

GLSL: структура материалов, uniform-переменные, varying-переменные, процедурные эффекты, хуки и отладка.

Оригинальное резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Чем отличается RawShaderMaterial?

В источнике описаны явные объявления вместо опоры на автоматически добавляемую настройку шейдера.

Можно ли расширить существующий материал?

Да, с помощью задокументированных шаблонов шейдерных хуков, которые требуют проверки для конкретного релиза.

Это постобработка?

В первую очередь это шейдинг мешей; полноэкранные эффекты относятся к смежной теме постобработки.

OpenDesign

Оставьте место для следующей итерации дизайна.

Храните задание, исходные материалы и дизайнерскую работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesign Просмотреть дизайн-навыки