|
|
@@ -1,107 +0,0 @@
|
|
|
-<!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>
|
Mr.doob
