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
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.文章来源:https://www.toymoban.com/news/detail-732384.html
gl.blendFunc()
gl.blendFuncSeparate()文章来源地址https://www.toymoban.com/news/detail-732384.html
到了这里,关于Three.js 材质的 blending的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!