Skip to main content

2.11 渲染透明物体

当模型中某些物体的材质是半透明的，那么我们可以透过它看到其背后的物体。该节中，我们看看如何实现这个效果。

blend

为半透明材质开启Blend状态​

如果材质是半透明的，那么除了指定材质颜色，我们还需要指定它的不透明度，这个参数是在着色器中设置的。

const fs = `#version 300 es
precision mediump float;

uniform vec3 color;     
out vec4 fragColor;

void main() {
    // fragColor的第四个参数是不透明度
    fragColor = vec4(color, 0.8);
}`;

同时，在定义材质的时候，需要开启它的Blend状态

// 定义状态，在状态中开启了Blend
const blend = Blend({
    enabled: true
});

// 定义材质，使用了上面定义的状态
const material: JMaterial = {
    program: program,
    parameters: {
        color: clr3(0.2, 0.2, 0.7)
    },
    states: {
        blend: blend
    }
};

这个例子中，我们定义了三个渲染对象，它们有各自的颜色，都是半透明的，因此它们的材质都开启了Blend。

blend2

Blend的参数介绍​

下面我们了解一下Blend方法的原理，以及它具备了哪些参数。Blend是将source color（待混合的颜色）与destination color（已经在color buffer中的颜色）混合在一起。因为我们观察透明物体时感知到的颜色，其实就是物体本身的颜色与其背后物体的颜色的不同的强度的混合，因此二者的混合计算中，既需要指定source color与destination color各自的混合强度因子，也需要指定混合函数。混合强度因子的可选项如下：

  • ZERO：因子为0
  • ONE：因子等于1
  • SRC_COLOR：因子等于源颜色向量
  • ONE_MINUS_SRC_COLOR：因子等于1减去源颜色后得到的颜色值
  • DST_COLOR: 因子等于目标颜色向量
  • ONE_MINUS_DST_COLOR: 因子等于1减去目标颜色后得到的颜色值
  • SRC_ALPHA: 用源颜色的alpha值
  • ONE_MINUS_SRC_ALPHA: 使用1.0减去源颜色的alpha值作为因子
  • DST_ALPHA： 用目标颜色的alpha值
  • ONE_MINUS_DST_ALPHA：使用1.0减去目标颜色的alpha值作为因子
  • CONSTANT_COLOR：因子等于常数颜色向量
  • ONE_MINUS_CONSTANT_COLOR：因子等于1.0减去常数颜色后得到的颜色值
  • CONSTANT_ALPHA, 因子等于常数颜色的alpha值
  • ONE_MINUS_CONSTANT_ALPHA, 使用1.0减去常数颜色的alpha值作为因子
  • SRC_ALPHA_SATURATE，使用min(src_alpha, 1 - dst_alpha)

Blend中允许开发者指定srcFunc与dstFunc，也就是分别对source color与destination color指定混合模式。

混合函数的选项如下：

  • FUNC_ADD, 默认类型，将两个颜色相加
  • FUNC_SUBTRACT, 两个颜色相减
  • FUNC_REVERSE_SUBTRACT, 将两个颜色相减，但顺序相反
  • MIN, 取两个颜色中的最小值
  • MAX，取两个颜色中的最大值