Three.js 材质的 blending

Three.js 材质的 blending

// blending modesexport type Blending =| typeof NoBlending| typeof NormalBlending| typeof AdditiveBlending| typeof SubtractiveBlending| typeof MultiplyBlending| typeof CustomBlending;// custom blending destination factorsexport type BlendingDstFactor =| typeof ZeroFactor| typeof OneFactor| typeof SrcColorFactor| typeof OneMinusSrcColorFactor| typeof SrcAlphaFactor| typeof OneMinusSrcAlphaFactor| typeof DstAlphaFactor| typeof OneMinusDstAlphaFactor| typeof DstColorFactor| typeof OneMinusDstColorFactor;// custom blending equationsexport type BlendingEquation =| typeof AddEquation| typeof SubtractEquation| typeof ReverseSubtractEquation| typeof MinEquation| typeof MaxEquation;// custom blending src factorsexport const SrcAlphaSaturateFactor: 210;export type BlendingSrcFactor = typeof SrcAlphaSaturateFactor;// custom blending destination factorsexport 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// NoBlendinggl.disable( id );// NormalBlending// AdditiveBlending// SubtractiveBlending// MultiplyBlending// CustomBlendinggl.enable( id );

2、blendEquation

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

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

// blending://NormalBlending//AdditiveBlending//SubtractiveBlending//MultiplyBlendinggl.blendEquation( gl.FUNC_ADD );// blending://CustomBlendinggl.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 + destinationSubtractEquation: source - destinationReverseSubtractEquation: destination - sourceMinEquation: 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 = NormalBlendinggl.blendFuncSeparate(gl.SRC_ALPHA,gl.ONE_MINUS_SRC_ALPHA,gl.ONE,gl.ONE_MINUS_SRC_ALPHA);// blending = AdditiveBlendinggl.blendFunc( gl.SRC_ALPHA, gl.ONE );// blending = SubtractiveBlendinggl.blendFuncSeparate(gl.ZERO,gl.ONE_MINUS_SRC_COLOR,gl.ZERO,gl.ONE);// blending = MultiplyBlendinggl.blendFunc( gl.ZERO, gl.SRC_COLOR );// blending = CustomBlendinggl.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};

RS, GS, BS, AS R_S, G_S, B_S, A_SRS​,GS​,BS​,AS​, source 的 RGBA.
RD, GD, BD, AD R_D, G_D, B_D, A_DRD​,GD​,BD​,AD​, destination 的 RGBA.

4、live examples

WebGL “port” of this.

gl.blendFunc()
gl.blendFuncSeparate()