Веб-платформа для изучения GPU-программирования

Всем привет! Я работаю рендер-программистом в крупной игровой компании. До этого много лет занимался разработкой веб-приложений на аутсорсе как на фронтенд, так и на серверной части.

В какой-то момент появилось желание, используя накопленный опыт, создать собственный пет-проект. Так появился Shader-Learning.com, который я уже более двух лет разрабатываю и совершенствую в свободное время. Это платформа, созданная для того, чтобы помочь людям изучать и практиковать GPU-программирование на GLSL и HLSL прямо в браузере.

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

Все задания сгруппированы по модулям, чтобы можно было сосредоточиться на темах, которые наиболее интересны:

• роль фрагментного и вершинного шейдеров в графическом конвейере и изучение встроенных функций GLSL/HLSL;
• базовая математика и геометрия, лежащие в основе компьютерной графики – от векторов и матриц до пересечений примитивов и систем координат;
• алгоритмы обработки 2D-изображений с помощью фрагментных шейдеров;
• реализация освещения и теней;
• рендеринг травы и воды в реальном времени;
• использование функций шума для процедурной генерации визуальных эффектов;
• Продвинутые техники: билборды, Soft Particles, MRT, отложенный рендеринг, HDR, туман и другое;
• SDF.

Примеры заданий

Первое задание посвящено тому, что такое шейдерная программа и как её использовать для закрашивания пикселей на экране:

необходима закрасить экран в нужный цвет

Задача из модуля по математике: с помощью скалярного произведения необходимо разделить экран на две части.

скалярное произведение разделить экран

Иногда затрагиваю низкоуровневые моменты работы GPU:

переписать код без условного ветвления

Есть задачи, в которых я предлагаю пользователю работать не с примитивами, а уже с полноценной сценой:

добавить туман на сцену

Каждую задачу вы решаете локально в браузере, а когда считаете, что она выполнена правильно, отправляете её на проверку:

решение принято

Есть функция «Diff», которая отображает разницу между ожидаемым результатом и результатом пользователя. Она помогает выявить разницу, которую сложно увидеть глазом:

diff

Если у вас возникнут вопросы или трудности при решении заданий, вы всегда можете обратиться за разъяснением и помощью в Discord. Я стараюсь активно отвечать и помогать.

Пользовательские задачи

редактор пользовательской задачи

У пользователей есть возможность создавать и делиться собственными задачами. Редактор задач позволяет построить графическую сцену с полным контролем над её компонентами:

Настройка сцены:

• настроить камеру и её анимацию;
• добавить объекты на сцену и указать их геометрию;
• загрузить текстуры и назначить их материалам.

Редактирование шейдеров:

• можно изменять вершинный и/или фрагментный шейдеры;
• добавить шейдер постобработки для экранных эффектов.

Содержание задачи:

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

Настройки проверки выполнения

• какие файлы может редактировать пользователь (фрагментный, вертексный или шейдер постобработки);
• какие кадры должны сравниваться, если задача анимированная;
• правила линтера (например, запретить использование if).

Публикация и распространение

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

Статистика задачи. Для каждой опубликованной задачи вы можете отслеживать:

• количество просмотров;
• количество успешных решений;
• лайки и дизлайки;
• текстовые отзывы от пользователей.

Управление задачами

В любой момент вы можете:

• редактировать задачу;
• скрыть её из общего доступа;
• повторно опубликовать, когда будете готовы.

Стек Технологий

Node.js, Express.js, MySQL, Amazon S3, Angular, NgXs, RxJS, Typescript, SCSS, WebGL, Three.js

Заключение

Несмотря на то, что на платформе есть платный контент, я надеюсь, что мой пост не будет воспринят негативно. Вы можете совершенно бесплатно и без рекламы решать задачи из модулей Built-in Functions и Advanced Rendering, а также решать пользовательские задания и создавать свои.

Буду рад любым вашим идеям и предложениям по развитию платформы!

Если интересно, присоединяйтесь к Discord, чтобы не пропустить новые уроки и обновления.

Спасибо за внимание!