简介JavaScriptWebGL使用图像拼图提到两张图像是叠加的。默认情况下，即使有透明区域，也不会被透视。现在看看这个透明处理。OriginMyGitHub是关于透明度的。在透明度方面，Alpha通道负责颜色编码。透明度存储方式有：PremultipliedAlpha：表示颜色信息在存储时会乘以透明度信息和RGB。例如RGB为(1,1,1)，透明度为0.5，则存储为：(0.5,0.5,0.5,0.5)。Non-premultipliedAlpha：表示RGB和透明度信息分开存储，不会相乘。例如RGB为(1,1,1)，透明度为0.5，则存储为：(1,1,1,0.5)WebGL纹理预处理使用pixelStorei方法指定颜色透明度处理方式。如果你想使用PremultipliedAlpha方法：gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL,true);WebGL透明度处理方法之一是使用alpha混合。Alpha混合Alpha混合是使用alpha值（RGBA中的A）混合两个或多个对象的颜色的过程。在这种绘制多个纹理并重叠的场景中，假设先绘制纹理C，然后绘制纹理D，则纹理D是源颜色，纹理C是目标颜色。要使用这个功能，首先启用：gl.enable(gl.BLEND);然后指定混合方法：blendEquationblendEquationSeparateblendFuncblendFuncSeparateblendEquationvoidblendEquation(enummode)mode值：FUNC_ADD：添加源颜色分量和目标颜色分量。FUNC_SUBTRACT：从源颜色分量中减去目标颜色分量。FUNC_REVERSE_SUBTRACT：目标颜色分量减去源颜色分量。此方法仅指定混合方法。如果想看到最终效果，需要配合blendFunc或blendFuncSeparate方法使用。查看本文底部的伪代码逻辑将加深您的理解。这是一个例子。blendEquationSeparatevoidblendEquationSeparate(enummodeRGB,enummodeAlpha)这个方法的两个参数的值和blendEquation方法一样，不同的是颜色被分成两个独立的部分，RGB和A。blendFuncvoidblendFunc(枚举因子，枚举因子）；sfactor：常量，源色在混合色中的权重因子，比dfactorSRC_ALPHA_SATURATE多一个值。dfactor：常数，目标颜色在混合颜色中的权重因子。混合色的计算方法为：混合色=源颜色*sfactor+目标颜色*dfactor这里的计算是针对每个颜色分量的，下面设置S代码源颜色，D代表目标颜色，每个分量表示通过小写的rgba，我们看一下权重因子部分的常数值：常数R分量G分量B分量A分量ZERO0000ONE1111SRC_COLORS.rS.gS.bS.aONE_MINUS_SRC_COLOR(1-S.r)(1-S.g)(1-S.b)(1-S.a)DST_COLORD。rD.gD.bD.aONE_MINUS_DST_COLOR(1-D.r)(1-D.g)(1-D.b)(1-D.a)SRC_ALPHAS.aS.aS.aS.aONE_MINUS_SRC_ALPHA(1-S.a)(1-S.a)(1-S.a)(1-S.a)DST_ALPHAD.aD.aD.aD.ONE_MINUS_DST_ALPHA(1-D.a)(1-D.a)(1-D.a)(1-D.a)和blendColor(red,green,blue,alpha)的常量值：常数R分量G分量B分量A分量CONSTANT_COLORredgreenbluealphaONE_MINUS_CONSTANT_COLOR(1-red)(1-green)(1-blue)(1-alpha)CONSTANT_ALPHAalphaalphaalphaalphaONE_MINUS_CONSTANT_ALPHA(1-alpha)(1-alpha)(1-)(1-alpha)如果不使用blendColor指定组件，也可以使用这些常量，因为有默认值：gl.getParameter(gl.BLEND_COLOR)//默认对应的组件都是0，第一个参数的值为SRC_ALPHA_SATURATE：常量R分量G分量B分量A分量SRC_ALPHA_SATURATEmin(S.a,1-D.a)min(S.a,1-D.a)min(S.a,1-D.a)1以下是示例：不使用blendColor方法的示例。使用blendColor方法的示例。blendFuncSeparatevoidblendFuncSeparate(enumsrcRGB,enumdstRGB,enumsrcAlpha,enumdstAlpha)这个方法参数值和blendFunc方法参数值是一样的，不同的是颜色被分成两个独立的部分，RGB和A。参考资料WebGL绘图详解七：BlendTextureMapsTextureMappingUsingImagesWebGLandAlphaTransparency(andAlphaBlending)WEBGL,BLENDING,ANDWHYYOUPROBABLYDOINGITWRONG
