Merge pull request #8276 from bhouston/more_premultipliedalpha_modes

Additive, Subtractive, Multiply, Custom PremultipliedAlpha blend modes

examples/webgl_materials_transparency.html

@@ -101,6 +101,7 @@
 					metalness: 0.9,
 					roughness: 0.5,
 					shading: THREE.SmoothShading,
+					blending: THREE.PremultipliedAlphaNormalBlending,
 					transparent: true
 				} );
 

examples/webgl_tonemapping.html

@@ -106,7 +106,7 @@
 					roughness: 0.8,
 					shading: THREE.SmoothShading,
 					transparent: true,
-					blending: THREE.PremultipliedAlphaBlending
+					blending: THREE.PremultipliedAlphaNormalBlending
 				} );
 
 				var textureLoader = new THREE.TextureLoader();

src/Three.js

@@ -156,7 +156,11 @@ THREE.AdditiveBlending = 2;
 THREE.SubtractiveBlending = 3;
 THREE.MultiplyBlending = 4;
 THREE.CustomBlending = 5;
-THREE.PremultipliedAlphaBlending = 6;
+THREE.PremultipliedAlphaNormalBlending = 6;
+THREE.PremultipliedAlphaAdditiveBlending = 7;
+THREE.PremultipliedAlphaSubtractiveBlending = 8;
+THREE.PremultipliedAlphaMultiplyBlending = 9;
+THREE.PremultipliedAlphaCustomBlending = 10;
 
 // custom blending equations
 // (numbers start from 100 not to clash with other

src/materials/LineBasicMaterial.js

@@ -10,7 +10,7 @@
  *  linecap: "round",
  *  linejoin: "round",
  *
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -32,7 +32,7 @@ THREE.LineBasicMaterial = function ( parameters ) {
 	this.linecap = 'round';
 	this.linejoin = 'round';
 
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.vertexColors = THREE.NoColors;
 

src/materials/LineDashedMaterial.js

@@ -11,7 +11,7 @@
  *  dashSize: <float>,
  *  gapSize: <float>,
  *
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -35,7 +35,7 @@ THREE.LineDashedMaterial = function ( parameters ) {
 	this.dashSize = 3;
 	this.gapSize = 1;
 
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.vertexColors = THREE.NoColors;
 

src/materials/MeshBasicMaterial.js

@@ -20,7 +20,7 @@
  *  refractionRatio: <float>,
  *
  *  shading: THREE.SmoothShading,
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -61,7 +61,7 @@ THREE.MeshBasicMaterial = function ( parameters ) {
 	this.fog = true;
 
 	this.shading = THREE.SmoothShading;
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;

src/materials/MeshLambertMaterial.js

@@ -27,7 +27,7 @@
  *  reflectivity: <float>,
  *  refractionRatio: <float>,
  *
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -75,7 +75,7 @@ THREE.MeshLambertMaterial = function ( parameters ) {
 
 	this.fog = true;
 
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;

src/materials/MeshPhongMaterial.js

@@ -40,7 +40,7 @@
  *  refractionRatio: <float>,
  *
  *  shading: THREE.SmoothShading,
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -101,7 +101,7 @@ THREE.MeshPhongMaterial = function ( parameters ) {
 	this.fog = true;
 
 	this.shading = THREE.SmoothShading;
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;

src/materials/MeshStandardMaterial.js

@@ -41,7 +41,7 @@
  *  refractionRatio: <float>,
  *
  *  shading: THREE.SmoothShading,
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -104,7 +104,7 @@ THREE.MeshStandardMaterial = function ( parameters ) {
 	this.fog = true;
 
 	this.shading = THREE.SmoothShading;
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.wireframe = false;
 	this.wireframeLinewidth = 1;

src/materials/PointsMaterial.js

@@ -10,7 +10,7 @@
  *  size: <float>,
  *  sizeAttenuation: <bool>,
  *
- *  blending: THREE.PremultipliedAlphaBlending,
+ *  blending: THREE.PremultipliedAlphaNormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -33,7 +33,7 @@ THREE.PointsMaterial = function ( parameters ) {
 	this.size = 1;
 	this.sizeAttenuation = true;
 
-	this.blending = THREE.PremultipliedAlphaBlending;
+	this.blending = THREE.PremultipliedAlphaNormalBlending;
 
 	this.vertexColors = THREE.NoColors;
 

src/renderers/webgl/WebGLPrograms.js

@@ -178,7 +178,9 @@ THREE.WebGLPrograms = function ( renderer, capabilities ) {
 			toneMapping: renderer.toneMapping,
 			physicallyCorrectLights: renderer.physicallyCorrectLights,
 
-			premultipliedAlpha: ( material.blending === THREE.PremultipliedAlphaBlending ),
+			premultipliedAlpha: ( material.blending === THREE.PremultipliedAlphaNormalBlending ) || ( material.blending === THREE.PremultipliedAlphaAdditiveBlending ) ||
+				( material.blending === THREE.PremultipliedAlphaSubtractiveBlending ) || ( material.blending === THREE.PremultipliedAlphaMultiplyBlending ) || ( material.blending === THREE.PremultipliedAlphaCustomBlending ),
+				
 			alphaTest: material.alphaTest,
 			doubleSided: material.side === THREE.DoubleSide,
 			flipSided: material.side === THREE.BackSide

src/renderers/webgl/WebGLState.js

@@ -230,11 +230,26 @@ THREE.WebGLState = function ( gl, extensions, paramThreeToGL ) {
 				gl.blendEquation( gl.FUNC_ADD );
 				gl.blendFunc( gl.ZERO, gl.SRC_COLOR );
 
-			} else if ( blending === THREE.PremultipliedAlphaBlending ) {
+			} else if( blending === THREE.PremultipliedAlphaNormalBlending ) {
 
 				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
 				gl.blendFuncSeparate( gl.ONE, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA );
 
+			} else if( blending === THREE.PremultipliedAlphaAdditiveBlending ) {
+
+				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+				gl.blendFuncSeparate( gl.ONE, gl.ONE, gl.ONE, gl.ONE );
+
+			} else if( blending === THREE.PremultipliedAlphaSubtractiveBlending ) {
+
+				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+				gl.blendFuncSeparate( gl.ZERO, gl.ZERO, gl.ONE_MINUS_SRC_COLOR, gl.ONE_MINUS_SRC_ALPHA );
+
+			} else if( blending === THREE.PremultipliedAlphaMultiplyBlending ) {
+
+				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+				gl.blendFuncSeparate( gl.ZERO, gl.ZERO, gl.SRC_COLOR, gl.SRC_ALPHA );
+
 			} else {
 
 				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
@@ -246,7 +261,7 @@ THREE.WebGLState = function ( gl, extensions, paramThreeToGL ) {
 
 		}
 
-		if ( blending === THREE.CustomBlending ) {
+		if ( blending === THREE.CustomBlending || blending === THREE.PremultipliedAlphaCustomBlending ) {
 
 			blendEquationAlpha = blendEquationAlpha || blendEquation;
 			blendSrcAlpha = blendSrcAlpha || blendSrc;