Three.js 材质的 blending

js 复制代码

// 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、blending

材质的混合模式。

js 复制代码

id = gl.BLEND

// NoBlending
gl.disable( id );

// NormalBlending
// AdditiveBlending
// SubtractiveBlending
// MultiplyBlending
// CustomBlending
gl.enable( id );

2、blendEquation

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

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

js 复制代码

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

// blending:
//      CustomBlending
gl.blendEquationSeparate(
    equationToGL[ blendEquation ],
    equationToGL[ blendEquationAlpha ]
);

混合方程的值:

js 复制代码

const equationToGL = {
    [ AddEquation ]: gl.FUNC_ADD,
    [ SubtractEquation ]: gl.FUNC_SUBTRACT,
    [ ReverseSubtractEquation ]: gl.FUNC_REVERSE_SUBTRACT
    [ MinEquation ]: gl.MIN
    [ MaxEquation ]: gl.MAX
};

source: 接下来要画的颜色

destination: 已经画在了帧缓冲区中的颜色

js 复制代码

AddEquation: source + destination
SubtractEquation: source - destination
ReverseSubtractEquation: destination - source
MinEquation: Math.min(source, destination)
MaxEquation: Math.max(source, destination)

3、blendFunc

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

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

js 复制代码

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

// sourceColor: vec4;
// color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor)

js 复制代码

// 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)

js 复制代码

// 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 ]
);

混合因子的值:

js 复制代码

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
};

R S , G S , B S , A S R_S, G_S, B_S, A_S RS,GS,BS,AS, source 的 RGBA.
R D , G D , B D , A D R_D, G_D, B_D, A_D RD,GD,BD,AD, destination 的 RGBA.

Factor	RGB	A
Zero	( 0 , 0 , 0 ) (0,0,0) (0,0,0)	0
One	( 1 , 1 , 1 ) (1,1,1) (1,1,1)	1
SrcColor	( R S , G S , B S ) (R_S, G_S, B_S) (RS,GS,BS)	A S A_S AS
SrcAlpha	( A S , A S , A S ) (A_S, A_S, A_S) (AS,AS,AS)	A S A_S AS
SrcAlphaSaturate	( f , f , f ) ; f = m i n ( A S , 1 − A D ) (f,f,f);f=min(A_S, 1 - A_D) (f,f,f);f=min(AS,1−AD)	1 1 1
DstColor	( R D , G D , B D ) (R_D, G_D, B_D) (RD,GD,BD)	A D {A_D} AD
DstAlpha	( A D , A D , A D ) (A_D, A_D, A_D) (AD,AD,AD)	A D {A_D} AD
OneMinusSrcColor	$(1,1,1) - (R_S, G_S, B_S)$	A S A_S AS
OneMinusSrcAlpha	( 1 , 1 , 1 ) − ( A S , A S , A S ) (1,1,1) - (A_S, A_S, A_S) (1,1,1)−(AS,AS,AS)	1 − A S 1-A_S 1−AS
OneMinusDstColor	( 1 , 1 , 1 ) − ( R D , G D , B D ) (1,1,1) - (R_D, G_D, B_D) (1,1,1)−(RD,GD,BD)	1 − A D 1-A_D 1−AD
OneMinusDstAlpha	( 1 , 1 , 1 ) − ( A D , A D , A D ) (1,1,1) - (A_D, A_D, A_D) (1,1,1)−(AD,AD,AD)	1 − A D 1-A_D 1−AD

4、live examples

WebGL "port" of this.

gl.blendFunc()
gl.blendFuncSeparate()