Three.js 材质的 blending

Three.js 材质的 blending

// blending modes
export type Blending =
    | typeof NoBlending
    | typeof NormalBlending
    | typeof AdditiveBlending
    | typeof SubtractiveBlending
    | typeof MultiplyBlending
    | typeof CustomBlending;

// custom blending destination factors
export type BlendingDstFactor =
    | typeof ZeroFactor
    | typeof OneFactor
    | typeof SrcColorFactor
    | typeof OneMinusSrcColorFactor
    | typeof SrcAlphaFactor
    | typeof OneMinusSrcAlphaFactor
    | typeof DstAlphaFactor
    | typeof OneMinusDstAlphaFactor
    | typeof DstColorFactor
    | typeof OneMinusDstColorFactor;

// custom blending equations
export type BlendingEquation =
    | typeof AddEquation
    | typeof SubtractEquation
    | typeof ReverseSubtractEquation
    | typeof MinEquation
    | typeof MaxEquation;

// custom blending src factors
export const SrcAlphaSaturateFactor: 210;
export type BlendingSrcFactor = typeof SrcAlphaSaturateFactor;

// custom blending destination factors
export type BlendingDstFactor =
    | typeof ZeroFactor
    | typeof OneFactor
    | typeof SrcColorFactor
    | typeof OneMinusSrcColorFactor
    | typeof SrcAlphaFactor
    | typeof OneMinusSrcAlphaFactor
    | typeof DstAlphaFactor
    | typeof OneMinusDstAlphaFactor
    | typeof DstColorFactor
    | typeof OneMinusDstColorFactor;

class Material {
  blending: Blending;

  blendEquation: BlendingEquation;
  blendEquationAlpha: BlendingEquation;

  blendDst: BlendingDstFactor;
  blendDstAlpha: BlendingDstFactor;

  blendSrc: BlendingSrcFactor | BlendingDstFactor;
  blendSrcAlpha: BlendingSrcFactor | BlendingDstFactor;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

1、blending

材质的混合模式。

id = gl.BLEND

// NoBlending
gl.disable( id );

// NormalBlending
// AdditiveBlending
// SubtractiveBlending
// MultiplyBlending
// CustomBlending
gl.enable( id );
1
2
3
4
5
6
7
8
9
10
11

2、blendEquation

混合公式确定如何将新像素与 中 WebGLFramebuffer 已有的像素组合。

混合方程的API:
gl.blendEquationSeparate: 用于分别设置 RGB 混合方程和 alpha 混合方程
gl.blendEquation: RGB 混合方程和 alpha 混合方程设置为单个方程。

// blending:
//      NormalBlending
//      AdditiveBlending
//      SubtractiveBlending
//      MultiplyBlending
gl.blendEquation( gl.FUNC_ADD );

// blending:
//      CustomBlending
gl.blendEquationSeparate(
    equationToGL[ blendEquation ],
    equationToGL[ blendEquationAlpha ]
);
1
2
3
4
5
6
7
8
9
10
11
12
13

混合方程的值:

const equationToGL = {
    [ AddEquation ]: gl.FUNC_ADD,
    [ SubtractEquation ]: gl.FUNC_SUBTRACT,
    [ ReverseSubtractEquation ]: gl.FUNC_REVERSE_SUBTRACT
    [ MinEquation ]: gl.MIN
    [ MaxEquation ]: gl.MAX
};
1
2
3
4
5
6
7

source: 接下来要画的颜色
destination: 已经画在了帧缓冲区中的颜色

AddEquation: source + destination
SubtractEquation: source - destination
ReverseSubtractEquation: destination - source
MinEquation: Math.min(source, destination)
MaxEquation: Math.max(source, destination)
1
2
3
4
5

3、blendFunc

用于混合像素算法的函数。

混合函数API:
gl.blendFunc: RGB 和 alpha 设置为单个混合函数。
gl.blendFuncSepar: 分别混合 RGB 和 alpha 分量的混合函数。

// 混合像素算法的函数
// sfactor: source 混合因子
// dfactor: destination 混合因子
gl.blendFunc(sfactor, dfactor)

// sourceColor: vec4;
// color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor)
1
2
3
4
5
6
7

// srcRGB: source RGB 混合因子
// dstRGB: destination RGB 混合因子
// dstRGB: source A 混合因子
// dstRGB: dstAlpha RGB 混合因子
blendFuncSeparate(srcRGB, dstRGB, srcAlpha, dstAlpha)

// sourceColor: vec3;
// sourceAlpha: float;
// color(RGB) = (sourceColor * srcRGB) + (destinationColor * dstRGB)
// color(A) = (sourceAlpha * srcAlpha) + (destinationAlpha * dstAlpha)
1
2
3
4
5
6
7
8
9
10

// blending = NormalBlending
gl.blendFuncSeparate(
    gl.SRC_ALPHA,
    gl.ONE_MINUS_SRC_ALPHA,
    gl.ONE,
    gl.ONE_MINUS_SRC_ALPHA
);

// blending = AdditiveBlending
gl.blendFunc( gl.SRC_ALPHA, gl.ONE );

// blending = SubtractiveBlending
gl.blendFuncSeparate(
    gl.ZERO,
    gl.ONE_MINUS_SRC_COLOR,
    gl.ZERO,
    gl.ONE
);

// blending = MultiplyBlending
gl.blendFunc( gl.ZERO, gl.SRC_COLOR );

// blending = CustomBlending
gl.blendFuncSeparate(
    factorToGL[ blendSrc ],
    factorToGL[ blendDst ],
    factorToGL[ blendSrcAlpha ],
    factorToGL[ blendDstAlpha ]
);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

混合因子的值:

const factorToGL = {
    [ ZeroFactor ]: gl.ZERO,
    [ OneFactor ]: gl.ONE,

    [ SrcColorFactor ]: gl.SRC_COLOR,
    [ SrcAlphaFactor ]: gl.SRC_ALPHA,
    [ SrcAlphaSaturateFactor ]: gl.SRC_ALPHA_SATURATE,

    [ DstColorFactor ]: gl.DST_COLOR,
    [ DstAlphaFactor ]: gl.DST_ALPHA,

    [ OneMinusSrcColorFactor ]: gl.ONE_MINUS_SRC_COLOR,
    [ OneMinusSrcAlphaFactor ]: gl.ONE_MINUS_SRC_ALPHA,
    [ OneMinusDstColorFactor ]: gl.ONE_MINUS_DST_COLOR,
    [ OneMinusDstAlphaFactor ]: gl.ONE_MINUS_DST_ALPHA
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$R_S,G_S,B_S,A_S$, source 的 RGBA.
$R_D,G_D,B_D,A_D$, destination 的 RGBA.

4、live examples

WebGL “port” of this.

gl.blendFunc()
gl.blendFuncSeparate()