526互联

Three.js 材质的 blending

发布时间 2023-10-26 11:57:15作者: 安安静静的码农

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