Merge branch 'tgaTextureSupport' of https://github.com/DaoshengMu/three.js into dev

Conflicts:
	build/three.min.js

build/three.js

@@ -11127,6 +11127,7 @@ THREE.Loader.prototype = {
 		function create_texture( where, name, sourceFile, repeat, offset, wrap, anisotropy ) {
 
 			var isCompressed = /\.dds$/i.test( sourceFile );
+                        var isTGA = /\.tga$/i.test( sourceFile );
 
 			var fullPath = texturePath + sourceFile;
 
@@ -11136,7 +11137,12 @@ THREE.Loader.prototype = {
 
 				where[ name ] = texture;
 
-			} else {
+			} else if ( isTGA ) {
+                            
+                                var texture = THREE.ImageUtils.loadTGATexture( fullPath );
+
+				where[ name ] = texture;
+                        } else {
 
 				var texture = document.createElement( 'canvas' );
 
@@ -26838,6 +26844,7 @@ THREE.GeometryUtils = {
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mrdoob / http://mrdoob.com/
+ * @author Daosheng Mu / https://github.com/DaoshengMu/
  */
 
 THREE.ImageUtils = {
@@ -27067,6 +27074,453 @@ THREE.ImageUtils = {
 		return texture;
 
 	},
+                
+        
+        // reference from vthibault, https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js
+        decodeTGA: function ( arrayBuffer ) {
+                   
+            // TGA Constants
+            var TGA_TYPE_NO_DATA = 0,
+            TGA_TYPE_INDEXED = 1,
+            TGA_TYPE_RGB = 2,
+            TGA_TYPE_GREY = 3,
+            TGA_TYPE_RLE_INDEXED = 9,
+            TGA_TYPE_RLE_RGB = 10,
+            TGA_TYPE_RLE_GREY = 11,
+
+            TGA_ORIGIN_MASK = 0x30,
+            TGA_ORIGIN_SHIFT = 0x04,
+            TGA_ORIGIN_BL = 0x00,
+            TGA_ORIGIN_BR = 0x01,
+            TGA_ORIGIN_UL = 0x02,
+            TGA_ORIGIN_UR = 0x03;
+    
+            
+            if ( arrayBuffer.length < 19 )
+                console.error( 'ImageUtils::decodeTGA()- Not enough data to contain header.' );
+            
+            var content = new Uint8Array( arrayBuffer ),
+                offset = 0,
+                header = {
+                  id_length: content[ offset++ ], 
+                  colormap_type: content[ offset++ ],
+                  image_type:      content[offset++],
+                  colormap_index:  content[offset++] | content[offset++] << 8,
+                  colormap_length: content[offset++] | content[offset++] << 8,
+                  colormap_size:   content[offset++],
+
+                  origin: [
+                            content[offset++] | content[offset++] << 8,
+                            content[offset++] | content[offset++] << 8
+                    ],
+                    width:      content[offset++] | content[offset++] << 8,
+                    height:     content[offset++] | content[offset++] << 8,
+                    pixel_size: content[offset++],
+                    flags:      content[offset++]
+                };
+                    
+            function tgaCheckHeader( header ) {
+                switch( header.image_type ) {
+                    // Check indexed type
+                case TGA_TYPE_INDEXED:
+                case TGA_TYPE_RLE_INDEXED:
+                    if ( header.colormap_length > 256 || header.colormap_size !== 24 || header.colormap_type !== 1) {
+                        console.error('Targa::tgaCheckHeader() - Invalid type colormap data for indexed type');
+                    }
+                    break;
+
+                // Check colormap type
+                case TGA_TYPE_RGB:
+                case TGA_TYPE_GREY:
+                case TGA_TYPE_RLE_RGB:
+                case TGA_TYPE_RLE_GREY:
+                    if (header.colormap_type) {
+                        console.error('ImageUtils::tgaCheckHeader() - Invalid type colormap data for colormap type');
+                    }
+                    break;
+
+                // What the need of a file without data ?
+                case TGA_TYPE_NO_DATA:
+                    console.error('ImageUtils::tgaCheckHeader() - No data');
+
+                // Invalid type ?
+                default:
+                    console.error('ImageUtils::tgaCheckHeader() - Invalid type " '+ header.image_type + '"');
+                }
+
+                // Check image width and height
+                if ( header.width <= 0 || header.height <=0 ) {
+                    console.error( 'ImageUtils::tgaCheckHeader() - Invalid image size' );
+                }
+
+                // Check image pixel size 
+                if (header.pixel_size !== 8  &&
+                    header.pixel_size !== 16 &&
+                    header.pixel_size !== 24 &&
+                    header.pixel_size !== 32) {
+                    console.error('ImageUtils::tgaCheckHeader() - Invalid pixel size "' + header.pixel_size + '"');
+                }
+            }
+
+            // Check tga if it is valid format
+            tgaCheckHeader( header );
+
+            if ( header.id_length + offset > arrayBuffer.length ) {
+                console.error('ImageUtils::load() - No data');
+            }
+
+            // Skip the needn't data
+            offset += header.id_length;
+
+            // Get targa information about RLE compression and palette
+            var use_rle = false, 
+                use_pal = false, 
+                use_grey = false;
+        
+            switch ( header.image_type ) {
+                case TGA_TYPE_RLE_INDEXED:
+                    use_rle = true;
+                    use_pal = true;
+                    break;
+
+                case TGA_TYPE_INDEXED:
+                    use_pal = true;
+                    break;
+                    
+                case TGA_TYPE_RLE_RGB:
+                    use_rle = true;
+                    break;
+
+                case TGA_TYPE_RGB:
+                    break;
+
+                case TGA_TYPE_RLE_GREY:
+                    use_rle = true;
+                    use_grey = true;
+                    break;
+
+                case TGA_TYPE_GREY:
+                    use_grey = true;
+                    break;
+            }
+            
+            // Parse tga image buffer
+            function tgaParse( use_rle, use_pal, header, offset, data ) {
+                
+                var pixel_data,
+                    pixel_size,
+                    pixel_total,
+                    palettes;
+            
+                    pixel_size = header.pixel_size >> 3;
+                    pixel_total = header.width * header.height * pixel_size;
+                    
+                 // Read palettes
+                 if ( use_pal ) {
+                     palettes = data.subarray( offset, offset += header.colormap_length * ( header.colormap_size >> 3 ) );
+                 }
+                 
+                 // Read RLE
+                 if ( use_rle ) {
+                     pixel_data = new Uint8Array(pixel_total);
+                     
+                    var c, count, i;
+                    var shift = 0;
+                    var pixels = new Uint8Array(pixel_size);
+
+                    while (shift < pixel_total) {
+                        c     = data[offset++];
+                        count = (c & 0x7f) + 1;
+
+                        // RLE pixels.
+                        if (c & 0x80) {
+                            // Bind pixel tmp array
+                            for (i = 0; i < pixel_size; ++i) {
+                                    pixels[i] = data[offset++];
+                            }
+
+                            // Copy pixel array
+                            for (i = 0; i < count; ++i) {
+                                    pixel_data.set(pixels, shift + i * pixel_size);
+                            }
+
+                            shift += pixel_size * count;
+                        }
+
+                        // Raw pixels.
+                        else {
+                            count *= pixel_size;
+                            for (i = 0; i < count; ++i) {
+                                    pixel_data[shift + i] = data[offset++];
+                            }
+                           shift += count;
+                        }
+                    }
+                 }
+                 // RAW Pixels
+                 else {
+                    pixel_data = data.subarray(
+                         offset, offset += (use_pal ? header.width * header.height : pixel_total)
+                    );
+                 }
+                
+                 return { 
+                    pixel_data: pixel_data, 
+                    palettes: palettes 
+                 };
+            }
+            
+	    function tgaGetImageData8bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end
+                                    , image, palettes ) {
+		var colormap = palettes;		
+		var color, i = 0, x, y;
+                var width = header.width;
+                
+		for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i++) {
+                        color = image[i];
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                        imageData[(x + width * y) * 4 + 2] = colormap[(color * 3) + 0];
+                        imageData[(x + width * y) * 4 + 1] = colormap[(color * 3) + 1];
+                        imageData[(x + width * y) * 4 + 0] = colormap[(color * 3) + 2];
+                    }
+		}
+
+		return imageData;
+	    };
+
+	    function tgaGetImageData16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end
+                                        , image) {
+                var color, i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 2) {
+                        color = image[i + 0] + (image[i + 1] << 8); // Inversed ?
+                        imageData[(x + width * y) * 4 + 0] = (color & 0x7C00) >> 7;
+                        imageData[(x + width * y) * 4 + 1] = (color & 0x03E0) >> 2;
+                        imageData[(x + width * y) * 4 + 2] = (color & 0x001F) >> 3;
+                        imageData[(x + width * y) * 4 + 3] = (color & 0x8000) ? 0 : 255;
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageData24bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 3) {
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 1];
+                        imageData[(x + width * y) * 4 + 0] = image[i + 2];
+                    }
+                }
+
+                return imageData;
+	    };
+        
+	    function tgaGetImageData32bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {		
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 4) {
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 1];
+                        imageData[(x + width * y) * 4 + 0] = image[i + 2];
+                        imageData[(x + width * y) * 4 + 3] = image[i + 3];
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageDataGrey8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
+                var color, i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i++) {
+                        color = image[i];
+                        imageData[(x + width * y) * 4 + 0] = color;
+                        imageData[(x + width * y) * 4 + 1] = color;
+                        imageData[(x + width * y) * 4 + 2] = color;
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageDataGrey16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {		
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 2) {
+                        imageData[(x + width * y) * 4 + 0] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 3] = image[i + 1];
+                    }
+                }
+
+                return imageData;
+	    };
+        
+            function getTgaRGBA( width, height, image, palette ) {
+                var x_start,
+                    y_start,
+                    x_step,
+                    y_step,
+                    x_end,
+                    y_end,                    
+                    data = new Uint8Array(width * height * 4);
+                    
+                    switch( (header.flags & TGA_ORIGIN_MASK) >> TGA_ORIGIN_SHIFT ) {
+                        default:
+                        case TGA_ORIGIN_UL:
+                            x_start = 0;
+                            x_step = 1;
+                            x_end = width;
+                            y_start = 0;
+                            y_step = 1;
+                            y_end = height;
+                            break;
+                            
+                        case TGA_ORIGIN_BL:
+                            x_start = 0;
+                            x_step = 1;
+                            x_end = width;
+                            y_start = height - 1;
+                            y_step = -1;
+                            y_end = -1;
+                            break;
+                            
+                        case TGA_ORIGIN_UR:
+                            x_start = width - 1;
+                            x_step = -1;
+                            x_end = -1;
+                            y_start = 0;
+                            y_step = 1;
+                            y_end = height;
+                            break;
+                            
+                        case TGA_ORIGIN_BR:
+                            x_start = width - 1;
+                            x_step = -1;
+                            x_end = -1;
+                            y_start = height - 1;
+                            y_step = -1;
+                            y_end = -1;
+                            break;
+                    }
+                    
+                    
+                if ( use_grey ) {
+                    
+                    switch( header.pixel_size )
+                    {
+                        case 8:
+                            tgaGetImageDataGrey8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                        case 16:
+                            tgaGetImageDataGrey16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                        default:
+                            console.error( 'ImageUtils::getTgaRGBA() - not support this format' );
+                            break;
+                    }
+                    
+                }
+                else {
+                    
+                    switch( header.pixel_size )
+                    {
+                        case 8:
+                            tgaGetImageData8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image, palette );
+                            break;
+                            
+                        case 16:
+                            tgaGetImageData16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                            
+                        case 24:
+                            tgaGetImageData24bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+
+                        case 32:
+                            tgaGetImageData32bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                            
+                        default:
+                            console.error( 'ImageUtils::getTgaRGBA() - not support this format' );
+                            break;  
+                    }
+                }
+                // Load image data according to specific method
+               // var func = 'tgaGetImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
+                //func(data, y_start, y_step, y_end, x_start, x_step, x_end, width, image, palette );
+                return data;
+            }
+            
+            var result = tgaParse( use_rle, use_pal, header, offset, content );
+            var rgbaData = getTgaRGBA( header.width, header.height, result.pixel_data, result.palettes );
+           
+            
+            return {
+                width: header.width,
+                height: header.height,
+                data: rgbaData
+            };
+        },
+
+        loadTGATexture: function ( url, mapping, onLoad, onError ) {
+               
+                var texture = new THREE.DataTexture();                
+                {
+                    var request = new XMLHttpRequest();
+
+                    request.open( 'GET', url, true );
+                    request.responseType = "arraybuffer";
+                    request.onload = function() {
+                        if ( this.status === 200 ) {
+                            var imageData = THREE.ImageUtils.decodeTGA( this.response );
+
+                            if ( imageData ) {
+                                texture.image = imageData;
+                                texture.sourceFile = url;
+                                texture.needsUpdate = true;
+                                
+                                return texture;
+                            }
+
+                        }
+                    };
+                    
+                    request.addEventListener( 'load', function ( event ) {
+
+                            if ( onLoad ) onLoad( texture );
+
+			}, false );
+                        
+                    request.addEventListener( 'error', function ( event ) {
+
+                            if ( onError ) onError( event );
+
+			}, false );
+                    
+                    request.send(null);
+                }
+              
+		texture.sourceFile = url;
+
+		return texture;
+        },
 
 	loadDDSTexture: function ( url, mapping, onLoad, onError ) {
 

examples/js/loaders/ColladaLoader.js

@@ -3482,8 +3482,20 @@ THREE.ColladaLoader = function () {
 								var image = images[surface.init_from];
 
 								if (image) {
-
-									var texture = THREE.ImageUtils.loadTexture(baseUrl + image.init_from);
+                                                                        var texture = null;
+                                                                        var isCompressed = /\.dds$/i.test( image.init_from );
+                                                                        var isTGA = /\.tga$/i.test( image.init_from );
+                                                                        
+                                                                        if ( isCompressed ) {
+                                                                            texture = THREE.ImageUtils.loadCompressedTexture( baseUrl + image.init_from );
+                                                                        }
+                                                                        else if ( isTGA ) {
+                                                                            texture = THREE.ImageUtils.loadTGATexture( baseUrl + image.init_from );
+                                                                        }
+                                                                        else {
+                                                                            texture = THREE.ImageUtils.loadTexture(baseUrl + image.init_from);
+                                                                        }
+                                                                        									
 									texture.wrapS = cot.texOpts.wrapU ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping;
 									texture.wrapT = cot.texOpts.wrapV ? THREE.RepeatWrapping : THREE.ClampToEdgeWrapping;
 									texture.offset.x = cot.texOpts.offsetU;

examples/js/loaders/MTLLoader.js

@@ -364,12 +364,19 @@ THREE.MTLLoader.MaterialCreator.prototype = {
 	loadTexture: function ( url, mapping, onLoad, onError ) {
 
 		var isCompressed = /\.dds$/i.test( url );
+                var isTGA = /\.tga$/i.test( url );
 
 		if ( isCompressed ) {
 
 			var texture = THREE.ImageUtils.loadCompressedTexture( url, mapping, onLoad, onError );
 
-		} else {
+		}  
+                else if ( isTGA ) {
+                        
+                        var texture = THREE.ImageUtils.loadTGATexture( url, mapping, onLoad, onError );
+                        
+                }
+                else {
 
 			var image = new Image();
 			var texture = new THREE.Texture( image, mapping );

examples/js/loaders/SceneLoader.js

@@ -970,6 +970,7 @@ THREE.SceneLoader.prototype = {
 			} else {
 
 				var isCompressed = /\.dds$/i.test( textureJSON.url );
+                                var isTGA = /\.tga$/i.test( textureJSON.url );
 				var fullUrl = get_url( textureJSON.url, data.urlBaseType );
 				var textureCallback = generateTextureCallback( 1 );
 
@@ -977,7 +978,11 @@ THREE.SceneLoader.prototype = {
 
 					texture = THREE.ImageUtils.loadCompressedTexture( fullUrl, textureJSON.mapping, textureCallback );
 
-				} else {
+				} else if ( isTGA ) {
+                                    
+                                        texture = THREE.ImageUtils.loadTGATexture( fullUrl, textureJSON.mapping, textureCallback );
+                                    
+                                } else {
 
 					texture = THREE.ImageUtils.loadTexture( fullUrl, textureJSON.mapping, textureCallback );
 

examples/webgl_materials_texture_tga.html

@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<!--
+@author Daosheng Mu / https://github.com/DaoshengMu/
+-->
+<html>
+    <head>
+        <title>three.js webgl - materials - tga texture</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 {
+                        color: #000;
+                        font-family:Monospace;
+                        font-size:13px;
+                        text-align:center;
+
+                        background-color: #fff;
+                        margin: 0px;
+                        padding: 0px;
+                        overflow: hidden;
+                }
+                
+            #stats { position: absolute; top:0; left: 0 }
+            #stats #fps { background: transparent !important }
+            #stats #fps #fpsText { color: #777 !important }
+            #stats #fps #fpsGraph { display: none }
+        </style>
+    </head>
+    <body>
+        <div id="info">
+                <a href="http://threejs.org" target="_blank">three.js</a> - tga texture example
+        </div>
+        <script src="../build/three.min.js"></script>
+        <script src="js/Detector.js"></script>
+        <script src="js/libs/stats.min.js"></script>
+        
+        <script>
+            
+            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+            var SCREEN_WIDTH = window.innerWidth;
+            var SCREEN_HEIGHT = window.innerHeight;
+
+            var container,stats;
+
+            var camera, scene, renderer;
+
+            var mouseX = 0, mouseY = 0;
+
+            var windowHalfX = window.innerWidth / 2;
+            var windowHalfY = window.innerHeight / 2;
+                 
+            init();
+            animate();
+            
+            function init() {
+                
+                container = document.createElement( 'div' );
+                document.body.appendChild( container );
+                
+                renderer = new THREE.WebGLRenderer( { antialias: true } );
+                
+                camera = new THREE.PerspectiveCamera( 35, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 25000 );
+                camera.position.z = 200;
+
+                scene = new THREE.Scene();
+                
+                var light = new THREE.DirectionalLight( 0xffffff, 2 );
+                light.position.set( 1, 1, 1 );
+                scene.add( light );
+                
+                // add box 1 - grey8 texture
+                var texture1 = THREE.ImageUtils.loadTGATexture( "textures/crate_grey8.tga" );
+                var material1 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture1 } );
+                
+                var geometry = new THREE.BoxGeometry( 50, 50, 50 );
+                var mesh1 = new THREE.Mesh( geometry, material1 );
+                mesh1.rotation.x = -Math.PI / 2;
+                mesh1.position.x = - 50;
+                
+                scene.add( mesh1 );
+                
+                // add box 2 - tga texture
+                var texture2 = THREE.ImageUtils.loadTGATexture( "textures/crate_color8.tga" );
+                var material2 = new THREE.MeshPhongMaterial( { color: 0xffffff, map: texture2 } );
+                       
+                var mesh2 = new THREE.Mesh( geometry, material2 );
+                mesh2.rotation.x = -Math.PI / 2;
+                mesh2.position.x = 50;
+                
+                scene.add( mesh2 );
+                
+                // RENDERER
+                renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
+                renderer.setClearColor( 0xf2f7ff, 1 );
+                renderer.autoClear = false;
+
+                renderer.domElement.style.position = "relative";
+                container.appendChild( renderer.domElement );
+
+                // STATS1
+                stats = new Stats();
+                container.appendChild( stats.domElement );
+
+                document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+            }
+            
+            function onDocumentMouseMove(event) {
+
+                    mouseX = ( event.clientX - windowHalfX );
+                    mouseY = ( event.clientY - windowHalfY );
+
+            }
+
+
+            function animate() {
+
+                    requestAnimationFrame( animate );
+
+                    render();
+                    stats.update();
+
+            }
+
+            function render() {
+
+                    camera.position.x += ( mouseX - camera.position.x ) * .05;
+                    camera.position.y = THREE.Math.clamp( camera.position.y + ( - ( mouseY - 200 ) - camera.position.y ) * .05, 50, 1000 );
+
+                    camera.lookAt( scene.position );
+
+                    renderer.enableScissorTest( false );
+                    renderer.clear();
+                    renderer.enableScissorTest( true );
+
+                    renderer.setScissor( 0, 0, SCREEN_WIDTH - 2, SCREEN_HEIGHT );
+                    renderer.render( scene, camera );
+
+                    
+            }
+            
+        </script>
+    </body>
+</html>

src/extras/ImageUtils.js

@@ -1,6 +1,7 @@
 /**
  * @author alteredq / http://alteredqualia.com/
  * @author mrdoob / http://mrdoob.com/
+ * @author Daosheng Mu / https://github.com/DaoshengMu/
  */
 
 THREE.ImageUtils = {
@@ -230,6 +231,453 @@ THREE.ImageUtils = {
 		return texture;
 
 	},
+                
+        
+        // reference from vthibault, https://github.com/vthibault/roBrowser/blob/master/src/Loaders/Targa.js
+        decodeTGA: function ( arrayBuffer ) {
+                   
+            // TGA Constants
+            var TGA_TYPE_NO_DATA = 0,
+            TGA_TYPE_INDEXED = 1,
+            TGA_TYPE_RGB = 2,
+            TGA_TYPE_GREY = 3,
+            TGA_TYPE_RLE_INDEXED = 9,
+            TGA_TYPE_RLE_RGB = 10,
+            TGA_TYPE_RLE_GREY = 11,
+
+            TGA_ORIGIN_MASK = 0x30,
+            TGA_ORIGIN_SHIFT = 0x04,
+            TGA_ORIGIN_BL = 0x00,
+            TGA_ORIGIN_BR = 0x01,
+            TGA_ORIGIN_UL = 0x02,
+            TGA_ORIGIN_UR = 0x03;
+    
+            
+            if ( arrayBuffer.length < 19 )
+                console.error( 'ImageUtils::decodeTGA()- Not enough data to contain header.' );
+            
+            var content = new Uint8Array( arrayBuffer ),
+                offset = 0,
+                header = {
+                  id_length: content[ offset++ ], 
+                  colormap_type: content[ offset++ ],
+                  image_type:      content[offset++],
+                  colormap_index:  content[offset++] | content[offset++] << 8,
+                  colormap_length: content[offset++] | content[offset++] << 8,
+                  colormap_size:   content[offset++],
+
+                  origin: [
+                            content[offset++] | content[offset++] << 8,
+                            content[offset++] | content[offset++] << 8
+                    ],
+                    width:      content[offset++] | content[offset++] << 8,
+                    height:     content[offset++] | content[offset++] << 8,
+                    pixel_size: content[offset++],
+                    flags:      content[offset++]
+                };
+                    
+            function tgaCheckHeader( header ) {
+                switch( header.image_type ) {
+                    // Check indexed type
+                case TGA_TYPE_INDEXED:
+                case TGA_TYPE_RLE_INDEXED:
+                    if ( header.colormap_length > 256 || header.colormap_size !== 24 || header.colormap_type !== 1) {
+                        console.error('Targa::tgaCheckHeader() - Invalid type colormap data for indexed type');
+                    }
+                    break;
+
+                // Check colormap type
+                case TGA_TYPE_RGB:
+                case TGA_TYPE_GREY:
+                case TGA_TYPE_RLE_RGB:
+                case TGA_TYPE_RLE_GREY:
+                    if (header.colormap_type) {
+                        console.error('ImageUtils::tgaCheckHeader() - Invalid type colormap data for colormap type');
+                    }
+                    break;
+
+                // What the need of a file without data ?
+                case TGA_TYPE_NO_DATA:
+                    console.error('ImageUtils::tgaCheckHeader() - No data');
+
+                // Invalid type ?
+                default:
+                    console.error('ImageUtils::tgaCheckHeader() - Invalid type " '+ header.image_type + '"');
+                }
+
+                // Check image width and height
+                if ( header.width <= 0 || header.height <=0 ) {
+                    console.error( 'ImageUtils::tgaCheckHeader() - Invalid image size' );
+                }
+
+                // Check image pixel size 
+                if (header.pixel_size !== 8  &&
+                    header.pixel_size !== 16 &&
+                    header.pixel_size !== 24 &&
+                    header.pixel_size !== 32) {
+                    console.error('ImageUtils::tgaCheckHeader() - Invalid pixel size "' + header.pixel_size + '"');
+                }
+            }
+
+            // Check tga if it is valid format
+            tgaCheckHeader( header );
+
+            if ( header.id_length + offset > arrayBuffer.length ) {
+                console.error('ImageUtils::load() - No data');
+            }
+
+            // Skip the needn't data
+            offset += header.id_length;
+
+            // Get targa information about RLE compression and palette
+            var use_rle = false, 
+                use_pal = false, 
+                use_grey = false;
+        
+            switch ( header.image_type ) {
+                case TGA_TYPE_RLE_INDEXED:
+                    use_rle = true;
+                    use_pal = true;
+                    break;
+
+                case TGA_TYPE_INDEXED:
+                    use_pal = true;
+                    break;
+                    
+                case TGA_TYPE_RLE_RGB:
+                    use_rle = true;
+                    break;
+
+                case TGA_TYPE_RGB:
+                    break;
+
+                case TGA_TYPE_RLE_GREY:
+                    use_rle = true;
+                    use_grey = true;
+                    break;
+
+                case TGA_TYPE_GREY:
+                    use_grey = true;
+                    break;
+            }
+            
+            // Parse tga image buffer
+            function tgaParse( use_rle, use_pal, header, offset, data ) {
+                
+                var pixel_data,
+                    pixel_size,
+                    pixel_total,
+                    palettes;
+            
+                    pixel_size = header.pixel_size >> 3;
+                    pixel_total = header.width * header.height * pixel_size;
+                    
+                 // Read palettes
+                 if ( use_pal ) {
+                     palettes = data.subarray( offset, offset += header.colormap_length * ( header.colormap_size >> 3 ) );
+                 }
+                 
+                 // Read RLE
+                 if ( use_rle ) {
+                     pixel_data = new Uint8Array(pixel_total);
+                     
+                    var c, count, i;
+                    var shift = 0;
+                    var pixels = new Uint8Array(pixel_size);
+
+                    while (shift < pixel_total) {
+                        c     = data[offset++];
+                        count = (c & 0x7f) + 1;
+
+                        // RLE pixels.
+                        if (c & 0x80) {
+                            // Bind pixel tmp array
+                            for (i = 0; i < pixel_size; ++i) {
+                                    pixels[i] = data[offset++];
+                            }
+
+                            // Copy pixel array
+                            for (i = 0; i < count; ++i) {
+                                    pixel_data.set(pixels, shift + i * pixel_size);
+                            }
+
+                            shift += pixel_size * count;
+                        }
+
+                        // Raw pixels.
+                        else {
+                            count *= pixel_size;
+                            for (i = 0; i < count; ++i) {
+                                    pixel_data[shift + i] = data[offset++];
+                            }
+                           shift += count;
+                        }
+                    }
+                 }
+                 // RAW Pixels
+                 else {
+                    pixel_data = data.subarray(
+                         offset, offset += (use_pal ? header.width * header.height : pixel_total)
+                    );
+                 }
+                
+                 return { 
+                    pixel_data: pixel_data, 
+                    palettes: palettes 
+                 };
+            }
+            
+	    function tgaGetImageData8bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end
+                                    , image, palettes ) {
+		var colormap = palettes;		
+		var color, i = 0, x, y;
+                var width = header.width;
+                
+		for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i++) {
+                        color = image[i];
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                        imageData[(x + width * y) * 4 + 2] = colormap[(color * 3) + 0];
+                        imageData[(x + width * y) * 4 + 1] = colormap[(color * 3) + 1];
+                        imageData[(x + width * y) * 4 + 0] = colormap[(color * 3) + 2];
+                    }
+		}
+
+		return imageData;
+	    };
+
+	    function tgaGetImageData16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end
+                                        , image) {
+                var color, i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 2) {
+                        color = image[i + 0] + (image[i + 1] << 8); // Inversed ?
+                        imageData[(x + width * y) * 4 + 0] = (color & 0x7C00) >> 7;
+                        imageData[(x + width * y) * 4 + 1] = (color & 0x03E0) >> 2;
+                        imageData[(x + width * y) * 4 + 2] = (color & 0x001F) >> 3;
+                        imageData[(x + width * y) * 4 + 3] = (color & 0x8000) ? 0 : 255;
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageData24bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 3) {
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 1];
+                        imageData[(x + width * y) * 4 + 0] = image[i + 2];
+                    }
+                }
+
+                return imageData;
+	    };
+        
+	    function tgaGetImageData32bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {		
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 4) {
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 1];
+                        imageData[(x + width * y) * 4 + 0] = image[i + 2];
+                        imageData[(x + width * y) * 4 + 3] = image[i + 3];
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageDataGrey8bits( imageData, y_start, y_step, y_end, x_start, x_step, x_end, image ) {
+                var color, i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i++) {
+                        color = image[i];
+                        imageData[(x + width * y) * 4 + 0] = color;
+                        imageData[(x + width * y) * 4 + 1] = color;
+                        imageData[(x + width * y) * 4 + 2] = color;
+                        imageData[(x + width * y) * 4 + 3] = 255;
+                    }
+                }
+
+                return imageData;
+	    };
+
+	    function tgaGetImageDataGrey16bits(imageData, y_start, y_step, y_end, x_start, x_step, x_end, image) {		
+                var i = 0, x, y;
+                var width = header.width;
+
+                for (y = y_start; y !== y_end; y += y_step) {
+                    for (x = x_start; x !== x_end; x += x_step, i += 2) {
+                        imageData[(x + width * y) * 4 + 0] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 1] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 2] = image[i + 0];
+                        imageData[(x + width * y) * 4 + 3] = image[i + 1];
+                    }
+                }
+
+                return imageData;
+	    };
+        
+            function getTgaRGBA( width, height, image, palette ) {
+                var x_start,
+                    y_start,
+                    x_step,
+                    y_step,
+                    x_end,
+                    y_end,                    
+                    data = new Uint8Array(width * height * 4);
+                    
+                    switch( (header.flags & TGA_ORIGIN_MASK) >> TGA_ORIGIN_SHIFT ) {
+                        default:
+                        case TGA_ORIGIN_UL:
+                            x_start = 0;
+                            x_step = 1;
+                            x_end = width;
+                            y_start = 0;
+                            y_step = 1;
+                            y_end = height;
+                            break;
+                            
+                        case TGA_ORIGIN_BL:
+                            x_start = 0;
+                            x_step = 1;
+                            x_end = width;
+                            y_start = height - 1;
+                            y_step = -1;
+                            y_end = -1;
+                            break;
+                            
+                        case TGA_ORIGIN_UR:
+                            x_start = width - 1;
+                            x_step = -1;
+                            x_end = -1;
+                            y_start = 0;
+                            y_step = 1;
+                            y_end = height;
+                            break;
+                            
+                        case TGA_ORIGIN_BR:
+                            x_start = width - 1;
+                            x_step = -1;
+                            x_end = -1;
+                            y_start = height - 1;
+                            y_step = -1;
+                            y_end = -1;
+                            break;
+                    }
+                    
+                    
+                if ( use_grey ) {
+                    
+                    switch( header.pixel_size )
+                    {
+                        case 8:
+                            tgaGetImageDataGrey8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                        case 16:
+                            tgaGetImageDataGrey16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                        default:
+                            console.error( 'ImageUtils::getTgaRGBA() - not support this format' );
+                            break;
+                    }
+                    
+                }
+                else {
+                    
+                    switch( header.pixel_size )
+                    {
+                        case 8:
+                            tgaGetImageData8bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image, palette );
+                            break;
+                            
+                        case 16:
+                            tgaGetImageData16bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                            
+                        case 24:
+                            tgaGetImageData24bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+
+                        case 32:
+                            tgaGetImageData32bits( data, y_start, y_step, y_end, x_start, x_step, x_end, image );
+                            break;
+                            
+                        default:
+                            console.error( 'ImageUtils::getTgaRGBA() - not support this format' );
+                            break;  
+                    }
+                }
+                // Load image data according to specific method
+               // var func = 'tgaGetImageData' + (use_grey ? 'Grey' : '') + (header.pixel_size) + 'bits';
+                //func(data, y_start, y_step, y_end, x_start, x_step, x_end, width, image, palette );
+                return data;
+            }
+            
+            var result = tgaParse( use_rle, use_pal, header, offset, content );
+            var rgbaData = getTgaRGBA( header.width, header.height, result.pixel_data, result.palettes );
+           
+            
+            return {
+                width: header.width,
+                height: header.height,
+                data: rgbaData
+            };
+        },
+
+        loadTGATexture: function ( url, mapping, onLoad, onError ) {
+               
+                var texture = new THREE.DataTexture();                
+                {
+                    var request = new XMLHttpRequest();
+
+                    request.open( 'GET', url, true );
+                    request.responseType = "arraybuffer";
+                    request.onload = function() {
+                        if ( this.status === 200 ) {
+                            var imageData = THREE.ImageUtils.decodeTGA( this.response );
+
+                            if ( imageData ) {
+                                texture.image = imageData;
+                                texture.sourceFile = url;
+                                texture.needsUpdate = true;
+                                
+                                return texture;
+                            }
+
+                        }
+                    };
+                    
+                    request.addEventListener( 'load', function ( event ) {
+
+                            if ( onLoad ) onLoad( texture );
+
+			}, false );
+                        
+                    request.addEventListener( 'error', function ( event ) {
+
+                            if ( onError ) onError( event );
+
+			}, false );
+                    
+                    request.send(null);
+                }
+              
+		texture.sourceFile = url;
+
+		return texture;
+        },
 
 	loadDDSTexture: function ( url, mapping, onLoad, onError ) {
 

src/loaders/Loader.js

@@ -115,6 +115,7 @@ THREE.Loader.prototype = {
 		function create_texture( where, name, sourceFile, repeat, offset, wrap, anisotropy ) {
 
 			var isCompressed = /\.dds$/i.test( sourceFile );
+                        var isTGA = /\.tga$/i.test( sourceFile );
 
 			var fullPath = texturePath + sourceFile;
 
@@ -124,7 +125,12 @@ THREE.Loader.prototype = {
 
 				where[ name ] = texture;
 
-			} else {
+			} else if ( isTGA ) {
+                            
+                                var texture = THREE.ImageUtils.loadTGATexture( fullPath );
+
+				where[ name ] = texture;
+                        } else {
 
 				var texture = document.createElement( 'canvas' );