В Firefox 27 представлен новый инструмент — редактор шейдеров, который значительно упрощает разработку шейдеров.
Редактор показывает все программы, работающие в контексте WebGL, дает возможность редактировать их и сразу видеть изменения без единого перерыва в анимации или потери состояния.
Если вы видели версию HTML5 " эпическая цитадель » от Epic Games, вы наверняка будете впечатлены его невероятной производительностью и детализацией.
Большая часть кода, отвечающего за то, что вы видите на экране, написана в виде шейдеров, скомпилированных в специальные шейдерные программы, которые запускаются непосредственно на видеокарте и обеспечить высокопроизводительные визуальные эффекты.
Написание вершинных и фрагментных шейдеров — важная часть 3D-разработки для Интернета, даже если вы используете специальную библиотеку.
Например, Эpic citadel включает более 200 шейдерных программ.
Это связано с тем, что рендеринг заточен и оптимизирован под конкретные задачи в приложении.
Разработка шейдеров на данный момент неудобна по ряду причин:
- Вам необходимо перезапустить приложение, чтобы увидеть изменения.
- Некоторые шейдеры срабатывают только при особых условиях.
Редактор показывает все программы, работающие в контексте WebGL, дает возможность редактировать их и сразу видеть изменения, не нарушая анимацию и не теряя состояния.
Редактирование нескольких шейдеров Нет влияет на производительность WebGL.
Как включить редактор шейдеров?
Редактор шейдеров по умолчанию не включен, потому что.Не все страницы используют WebGL. Однако легко включить
- Открыв панель инструментов с помощью F12 или Ctrl/Cmd + Shift + I,
- Нажав там «шестеренку», чтобы перейти к опциям,
- И, наконец, поместив птицу слева перед редактором шейдеров.
Вкладка редактора сразу появится на панели инструментов.
Как пользоваться редактором шейдеров?
Чтобы попробовать редактор шейдеров в действии, перейдите по ссылке любая демонстрация WebGL и откройте вкладку редактора.
Возможно, вам придется перезагрузить страницу, чтобы предоставить редактору доступ к контексту WebGL, после чего вы увидите следующее изображение (кликабельно): 
- Слева находится список шейдерных программ, код соответствующих вершинных и фрагментных шейдеров с подсветкой синтаксиса справа.
- Тип шейдера указывается под окном редактора кода.
- При наведении указателя на программу все объекты, нарисованные с помощью этой программы, выделяются красным цветом.
- Нажав на глазок слева от программы, вы можете отключить отрисовку этих объектов (чтобы автор мог сконцентрироваться на рисовании других объектов или лучше видеть пересекающиеся с ними объекты).
- Когда панель инструментов расположена сбоку, окна редактора располагаются вертикально.
Как редактировать шейдерные программы?
Программы шейдеров написаны на GLSL, а не на JavaScript. Чтобы узнать, как работать с шейдерным кодом, вы можете прочитать различный уроки (или по-русски где-то здесь ).В блоге хорошая подборка уроков Изучение WebGL .
Редактор шейдеров предоставляет вам прямой доступ к коду, поэтому вы можете просто поэкспериментировать и посмотреть, что произойдет:
- Редактирование кода любого шейдера приводит к его компиляции и применению к 3D-сцене, как только пользователь перестает нажимать кнопки;
- Случайная ошибка в коде не нарушит рендеринг, редактор просто покажет ошибку и выделит соответствующую строку; Наведя курсор на красный значок слева, вы можете просмотреть подробную информацию об ошибке.
Более подробную информацию о редакторе шейдеров можно найти по адресу Сайт Мозиллы .
В заключение второй скринкаст, демонстрирующий оперативное редактирование шейдеров в эпической цитадели: Теги: #webgl #mozilla firefox #разработка веб-сайтов #webgl
-
Топонимика
19 Oct, 24 -
Crm: Погружение Под Верхушку Айсберга
19 Oct, 24 -
Представители Оперы В Университетах
19 Oct, 24 -
Png Против Internet Explorer
19 Oct, 24 -
Заезд В Технопарк (Фотоотчет)
19 Oct, 24
