Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Merge pull request #11322 from stuikomma/setBlending_parameters_in_SpritePlugin

pass all blending parameters to setBlending in SpritePlugin
Mr.doob 8 years ago
parent
bbcc412ca6 9ac665f386
commit
2949ca4231
4 changed files with 109 additions and 1 deletions
Unified View Show Diff Stats
  1. 1 0
      examples/files.js
  2. BIN
      examples/textures/sprite3.png
  3. 107 0
      examples/webgl_sprites_alpha.html
  4. 1 1
      src/renderers/webgl/plugins/SpritePlugin.js

+ 1 - 0
examples/files.js
View File 

@@ -242,6 +242,7 @@ var files = {
 
 		"webgl_simple_gi",
 
 		"webgl_simple_gi",
 
 		"webgl_skinning_simple",
 
 		"webgl_skinning_simple",
 
 		"webgl_sprites",
 
 		"webgl_sprites",
 
+		"webgl_sprites_alpha",
 
 		"webgl_terrain_dynamic",
 
 		"webgl_terrain_dynamic",
 
 		"webgl_test_memory",
 
 		"webgl_test_memory",
 
 		"webgl_test_memory2",
 
 		"webgl_test_memory2",

BIN
examples/textures/sprite3.png
View File


+ 107 - 0
examples/webgl_sprites_alpha.html
View File 

@@ -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>

+ 1 - 1
src/renderers/webgl/plugins/SpritePlugin.js
View File 

@@ -223,7 +223,7 @@ function SpritePlugin( renderer, sprites ) {
 
 			gl.uniform1f( uniforms.rotation, material.rotation );
 
 			gl.uniform1f( uniforms.rotation, material.rotation );
 
 			gl.uniform2fv( uniforms.scale, scale );
 
 			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.setTest( material.depthTest );
 
 			state.buffers.depth.setMask( material.depthWrite );
 
 			state.buffers.depth.setMask( material.depthWrite );