泳帽什么材质的好,pe材质

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

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.

FactorRGBAZero ( 0 , 0 , 0 ) (0,0,0) (0,0,0)0One ( 1 , 1 , 1 ) (1,1,1) (1,1,1)1SrcColor ( 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);fmin(A_S, 1 - A_D) (f,f,f);fmin(AS​,1−AD​) 1 1 1DstColor ( 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()