Three.js Source Note (37) Texture/compressedtexture.js

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

I was just beginning to learn, a lot of things are definitely wrong and please forgive me.

The following code is a comment for the texture/compressedtexture.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

/** * @author alteredq/http://alteredqualia.com/*//*///texture class is used to create a compressed reflection refraction or texture map object for a polygon, unlike the Three.texture class, Image parameters are mipmaps images,///This class is the most important attribute is image, which is a JavaScript image type object. The first parameter passed in is the object, and/or subsequent objects are optional, and if the default values are populated by default, they are often populated with default values. Properties Magfileter and Minfileter Specify how textures are filtered when zooming in and out: Nearest point, bilinear interpolation, and so on. To generate a texture from the URL, call Three.ImageUtils.loadTexture (paras),///The function returns a texture type object. The THREE.IMAGELOADER.LOAD (paras) function is also called inside the function, and the function internally calls the Three.texture () constructor to generate the texture. *////<summary>compressedtexture</summary>///<param name = "Mipmaps" type= "number" > Mipmaps Image object, WebGL cannot generate mipmaps,mipmaps can only be embedded into a DDS file </param>///<param name = "width" type= "number" > Mipmaps image Width </param>///<param name = "height" type= "number" >mipmaps Image height </param>///<param name = " Format "type=" number "> Pixel data color formats, reference texture/texture.js comments </param>///<param name =" type "type=" number " > data type, default is unsigned 8-bit shaping value </param>///<param name = "Mapping" type= "number" > Mapping mode, reference Texture/texture.js comments < /param>///<param name = "wraps" type= "number" >s direction override mode, refer to texture/texture.js comment </param>///<param name = "Wrapt" Type= "Number" >t direction override mode, refer to texture/texture.js comment </param>///<param name = "Magfilter" type= "number" > How the texture is filtered when zoomed in, refer to Texture/texture.js's comment </param>///<param name = "Minfilter" type= "number" > texture is filtered at Zoom out, Refer to Texture/texture.js's comment </param>///<param name = "Anisotropy" type= "Float" > anisotropy, Value Range 0.0-1.0, often used to pass this value, produce different surface effects, wood and metal are luminous, but the characteristics of luminescence is different. </param>///<returns type= "Compressedtexture" > returns the Texture object created </returns >three. Compressedtexture = function (mipmaps, width, height, format, type, mapping, wraps, WRAPT, Magfilter, Minfilter, Anisotro PY) {three. Texture.call (this, null, mapping, wraps, WRAPT, Magfilter, Minfilter, format, type, anisotropy); this.image = {Width:wi DTH, height:height};this.mipmaps = Mipmaps;this.generatemipmaps = false; WebGL currently can ' t generate mipmaps for compressed textures, they must bes embedded in DDS file//webGL cannot generate mipmaps,mipmaps can only be embedded in a DDS file};/***************************************************** The following is a method property definition for the Compressedtexture object, inherited from the texture**************************************************///THREE. Texture = function (image, mapping, wraps, WRAPT, Magfilter, Minfilter, format, type, anisotropy) {//this.id = three. Textureidcount ++;//Texture Property id//This.uuid = three. Math.generateuuid ();//Texture UUID (Universal unique Identifier) attribute//this.name = ";//Texture name attribute, optional//this.image = image!== undefined? Image:three. texture.default_image;//texture of the image, the most important attribute is the image, which is a JavaScript image type object. /*//mipmap//in the three-dimensional world, showing the size of a picture with the location of the camera, near the place, the image of the actual pixel is larger, far away from the image of the actual image//will be smaller, some compression, such as a picture of 64*64, in the vicinity, the display may be 50*50 , in the distance may be shown to be 20*20.//if only the simple support of some pixels, will reduce the image loss of a lot of detail, the picture becomes very rough, therefore, graphics has a lot of complex square//method to deal with the problem of reducing the picture, so that the reduced picture is still clear, however, these calculations are It will take some time.//Mipmap Texture technology is the most effective way to solve the relationship between texture resolution and viewpoint distance, it will first compress the picture into a lot of shrinking pictures,//For example, a picture of 64*64, will produce 64*64,32*32,16*16,8*8,4* 4,2*2,1*1 7 Pictures, when the screen needs to draw pixel points for 20*20,//program just use 32*32 and 16*16 these two pictures to calculate the 20*20 size will be displayedA picture, which is much better and faster than the image computed by using 32*32 's//original sheet alone.//reference: http://zh.wikipedia.org/wiki/Mipmap//Reference:/http     staff.cs.psu.ac.th/iew/cs344-481/p1-williams.pdf//Reference: http://blog.csdn.net/linber214/article/details/3342051// *///this.mipmaps = []; An array of attributes that hold mipmaps//this.mapping = mapping!== undefined? Mapping:three. texture.default_mapping;//mapping mode, with three.uvmapping flattened mappings, three. Cubereflectionmapping cube Reflection Map, three. Cuberefractionmapping cube refraction map, three. Sphericalreflectionmapping spherical reflection mapping, three. Sphericalrefractionmapping spherical refraction mapping.///For texture s direction, T direction reference http://blog.csdn.net/kylaoshu364/article/details/5608851// This.wraps = wraps!== undefined? Wraps:three. clamptoedgewrapping; The S-direction overlay mode, default is three.clamptoedgewrapping, (pinch), the value of more than 1.0 is fixed to 1.0. Textures in more than 1.0 of other places, with the last pixel texture. For overlay filtering, textures that require exact coverage from 0.0 to 1.0 without blurring boundaries. There are also three.repeatwrapping (repeat) and three.mirroredrepeatwrapping (mirror)//this.wrapt = wrapt!== undefined? Wrapt:three. clamptoedgewrapping; T-direction override mode, default is three.clamptoedgewrapping, (pinch), value of more than 1.0 is fixedto 1.0. Textures in more than 1.0 of other places, with the last pixel texture. For overlay filtering, textures that require exact coverage from 0.0 to 1.0 without blurring boundaries. There are also three.repeatwrapping (repeat) and three.mirroredrepeatwrapping (mirror)///*//Texel//Texel (English: Texel, that is, texture element or Textur e Pixel's synthetic word) is the short name of the texture element, which is the basic unit in the computer graphics texture space [1]. As the image is arranged in pixels, the texture is represented by the Texel arrangement. The texel can be defined by the image range, and its range can be obtained through some simple methods, such as threshold. The Voronoi distribution can be used to describe the spatial relationship between the Texel. This means that we can divide the entire texture into contiguous polygons by perpendicular bisector the lines of the Texel with the Texel center around it. As a result, every texel will have a one-of-a-nuo polygon circled around it. When laying textures on a three-dimensional surface, the Texel is mapped to the appropriate output image pixel by texture mapping technique. on today's computers, this process is mostly done by a graphics card. The texture operation starts at a location in the space. This position can be in the world coordinate system, but in general it is set in the object coordinate system. So the texture will move with the object. It then transforms its position (coordinates) from a three-dimensional vector value into a two-dimensional vector value (that is, UV) in the range of 0 to 1 by projecting it. The two-dimensional vector value is multiplied by the resolution of the texture to obtain the position of the Texel. When the desired texel position is not an integer, the texture filter needs to be used for processing. Texture in the enlargement or reduction of the filter mode, filtering method, there is three.nearestfilter on the texture base to perform the nearest neighbor filtering,////three. Nearestmipmapnearestfilter performs linear interpolation between MIP layers and performs the closest filtering,////three. Nearestmipmaplinearfilter selects the closest MIP layer and performs the closest filter,////three. The linearfilter performs linear filtering////three on the texture base. Linearmipmapnearestfilter selects the nearest MIP layer and performs a linear filter,////three. Linearmipmaplinearfilter performs linear interpolation between MIP layers and performs linear filtering//reference: http://blog.csdn.net/kkk328/article/details/7055934//reference: http://xiaxveliang.blog.163.com/blog/static/297080342013467552467///*///this.magfilter = Magfilter!== Undefined? Magfilter:three. linearfilter;//texture in the magnification of the filter mode, three. Linearfilter performing linear filtering on texture base//This.minfilter = Minfilter!== undefined? Minfilter:three. linearmipmaplinearfilter;//texture in the shrinking of the filter, three. Linearmipmapnearestfilter Select the nearest MIP layer and perform a linear filter//this.anisotropy = anisotropy!== undefined? anisotropy:1;//anisotropy, the value range of 0.0-1.0, often used to pass this value, produces different surface effects, wood and metal are luminous, but the characteristics of luminescence is different.///********************************* The parameter format defines the formatting in the image data array texels.  You can take the following values://Image data Array texels format annotation//Gl_color_index color index value//gl_depth_component depth value//gl_red red pixel value//Gl_green green pixel value//Gl_blue Blue pixel value//Gl_alpha ALPHA value//Gl_rgb red, Green, Blue tricolor value//Gl_rgba red, green, blue and ALPHA value//GL_BGR Blue, green, red value/ /Gl_bgra Blue, Green, Red and alpha values//gl_luminance Grayscale value//Gl_luminance_alpha grayscale value and alpha value//****************************** *******************************************///this.format = format!== undefined? Format:three. rgbaformat;//pixel data in color format, default to Three.rgbaformat, and the following optional parameters////three. Alphaformat = 1019;//gl_alpha ALPHA value////three. Rgbformat = 1020;//red, Green, Blue tricolor value////three. Rgbaformat = 1021;//red, Green, Blue and Alpha values////three. Luminanceformat = 1022;//Grayscale value////three. Luminancealphaformat = 1023;//Grayscale value and Alpha value///********************************************************************* The parameter type defines the data type in the image data array texels. The values are as follows//image data array texels data type data type annotation//Gl_bitmap one (0 or 1)//Gl_byte signed 8 bit shaping value (one byte)//Gl_unsigned_byte unsigned 8 bit shaping value (one byte)//gl_s Hort signed 16-bit integer value (2 bytes)//gl_unsigned_short unsigned 16 non-shaped value (2 bytes)//Gl_int signed 32-bit shaping value (4 bytes)//Gl_unsigned_int unsigned 32-bit shaping value (4 bytes) Gl_float single-precision floating-point type (4 bytes)//gl_unsigned_byte_3_3_2 compression to unsigned 8-bit shaping: r3,g3,b2//Gl_unsigned_byte_2__3_rev compression to unsigned 8-bit shaping: b2,g3 , r3//Gl_unsigned_short_5_6_5 compressed to unsigned 16-bit shaping: r5,g6,b5//Gl_unsigned_short_5_6_5_rev compression to unsigned 16-bit shaping: b5,g6,r5//Gl_ Unsigned_short_4_4_4_4 compression to unsigned 16-bit shaping: r4,g4,b4,a4//Gl_unsiGned_short_4_4_4_4_rev compression to unsigned 16-bit shaping: a4,b4,g4,r4//gl_unsigned_short_5_5_5_1 compression to unsigned 16-bit shaping: r5,g5,b5,a1//gl_unsigned _short_1_5_5_5_rev compression to unsigned 16-bit shaping: a1,b5,g5,r5//gl_unsigned_int_8_8_8_8 compression to unsigned 32-bit shaping: r8,g8,b8,a8//gl_unsigned_int_8 _8_8_8_rev compression to unsigned 32-bit shaping: a8,b8,g8,r8//gl_unsigned_int_10_10_10_2 compression to 32-bit shaping: r10,g10,b10,a2//gl_unsigned_int_2_10_10 _10_rev compression to 32-bit shaping: a2,b10,g10,r10//You may notice that there is a compression type, first look at Gl_unsigned_byte_3_3_2, all red, green and blue are combined into a unsigned 8-bit shaping,//in GL In _unsigned_short_4_4_4_4, the red, green, blue, and alpha values are packaged into a non-signed short type. // *************************************************************************************************/// ********* S3TC Compressed Texture format ******************************************************************** Reference: http://www.opengpu.org/forum.php?mod=viewthread&tid=1010//s3tc=dxtc// Compressed textures stored using the S3TC format are stored in a 4x4 texture cell block (texel blocks), with 64bit or 128bit of texture data (blocks data) per texture Cell block (Texel texel). This requires that each map length and width should be a multiple of 4。 Images, as usual, store these 4x4 texture cell blocks (texel blocks) in order of row and column, and each texel blocks is considered a "pixel" of an image. For maps that are not multiples of 4 in length, the extra texture units are not placed in the image when they are compressed. (another argument is that less than 4 will be replaced by 4 processing, nvidia Photoshop DDS plugin//Does not allow such images to be stored in DXT format)//For a length of W, Width is h, and the block size is blocksize, its size is (in bytes) Ceil (W/4) * Ceil (H/4) * blocksize//When decoding a S3TC image, you can get the address (in bytes) of the block where a texture unit (x, y) is located by using the following equation//blocksize * (Ceil (W/4) * FL Oor (Y/3) + floor (X/4)//By the texture unit (x, Y) to obtain the block it is in the subscript://(x 4, y% 4)//There are 4 different S3TC image formats://1.compressed_rgb_s3tc_dxt1_ext//         Each 4x4 texture cell block contains 8 bytes of RGB data, which means that each image block is encoded in the order of 8 bytes (64bit), according to the order of the addresses, respectively://c0_lo,c0_hi,//c1_lo,c1_hi,// The 8 bytes of the bits_0,bits_1,bits_2,bits_3//block are used to express 3 volumes://color0 = C0_lo + C0_hi * 256//color1 = C1_lo + C1_hi * 2 56//bits = bits_0 + * (bits_1 + $ * (bits_2 + Bits_3))//Color0 and Color1 are 16-bit unsigned integers that are used to express colors in the format rgb-unsi Gned_short_5_6_5.  Use RGB0 and RGB1 respectively to represent//bits is a 32-bit unsigned integer, from bits you can find the 2-bit control code for the texture unit (x, y): (x, y between 0-3)//code (x, y) = bits[2 * (4 * y + x) + 1..2 * (4 * y + x) + 0] that is, 2* (4 * y + x) + 1-bit and 2 * (4 * y + x) bits//bits of the 31st bit is high, the No. 0 bit is low//so that you can find the RGB value of the texture unit (x, y)://RGB0, If Color0 > Color1 and Code (x, y) = = 0//RGB1, if color0 > Color1 and Code (x, y) = = 1//(2*RGB0+RGB1)/3, if color0 > Color1 and Code (x, y) = = 2//(RGB0+2*RGB1)/3, if C          Olor0 > Color1 and Code (x, y) = = 3//RGB0, if Color0 <= color1 and code (x, y) = = 0// RGB1, if Color0 <= color1 and code (x, y) = = 1//(RGB0+RGB1)/2, if Colo R0 <= Color1 and code (x, y) = = 2//BLACK, if Color0 <= color1 and code (x, y) = = 3//this Some arithmetic operations are vector operations, and each component r,g,b is calculated separately. Black=rgb (0,0,0)//The S3TC image of this format does not contain alpha, so the entire image is opaque//2.compressed_rgba_s3tc_dxt1_ext//each The 4 block contains 8 bytes of RGB color and minimum alpha transparency data, and the color data is extracted in exactly the same way as the Compressed_rgb_s3tc_dxt1_ext, except for the Alpha data://For the alpha value of the texture cell at (x, y)      The calculation method is as follows://0.0,   If Color0 <= Color1 and code (x, y) = = 3//1.0, otherwise//Note://First, compress an RGBA image into a compression format that contains only 1-bit alpha, all a The alpha value of the lpha<0.5 pixel is set to 0.0, while the alpha value of the alpha>=0.5 pixel is set to 1.0. While compressing an RGBA image into the compressed_rgba_s3tc_dxt1_ext format. Second, if the final alpha of a texture cell is 0.0, the r,g,b color value of the texture cell will be set to 0. Finally, for applications that are in this format, this rule must be followed. In addition, when a generic internal format is specified, it may be possible to use the Compressed_rgb_s3tc_dxt1_ext format,//But not allow the use of compressed_rgba_s3tc_dxt1_ext (which should be related to OpenGL)//3. compressed_rgba_s3tc_dxt3_ext//each 4*4 block contains 64bit of uncompressed alpha data and 64bit of RGB color data, where the color data follows and compressed_rgb_s3tc_dxt1_ EXT-like encoding,//The only difference is that the 2-bit control code is encoded in a way that is not obvious, in other words, like knowing Color0 > Color1, without needing to know Color0 and Color1 's specific values. The alpha value of each block's texture unit is sequentially encoded as 8 bytes://A0, A1, A2, A3, A4, A5, A6, a7//through these 8 bytes you can get a 64-bit unsigned integer://Alpha = a0 + * (A1 + 256 * (A2 + A3 * (A4 + * (A5 + * (a6 + * A7))))) The high is 63 bits, the low is 0 bits//the alpha value of the texture unit at (x, y) can be obtained by this alpha//alpha (x, y) = bits[4* (4*y+x) +3..4* (4*y+x) +0]//4 digits can represent a maximum value of 15, So the conversion to [0.0,1.0],alpha = Alpha (x, y)/15//4.compressed_rgba_s3tc_dxt5_ext//perA 4*4 block contains 64bit of compressed alpha data and 64bit of RGB color data, and the color data is partially compressed in exactly the same way as Compressed_rgba_s3tc_dxt3_ext. Alpha data is 8 bytes of compressed data, these 8 bytes://ALPHA0, ALPHA1, Bits_0, Bits_1, Bits_2, Bits_3, Bits_4, bits_5//where alpha0 and alpha1 are unsigned C The Har type data, which is converted to the actual alpha value needs to be multiplied by 1/255.0//other 6 digits bits_n, then can be decoded into a 48-bit unsigned integer//bits = bits_0 + * (Bits_1 + 2 * * (Bits_3 + * (Bits_4 + bits_5)))//Through BITS (high 47 low 0), you can obtain a 3-bit control code located at the (x, y) Texture unit://code (x, y) = bits[3* (4*y+x) +1..3  * (4*y+x) +0]//the alpha value of the texture unit at (x, y) based on Bits, code (x, y), alpha0, and alpha1://ALPHA0, code (x, y) = = 0//Alpha1, code (x, y) = = 1//(6*alpha0 + 1*alpha1)/7, ALPHA0 > A LPHA1 and code (x, y) = = 2//(5*alpha0 + 2*alpha1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 3//(4*a  LPHA0 + 3*alpha1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 4//(3*alpha0 + 4*alpha1)/7, ALPHA0 > Alpha1 and code (x, y) = = 5//(2*alpha0 + 5*alpha1)/7,         ALPHA0 > Alpha1 and Code (x, y) = = 6//(1*alpha0 + 6*alpha1)/7, ALPHA0 > Alpha1 and Code (x, Y ) = = 7//(4*alpha0 + 1*alpha1)/5, ALPHA0 <= alpha1 and code (x, y) = = 2//(3*alpha0 + 2*alpha1) /5, ALPHA0 <= alpha1 and code (x, y) = = 3//(2*alpha0 + 3*alpha1)/5, alpha0 <= alpha1 and Cod                             E (x, y) = = 4//(1*alpha0 + 4*alpha1)/5, ALPHA0 <= alpha1 and code (x, y) = = 5//0.0, ALPHA0 <= alpha1 and code (x, y) = = 6//1.0, alpha0 <= alpha1 an D code (x, y) = = 7//*******************************************S3TC Compressed texture format ****************************************** This.type = Type!== undefined? Type:three. The unsignedbytetype;//data type, which defaults to a non-signed 8-bit integer value (one byte) three. Unsignedbytetype, the following optional parameters also support the S3TC texture compression format.////three. Unsignedbytetype = 1009;//unsigned 8-bit integer value (one byte)////three. Bytetype = 1010;//with characterNumber 8-bit integer value (one byte)////three. Shorttype = 1011;//signed 16-bit integer value (2 bytes)////three. Unsignedshorttype = 1012;//Unsigned 16 not shaped value (2 bytes)////three. Inttype = 1013;//signed 32-bit integer value (4 bytes)////three. Unsignedinttype = 1014;//unsigned 32-bit integer value (4 bytes)////three. Floattype = 1015;//single-precision floating-point type (4 bytes)////three. Unsignedbytetype = 1009;//unsigned 8-bit integer value (one byte)////three. Unsignedshort4444type = 1016;//Compressed to unsigned 16-bit shaping: r4,g4,b4,a4////three. Unsignedshort5551type = 1017;//Compressed to unsigned 16-bit shaping: r5,g5,b5,a1////three. Unsignedshort565type = 1018;//Compressed to unsigned 16-bit shaping: r5,g6,b5////Three. Rgb_s3tc_dxt1_format = 2001;//Compressed color format without alpha channel////three. Rgba_s3tc_dxt1_format = 2002;//contains only 1-bit alpha channel compression color format////three. Rgba_s3tc_dxt3_format = 2003;//contains a compressed color format for the control Code alpha channel/////three. Rgba_s3tc_dxt5_format = 2004;//contains a 8-byte compressed color format for alpha channels//This.offset = new three. Vector2 (0, 0);//Offset value//this.repeat = new three. Vector2 (1, 1);//duplicate value//This.generatemipmaps = true;//Generate mipmaps, default = true//This.premultiplyalpha = false;//pre-multiply alpha value, If set to True, the RGB value of the Texel is first multiplied by the alpha value and then stored.//this.flipy = true;//whether the arts and sciences need to be flipped verticallyTurn, default is false//this.unpackalignment = 4; Valid values:1, 2, 4, 8 (see HTTP://WWW.KHRONOS.ORG/OPENGLES/SDK/DOCS/MAN/XHTML/GLPIXELSTOREI.XML)////The default value is 4. Specifies the start of calibration requirements for each pixel line in memory. The allowable values are 1 (byte-aligned), 2 (line-aligned, even-numbered sections), 4 (aligned), and 8 (lines begin at the boundary of the double word). See Glpixelstorei for more information. http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml//this._needsupdate = false;//When set to True, Mark Arts and Sciences have been updated.//This.onupdate = null;//is used to specify callback functions, when the arts update, execute callback function.////todo:this.onupdate usage have time to test//};//three. Texture.default_image = undefined;//Default texture picture//three. texture.default_mapping = new three. Uvmapping ();//default texture map mapping.//Three. Compressedtexture.prototype = Object.create (three. Texture.prototype);/*clone method///clone method clones a compressed texture object. *////<summary>clone</summary>///<param name = " Texture "type=" compressedtexture "> The compressed Texture object that accepts the result </param>///<returns type=" Compressedtexture "> Returns the compressed texture object </returns>three. CompressedTexture.prototype.clone = function () {var texture = new three. Compressedtexture (); Three. Texture.proTotype.clone.call (this, texture); return texture;//returns the compressed texture object}; 

Commercial Territory (http://blog.csdn.net/omni360/)

This article follows "Attribution-non-commercial use-consistent" authoring public agreement

Reprint Please keep this sentence: Business Domain-this blog focuses on Agile development and mobile and IoT device research: Data visualization, Golang, HTML5, WEBGL, three. JS, Otherwise, from this blog article refused to reprint or reprint, thank you for your cooperation.

The following code is a comment for the texture/compressedtexture.js file in the three.js source file.

More updates in: Https://github.com/omni360/three.js.sourcecode

Three.js Source Note (37) Texture/compressedtexture.js