Question

我正在尝试使用WebGL创建图像过滤器。我找到了这个库WebGLImageFilter。我想要的过滤效果是Rise Effect 来自CSSGram。以下是该过滤器的source code。它基本上是这样的：

申请brightness(1.05)
申请sepia(0.2)
申请contrast(0.9)
申请saturate(0.9)

在给定顺序中，所以我使用我提到的库复制它。

const image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://i.imgur.com/TSiyiJv.jpg";

image.onload = function() {
  try {
    var filter = new WebGLImageFilter();
  }
  catch( err ) {
    console.log(err)
  }

  filter.addFilter('brightness',1.05);
  filter.addFilter('sepia',0.2);
  filter.addFilter('contrast',0.9);
  filter.addFilter('saturation',0.9);
  
  var filteredImage = filter.apply(image);
  document.body.appendChild(filteredImage);
}

<script src="https://cdn.rawgit.com/phoboslab/WebGLImageFilter/e0eee0cd/webgl-image-filter.js"></script>

但这会产生与上述效果截然不同的图像效果。所以我尝试单独应用每个效果，每个效果都很完美但是当我将它们组合起来时，我得到的效果与我想要达到的效果不同。可能是什么原因？

Answer 1

您正在使用的库不会使用与输入相同的值。

例如，对于饱和度，CSS饱和度取0到1的值。换句话说，0 =没有饱和度，1 =完全饱和度，因为您链接的库取值为更改饱和度的正值或负值。换句话说，0 =不改变饱和度。 1 =应用1个饱和度（默认情况下库的数量是多少）和-1删除一个饱和度单位

此外，AFAIK棕褐色过滤器不接受输入。无论你为棕褐色传递什么价值，它都只会使图片与棕褐色相同。

const image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://i.imgur.com/TSiyiJv.jpg";

image.onload = function() {
  for (var i = 0; i < 1; i += 0.25) {
    var filter = new WebGLImageFilter();
    filter.addFilter('sepia', i);
    var filteredImage = filter.apply(image);
    document.body.appendChild(filteredImage);
  }
}

canvas { width: 100px; margin: 5px }

<script src="https://cdn.rawgit.com/phoboslab/WebGLImageFilter/e0eee0cd/webgl-image-filter.js"></script>

在库中查看大多数过滤器都基于5x4颜色矩阵，其中标识（保留颜色的矩阵）是

对于棕褐色，它只是硬编码为

0.393, 0.7689999, 0.18899999, 0, 0,
0.349, 0.6859999, 0.16799999, 0, 0,
0.272, 0.5339999, 0.13099999, 0, 0,
0,0,0,1,0

使用的着色器看起来像这样

precision highp float;  
varying vec2 vUv;  
uniform sampler2D texture;  
uniform float m[20];  

void main(void) {  
  vec4 c = texture2D(texture, vUv);  
  gl_FragColor.r = m[0] * c.r + m[1] * c.g + m[2] * c.b + m[3] * c.a + m[4];  
  gl_FragColor.g = m[5] * c.r + m[6] * c.g + m[7] * c.b + m[8] * c.a + m[9];  
  gl_FragColor.b = m[10] * c.r + m[11] * c.g + m[12] * c.b + m[13] * c.a + m[14];  
  gl_FragColor.a = m[15] * c.r + m[16] * c.g + m[17] * c.b + m[18] * c.a + m[19];  
}

如果我理解正确，请阅读跨越棕褐色的行，意味着

new red = 39% red, 77% green, 19% blue
new green = 35% red, 69% green, 17% blue
new blue = 27% red, 53% green, 13% blue
new alpha = alpha

所以实际上能够设置你需要的数量，当amount = 0时它是单位矩阵，当amount = 1时是sepia矩阵。幸运的是，它看起来像是colorMatrix过滤器你可以传入你自己的矩阵。我们来试试吧

const identity = [
  1, 0, 0, 0, 0,
  0, 1, 0, 0, 0,
  0, 0, 1, 0, 0,
  0, 0, 0, 1, 0,
];

const sepia = [
	0.393, 0.7689999, 0.18899999, 0, 0,
	0.349, 0.6859999, 0.16799999, 0, 0,
	0.272, 0.5339999, 0.13099999, 0, 0,
	0,0,0,1,0,
];

const image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://i.imgur.com/TSiyiJv.jpg";

image.onload = function() {
  for (var i = 0; i <= 1; i += 0.25) {
    var filter = new WebGLImageFilter();
    filter.addFilter('colorMatrix', mix(identity, sepia, i));
    var filteredImage = filter.apply(image);
    document.body.appendChild(filteredImage);
  }
}

function mix(m1, m2, amount) {
  return m1.map((a, ndx) => {
    const b = m2[ndx];
    return a + (b - a) * amount;
  });
}

canvas { width: 100px; margin: 5px }

<script src="https://cdn.rawgit.com/phoboslab/WebGLImageFilter/e0eee0cd/webgl-image-filter.js"></script>

哪个似乎有用？

const identity = [
  1, 0, 0, 0, 0,
  0, 1, 0, 0, 0,
  0, 0, 1, 0, 0,
  0, 0, 0, 1, 0,
];

const sepia = [
	0.393, 0.7689999, 0.18899999, 0, 0,
	0.349, 0.6859999, 0.16799999, 0, 0,
	0.272, 0.5339999, 0.13099999, 0, 0,
	0,0,0,1,0,
];

const image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://cdn.rawgit.com/una/CSSgram/6f21810a/site/img/atx.jpg";

image.onload = function() {
  try {
    var filter = new WebGLImageFilter();
  }
  catch( err ) {
    console.log(err)
  }

  filter.addFilter('brightness',-0.05); // 1.05);
  // filter.addFilter('sepia',0.2);
  filter.addFilter('colorMatrix', mix(identity, sepia, 0.2));
  filter.addFilter('contrast', -0.1); // 0.9);
  filter.addFilter('saturation', -0.1); //0.9);
  
  var filteredImage = filter.apply(image);
  document.body.appendChild(image);
  document.body.appendChild(filteredImage);
}

function mix(m1, m2, amount) {
  return m1.map((a, ndx) => {
    const b = m2[ndx];
    return a + (b - a) * amount;
  });
}

img, canvas { 
  width: 300px;
  margin: 5px;
}

<script src="https://cdn.rawgit.com/phoboslab/WebGLImageFilter/e0eee0cd/webgl-image-filter.js"></script>

webgl简单图像效果

1 个答案: