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

材质的混合模式。

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 混合方程设置为单个方程。

// blending:
//      NormalBlending
//      AdditiveBlending
//      SubtractiveBlending
//      MultiplyBlending
gl.blendEquation( gl.FUNC_ADD );// blending:
//      CustomBlending
gl.blendEquationSeparate(equationToGL[ blendEquation ],equationToGL[ blendEquationAlpha ]
);

混合方程的值:

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

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

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 分量的混合函数。

// 混合像素算法的函数
// sfactor: source 混合因子
// dfactor: destination 混合因子
gl.blendFunc(sfactor, dfactor)// sourceColor: vec4;
// color(RGBA) = (sourceColor * sfactor) + (destinationColor * dfactor)

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

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

混合因子的值:

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$, source 的 RGBA.
$R_D,G_D,B_D,A_D$, destination 的 RGBA.

Factor	RGB	A
Zero	$(0,0,0)$	0
One	$(1,1,1)$	1
SrcColor	$(R_S,G_S,B_S)$	$A_S$
SrcAlpha	$(A_S,A_S,A_S)$	$A_S$
SrcAlphaSaturate	$(f,f,f);f=min(A_S,1-A_D)$	$1$
DstColor	$(R_D,G_D,B_D)$	$A_D$
DstAlpha	$(A_D,A_D,A_D)$	$A_D$
OneMinusSrcColor	$(1,1,1) - (R_S, G_S, B_S) $	$A_S$
OneMinusSrcAlpha	$(1,1,1)-(A_S,A_S,A_S)$	$1-A_S$
OneMinusDstColor	$(1,1,1)-(R_D,G_D,B_D)$	$1-A_D$
OneMinusDstAlpha	$(1,1,1)-(A_D,A_D,A_D)$	$1-A_D$

4、live examples

WebGL “port” of this.

gl.blendFunc()
gl.blendFuncSeparate()