Added DXT3 and DXT5 compressed textures to the example.

This is how compressed textures are supposed to be used: DXT1 - RGB - opaque textures DXT3 - RGBA - transparent textures with sharp alpha transitions DXT5 - RGBA - transparent textures with full alpha range

Added DXT3 and DXT5 compressed textures to the example.
This is how compressed textures are supposed to be used: DXT1 - RGB - opaque textures DXT3 - RGBA - transparent textures with sharp alpha transitions DXT5 - RGBA - transparent textures with full alpha range
61142563 · alteredq · f7a247f5 · 61142563 · 61142563 · 61142563
3 changed file
--- a/examples/textures/compressed/explosion_dxt5_mip.dds
+++ b/examples/textures/compressed/explosion_dxt5_mip.dds
--- a/examples/textures/compressed/hepatica_dxt3_mip.dds
+++ b/examples/textures/compressed/hepatica_dxt3_mip.dds
--- a/examples/webgl_materials_texture_compressed.html
+++ b/examples/webgl_materials_texture_compressed.html
@@ -7,18 +7,43 @@
 			body {
 				margin: 0px;
 				background-color: #050505;
+				color: #fff;
 				overflow: hidden;
 			}
+			a { color: #e00 }
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				z-index:1000;
+			}
 		</style>
 	</head>
 	<body>
+		<div id="info">
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl - compressed textures -
+			leaf texture by <a href="http://opengameart.org/node/10505">lauris71</a>, explosion texture by <a href="http://opengameart.org/node/7728">bart</a>
+		</div>
 		<script src="../build/three.min.js"></script>
+		<script src="js/Detector.js"></script>
+		<script src="js/Stats.js"></script>
 		<script>
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 			var camera, scene, renderer;
-			var mesh1, mesh2;
+			var meshes = [];
 			init();
 			animate();
@@ -26,7 +51,7 @@
 			function init() {
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 2000 );
-				camera.position.z = 800;
+				camera.position.z = 1000;
 				scene = new THREE.Scene();
@@ -39,21 +64,55 @@
 				var map2 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/disturb_dxt1_mip.dds' );
 				map2.anisotropy = 4;
-				var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
+				var map3 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/hepatica_dxt3_mip.dds' );
-				var material2 = new THREE.MeshBasicMaterial( { map: map2 } );
+				map3.anisotropy = 4;
-				mesh1 = new THREE.Mesh( geometry, material1 );
-				mesh1.position.x = -200;
-				scene.add( mesh1 );
-				mesh2 = new THREE.Mesh( geometry, material2 );
+				var map4 = THREE.ImageUtils.loadCompressedTexture( 'textures/compressed/explosion_dxt5_mip.dds' );
-				mesh2.position.x = 200;
+				map4.anisotropy = 4;
-				scene.add( mesh2 );
-				renderer = new THREE.WebGLRenderer();
+				var material1 = new THREE.MeshBasicMaterial( { map: map1 } );
+				var material2 = new THREE.MeshBasicMaterial( { map: map2 } );
+				var material3 = new THREE.MeshBasicMaterial( { map: map3, alphaTest: 0.5, side: THREE.DoubleSide } );
+				var material4 = new THREE.MeshBasicMaterial( { map: map4, side: THREE.DoubleSide, blending: THREE.AdditiveBlending, depthTest: false, transparent: true } );
+				var mesh = new THREE.Mesh( geometry, material1 );
+				mesh.position.x = -200;
+				mesh.position.y = -200;
+				scene.add( mesh );
+				meshes.push( mesh );
+				mesh = new THREE.Mesh( geometry, material2 );
+				mesh.position.x = 200;
+				mesh.position.y = -200;
+				scene.add( mesh );
+				meshes.push( mesh );
+				mesh = new THREE.Mesh( geometry, material3 );
+				mesh.position.x = 200;
+				mesh.position.y = 200;
+				scene.add( mesh );
+				meshes.push( mesh );
+				mesh = new THREE.Mesh( geometry, material4 );
+				mesh.position.x = -200;
+				mesh.position.y = 200;
+				scene.add( mesh );
+				meshes.push( mesh );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				document.body.appendChild( stats.domElement );
+				stats.domElement.children[ 0 ].children[ 0 ].style.color = "#777";
+				stats.domElement.children[ 0 ].style.background = "transparent";
+				stats.domElement.children[ 0 ].children[ 1 ].style.display = "none";
 				window.addEventListener( 'resize', onWindowResize, false );
 			}
@@ -73,13 +132,16 @@
 				var time = Date.now() * 0.001;
-				mesh1.rotation.x = time;
+				for ( var i = 0; i < meshes.length; i ++ ) {
-				mesh1.rotation.y = time;
+					var mesh = meshes[ i ];
+					mesh.rotation.x = time;
+					mesh.rotation.y = time;
-				mesh2.rotation.x = time;
+				}
-				mesh2.rotation.y = time;
 				renderer.render( scene, camera );
+				stats.update();
 			}