В этой статье я расскажу о том, как своими руками, имея только блокнот и любой веб-сервер, сделать шейдерные 2D-тени на WebGL. Все шаги лежат на гитхабе как ветки и переключаются git checkout stepN, так что добро пожаловать даже тем, кто не настроен кодить.
КДПВ:
Поиграться с готовым проектом можно здесь.
Итак, недавно мне захотелось написать что-нибудь с 2Д-тенями на javascript’е. С кучей источников света и любыми (читай: растровыми) препятствиями для них. Рейтрейсинг напугал сложными отношениями с геометрией (особенно когда она не умещается на экране), поэтому мой выбор пал на WebGL шейдеры.
ТЗ: Есть картинка, на которой нарисованы препятствия, есть координаты источников света, надо нарисовать тени.
Использовать будем pixi.js: фреймворк для рисования, имеет рендерер, отображающий некую сцену (экземпляр PIXI.Container) на страничке. Сцена-Контейнер может содержать другие контейнеры, или уже непосредственно спрайты/графику (PIXI.Sprite/PIXI.Graphics соответственно). PIXI.Graphics для рисования, Спрайты содержат текстуру, либо тоже нарисованную, либо загруженную извне. Также к Спрайтам можно применять Фильтры (шейдеры).
Про Фильтры: специальные объекты, заносятся в переменную filters
someGraphicObject.filters = [filter]и производят какие-либо операции с текстурой этого объекта, в том числе могут наложить шейдер. У нас же будет особенный фильтр, состоящий из двух «подфильтров». Такая «сложная» структура нужна из-за метода рисования теней:
Генерируем карту теней (для каждого источника света), одномерную текстуру изображающую препятствия с точки зрения источника, где координата X будет углом, а значение альфа-канала — расстоянием до препятствия. Однако, так как такая текстура подходит только для одного источника света, для экономии места и ресурсов текстура будет все-таки двумерной, Y будет означать номер источника.
Вопрос для понимания: Текстура 256х256, пиксель с координатами (х = 64, у = 8) полупрозрачный, назовите номер источника света, и полярные координаты препятствия относительно источника.
Потом, из исходного изображения и карты теней вторым шейдером рисуем сами тени и, заодно, смешиваем всё там же.
Иерархия с т.з. PIXI будет такой:
Сцена (PIXI.Container) |- Лампочки (пара PIXI.Graphics) |- Спрайт на котором будут нарисованы тени + освещенный фон (PIXI.Sprite) |- |- Текстура (PIXI.RenderTexture) |- |- Фильтр (PIXI.AbstractFilter)
И отдельно, вне сцены:
|- Фон (PIXI.Sprite) |- |- Текстура фона |- Контейнер для препятствий (PIXI.Container) |- |- Спрайт с препятствиями (PIXI.Sprite) |- |- |- Текстура спрайта
Заметьте, фон и контейнер мы передадим в фильтр который сам разберется что и как рисовать.
Вот и вся теория, теперь можно приступить к практике:
Шаг 0: Создать проект
Либо скачать его отсюда, ветка step0.
Нам понадобятся 3 файла:
- index.html c
простейшим содержанием
<pre> <!DOCTYPE HTML> <html> <head> <title>Deferred Example</title> <meta charset="UTF-8"> <style></style> <script src="js/pixi.min.js"></script> <script src="js/script.js"></script> </head> <body> </body> </html> - Картинка с препятствиями — любой PNG с прозрачностью, я рекомендую вот такую.
Скрытый текст
- Библиотека pixi.js, скачать можно отсюда.
Ещё неплохо сразу завести любой веб-сервер с папкой проекта.
Шаг 1: Создать сцену
Создается всё в файле js/script.js. Код, я надеюсь, очевиден даже тем, кто не знаком с PIXI:
(function () { var WIDTH = 640; var HEIGHT = 480; var renderer = new PIXI.WebGLRenderer(WIDTH, HEIGHT); // Создаем PIXI рендерер document.addEventListener("DOMContentLoaded", function (event) { // Как только html загрузился document.body.appendChild(renderer.view); // Загружаем дополнительные файлы PIXI.loader .add('background', 'img/maze.png') .once('complete', setup) .load(); }); function setup() { // Все готово, можно рисовать. var lights = []; // Лампочки lights[0] = new PIXI.Graphics(); lights[0].beginFill(0xFFFF00); lights[0].drawCircle(0, 0, 4); // x, y, radius lights[1] = new PIXI.Graphics(); lights[1].beginFill(0xFFFF00); lights[1].drawCircle(0, 0, 4); lights[1].x = 50; lights[1].y = 50; var background = new PIXI.Graphics(); background.beginFill(0x999999); background.drawRect(0, 0, WIDTH, HEIGHT); // x, y, width, height var shadowCastImage = PIXI.Sprite.fromImage('img/maze.png'); // Отбрасывающая тень картинка с объектами (черным) var shadowCasters = new PIXI.Container(); // Контейнер для всех, кто отбрасывает тень shadowCasters.addChild(shadowCastImage); // Добавляем туда нашу картинку. var stage = new PIXI.Container(); stage.addChild(background); stage.addChild(shadowCasters); stage.addChild(lights[0]); stage.addChild(lights[1]); (function animate() { // lights[0] будет бегать за мышкой. var pointer = renderer.plugins.interaction.mouse.global; lights[0].x = pointer.x; lights[0].y = pointer.y; // Рендер renderer.render(stage); requestAnimationFrame(animate); })(); } })();
В результате получится уже что-то вразумительное, картинка, две лампочки, причем одна уже будет привязана к мышке:
Шаг 2: Добавить шейдер
Я начну с простого шейдера, он будет красить препятствия в красный, а все остальное — в серый цвет.
precision mediump float; // Обязательно ставим точность varying vec2 vTextureCoord; // Здесь будет относительная (от 0.0 до 1.0) координата пикселя uniform sampler2D uSampler; // Текстура, к которой применен шейдер. void main() { vec4 color = texture2D(uSampler, vTextureCoord); // получаем цвет пикселя if (color.a == 0.) { // если альфа-канал пуст gl_FragColor = vec4(.5, .5, .5, 1.); // красим в серый, пусто } else { // а если черный gl_FragColor = vec4(1., 0., 0., 1.); // красим в красный, препятствие } }
Загружаем его в loader’e:
PIXI.loader ... .add('glslShadowTexture', 'glsl/smap-shadow-texture.frag') ... Нельзя просто так взять и применить шейдер освещения к сцене напрямую, потому что тогда тени будут рисоваться поверх всего, так что я создам отдельный спрайт, в который буду отрисовывать фон и препятствия с помощью RenderTexture (специальная текстура, позволяющая отрисовать любой другой PIXI объект в себя же), после чего применю к нему наш Фильтр.
var lightingRT = new PIXI.RenderTexture(renderer, WIDTH, HEIGHT); var lightingSprite = new PIXI.Sprite(lightingRT); var filter = createSMapFilter(); lightingSprite.filters = [filter]; ... stage.addChild(lightingSprite); Ну и отрисовка, в функции animate():
lightingRT.render(shadowCasters, null, true); // (shadowCasters как объект PIXI, null как матрица трансформации (опционально), true как флаг очистки текстуры) Осталось только объявить функцию createSMapFilter:
function createSMapFilter() { var SMapFilter = new PIXI.AbstractFilter(null, PIXI.loader.resources.glslShadowTexture.data, {}); // (стандартный вертексный шейдер, наш загруженный пиксельный шейдер, пустой объект с глобальными переменными (uniforms)) return SMapFilter; } Все препятствия покрасятся в красный цвет:
Шаг 3: Создание карты теней
Теперь, когда фильтр работает, его можно переписать и расширить. Во-первых из простого шейдера его надо превратить в «комбо-фильтр», который будет содержать в себе другие шейдеры. Для данного этапа понадобится два — один пустой, выводящий текстуру как есть и один для карты теней. Так же, он будет содержать карту теней и ещё одну текстуру, куда мы будет рендерить контейнер shadowCasters (для тех кто потерялся — это контейнер с препятствиями.) Пожалуй, я просто приведу новую функцию «createSMapFilter()» целиком:
function createSMapFilter() { var CONST_LIGHTS_COUNT = 2; var SMapFilter = new PIXI.AbstractFilter(null, null, { // Заметьте, шейдера здесь больше нет, это фильтр "обертка" viewResolution: {type: '2fv', value: [WIDTH, HEIGHT]} // Передаем в фильтр размеры view , rtSize: {type: '2fv', value: [1024, CONST_LIGHTS_COUNT]} // Передаем размеры карты теней. , uAmbient: {type: '4fv', value: [.0, .0, .0, .0]} // И освещение "по дефолту" пускай будет ноль. }); // Дополнительные глобалки для задания координат/цвета источников света: for (var i = 0; i < CONST_LIGHTS_COUNT; ++i) { SMapFilter.uniforms['uLightPosition[' + i + ']'] = {type: '4fv', value: [0, 0, 256, .3]}; // х, у, размер в пикселях и "falloff" уровень падения освещенности SMapFilter.uniforms['uLightColor[' + i + ']'] = {type: '4fv', value: [1, 1, 1, .3]}; // r, g, b, и эмбиент освещение для конкретного источника света. } // Создаем специальный PIXI объект, куда будет рендериться карта теней SMapFilter.renderTarget = new PIXI.RenderTarget( renderer.gl , SMapFilter.uniforms.rtSize.value[0] , SMapFilter.uniforms.rtSize.value[1] , PIXI.SCALE_MODES.LINEAR , 1); SMapFilter.renderTarget.transform = new PIXI.Matrix() .scale(SMapFilter.uniforms.rtSize.value[0] / WIDTH , SMapFilter.uniforms.rtSize.value[1] / HEIGHT); // Текстура в которую мы будем рендерить препятствия: SMapFilter.shadowCastersRT = new PIXI.RenderTexture(renderer, WIDTH, HEIGHT); SMapFilter.uniforms.uShadowCastersTexture = { type: 'sampler2D', value: SMapFilter.shadowCastersRT }; // И метод для рендеринга: SMapFilter.render = function (group) { SMapFilter.shadowCastersRT.render(group, null, true); }; // Тестовый шейдер, не делающий ничего; SMapFilter.testFilter = new PIXI.AbstractFilter(null, "precision highp float;" + "varying vec2 vTextureCoord;" + "uniform sampler2D uSampler;" + "void main(void) {gl_FragColor = texture2D(uSampler, vTextureCoord);}"); // Шейдер, записывающий в renderTarget карту теней. var filterShadowTextureSource = PIXI.loader.resources.glslShadowTexture.data; // CONST_LIGHTS_COUNT должна быть известна на этапе компиляции и не может передаваться как uniform. filterShadowTextureSource = filterShadowTextureSource.replace(/CONST_LIGHTS_COUNT/g, CONST_LIGHTS_COUNT); // А также мы должны клонировать объект uniforms, этого требует WebGL (на самом деле пока что клонировать не надо, но мы же допишем второй шейдер) var filterShadowTextureUniforms = Object.keys(SMapFilter.uniforms).reduce(function (c, k) { c[k] = { type: SMapFilter.uniforms[k].type , value: SMapFilter.uniforms[k].value }; return c; }, {}); SMapFilter.filterShadowTexture = new PIXI.AbstractFilter( null , filterShadowTextureSource , filterShadowTextureUniforms ); SMapFilter.applyFilter = function (renderer, input, output) { SMapFilter.filterShadowTexture.applyFilter(renderer, input, SMapFilter.renderTarget, true); SMapFilter.testFilter.applyFilter(renderer, SMapFilter.renderTarget, output); // будет заменен на второй шейдер. }; return SMapFilter; } Следует отметить, что filterShadowTexture не использует input. Вместо этого он получает данные через uniform uShadowCastersTexture. Я сделал так, чтобы не заморачиваться с ещё одной renderTarget.
Дальше можно обновить интерактив в функции animate:
// Обновляем uniforms в шейдере filter.uniforms['uLightPosition[0]'].value[0] = lights[0].x; filter.uniforms['uLightPosition[0]'].value[1] = lights[0].y; filter.uniforms['uLightPosition[1]'].value[0] = lights[1].x; filter.uniforms['uLightPosition[1]'].value[1] = lights[1].y; // Рендерим контейнер с препятствиями в renderTexture в фильтре. filter.render(shadowCasters); И, наконец, приступить к написанию шейдера:
// Шейдер для создания карты теней: precision mediump float; //Объявляем переданные uniform'ы varying vec2 vTextureCoord; // Координата uniform sampler2D uSampler; // Текстура на которую наложен фильтр (не используется) uniform vec2 viewResolution; // Разрешение вьюшки uniform vec2 rtSize; // Размер renderTarget uniform vec4 uLightPosition[CONST_LIGHTS_COUNT]; //x,y = координаты, z = размер uniform vec4 uLightColor[CONST_LIGHTS_COUNT]; //На всякий случай uniform sampler2D uShadowCastersTexture; // Отсюда мы будем брать данные -- есть препятствие или нет. const float PI = 3.14159265358979; const float STEPS = 256.0; const float THRESHOLD = .01; void main(void) { int lightnum = int(floor(vTextureCoord.y * float(CONST_LIGHTS_COUNT))); // Определяем номер источника света по Y vec2 lightPosition; float lightSize; for (int i = 0; i < CONST_LIGHTS_COUNT; i += 1) { // Определяем сам источник света по его номеру if (lightnum == i) { lightPosition = uLightPosition[i].xy / viewResolution; lightSize = uLightPosition[i].z / max(viewResolution.x, viewResolution.y); break; } } float dst = 1.0; // Считаем что препятствий нет for (float y = 0.0; y < STEPS; y += 1.0) { // И мелкими (с мелкостью (y / STEPS)) шагами идем во всех направлениях float distance = (y / STEPS); // Расстояния для теста float angle = vTextureCoord.x * (2.0 * PI); // Угол для теста // По полярным координатам вычисляем пиксель для теста vec2 coord = vec2(cos(angle) * distance, sin(angle) * distance); coord *= (max(viewResolution.x, viewResolution.y) / viewResolution); // Пропорции coord += lightPosition; // Прибавляем координаты источника coord = clamp(coord, 0., 1.); // Не выходим за пределы текстуры vec4 data = texture2D(uShadowCastersTexture, coord); // Находим пиксель if (data.a > THRESHOLD) { // Если есть препятствие, записываем расстояние и прекращаем поиск. dst = min(dst, distance); break; } } // Дистанция получается в пикселях, сохраняем её в отрезке 0..1 gl_FragColor = vec4(vec3(0.0), dst / lightSize); } Особо тут комментировать нечего, возможно я дополню чем-нибудь из вопросов в комментариях.
Должно получится вот такое загадочное изображение, однако именно так и выглядит наша карта теней, ведь она записана в альфа канале и наложена на сцену.
Шаг 4: По карте теней строим тени
Добавим новый файл в предзагрузку, теперь она будет выглядеть так:
PIXI.loader .add('background', 'img/maze.png') .add('glslShadowTexture', 'glsl/smap-shadow-texture.frag') .add('glslShadowCast', 'glsl/smap-shadow-cast.frag') .once('complete', setup) .load(); И, в функции createSMapFilter, снова копируем uniforms, на этот раз уже для второго шейдера:
var filterShadowCastUniforms = Object.keys(SMapFilter.uniforms).reduce(function (c, k) { c[k] = { type: SMapFilter.uniforms[k].type , value: SMapFilter.uniforms[k].value }; return c; }, {}); Дальше нам потребуется передать в него карту теней (которая содержится в renderTarget). Я не нашел как этого сделать, поэтому использую хак, представив renderTarget как Texture:
filterShadowCastUniforms.shadowMapChannel = { type: 'sampler2D', value: { baseTexture: { hasLoaded: true , _glTextures: [SMapFilter.renderTarget.texture] } } }; Создание шейдера:
SMapFilter.filterShadowCast = new PIXI.AbstractFilter( null , PIXI.loader.resources.glslShadowCast.data.replace(/CONST_LIGHTS_COUNT/g, CONST_LIGHTS_COUNT) , filterShadowCastUniforms ); Изменяем applyFilter:
SMapFilter.applyFilter = function (renderer, input, output) { SMapFilter.filterShadowTexture.applyFilter(renderer, input, SMapFilter.renderTarget, true); //SMapFilter.testFilter.applyFilter(renderer, SMapFilter.renderTarget, output); // будет заменен на второй шейдер. SMapFilter.filterShadowCast.applyFilter(renderer, input, output); }; Ещё раз, чтобы все понимали, что куда идет:
input — это текстура всей сцены, на которую будет наложено освещение;
output — она же;
SMapFilter.renderTarget — это карта теней.
Первый шейдер не использует input и пишет карту теней из uniform’а, второй шейдер использует и input и карту теней (в виде uniform’а).
Всё, осталось разобраться с glsl/smal-shadow-cast.frag:
precision mediump float; uniform sampler2D uSampler; varying vec2 vTextureCoord; uniform vec2 viewResolution; uniform sampler2D shadowMapChannel; uniform vec4 uAmbient; uniform vec4 uLightPosition[CONST_LIGHTS_COUNT]; uniform vec4 uLightColor[CONST_LIGHTS_COUNT]; const float PI = 3.14159265358979; // Вспомогательная функция для (функции) чтения карты теней vec4 takeSample(in sampler2D texture, in vec2 coord, in float light) { return step(light, texture2D(texture, coord)); } // Сама функция чтения карты теней (со сглаживанием!) vec4 blurFn(in sampler2D texture, in vec2 tc, in float light, in float iBlur) { float blur = iBlur / viewResolution.x; vec4 sum = vec4(0.0); sum += takeSample(texture, vec2(tc.x - 5.0*blur, tc.y), light) * 0.022657; sum += takeSample(texture, vec2(tc.x - 4.0*blur, tc.y), light) * 0.046108; sum += takeSample(texture, vec2(tc.x - 3.0*blur, tc.y), light) * 0.080127; sum += takeSample(texture, vec2(tc.x - 2.0*blur, tc.y), light) * 0.118904; sum += takeSample(texture, vec2(tc.x - 1.0*blur, tc.y), light) * 0.150677; sum += takeSample(texture, vec2(tc.x, tc.y), light) * 0.163053; sum += takeSample(texture, vec2(tc.x + 1.0*blur, tc.y), light) * 0.150677; sum += takeSample(texture, vec2(tc.x + 2.0*blur, tc.y), light) * 0.118904; sum += takeSample(texture, vec2(tc.x + 3.0*blur, tc.y), light) * 0.080127; sum += takeSample(texture, vec2(tc.x + 4.0*blur, tc.y), light) * 0.046108; sum += takeSample(texture, vec2(tc.x + 5.0*blur, tc.y), light) * 0.022657; return sum; } // Ок, теперь можно начать: void main() { // Изначально освещение у нас черное vec4 color = vec4(0.0, 0.0, 0.0, 1.0); // Вспомогательная переменная для чтения источника света. float lightLookupHalfStep = (1.0 / float(CONST_LIGHTS_COUNT)) * .5; // В цикле перебираем все источники света for (int lightNumber = 0; lightNumber < CONST_LIGHTS_COUNT; lightNumber += 1) { float lightSize = uLightPosition[lightNumber].z / max(viewResolution.x, viewResolution.y); float lightFalloff = min(0.99, uLightPosition[lightNumber].a); if (lightSize == 0.) { // Если размер нулевой, то продолжать смысла нет. continue; } vec2 lightPosition = uLightPosition[lightNumber].xy / viewResolution; vec4 lightColor = uLightColor[lightNumber]; // Результат для конкретного источника света vec3 lightLuminosity = vec3(0.0); // Координата Y этого источника на карте теней. float yCoord = float(lightNumber) / float(CONST_LIGHTS_COUNT) + lightLookupHalfStep; // Вектор от точки к источнику света vec2 toLight = vTextureCoord - lightPosition; // Пропорции toLight /= (max(viewResolution.x, viewResolution.y) / viewResolution); toLight /= lightSize; // Расстояние от точки до источника float light = length(toLight); // Угол от точки до источника (для координаты Х) float angleToPoint = atan(toLight.y, toLight.x); float angleCoordOnMap = angleToPoint / (2.0 * PI); vec2 samplePoint = vec2(angleCoordOnMap, yCoord); // Чем дальше от света -- тем больше размытия. float blur = smoothstep(0., 2., light); // Наконец смотрим, есть ли тень от этого источника и на сколько она размыта в данной точке float sum = blurFn(shadowMapChannel, samplePoint, light, blur).a; sum = max(sum, lightColor.a); lightLuminosity = lightColor.rgb * vec3(sum) * smoothstep(1.0, lightFalloff, light); // Прибавляем к общему освещению (в пикселе): color.rgb += lightLuminosity; } // Общее освещение color = max(color, uAmbient); // Пиксель который надо осветить vec4 base = texture2D(uSampler, vTextureCoord); // Освещаем умножением на корень из "освещенности" (по мне так красивее чем просто) gl_FragColor = vec4(base.rgb * sqrt(color.rgb), 1.0); } Сохраняем и вот, все работает:
Ну или можно переключится на ветку step4.
В заключение хочу сказать, что получил не то что хотел (хотелось крутые и простые тени, а получил Бесценный Опыт написания шейдеров), однако результат выглядит приемлимо и его можно где-нибудь использовать.
ссылка на оригинал статьи http://habrahabr.ru/post/272233/
Добавить комментарий