Reverted to material.premultipliedAlpha approach. See #8276.

examples/webgl_materials_transparency.html

@@ -54,9 +54,8 @@
 
 			var container, stats;
 			var params = {
-				opacity: 0.2,
 				roughness: 1.0,
-				bumpScale: 0.3
+				opacity: 0.5
 			};
 			var camera, scene, renderer, controls, objects = [];
 			var composer;
@@ -79,29 +78,25 @@
 
 				standardMaterial = new THREE.MeshStandardMaterial( {
 					map: null,
-					bumpScale: - 0.05,
-					color: 0x0304ff,
 					metalness: 0.9,
-					roughness: 0.5,
+					roughness: 1.0,
 					shading: THREE.SmoothShading,
 					blending: THREE.NormalBlending,
 					transparent: true
 				} );
 				var geometry = new THREE.SphereGeometry( 18, 30, 30 );
 				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
-				torusMesh1.position.x = 20.0;
+				torusMesh1.position.x = - 20.0;
 				torusMesh1.castShadow = true;
 				scene.add( torusMesh1 );
 				objects.push( torusMesh1 );
 
 				standardMaterialPremultiplied = new THREE.MeshStandardMaterial( {
 					map: null,
-					bumpScale: - 0.05,
-					color: 0x0304ff,
 					metalness: 0.9,
-					roughness: 0.5,
+					roughness: 1.0,
 					shading: THREE.SmoothShading,
-					blending: THREE.PremultipliedAlphaNormalBlending,
+					premultipliedAlpha: true,
 					transparent: true
 				} );
 
@@ -114,17 +109,15 @@
 					map.repeat.set( 2, 2 );
 					standardMaterial.map = map;
 					standardMaterial.roughnessMap = map;
-					//standardMaterial.bumpMap = map;
 					standardMaterial.needsUpdate = true;
 					standardMaterialPremultiplied.map = map;
 					standardMaterialPremultiplied.roughnessMap = map;
-					//standardMaterialPremultiplied.bumpMap = map;
 					standardMaterialPremultiplied.needsUpdate = true;
 
 				} );
 
 				var torusMesh2 = new THREE.Mesh( geometry, standardMaterialPremultiplied );
-				torusMesh2.position.x = - 20.0;
+				torusMesh2.position.x = 20.0;
 				torusMesh2.castShadow = true;
 				scene.add( torusMesh2 );
 				objects.push( torusMesh2 );
@@ -152,7 +145,7 @@
 				var spotLight = new THREE.SpotLight( 0xffffff );
 				spotLight.position.set( 50, 100, 50 );
 				spotLight.angle = Math.PI / 7;
-				spotLight.penumbra = 0.8
+				spotLight.penumbra = 0.8;
 				spotLight.intensity = 5;
 				spotLight.castShadow = true;
 				scene.add( spotLight );
@@ -190,7 +183,6 @@
 				var gui = new dat.GUI();
 
 				gui.add( params, 'roughness', 0, 1 );
-				gui.add( params, 'bumpScale', - 1, 1 );
 				gui.add( params, 'opacity', 0, 1 );
 				gui.open();
 
@@ -229,9 +221,6 @@
 					standardMaterial.roughness = params.roughness;
 					standardMaterialPremultiplied.roughness = params.roughness;
 
-					standardMaterial.bumpScale = - 0.05 * params.bumpScale;
-					standardMaterialPremultiplied.bumpScale = - 0.05 * params.bumpScale;
-
 					standardMaterial.opacity = params.opacity;
 					standardMaterialPremultiplied.opacity = params.opacity;
 

examples/webgl_tonemapping.html

@@ -105,8 +105,8 @@
 					metalness: 0.9,
 					roughness: 0.8,
 					shading: THREE.SmoothShading,
-					transparent: true,
-					blending: THREE.PremultipliedAlphaNormalBlending
+					premultipliedAlpha: true,
+					transparent: true
 				} );
 
 				var textureLoader = new THREE.TextureLoader();

src/Three.js

@@ -156,11 +156,6 @@ THREE.AdditiveBlending = 2;
 THREE.SubtractiveBlending = 3;
 THREE.MultiplyBlending = 4;
 THREE.CustomBlending = 5;
-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.PremultipliedAlphaNormalBlending,
+ *  blending: THREE.NormalBlending,
  *  depthTest: <bool>,
  *  depthWrite: <bool>,
  *
@@ -32,7 +32,7 @@ THREE.LineBasicMaterial = function ( parameters ) {
 	this.linecap = 'round';
 	this.linejoin = 'round';
 
-	this.blending = THREE.PremultipliedAlphaNormalBlending;
+	this.blending = THREE.NormalBlending;
 
 	this.vertexColors = THREE.NoColors;
 

src/materials/LineDashedMaterial.js

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

src/materials/Material.js

@@ -39,6 +39,7 @@ THREE.Material = function () {
 	this.polygonOffsetUnits = 0;
 
 	this.alphaTest = 0;
+	this.premultipliedAlpha = false;
 
 	this.overdraw = 0; // Overdrawn pixels (typically between 0 and 1) for fixing antialiasing gaps in CanvasRenderer
 
@@ -194,6 +195,7 @@ THREE.Material.prototype = {
 		if ( this.opacity < 1 ) data.opacity = this.opacity;
 		if ( this.transparent === true ) data.transparent = this.transparent;
 		if ( this.alphaTest > 0 ) data.alphaTest = this.alphaTest;
+		if ( this.premultipliedAlpha === true ) data.premultipliedAlpha = this.premultipliedAlpha;
 		if ( this.wireframe === true ) data.wireframe = this.wireframe;
 		if ( this.wireframeLinewidth > 1 ) data.wireframeLinewidth = this.wireframeLinewidth;
 
@@ -267,6 +269,8 @@ THREE.Material.prototype = {
 
 		this.alphaTest = source.alphaTest;
 
+		this.premultipliedAlpha = source.premultipliedAlpha;
+
 		this.overdraw = source.overdraw;
 
 		this.visible = source.visible;

src/materials/MeshBasicMaterial.js

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

src/materials/MeshDepthMaterial.js

@@ -5,10 +5,6 @@
  * parameters = {
  *  opacity: <float>,
  *
- *  blending: THREE.NormalBlending,
- *  depthTest: <bool>,
- *  depthWrite: <bool>,
- *
  *  wireframe: <boolean>,
  *  wireframeLinewidth: <float>
  * }

src/materials/MeshLambertMaterial.js

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

src/materials/MeshNormalMaterial.js

@@ -4,10 +4,6 @@
  * parameters = {
  *  opacity: <float>,
  *
- *  blending: THREE.NormalBlending,
- *  depthTest: <bool>,
- *  depthWrite: <bool>,
- *
  *  wireframe: <boolean>,
  *  wireframeLinewidth: <float>
  * }

src/materials/MeshPhongMaterial.js

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

src/materials/MeshStandardMaterial.js

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

src/materials/PointsMaterial.js

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

src/materials/ShaderMaterial.js

@@ -9,9 +9,6 @@
  *  vertexShader: <string>,
  *
  *  shading: THREE.SmoothShading,
- *  blending: THREE.NormalBlending,
- *  depthTest: <bool>,
- *  depthWrite: <bool>,
  *
  *  wireframe: <boolean>,
  *  wireframeLinewidth: <float>,

src/materials/SpriteMaterial.js

@@ -6,10 +6,6 @@
  *  opacity: <float>,
  *  map: new THREE.Texture( <Image> ),
  *
- *  blending: THREE.NormalBlending,
- *  depthTest: <bool>,
- *  depthWrite: <bool>,
- *
  *	uvOffset: new THREE.Vector2(),
  *	uvScale: new THREE.Vector2(),
  *

src/renderers/WebGLRenderer.js

@@ -1590,7 +1590,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		if ( material.transparent === true ) {
 
-			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha );
+			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha );
 
 		} else {
 

src/renderers/webgl/WebGLPrograms.js

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

src/renderers/webgl/WebGLState.js

@@ -23,6 +23,7 @@ THREE.WebGLState = function ( gl, extensions, paramThreeToGL ) {
 	var currentBlendEquationAlpha = null;
 	var currentBlendSrcAlpha = null;
 	var currentBlendDstAlpha = null;
+	var currentPremultipledAlpha = false;
 
 	var currentDepthFunc = null;
 	var currentDepthWrite = null;
@@ -197,7 +198,7 @@ THREE.WebGLState = function ( gl, extensions, paramThreeToGL ) {
 
 	};
 
-	this.setBlending = function ( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha ) {
+	this.setBlending = function ( blending, blendEquation, blendSrc, blendDst, blendEquationAlpha, blendSrcAlpha, blendDstAlpha, premultipliedAlpha ) {
 
 		if ( blending === THREE.NoBlending ) {
 
@@ -209,59 +210,72 @@ THREE.WebGLState = function ( gl, extensions, paramThreeToGL ) {
 
 		}
 
-		if ( blending !== currentBlending ) {
+		if ( blending !== currentBlending || premultipliedAlpha !== currentPremultipledAlpha ) {
 
 			if ( blending === THREE.AdditiveBlending ) {
 
-				gl.blendEquation( gl.FUNC_ADD );
-				gl.blendFunc( gl.SRC_ALPHA, gl.ONE );
+				if ( premultipliedAlpha ) {
 
-			} else if ( blending === THREE.SubtractiveBlending ) {
+					gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+					gl.blendFuncSeparate( gl.ONE, gl.ONE, gl.ONE, gl.ONE );
 
-				// TODO: Find blendFuncSeparate() combination
+				} else {
 
-				gl.blendEquation( gl.FUNC_ADD );
-				gl.blendFunc( gl.ZERO, gl.ONE_MINUS_SRC_COLOR );
+					gl.blendEquation( gl.FUNC_ADD );
+					gl.blendFunc( gl.SRC_ALPHA, gl.ONE );
 
-			} else if ( blending === THREE.MultiplyBlending ) {
+				}
 
-				// TODO: Find blendFuncSeparate() combination
+			} else if ( blending === THREE.SubtractiveBlending ) {
 
-				gl.blendEquation( gl.FUNC_ADD );
-				gl.blendFunc( gl.ZERO, gl.SRC_COLOR );
+				if ( premultipliedAlpha ) {
 
-			} else if( blending === THREE.PremultipliedAlphaNormalBlending ) {
+					gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+					gl.blendFuncSeparate( gl.ZERO, gl.ZERO, gl.ONE_MINUS_SRC_COLOR, gl.ONE_MINUS_SRC_ALPHA );
 
-				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 {
+
+					gl.blendEquation( gl.FUNC_ADD );
+					gl.blendFunc( gl.ZERO, gl.ONE_MINUS_SRC_COLOR );
+
+				}
 
-			} else if( blending === THREE.PremultipliedAlphaAdditiveBlending ) {
+			} else if ( blending === THREE.MultiplyBlending ) {
 
-				gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
-				gl.blendFuncSeparate( gl.ONE, gl.ONE, gl.ONE, gl.ONE );
+				if ( premultipliedAlpha ) {
 
-			} else if( blending === THREE.PremultipliedAlphaSubtractiveBlending ) {
+					gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+					gl.blendFuncSeparate( gl.ZERO, gl.ZERO, gl.SRC_COLOR, gl.SRC_ALPHA );
 
-				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 {
 
-			} else if( blending === THREE.PremultipliedAlphaMultiplyBlending ) {
+					gl.blendEquation( gl.FUNC_ADD );
+					gl.blendFunc( gl.ZERO, gl.SRC_COLOR );
 
-				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 );
-				gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA );
+				if ( premultipliedAlpha ) {
+
+					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 {
+
+					gl.blendEquationSeparate( gl.FUNC_ADD, gl.FUNC_ADD );
+					gl.blendFuncSeparate( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA );
+
+				}
 
 			}
 
 			currentBlending = blending;
+			currentPremultipledAlpha = premultipliedAlpha;
 
 		}
 
-		if ( blending === THREE.CustomBlending || blending === THREE.PremultipliedAlphaCustomBlending ) {
+		if ( blending === THREE.CustomBlending ) {
 
 			blendEquationAlpha = blendEquationAlpha || blendEquation;
 			blendSrcAlpha = blendSrcAlpha || blendSrc;