Pull to refresh
  • by relevance
  • by date
  • by rating

Learn OpenGL. Часть 2.4. — Текстурные карты

ProgrammingC++Game development

image


Ранее мы обсуждали возможность каждого объекта иметь уникальный материал, чтобы по-разному реагировать на свет. Это отлично подходит для того, чтобы придать каждому объекту уникальный вид относительно других объектов на сцене. Но этого все еще не дает нам большой гибкости в настройке внешнего вида объекта.


Читать дальше →
Total votes 18: ↑18 and ↓0 +18
Views17.2K
Comments 1

Learn OpenGL. Урок 2.5 — Источники света

ProgrammingC++Game development
Sandbox
Tutorial
OGL3

Источники света


Вплоть до этой статьи мы довольствовались освещением, исходящим из одной точки в пространстве. И результат был неплох, однако в реальности существует множество источников освещения с различающимся «поведением». В данном уроке рассматриваются несколько таких источников света. Умение имитировать характеристики разных источников света является еще одним инструментом обогащения создаваемых сцен.

Начнем урок с направленного источника света, затем перейдем к точечному источнику, который является развитием упомянутого простого метода освещения. В конце рассмотрим, как устроен источник, имитирующий свойства прожектора (спотлайт).
Читать дальше →
Total votes 27: ↑26 and ↓1 +25
Views26.3K
Comments 0

learnopengl. Урок 2.6 — Несколько источников освещения

C++Game development
Sandbox
OGL3

Несколько источников освещения


В предыдущих уроках мы выучили довольно много об освещении в OpenGL. Мы познакомились с моделью освещения по Фонгу, разобрались как работать с материалами, текстурными картами и различными типами источника света. В этом уроке мы собираемся объединить все наши знания, чтобы создать полностью освещенную сцену с 6 активными источниками света. Мы собираемся симулировать солнце как направленный источник освещения, добавим 4 точки света, разбросанные по всей сцене, и конечно мы добавим фонарик.

В предыдущих сериях

Часть 1. Начало

  1. OpenGL
  2. Создание окна
  3. Hello Window
  4. Hello Triangle
  5. Shaders
  6. Текстуры
  7. Трансформации
  8. Системы координат
  9. Камера

Часть 2. Базовое освещение

  1. Цвета
  2. Основы освещения
  3. Материалы
  4. Текстурные карты
  5. Источники света

Читать дальше →
Total votes 11: ↑11 and ↓0 +11
Views13.3K
Comments 0

learnopengl. Уроки 3.1 (Assimp) + 3.2 (класс Mesh)

C++Game development
Tutorial
OGL3

Assimp


Во всех уроках, мы, в основном, использовали нашего маленького друга — контейнер, но через некоторое время, даже наши лучшие друзья становятся немного скучными. В большом графическом приложении, обычно присутствуют много моделей, на которые намного приятнее смотреть, чем на наш статичный контейнер. Хотя, в отличие от контейнера, нам будет очень сложно, вручную, определить все вершины, нормали и текстурные координаты таких сложных моделей, как например дом или человекоподобные персонажи. Вместо этого, мы будем имортировать модели в наше приложение; модели, которые были тщательно нарисованы, в 3D редакторах, таких как Blender, 3DS MAX или Maya.


Эти, так называемые инструменты 3D моделирования, позволяют художникам создавать сложные модели и применять текстуры к ним с помощью процесса, который называется текстурная развертка (uv-mapping). Инструменты автоматически генерируют все вершинные координаты, вершины нормалей и текстурные координаты, экспортируя их в файл модели. Таким образом, художники имеют обширный набор инструментов для создания высококачественных моделей, не заботясь о технических деталях. Все технические аспекты спрятаны в экспортируемом файле. Мы, как программисты графики, должны позаботится об этих технических деталях.
Читать дальше →
Total votes 10: ↑10 and ↓0 +10
Views25.2K
Comments 1

Learn OpenGL. Урок 4.8 — Продвинутый GLSL

ProgrammingC++Game development
Sandbox
OGL3

Продвинутый GLSL


Этот урок не продемонстрирует вам новые продвинутые средства, значительно улучшающие визуальное качество сцены. В этом уроке мы пройдем по более или менее интересным аспектам GLSL и затронем несколько неплохих приёмов, которые могут помочь вам в ваших стремлениях. В основном, знания и средства, делающие вашу жизнь проще при создании OpenGL приложений в сочетании с GLSL.

Мы обсудим некоторые интересные встроенные переменные, новые подходы в организации ввода-вывода шейдеров и очень полезный инструмент — объект юниформ-буфера.
Читать дальше →
Total votes 24: ↑24 and ↓0 +24
Views22.7K
Comments 4

UI-компоненты на пиксельных шейдерах: пишем ваш первый шейдер

JUG Ru Group corporate blogJavaScript
Кого можно назвать «пиксельных шейдеров начальник и пикселов командир»? Дениса Радина, работающего в Evolution Gaming над фотореалистичными веб-играми с использованием React и WebGL: он известен многим как раз под именем Pixels Commander.

В декабре на нашей конференции HolyJS он выступил с докладом о том, как использование GLSL может улучшить работу с UI-компонентами по сравнению с «обычным джаваскриптом». А теперь для Хабра мы подготовили текстовую версию этого доклада — добро пожаловать под кат! Заодно прикладываем видеозапись выступления:


Читать дальше →
Total votes 30: ↑29 and ↓1 +28
Views11.4K
Comments 12

Рассеяние света в атмосфере в менее чем четырёх килобайтах

Abnormal programmingWorking with 3D-graphicsDemoscene

Введение


В этой краткой заметке будет рассказано о том, как устроена модель атмосферного рассеяния света в нашей последней 4к интре Appear by Jetlag, party-версия которой заняла почётное 12-е место в 4k intro compo на демопати Revision 2018 в апреле этого года.


Cкачать бинарник бесплатно без смс можно здесь.


Если, однако, у вас не Виндовс, или нет мощной современной видеокарты, то есть утешительный утупчик:



Музыку к этой работе написал keen, используя 4klang. За мной же остался весь код и визуальный ряд.


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

Читать дальше →
Total votes 41: ↑39 and ↓2 +37
Views14.5K
Comments 33

Введение в программирование шейдеров для верстальщиков

Website developmentJavaScriptWebGL
Tutorial


WebGL существует уже давно, про шейдеры написано немало статей, есть серии уроков. Но в основной массе они слишком сложные для верстальщика. Даже лучше сказать, что они охватывают большие объемы информации, которые скорее нужны разработчику игрового движка, чем верстальщику. Там сразу начинают с построения сложной сцены, камера, свет… На обычном сайте для создания пары эффектов с фотографиями все эти знания избыточны. В результате люди делают очень сложные архитектурные конструкции и пишут длинные-длинные шейдеры ради очень простых по сути действий.


Все это побудило создать введение в те аспекты работы с шейдерами, которые наиболее вероятно пригодятся в работе именно верстальщику для создания различных 2d-эффектов с картинками на сайте. Конечно с поправкой на то, что сами по себе в дизайне интерфейсов они у нас применяются относительно редко. Мы сделаем стартовый шаблон на чистом JS без сторонних библиотек и рассмотрим идеи создания некоторых популярных эффектов, основанных на сдвиге пикселей, которые сложно сделать на SVG, но при этом они легко реализуются с помощью шейдеров.

Читать дальше →
Total votes 42: ↑41 and ↓1 +40
Views25K
Comments 8

Применяем мозаику Вороного, пикселизацию и геометрические маски в шейдерах для украшения сайта

Website developmentJavaScriptWebGL
Tutorial
image

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


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

Читать дальше →
Total votes 31: ↑31 and ↓0 +31
Views10.8K
Comments 12

Разработка GLSL шейдеров на Kotlin

Open sourceWorking with 3D-graphicsKotlin
Sandbox


Всем привет!

Наша компания занимается разработкой онлайн игр и сейчас мы работаем над мобильной версией нашего основного проекта. В этой статье хотим поделиться опытом разработки GLSL шейдеров для Android проекта с примерами и исходниками.
Читать дальше →
Total votes 28: ↑25 and ↓3 +22
Views4.9K
Comments 6

Как я попробовал сделать статический анализатор GLSL (и что пошло не так)

Abnormal programmingGame developmentWebGLWebAssembly

Однажды я готовился к Ludum Dare и сделал простую игру, где использовал пиксельные шейдеры (других в движок Phaser не завезли).


Что такое шейдеры?

Шейдеры — это программы на си-подобном языке GLSL, которые выполняются на видеокарте. Есть два вида шейдеров, в этой статье речь идет про пиксельные (они же “фрагментные”, fragment shaders), которые очень грубо можно представить в таком виде:


color = pixelShader(x, y, ...other attributes)

Т.е. шейдер выполняется для каждого пикселя выводимого изображения, определяя или уточняя его цвет.
Вводную можно почитать на другой статье на хабре — https://habr.com/post/333002/


Потестировав, кинул ссылку другу, и получил от него вот такой скриншот с вопросом "а это нормально?"



Нет, это было ненормально. Посмотрев внимательно код шейдера, я обнаружил ошибку в вычислениях:


if (t < M) {
    realColor = mix(color1,color2, pow(1. - t / R1, 0.5));
}

Т.к. константа R1 была меньше чем M, то в некоторых случаях в первом аргументе pow получалось число меньше нуля. Квадратный корень из отрицательного числа — штука загадочная, по крайней мере для стандарта GLSL. Мою видеокарту ничего не смутило, и она как-то выпуталась из этого положения (похоже, вернув из pow 0), а вот у друга она оказалась более разборчивой.


И тут я задумался: а могу ли я избежать таких проблем в будущем? От ошибок никто не застрахован, особенно таких, которые не воспроизводятся локально. Юнит-тесты на GLSL не напишешь. В то же время преобразования внутри шейдера довольно простые — умножения, деления, синусы, косинусы… Неужели нельзя отследить значения каждой переменной и убедиться, что ни при каких условиях не происходит выхода за допустимые границы значений?


Так я решил попробовать сделать статический анализ для GLSL. Что из этого получилось — можно прочитать под катом.


Сразу предупрежу: какого-то законченного продукта получить не удалось, только учебный прототип.

Читать дальше →
Total votes 41: ↑41 and ↓0 +41
Views5.7K
Comments 20

GLSL: Центр или центроид? Или когда шейдеры атакуют

ProgrammingWorking with 3D-graphicsGame development
Translation
Дорабатывая шейдер для готовящейся к выходу игры, я столкнулся с неприятным артефактом, который проявляется только при включении аппаратного MSAA. На скриншоте ландшафта видно несколько чересчур ярких пикселей. Значения цвета в нескольких из них было настолько велико, что после наложения блума они превратились в разноцветных «призраков».

image

Предлагаю вашему вниманию перевод статьи, которая детально объясняет причину этого феномена и способ борьбы с ним.
Читать дальше →
Total votes 32: ↑32 and ↓0 +32
Views5.3K
Comments 2

Продвинутый Three.js: шейдерные материалы и постобработка

Website developmentJavaScriptWebGL
Tutorial


В сети довольно много введений в основы работы с Three.js, но можно заметить нехватку материалов по более продвинутым темам. И одна из этих тем – это объединение шейдеров и сцены с трехмерными моделями. В глазах многих начинающих разработчиков это как будто несовместимые вещи из разных миров. Сегодня на простом примере “плазменной сферы” мы посмотрим, что такое ShaderMaterial и с чем его едят, а также что такое EffectComposer и как можно быстро сделать постобработку для отрендеренной сцены.

Читать дальше →
Total votes 19: ↑18 and ↓1 +17
Views14.3K
Comments 2

Псевдо Lens Flare

ProgrammingWorking with 3D-graphicsGame developmentMathematics
Привет, Хабр! Представляю вашему вниманию перевод статьи «Pseudo Lens Flare» автора John Chapman.

image

Lens flare (блики на линзах) ― это фотографический артефакт, возникающий при рассеивании и преломлении света в системе линз. Хотя он является артефактом, существует множество поводов использовать lens flare в компьютерной графике:

  • он увеличивает воспринимаемую яркость и видимый динамический диапазон изображения.
  • lens flare часто встречается на фотографиях, поэтому его отсутствие может бросаться в глаза
  • он может играть важную роль в стилистике или драматизме, или может быть частью геймплея в играх (представьте блики, ослепляющие игрока)

Традиционно lens flare в realtime реализовывался с помощью технологий, основанных на спрайтах. Хотя спрайты дают легко контролируемые и очень реалистичные результаты, они должны быть размещены явно и требуют данные окклюзии для корректного отображения. Здесь я опишу простой и относительно дешевый screen space эффект, который создает псевдо lens flare из входного color buffer. Он не основан на физике, поэтому результат немного отличается от фотореалистичного, но его можно использовать в комбинации с (или как замену) традиционными sprite-based эффектами.
Читать дальше →
Total votes 13: ↑13 and ↓0 +13
Views3.6K
Comments 0

Динамическая локальная экспозиция

ProgrammingWorking with 3D-graphicsGame developmentMathematics
Translation
Привет, Хабр! Представляю вашему вниманию перевод статьи «Dynamic Local Exposure» автора John Chapman.

image

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

Low/High Dynamic Range


В старые добрые времена (1990-е) игры рендерились непосредственно в отображаемом LDR (узкий динамический диапазон) формате (гамма пространство, 8 бит). Это было просто и дешево, но, с другой стороны, значительно мешало созданию действительно фотореалистичной картинки.

В настоящее время, особенно с появлением PBR (physically-based rendering), игры рендерятся с гигантским динамическим диапазоном в линейном пространстве с более высокой точностью. С таким движением к фотореализму приходит реальная проблема: как мы можем отобразить HDR изображение в LDR?
Читать дальше →
Total votes 22: ↑22 and ↓0 +22
Views2.6K
Comments 3

Немного о затенении по Фонгу

Working with 3D-graphicsGame development
Translation

«Мы не можем ожидать, что у нас получится отобразить объект точно таким, каким он является в реальности, с текстурами, тенями и т.д. Мы надеемся только на то, чтобы создать изображение, которое достаточно близко к достижению определённой степени реализма».

Буй Тыонг Фонг

Буй Тыонг Фонг родился в 1941 году и стал учёным-информатиком во время Вьетнамской войны. Должно быть, ему сложно оказалось завершить своё обучение в токсичной среде 60-х, не говоря уже о том, что его призвали на фронт! Но ему удалось выжить и дожить до 1975 года, прежде чем его жизнь забрала лейкемия спустя всего два года после того, как он заложил для мира фундамент современной теории освещения и затенения: шейдер Фонга.
Читать дальше →
Total votes 20: ↑20 and ↓0 +20
Views6.6K
Comments 0

Создание шейдера травы в движке Unity

Working with 3D-graphicsGame developmentUnity3DGame design
Translation

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

Статья описывает поэтапный процесс написания шейдера травы в Unity. Шейдер получает входящий меш, и из каждой вершины меша генерирует при помощи геометрического шейдера травинку. Ради интереса и реализма травинки будут иметь рандомизированные размеры и поворот, а ещё на них будет влиять ветер. Чтобы управлять плотностью травы, мы используем тесселяцию для разделения входящего меша. Трава сможет и отбрасывать, и получать тени.

Готовый проект выложен в конце статьи. В созданном файле шейдера содержится большое количество комментариев, упрощающих понимание.
Читать дальше →
Total votes 53: ↑50 and ↓3 +47
Views18.3K
Comments 4

Learn OpenGL. Урок 7.1 – Отладка

ProgrammingC++Game development
Translation
Tutorial

image Графическое программирование — не только источник веселья, но еще и фрустрации, когда что-либо не отображается так, как задумывалось, или вообще на экране ничего нет. Видя, что большая часть того, что мы делаем, связана с манипулированием пикселями, может быть трудно выяснить причину ошибки, когда что-то работает не так, как полагается. Отладка такого вида ошибок сложнее, чем отладка ошибок на CPU. У нас нет консоли, в которую мы могли бы вывести текст, мы не можем поставить точку останова в шейдере и мы не можем просто взять и проверить состояние программы на GPU.


В этом уроке мы познакомимся с некоторыми методами и приемами отладки вашей OpenGL-программы. Отладка в OpenGL не так сложна, и изучение некоторых приемов обязательно окупится.

Читать дальше →
Total votes 19: ↑19 and ↓0 +19
Views9.2K
Comments 2

Рендеринг 3D графики с помощью OpenGL

C++Working with 3D-graphics
Sandbox

Введение


Рендеринг 3D графики — непростое занятие, но крайне интересное и захватывающее. Эта статья для тех, кто только начинает знакомство с OpenGL или для тех кому интересно, как работают графические конвейеры, и что они из себя представляют. В этой статье не будет точных инструкций, как создать OpenGL контекст и окно или как написать своё первое оконное приложение на OpenGL. Связанно это с особенностями каждого языка программирования и выбором библиотеки или фреймворка для работы с OpenGL (Я буду использовать C++ и GLFW) тем более в сети легко найти туториал под интересующий вас язык. Все примеры, приведённые в статье, будут работать и на других языках с немного изменённой семантикой команд, почему это так, расскажу чуть позже.
Читать дальше →
Total votes 25: ↑22 and ↓3 +19
Views13.7K
Comments 15

Shader — это не магия. Написание шейдеров в Unity. Введение

Game developmentUnity3DCGIDevelopment for AR and VR
Всем привет! Меня зовут Дядиченко Григорий, и я основатель и CTO студии Foxsys. Сегодня хочется поговорить про шейдеры. Умение писать шейдеры (и в целом работать с рендером) очень важно при разработке под мобильные платформы или AR/VR, если хочется добиться крутой графики. Многие разработчики считают, что шейдеры — это магия. Что по ним мало хорошей информации, и что чтобы их писать нужно иметь, как мимимум, звание кандидата наук. Да, разработка шейдеров по своим принципам сильно отличается от клиентской разработки. Но основное понимать базовые принципы работы шейдеров, а так же знать их суть, чтобы в этом не было ничего магического и поиск информации по этой теме был простой задачей. Данная серия статей рассчитана на новичков, так что если вы разбираетесь в программировании шейдеров, данная серия вам не будет интересна. Всем же кто хочет разобраться в этой теме — добро пожаловать под кат!


Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Views19.9K
Comments 17