- PVSM.RU - https://www.pvsm.ru -
В Firefox 27 появился новый инструмент — редактор шейдеров — который значительно упрощает их разработку. Редактор показывает все запущенные в контексте WebGL программы, даёт возможность редактировать их и сразу же видеть изменения без единого обрыва анимаций или потери состояния.
Если Вы видели HTML5 версию "эпичной цитадели [1]" от Epic Games, Вы наверняка впечатлены её невероятной производительностью и детализацией. Большая часть кода, отвечающая за то, что Вы видите на экране, написана в виде шейдеров, собранных в специальные шейдерные программы, которые выполняются непосредственно на видеокарте и обеспечивают высокую производительность визуальных эффектов.
Написание вершинных и фрагментных шейдеров является важной частью разработки 3D для web, даже если Вы пользуетесь специальной библиотекой. Эпичная цитадель, например, включает в себя более 200 шейдерных программ. Это связано с тем, что отрисовка затачивается и оптимизируется под конкретные задачи в приложении. Разработка шейдеров сейчас по ряду причин неудобна:
Нижеследующий скринкаст демонстрирует изменение кода шейдера на примере сравнительно простой демки:
В Firefox 27 появился новый инструмент — редактор шейдеров — который значительно упрощает их разработку. Редактор показывает все запущенные в контексте WebGL программы, даёт возможность редактировать их и сразу же видеть изменения без обрыва анимаций или потери состояния. Многократное редактирование шейдеров не отражается на производительности WebGL.
Редактор шейдеров не включен по умолчанию, т.к. далеко не все странички используют WebGL. Однако, его легко включить,
Чтобы попробовать редактор шейдеров в деле, зайдите на любую демку [2] WebGL и откройте вкладку редактора. Возможно Вам потребуется перегрузить страничку, чтобы дать редактору доступ к контексту WebGL, после чего Вы увидите такую картинку (кликабельно):
[3]
Шейдерные программы пишутся на GLSL а не на JavaScript. Чтобы научиться работать с кодом шейдеров, можно почитать различные [4] уроки [5] (или на русском где-то тут [6]). Нелохая подборка уроков есть на блоге Learning WebGL [7]. Редактор шейдеров даёт Вам прямой доступ к коду, так что Вы можете просто поэкспериментировать и посмотреть, к чему это приведёт:
Больше информации о редакторе шейдеров можно получить на сайте мозиллы [9].
В заключении второй скринкаст, демонстрирующий редактирование шейдеров на лету в эпичной цитадели:
Автор: makc3d
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/mozilla-firefox/48286
Ссылки в тексте:
[1] эпичной цитадели: http://www.unrealengine.com/html5/
[2] любую демку: http://learningwebgl.com/lessons/lesson04/index.html
[3] Image: http://habrastorage.org/storage3/e8e/2f1/9b2/e8e2f19b2927b042998427ccfdadd8de.png
[4] различные: http://www.khronos.org/webgl/wiki/Tutorial#Creating_the_Shaders
[5] уроки: http://www.html5rocks.com/en/tutorials/webgl/shaders/
[6] где-то тут: http://russian-webgl.blogspot.com/
[7] Learning WebGL: http://learningwebgl.com/blog/?page_id=1217
[8] Image: http://habrastorage.org/storage3/2ac/240/ef9/2ac240ef9a5c027b8bf2dd540e8fde00.png
[9] сайте мозиллы: https://developer.mozilla.org/en-US/docs/Tools/Shader_Editor/
[10] Источник: http://habrahabr.ru/post/202046/
Нажмите здесь для печати.