Реализация липкого эффекта с помощью шейдера (обработка 3)

Question

Реализация липкого эффекта с помощью шейдера (обработка 3)

Я пытаюсь повторить трюк веб-дизайна, известный как " эффект Gooey" (см. Его в прямом эфире здесь). Это методика применения SVG-фильтров к движущимся эллипсам для получения движения, похожего на каплю. Процесс довольно прост:

применить гауссово размытие
увеличить контраст только альфа-канала

Комбинация двух создает эффект блоба

Последний шаг (увеличение контрастности альфа-канала) обычно выполняется через "фильтр цветовой матрицы".

Цветовая матрица состоит из 5 столбцов (RGBA + смещение) и 4 строк.
Значения в первых четырех столбцах умножаются на исходные значения красного, зеленого, синего и альфа соответственно. Значение пятого столбца добавляется (смещение).

В CSS увеличить контраст альфа-канала так же просто, как вызвать SVG-фильтр и указать значение контраста (здесь 18):

<feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" />

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

colorvert.glsl

uniform mat4 transform;
attribute vec4 position;
attribute vec4 color;
varying vec4 vertColor;

uniform vec4 o=vec4(0, 0, 0, -9); 
uniform lowp mat4 colorMatrix = mat4(1.0, 0.0, 0.0, 0.0, 
                                     0.0, 1.0, 0.0, 0.0, 
                                     0.0, 0.0, 1.0, 0.0, 
                                     0.0, 0.0, 0.0, 60.0);


void main() {
  gl_Position = transform * position; 
  vertColor = (color * colorMatrix) + o  ;
}

colorfrag.glsl

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

varying vec4 vertColor;

void main() {
  gl_FragColor = vertColor;
}

ПРОБЛЕМА:

Цветовая матрица работает частично: изменение значений RGB влияет на цвета, но изменение альфа-значений (последняя строка) - нет!

При попытке объединить шейдер с гауссовым фильтром нарисованный эллипс остается размытым даже после того, как я установил контраст альфа-канала равным 60 (как в примере с кодовым блоком):

PShader colmat;

void setup() {
  size(200, 200, P2D);
  colmat = loadShader("colorfrag.glsl", "colorvert.glsl");
}

void draw() {
  background(100);
  shader(colmat);

  noStroke();
  fill(255, 30, 30);
  ellipse(width/2, height/2, 40, 40);
  filter(BLUR,6);
}

То же самое происходит, когда я реализую цветовую матрицу в гауссовом шейдере размытия @cansik (из библиотеки PostFX). Я вижу изменение цвета, но не альфа-контраст:

blurFrag.glsl

/ Adapted from:
// <a href="http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html" target="_blank" rel="nofollow">http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html</a>

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif

#define PROCESSING_TEXTURE_SHADER


uniform sampler2D texture;

uniform vec4 o=vec4(0, 0, 0, 0); 
uniform lowp mat4 colorMatrix = mat4(1, 0.0, 0.0, 0.0, 
                                     0.0, 1, 0.0, 0.0, 
                                     0.0, 0.0, 1, 0.0, 
                                     0, 0.0, 0.0, 60.0); //Alpha contrast set to 60


varying vec2 center;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }
  gl_FragColor = (avgValue / coefficientSum )  * colorMatrix;
}

настройка glBlendFunc и позволяющий glEnable(GL_BLEND) в основном файле.pde также не удалось решить проблему.

sketch.pde

import ch.bildspur.postfx.builder.*;
import ch.bildspur.postfx.pass.*;
import ch.bildspur.postfx.*;
import processing.opengl.*;
import com.jogamp.opengl.*;

PostFX fx;

void setup() {
    size(200, 200, P2D);
    fx = new PostFX(this); 
}

void draw() {
    background(100);
    GL gl = ((PJOGL)beginPGL()).gl.getGL();
    gl.glEnable(GL.GL_BLEND);
    gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);
    gl.glDisable(GL.GL_DEPTH_TEST);

    noStroke();
    fill(255, 30, 30);
    ellipse(width/2, height/2, 40, 40);
    fx.render().blur(80, 14).compose();
}

Вопросы:

Почему контраст альфа-канала не работает? Как я могу заставить это работать?
Что-то не так с тем, как я реализовал цветовую матрицу?
Знаете ли вы лучший способ реализации этого липкого эффекта?

Любая помощь приветствуется!

Спасибо

3

glsl shader processing colormatrix colormatrixfilter

Источник

user8452243 12 апр '18 в 22:15

2 ответа

Решение

К сожалению, я не могу отладить точную проблему, но у меня есть пара идей, которые, надеюсь, могут помочь вам добиться определенного прогресса:

Для более простого / более дешевого эффекта вы можете использовать расширенный фильтр
Вы можете найти другие шейдеры metaballs на shadertoy и немного подправить код, чтобы запустить его в Processing

Например, https://www.shadertoy.com/view/MlcGWn становится:

// https://www.shadertoy.com/view/MlcGWn

uniform float iTime;
uniform vec2 iResolution;

vec3 Sphere(vec2 uv, vec2 position, float radius)
{
    float dist = radius / distance(uv, position);
    return vec3(dist * dist);
}

void main()
{
    vec2 uv = 2.0 * vec2(gl_FragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;

    vec3 pixel = vec3(0.0, 0.0, 0.0);

    vec2 positions[4];
    positions[0] = vec2(sin(iTime * 1.4) * 1.3, cos(iTime * 2.3) * 0.4);
    positions[1] = vec2(sin(iTime * 3.0) * 0.5, cos(iTime * 1.3) * 0.6);
    positions[2] = vec2(sin(iTime * 2.1) * 0.1, cos(iTime * 1.9) * 0.8);
    positions[3] = vec2(sin(iTime * 1.1) * 1.1, cos(iTime * 2.6) * 0.7);

    for (int i = 0; i < 4; i++)
        pixel += Sphere(uv, positions[i], 0.22);

    pixel = step(1.0, pixel) * pixel;

    gl_FragColor = vec4(pixel, 1.0);
}

и в обработке:

PShader shader;

void setup(){
  size(900,900,P2D);

  shader = loadShader("metaballs.glsl");
  shader.set("iResolution",(float)width/2,(float)height/2);
}
void draw(){
  shader.set("iTime", millis() * 0.001);
  shader(shader);
  rect(0,0,width,height);
}

или https://www.shadertoy.com/view/ldtSRX

// https://www.shadertoy.com/view/ldtSRX

uniform vec2 iResolution;
uniform vec2 iMouse;
uniform float iTime;

struct Metaball{
    vec2 pos;
    float r;
    vec3 col;
};

vec4 calcball( Metaball ball, vec2 uv)
{
    float dst = ball.r / (pow(abs(uv.x - ball.pos.x), 2.) + pow(abs(uv.y - ball.pos.y), 2.));
    return vec4(ball.col * dst, dst);
}

vec3 doballs( vec2 uv )
{
    Metaball mouse;
    mouse.pos = iMouse.xy / iResolution.yy;
    mouse.r = .015;
    mouse.col = vec3(.5);

    Metaball mb1, mb2, mb3, mb4;
    mb1.pos = vec2(1.3, .55+.2*sin(iTime*.5)); mb1.r = .05; mb1.col = vec3(0., 1., 0.);
    mb2.pos = vec2(.6, .45); mb2.r = .02; mb2.col = vec3(0., .5, 1.);
    mb3.pos = vec2(.85, .65); mb3.r = .035; mb3.col = vec3(1., .2, 0.);
    mb4.pos = vec2(1.+.5*sin(iTime), .2); mb4.r = .02; mb4.col = vec3(1., 1., 0.);

    vec4 ball1 = calcball(mb1, uv);
    vec4 ball2 = calcball(mb2, uv);
    vec4 ball3 = calcball(mb3, uv);
    vec4 ball4 = calcball(mb4, uv);

    vec4 subball1 = calcball(mouse, uv);

    float res = ball1.a + ball2.a + ball3.a + ball4.a;
    res -= subball1.a;
    float threshold = res >= 1.5 ? 1. : 0.;

    vec3 color = (ball1.rgb + ball2.rgb + ball3.rgb + ball4.rgb - subball1.rgb) / res;
    color *= threshold;
    color = clamp(color, 0., 1.);
    return color;
}

#define ANTIALIAS 1
void main()
{
    vec2 uv = gl_FragCoord.xy / iResolution.yy;

    vec3 color = doballs(uv);

    #ifdef ANTIALIAS
    float uvs = .75 / iResolution.y;
    color *= .5;
    color += doballs(vec2(uv.x + uvs, uv.y))*.125;
    color += doballs(vec2(uv.x - uvs, uv.y))*.125;
    color += doballs(vec2(uv.x, uv.y + uvs))*.125;
    color += doballs(vec2(uv.x, uv.y - uvs))*.125;

    #if ANTIALIAS == 2
    color *= .5;
    color += doballs(vec2(uv.x + uvs*.85, uv.y + uvs*.85))*.125;
    color += doballs(vec2(uv.x - uvs*.85, uv.y + uvs*.85))*.125;
    color += doballs(vec2(uv.x - uvs*.85, uv.y - uvs*.85))*.125;
    color += doballs(vec2(uv.x + uvs*.85, uv.y - uvs*.85))*.125;
    #endif
    #endif

    gl_FragColor = vec4(color, 1.);
}

и в обработке:

PShader shader;
PVector mouse = new PVector();
void setup(){
  size(900,900,P2D);

  shader = loadShader("metaballs.glsl");
  shader.set("iResolution",(float)width/2,(float)height/2);
}
void draw(){
  mouse.set(mouseX,mouseY);
  shader.set("iMouse", mouse);
  shader.set("iTime", millis() * 0.001);
  shader(shader);
  rect(0,0,width,height);
}

0

Источник

user89766 16 апр '18 в 09:53

Другие вопросы по тегам glsl shader processing colormatrix colormatrixfilter

user8452243 16 апр '18 в 16:41 2018-04-16 16:41 · Accepted Answer · 2018-04-16 16:41

@noahbuddy из Processing Forum мог бы найти решение проблемы, поэтому я публикую его здесь.

Чтобы сохранить прозрачность с шейдерами или без них, используйте внеэкранный буфер (PGraphics). Например, сохранение изображения в формате PNG с прозрачным фоном.
Я удалил контрастную матрицу из размытия шейдера @cansik и вместо этого поместил ее в отдельный фильтр.

blurfrag.glsl

// Adapted from:
// <a href="http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html" target="_blank" rel="nofollow">http://callumhay.blogspot.com/2010/09/gaussian-blur-shader-glsl.html</a>

#ifdef GL_ES
precision mediump float;
precision mediump int;
#endif


#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;

// The inverse of the texture dimensions along X and Y
uniform vec2 texOffset;

varying vec4 vertColor;
varying vec4 vertTexCoord;

uniform int blurSize;       
uniform int horizontalPass; // 0 or 1 to indicate vertical or horizontal pass
uniform float sigma;        // The sigma value for the gaussian function: higher value means more blur
                            // A good value for 9x9 is around 3 to 5
                            // A good value for 7x7 is around 2.5 to 4
                            // A good value for 5x5 is around 2 to 3.5
                            // ... play around with this based on what you need <span class="Emoticon Emoticon1"><span>:)</span></span>

const float pi = 3.14159265;

void main() {  
  float numBlurPixelsPerSide = float(blurSize / 2); 

  vec2 blurMultiplyVec = 0 < horizontalPass ? vec2(1.0, 0.0) : vec2(0.0, 1.0);

  // Incremental Gaussian Coefficent Calculation (See GPU Gems 3 pp. 877 - 889)
  vec3 incrementalGaussian;
  incrementalGaussian.x = 1.0 / (sqrt(2.0 * pi) * sigma);
  incrementalGaussian.y = exp(-0.5 / (sigma * sigma));
  incrementalGaussian.z = incrementalGaussian.y * incrementalGaussian.y;

  vec4 avgValue = vec4(0.0, 0.0, 0.0, 0.0);
  float coefficientSum = 0.0;

  // Take the central sample first...
  avgValue += texture2D(texture, vertTexCoord.st) * incrementalGaussian.x;
  coefficientSum += incrementalGaussian.x;
  incrementalGaussian.xy *= incrementalGaussian.yz;

  // Go through the remaining 8 vertical samples (4 on each side of the center)
  for (float i = 1.0; i <= numBlurPixelsPerSide; i++) { 
    avgValue += texture2D(texture, vertTexCoord.st - i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    avgValue += texture2D(texture, vertTexCoord.st + i * texOffset * 
                          blurMultiplyVec) * incrementalGaussian.x;         
    coefficientSum += 2.0 * incrementalGaussian.x;
    incrementalGaussian.xy *= incrementalGaussian.yz;
  }

  gl_FragColor = avgValue / coefficientSum;
}

colfrag.glsl

#define PROCESSING_TEXTURE_SHADER

uniform sampler2D texture;
varying vec4 vertTexCoord;

uniform vec4 o = vec4(0, 0, 0, -7.0); 
uniform lowp mat4 colorMatrix = mat4(1.0, 0.0, 0.0, 0.0, 
                                     0.0, 1.0, 0.0, 0.0, 
                                     0.0, 0.0, 1.0, 0.0, 
                                     0.0, 0.0, 0.0, 18.0);

void main() {
  vec4 pix = texture2D(texture, vertTexCoord.st);

  vec4 color = (pix * colorMatrix) + o;
  gl_FragColor = color;
}

sketch.pde

PShader contrast, blurry;
PGraphics buf;

void setup() {
  size(200, 200, P2D);
  buf = createGraphics(width, height, P2D);

  contrast = loadShader("colfrag.glsl");
  blurry = loadShader("blurFrag.glsl");

  // Don't forget to set these
  blurry.set("sigma", 4.5);
  blurry.set("blurSize", 9);
}

void draw() {
  background(100);

  buf.beginDraw();
    // Reset transparency
    // Note, the color used here will affect your edges
    // even with zero for alpha
    buf.background(100, 0); // set to match main background

    buf.noStroke();
    buf.fill(255, 30, 30);
    buf.ellipse(width/2, height/2, 40, 40);
    buf.ellipse(mouseX, mouseY, 40, 40);

    blurry.set("horizontalPass", 1);
    buf.filter(blurry);
    blurry.set("horizontalPass", 0);
    buf.filter(blurry);
  buf.endDraw();

  shader(contrast);
  image(buf, 0,0, width,height);
}

Лично я думаю, что сладкое место где-то лежит

от 8 до 11 для альфа-контраста

от -7 до -9 для альфа-смещения

uniform vec4 o = vec4(0, 0, 0, -9.0); 
uniform lowp mat4 colorMatrix = mat4(1.0, 0.0, 0.0, 0.0, 
                                     0.0, 1.0, 0.0, 0.0, 
                                     0.0, 0.0, 1.0, 0.0, 
                                     1.0, 1.0, 1.0, 11.0);

между 10 и 15 для "сигма"

между 30 и 40 для "blurSize"

blurry.set("sigma", 14.5)
blurry.set("blurSize", 35)

Я кодировал двухмерные метаболлы, прежде чем использовать подписанные функции расстояния и алгоритмы марширующих квадратов, но считаю это решение наиболее эффективным. По производительности я могу отображать до 4500 шариков со скоростью 60 кадров в секунду на холсте 800x600 (протестировано на настольном компьютере imac начального уровня 2012 года в режиме Python).