javascript - webgl简单图像效果

Question

我正在尝试使用 WebGL 创建图像滤镜。我找到了这个库WebGLImageFilter .我想要获得的滤镜效果是Rise Effect 来自CSSGram 。这是source code对于该过滤器。它基本上是这样做的:

• 应用亮度(1.05)
• 应用棕褐色(0.2)
• 应用对比度(0.9)
• 应用饱和(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 删除 1 个饱和度单位

据我所知，棕褐色滤镜不接受输入。无论您为棕褐色传递什么值，它都会使图片具有相同的棕褐色。

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 颜色矩阵，其中标识(保留颜色原样的矩阵)为

1 0 0 0 0
0 1 0 0 0
0 0 1 0 0 
0 0 0 1 0 

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

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 时，它是棕褐色矩阵。幸运的是，看起来有一个 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>