使用three.js实现各种滤镜效果

·  阅读 1222
使用three.js实现各种滤镜效果

前言

在three.js中实现各种滤镜效果,需要用到自定义着色器材质ShaderMaterial。

关于着色器的基础知识,我们在 用three.js写一个3D地球 一文中进行了介绍。这里就直接使用自定义着色器啦。

滤镜基础知识

WEBGL中的颜色表示法是RGBA,每一个像素点的颜色值由R、G、B、A 四个值 决定,其中每个分量的值都是范围在【0,1】之间的浮点数,例如,黑色是(0.0, 0.0, 0.0, 1.0),白色是(1.0, 1.0, 1.0, 1.0)。

three.js封装了WEBGL的许多实现细节,让开发3D应用变得简单,同时又开放了自定义着色器材质ShaderMaterial,让开发者可以自由地操作像素,实现各种定制的效果。

例如,通过自定义着色器,我们可以手动修改每个像素颜色值的四个分量值。下面我们还是以地球贴图为例。

用ShaderMaterial创建物体

我们用ShaderMaterial创建一个地球,代码如下。

//顶点着色器代码片段(在下面创建着色器材质时,作为参数传入)
var VSHADER_SOURCE = `
  varying vec2 v_Uv;    //顶点纹理坐标
  void main () {
    v_Uv = uv;
    gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
  }
`

//片元着色器代码片段(在下面创建着色器材质时,作为参数传入)
var FSHADER_SOURCE = `
  uniform sampler2D e_Texture;     //纹理图像
  varying vec2 v_Uv;               //片元纹理坐标
  void main () {
    gl_FragColor = texture2D( e_Texture, v_Uv );  //提取纹理图像的颜色值(纹素),并赋值给gl_FragColor
  }
`

//加载贴图纹理图像
var earthTexture = loader.load('./images/earth.png')

//创建着色器材质
var material = new THREE.ShaderMaterial({
  uniforms: {
    e_Texture: {
      value: earthTexture   //纹理图像
    }
  },
  // 指定顶点着色器
  vertexShader: VSHADER_SOURCE,
  // 指定片元着色器
  fragmentShader: FSHADER_SOURCE,
})

//创建集合体
var geometry = new THREE.SphereGeometry(20,30,30)

//创建物体
var sphere = new THREE.Mesh(geometry, material)

//将物体加到场景中
scene.add(sphere)
复制代码

在上面的片元着色器代码片段中,我们通过 texture2D函数 提取纹理图像某一点的颜色值(纹素),这个函数的返回值是一个四维向量,分别代表R、G、B、A 四个分量。

获取到纹素后,将其赋值给gl_FragColor,用于指定片元的颜色。

RGBA分量操作

其实,我们在获取纹素后,可以先对 R、G、B、A 这四个分量进行一些操作,再赋值给gl_FragColor。

例如,把每个纹素的绿色(G)分量置为0,修改片元着色器代码如下:

var FSHADER_SOURCE = 
 `uniform sampler2D e_Texture;
  varying vec2 v_Uv;
  void main () {
    vec4 textureColor = texture2D( e_Texture, v_Uv );
    float green = textureColor.g * 0.0;     //修改颜色值的绿色(G)分量为0
    gl_FragColor = vec4(textureColor.r, green, textureColor.b, 1.0);
  }`
复制代码

效果如下:

看,是不是已经有点滤镜的感觉了。

其实滤镜的本质,就是按照某种算法修改每个像素点的颜色值,更具体一点,就是修改 R、G、B、A 这四个分量值。

下面来实现一个常见的灰度滤镜吧。

灰度滤镜的原理和矩阵实现

基础原理和实现

灰度的原理,简单来说就是将一张彩色图片变成灰白色图片。

常见的灰度算法有三种:

  • 最大值法

  • 平均值法

  • 加权平均值法

下面要实践的是,加权平均值法。

具体的实现思路是,我们先将该图片的每个像素点的R、G、B分量值进行加权平均,然后将这个值作为每个像素点新的R、G、B分量值,具体公式如下:

其中 R、G、B 是原图片中的 R、G、B 通道的色值,V 是加权平均色值,a、b、c 是加权系数,满足 (a + b + c) = 1。

基于上面的原理,我们来实现一下。修改片元着色器代码:

var FSHADER_SOURCE = 
  `uniform sampler2D e_Texture;
  varying vec2 v_Uv;
  void main () {
    vec4 textureColor = texture2D( e_Texture, v_Uv );
    //计算加权平均值
    float w_a = textureColor.r * 0.3 + textureColor.g * 0.6 + textureColor.b * 0.1;
    gl_FragColor = vec4(w_a, w_a, w_a, 1.0);
  }`
复制代码

这里的加权系数分别为 a = 0.3, b = 0.6, c = 0.1,是因为人的视觉对 R、G、B 三色的敏感度不一样,所以三种颜色值的权重不一样,一般来说绿色最高,红色其次,蓝色最低。你可以修改成其他值,看看效果。

矩阵实现

如果要调整加权系数或者实现其他滤镜,就要再一次修改片元着色器代码。这样太麻烦了。

下面我们将借助矩阵来优化代码。

由于GLSL ES中的矩阵最多是四维的,所以,这里就这对 R、G、B 三个量进行矩阵变换,透明度alpha单独设置。

js代码修改如下:

//着色器材质
var material = new THREE.ShaderMaterial({
  uniforms: {
    e_Texture: {
      value: earthTexture
    },
    t_Matrix: {
      value: grayMatrix    //变换矩阵由js传入
    }
  },
  // 顶点着色器
  vertexShader: VSHADER_SOURCE,
  // 片元着色器
  fragmentShader: FSHADER_SOURCE
})
复制代码

片元着色器的代码也做相应的修改:

var FSHADER_SOURCE = 
 `uniform sampler2D e_Texture;
  uniform mat4 t_Matrix;     //接收变换矩阵
  varying vec2 v_Uv;
  void main () {
    vec4 textureColor = texture2D( e_Texture, v_Uv );
    //变换矩阵乘以 vec4(R,G,B,1)    --->vec4(R,G,B,1) 是齐次坐标,原本是n维的向量用一个n+1维向量来表示
    //vec4(R,G,B,1)第四个分量不是透明度
    vec4 transColor = t_Matrix * vec4(textureColor.r, textureColor.g, textureColor.b, 1.0); 
    //设置透明度
    transColor.a = 1.0;
    gl_FragColor = transColor;
  }`
复制代码

按照矩阵与向量的乘法,灰度滤镜的变换矩阵应该是下面这样:

但在js中传入的矩阵却是下面这样,OpenGL API接受的矩阵要求是列主序的,如果一个OpenGL的应用使用的是行主序的矩阵,那么在将矩阵传给OpenGL API前,需要先转换为列主序。我们这里就手动转置了。

参考资料:OpenGL中矩阵的行主序与列主序

使用矩阵,可以很好地抽象和复用。一个矩阵就代表一种变换,只要乘上这个矩阵,就意味着做了同样的变换,而当你要修正某种变换,就只用修改它对应的变换矩阵。

几种滤镜效果的实现

实现下面几种滤镜效果,其实就是使用了几种不同的矩阵。(值得注意的是,下面的变换矩阵也都是转置过后的列主序矩阵。要推导的话请将下面的矩阵先转置回行主序)

反色

实现反色,就是 R、G、B 每个分量对 1 取补。

变换矩阵:

var oppositeMatrix = new Float32Array([
   -1, 0, 0, 0,
   0, -1, 0, 0,
   0, 0, -1, 0,
   1, 1, 1, 1
])
复制代码

亮度

R、G、B 每个分量都乘上一个值p; p < 1 调暗,p = 1 原色, p > 1 调亮。

变换矩阵:(传入参数p,动态生成变换矩阵)

function genBrightMatrix (p) {
    return new Float32Array([
      p, 0, 0, 0,
      0, p, 0, 0,
      0, 0, p, 0,
      0, 0, 0, 1
    ])
}
复制代码

对比度

R、G、B 每个分量都乘上一个值p,然后加上 0.5 * (1 - p); p = 1 原色, p < 1 减弱对比度,p > 1 增强对比度。

基于矩阵的实现:(传入参数p,动态生成变换矩阵)

function genContrastMatrix (p) {
    var d = 0.5 * (1 - p)
    return new Float32Array([
      p, 0, 0, 0,
      0, p, 0, 0,
      0, 0, p, 0,
      d, d, d, 1
    ])
}
复制代码

饱和度

传入参数p,计算方法如下。p = 0 完全灰度化,p = 1 原色,p > 1 增强饱和度。

function genSaturateMatrix (p) {
    var rWeight = 0.3 * (1 - p)
    var gWeight = 0.6 * (1 - p)
    var bWeight = 0.1 * (1 - p)
    return new Float32Array([
    rWeight + p, rWeight, rWeight, 0,
    gWeight, gWeight + p, gWeight, 0,
    bWeight, bWeight, bWeight + p, 0,
    0, 0, 0, 1
    ])
}
复制代码

今天就到这里啦,这篇文章主要探讨了一些基础滤镜的原理和矩阵的初级用法。更多酷炫滤镜的算法在后面的文章再慢慢解锁,下次见!

参考

极客时间《跟月影学可视化》

分类:
前端