Рубрика «шейдеры» - 7

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

Практически в любой современной графической симуляции используется код, написанный для видеопроцессора: от реалистичных эффектов освещения в высокотехнологичных AAA-играх до двухмерных эффектов постпроцессинга и симуляции жидкостей.

Создание шейдеров - 1
Сцена из Minecraft, до и после добавления нескольких шейдеров.

Задача этого туториала

Иногда программирование шейдеров представляется загадочной чёрной магией и его часто понимают неправильно. Существует множество примеров кода, демонстрирующих создание невероятных эффектов, но в которых практически нет объяснений. В своём руководстве я хочу восполнить этот пробел. Я сосредоточусь в основном на базовых принципах создания и понимания кода шейдеров, чтобы вы смогли с лёгкостью настраивать, сочетать или писать свои собственные шейдеры с нуля!
Читать полностью »

В этом туториале мы воссоздадим эффект 3D-принтера, используемый в таких играх, как Astroneer и Planetary Annihilation. Это интересный эффект, показывающий процесс создания объекта. Несмотря на внешнюю простоту, в нём есть множество далеко не тривиальных сложностей.

Создание шейдерного эффекта 3D-принтера - 1

Читать полностью »

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

Практически каждая современная графическая сцена являет собой результат работы некоторого кода, написанного специально для GPU — от реалистичных эффектов освещения в новейших ААА-играх до 2D-эффектов и симуляции жидкости.
image
Сцена в Minecraft до и после применения нескольких шейдеров.

Цель этой инструкции

Программирование шейдеров иногда кажется загадочной черной магией. Тут и там можно встретить отдельные куски кода шейдеров, которые обещают вам невероятные эффекты и, возможно, вправду способны их обеспечить — но при этом совершенно не объясняют, что именно они делают и как добиваются столь впечатляющих результатов. Данная статья попробует закрыть этот пробел. Я сфокусируюсь на базовых вещах и терминах, касающихся написания и понимания шейдерного кода, так что впоследствии вы сами сможете менять код шейдеров, комбинировать их или писать свои собственные с нуля.
Читать полностью »

Привет! В данной заметке я расскажу о добавлении colorkey в библиотеку libgdx (или любую другую, где есть шейдеры). Как известно, нативной поддержки «прозрачного цвета» в libgdx нет, поэтому приходится хранить полноцветное изображение в формате RGBA8888 (4 байта на пиксель), либо в усечённом формате RGBA4444 (2 байта на пиксель), который позволяет вдвое уменьшить использование памяти, но сильно ухудшает картинку. При создании 2D игр, зачастую, было бы достаточно всего одного бита прозрачности… Особенно на мобильных платформах… но его нет… Сделаем, чтобы был!

Добавление ColorKey в libGDX - 1
Читать полностью »

Создание материалов для Unity в Substance Designer - 1

Ужасные мучения

Текстурирование и создание игровых материалов всегда были интересной… и мучительной работой одновременно. До перехода на Substance Designer я использовал для создания всех нужных карт Photoshop и xNormal. Приходилось много раз переключаться между двумя этими приложениями, и это надоедало. Теперь я избавился от этой проблемы.

Substance Designer (SD) — это программное обеспечение, позволяющее создавать материалы и текстуры «на лету». В нём используется удивительно простая система узлов. Я художник, и обычно меня очень пугала работа с узлами (и вообще всем, кроме кисти). Честно говоря, когда я впервые увидел SD, то слегка вздрогнул. К счастью, у авторов программы есть видео, демонстрирующие её возможности. Они дают такого мотивирующего «пинка», что вам приходится совершить «прыжок веры».
Читать полностью »

Во время своего доклада на второй день конференции Build 2014 евангелисты Microsoft Стивен Гуггенхаймер и Джон Шевчук рассказали о реализации поддержки Babylon.js для Oculus Rift. Одним из ключевых пунктов их демонстрации было упоминание разработанной нами технологии имитации линз:

Создание шейдеров на основе Babylon.js и WebGL: теория и примеры - 1

Я также присутствовал на докладе Фрэнка Оливье и Бена Констебля на тему использования графики в IE с применением Babylon.js.

Эти доклады напомнили мне об одном вопросе, который мне часто задают в отношении Babylon.js: «Что вы подразумеваете под шейдерами?» Я решил посвятить этому вопросу целую статью с целью объяснить принцип работы шейдеров и привести несколько примеров их основных типов. Читать полностью »

Эта статья подготовлена в содружестве с разработчиками и гейм-дизайнерами студии zGames.

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

В этой статье я расскажу о том, как достичь вот такого эффекта:

Создаем 2D-порталы с помощью шейдеров - 1

По сути, шейдер, о котором пойдет речь, работает как пост-эффект для камеры или встроенные фильтры blur и vignette в Unity. Он принимает входное изображение (точнее, RenderTexture) и выводит его с наложенными эффектами.
Читать полностью »

Содержание основного курса

Улучшение кода

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

  • geometry.cpp+.h — 218 строк
  • model.cpp+.h — 139 строк
  • our_gl.cpp+.h — 102 строки
  • main.cpp — 66 строк

Итого 525 строк. Ровно то, что я обещал в самом начале курса. И заметьте, что отрисовкой мы занимаемся только в our_gl и main, а это всего 168 строк, и нигде мы не вызывали сторонних библиотек, вся отрисовка сделана нами с нуля!
Я напоминаю, что мой код нужен только для финального сравнения с вашим работающим кодом! По-хорошему, вы всё должны написать с нуля, если следуете этому циклу статей. Очень прошу, делайте самые безумные шейдеры и выкладывайте в комментарии картинки!!!

Краткий курс компьютерной графики: пишем упрощённый OpenGL своими руками, статья 5 из 6 - 1
Читать полностью »

Шейдер для жука
снизу фотографии настоящих жуков, сверху — моя реализация

Продолжение предыдущей статьи, на этот раз пишем шейдер.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js