Merge pull request #11322 from stuikomma/setBlending_parameters_in_Sp…

…ritePlugin pass all blending parameters to setBlending in SpritePlugin
mrdoob · May 14, 2017 · 2949ca4 · 2949ca4
2 parents bbcc412 + 9ac665f
commit 2949ca4
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 1 deletion.
diff --git a/examples/files.js b/examples/files.js
@@ -242,6 +242,7 @@ var files = {
 		"webgl_simple_gi",
 		"webgl_skinning_simple",
 		"webgl_sprites",
+		"webgl_sprites_alpha",
 		"webgl_terrain_dynamic",
 		"webgl_test_memory",
 		"webgl_test_memory2",

diff --git a/examples/textures/sprite3.png b/examples/textures/sprite3.png
diff --git a/examples/webgl_sprites_alpha.html b/examples/webgl_sprites_alpha.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - sprites - premultiplied alpha</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+
+	<body>
+
+
+    <div id="info">
+        <a href="http://threejs.org" target="_blank">three.js</a> - webgl sprites alpha example -
+        left is without premultiplied alpha, right is with premultiplied alpha
+    </div>
+
+		<script src="../build/three.js"></script>
+
+		<script>
+
+			var camera, scene, renderer;
+
+			init();
+			animate();
+
+			function init() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera = new THREE.PerspectiveCamera( 60, width / height, 1, 1000 );
+				camera.position.z = 100;
+
+				scene = new THREE.Scene();
+
+				// create sprites
+				var textureLoader = new THREE.TextureLoader();
+				var spriteTexture = textureLoader.load( "textures/sprite3.png" );
+				var spriteTexturePremultiplied = textureLoader.load( "textures/sprite3.png" );
+				spriteTexturePremultiplied.premultiplyAlpha = true;
+
+				var materialPremultiplied = new THREE.SpriteMaterial( {
+                    map: spriteTexturePremultiplied,
+				    premultipliedAlpha: true
+				} );
+				var spritePremultiplied = new THREE.Sprite( materialPremultiplied );
+				spritePremultiplied.scale.set( 40, 40, 40 );
+				spritePremultiplied.position.set( 20, 0, 0 );
+				scene.add( spritePremultiplied );
+
+				var materialNonPremultiplied = new THREE.SpriteMaterial( { map: spriteTexture } );
+				var spriteNonPremultiplied = new THREE.Sprite( materialNonPremultiplied );
+				spriteNonPremultiplied.scale.set( 40, 40, 40 );
+				spriteNonPremultiplied.position.set( -20, 0, 0 );
+				scene.add( spriteNonPremultiplied );
+
+				// renderer
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.setClearColor( new THREE.Color( 'white' ) );
+
+				document.body.appendChild( renderer.domElement );
+
+				//
+
+				window.addEventListener( 'resize', onWindowResize, false );
+
+			}
+
+			function onWindowResize() {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight );
+
+			}
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+				render();
+
+			}
+
+			function render() {
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/renderers/webgl/plugins/SpritePlugin.js b/src/renderers/webgl/plugins/SpritePlugin.js
@@ -223,7 +223,7 @@ function SpritePlugin( renderer, sprites ) {
 			gl.uniform1f( uniforms.rotation, material.rotation );
 			gl.uniform2fv( uniforms.scale, scale );
 
-			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst );
+			state.setBlending( material.blending, material.blendEquation, material.blendSrc, material.blendDst, material.blendEquationAlpha, material.blendSrcAlpha, material.blendDstAlpha, material.premultipliedAlpha );
 			state.buffers.depth.setTest( material.depthTest );
 			state.buffers.depth.setMask( material.depthWrite );