Шадертой

Шадертой
Оригинальный автор(ы)	Иниго Килес и Пол Джеремиас
Первоначальный выпуск	14 февраля 2013 г.
Стабильная версия	Релиз 0.8.3 / 3 марта 2016 г.
Написано в	GLSL , JavaScript , PHP
Тип	для 3D-компьютерной графики инструментов Сообщество
Веб-сайт	www .shadertoy .с

Shadertoy — это онлайн-сообщество и инструмент для создания и обмена шейдерами через WebGL , используемый как для изучения, так и для преподавания компьютерной 3D-графики в веб-браузере .

Обзор

Процедурное изображение, созданное в Shadertoy, с полями расстояний, смоделированными, затененными, освещенными и визуализированными в реальном времени.

Shadertoy — это онлайн-сообщество и платформа для компьютерной графики и ученых. профессионалов ^[1] и энтузиасты, которые делятся, изучают и экспериментируют с методами рендеринга и процедурным искусством с помощью GLSL кода . По состоянию на середину 2021 года от тысяч пользователей поступило более 52 тысяч публичных вкладов. ВебГЛ ^[2] позволяет Shadertoy получить доступ к вычислительной мощности графического процессора для создания процедурного искусства, анимации, моделей, освещения, логики на основе состояний и звука.

История

Shadertoy была создана Полом Джеремиасом и Иниго Килезом в январе 2013 года и вышла в сеть в феврале того же года.

Истоки проекта лежат в разделе Иниго "Shadertoy". ^[3] на своем образовательном веб-сайте по компьютерной графике. ^[4] С появлением первой реализации WebGL в Mozilla Firefox в 2009 году Quilez создал первую онлайн-среду живого кодирования и курировал репозиторий процедурных шейдеров. Этот контент был предоставлен 18 авторами из Demoscene и демонстрировал передовые интерактивные анимации в реальном времени, никогда ранее не встречавшиеся в Интернете, такие как меташары, фракталы и туннельные эффекты.

После многолетней совместной работы над несколькими проектами рендеринга в реальном времени, в декабре 2012 года Килез и Пол решили создать новый сайт Shadertoy, который будет следовать традициям оригинальной страницы Shadertoy с ресурсом, ориентированным на демосцену, и графикой реального времени с ограниченным размером. контент, но добавит социальные и общественные функции и примет подход с открытым исходным кодом.

Страница появилась с живым редактором, воспроизведением в реальном времени, возможностями просмотра и поиска, функциями тегирования и комментирования. Что касается контента, Shadertoy предоставила своим пользователям фиксированный и ограниченный набор текстур, которые они могли использовать творчески. С годами Shadertoy добавила дополнительные функции, такие как поддержка ввода с веб-камеры и микрофона, видео, музыка, рендеринг в виртуальной реальности и многопроходный рендеринг.

Всего имеется более 31 тысячи вкладов от тысяч пользователей, на некоторые из которых есть ссылки в научных статьях. Shadertoy также проводит ежегодные соревнования и мероприятия для своего сообщества, такие как Siggraph 2015 Shadertoy Competition. ^[5]

Функции

Редактирование: редактор с подсветкой синтаксиса и немедленной визуальной обратной связью.
Социальные: комментирование шейдерных игрушек, голосование (лайк)
Совместное использование: постоянные URL-адреса, встроенные в другие веб-сайты, частный обмен шейдерами.
Рендеринг: многопроходной режим и история на основе буфера с плавающей запятой.
Медиа-входы: микрофон, веб-камера, клавиатура, мышь, шлемы виртуальной реальности, Soundcloud, видео, текстуры.

Использование

Примером процедурной анимации, созданной в Shadertoy, может быть следующий квадратный туннель:

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // input: pixel coordinates
    vec2 p = (-iResolution.xy + 2.0 * fragCoord) / iResolution.y;

    // angle of each pixel to the center of the screen
    float a = atan(p.y, p.x);
    
    // modified distance metric
    float r = pow(pow(p.x * p.x, 4.0) + pow(p.y * p.y, 4.0), 1.0/8.0);
    
    // index texture by (animated inverse) radius and angle
    vec2 uv = vec2(1.0 / r + 0.2 * iTime, a);

    // pattern: cosines
    float f = cos(12.0 * uv.x) * cos(6.0 * uv.y);

    // color fetch: palette
    vec3 col = 0.5 + 0.5 * sin(3.1416 * f + vec3(0.0, 0.5, 1.0));
    
    // lighting: darken at the center    
    col = col * r;
    
    // output: pixel color
    fragColor = vec4(col, 1.0);
}

Код выше генерирует следующее изображение:

Упоминания

Shadertoy упоминается в нескольких источниках:

Блог разработчиков NVidia , июнь 2016 г., объявлен конкурс Shadertoy Contest 2016. ^[6]
Siggraph в реальном времени в прямом эфире! , 2015, проект интерактивной звуковизуализации. ^[7]
Hacker News , 2014 г., Shadertoy добавляет в браузер процедурную музыку, генерируемую графическим процессором. ^[8]
Численные методы трассировки лучей неявно заданных поверхностей , ^[9]
Курс CS 371 в колледже Уильямс , 2014 г., Вдохновение для CS 371 ^[10]
Рендеринг в реальном времени , август 2015 г., «Семь вещей» за 20 августа 2015 г. ^[11]

Ссылки

^ Макгуайр, Морган. «Промежуточное вдохновение» (PDF) . CS371: Вычислительная графика [осень 2014 г.] . Архивировано (PDF) из оригинала 15 ноября 2020 г. Проверено 29 июня 2024 г.
^ «Хронос выпускает окончательную спецификацию WebGL 1.0» . Группа компаний «Хронос» . 3 марта 2011 года . Проверено 2 июня 2012 г.
^ «Шейдерная игрушка» . www.iquilezles.org .
^ «Иниго Килес» .
^ «Конкурс Shadertoy Siggraph 2015» .
^ «Блог разработчиков NVIDIA» . 2016 . Проверено 2 июня 2016 г.
^ «Конкурс Shadertoy на Siggraph 2015. В прямом эфире!» . Проверено 13 августа 2015 г.
^ «Хакерские новости» . yкомбинатор . Проверено 31 августа 2020 г.
^ «Численные методы трассировки лучей неявно заданных поверхностей» (PDF) . Уильямс Колледж. Архивировано из оригинала (PDF) 6 сентября 2015 г. Проверено 25 сентября 2014 г.
^ «CS 371» (PDF) . Уильямс Колледж. ^{[ мертвая ссылка ]}
^ «Рендеринг в реальном времени — семь вещей на 20 августа 2015 года» . Realtimerendering.com. 2015 . Проверено 20 августа 2015 г.

Внешние ссылки

Официальный сайт

[academics-1] Макгуайр, Морган. «Промежуточное вдохновение» (PDF) . CS371: Вычислительная графика [осень 2014 г.] . Архивировано (PDF) из оригинала 15 ноября 2020 г. Проверено 29 июня 2024 г.

[2] «Хронос выпускает окончательную спецификацию WebGL 1.0» . Группа компаний «Хронос» . 3 марта 2011 года . Проверено 2 июня 2012 г.

[section-3] «Шейдерная игрушка» . www.iquilezles.org .

[website-4] «Иниго Килес» .

[Siggraph_2015_Shadertoy_Competition-5] «Конкурс Shadertoy Siggraph 2015» .

[6] «Блог разработчиков NVIDIA» . 2016 . Проверено 2 июня 2016 г.

[7] «Конкурс Shadertoy на Siggraph 2015. В прямом эфире!» . Проверено 13 августа 2015 г.

[8] «Хакерские новости» . yкомбинатор . Проверено 31 августа 2020 г.

[9] «Численные методы трассировки лучей неявно заданных поверхностей» (PDF) . Уильямс Колледж. Архивировано из оригинала (PDF) 6 сентября 2015 г. Проверено 25 сентября 2014 г.

[10] «CS 371» (PDF) . Уильямс Колледж. ^{[ мертвая ссылка ]}

[11] «Рендеринг в реальном времени — семь вещей на 20 августа 2015 года» . Realtimerendering.com. 2015 . Проверено 20 августа 2015 г.

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]

[11]