Shadertoy - Shadertoy

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

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

Обзор

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

Shadertoy.com - это онлайн-сообщество и платформа для Компьютерная графика профессионалы, ученые[1] и энтузиасты, которые делятся, изучают и экспериментируют с методами рендеринга и процедурным искусством с помощью GLSL код. По состоянию на середину 2019 года тысячи пользователей сделали более 31 тысячи публичных вкладов. WebGL[2] позволяет Shadertoy получить доступ к вычислительной мощности GPU чтобы генерировать процедурный искусство, анимация, модели, освещение, логика состояния и звук.

История

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

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

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

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

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

особенности

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

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

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

пустота mainImage( вне vec4 fragColor, в vec2 fragCoord ){    // ввод: координаты пикселей    vec2 п = (-iResolution.ху + 2.0*fragCoord)/iResolution.y;    // угол каждого пикселя к центру экрана    плавать а = загар(п.y,п.Икс);        // модифицированная метрика расстояния    плавать р = пау( пау(п.Икс*п.Икс,4.0) + пау(п.y*п.y,4.0), 1.0/8.0 );        // индексируем текстуру по (анимирован обратный) радиус и угол    vec2 УФ = vec2( 1.0/р + 0.2*iTime, а );    // шаблон: косинусы    плавать ж = потому что(12.0*УФ.Икс)*потому что(6.0*УФ.y);    // выборка цвета: палитра    vec3 Col = 0.5 + 0.5*грех( 3.1416*ж + vec3(0.0,0.5,1.0) );        // освещение: затемнить в центре     Col = Col*р;        // вывод: цвет пикселя    fragColor = vec4( Col, 1.0 );}

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

Изображение, созданное приведенным выше кодом

Упоминания

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

  • Блог разработчиков NVidia, Июн 2016, Объявлен конкурс Shadertoy Contest 2016.[6]
  • Siggraph в реальном времени Live!, 2015, интерактивный проект звуковой визуализации.[7]
  • Хакерские новости, 2014, Shadertoy добавляет в браузер процедурную музыку, генерируемую графическим процессором.[8]
  • Численные методы трассировки лучей на неявно заданных поверхностях,[9]
  • CS 371 курс в колледже Уильямс, 2014, Вдохновение для CS 371[10]
  • Рендеринг в реальном времени, Август 2015 г., Seven Things for 20 августа 2015 г.[11]

Рекомендации

  1. ^ http://graphics.cs.williams.edu/courses/cs371/f14/reading/shadertoy.pdf
  2. ^ «Khronos выпускает окончательную спецификацию WebGL 1.0». Хронос Групп. 3 марта 2011 г.. Получено 2 июн 2012.
  3. ^ "Шейдерная игрушка". www.iquilezles.org.
  4. ^ "Иниго Куилес".
  5. ^ «Конкурс Siggraph 2015 Shadertoy».
  6. ^ «Блог разработчиков NVidia». 2016. Получено 2 июн 2016.
  7. ^ «Конкурс Shadertoy на Siggraph 2015. В реальном времени!». Получено 2015-08-13.
  8. ^ "Хакерские новости". ycombinator. Получено 2020-08-31.
  9. ^ «Численные методы трассировки неявно заданных поверхностей» (PDF). Колледж Уильямса. Архивировано из оригинал (PDF) на 2015-09-06. Получено 2014-09-25.
  10. ^ «CS 371» (PDF). Колледж Уильямса.
  11. ^ «Рендеринг в реальном времени - семь вещей на 20 августа 2015 года». realtimerendering.com. 2015 г.. Получено 20 августа 2015.

внешняя ссылка