Three.js Source Note (35) Texture/datatexture.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/datatexture.js file in the three.js source file.

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

/** * @author alteredq/http://alteredqualia.com/*//*///datatexture class is used to create a reflective refraction or texture map object for a polygon based on the image data, Unlike the Three.texture method, where the image is used in the data format///This class is the most important attribute is data, which is a JavaScript image type object with the format of the database. 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. *////<summary>datatexture</summary>///<param name = "Data" type= "number" > Image data </param>/// <param name = "width" type= "number" > Image width </param>///<param name = "height" type= "number" > Image height </ Param>///<param name = "format" type= "number" > Pixel data color format, refer to Texture/texture.js's comments </param>///<param Name = "type" type= "number" > data type, default to unsigned 8-bit shaping value </param>///<param name = "Mapping" type= "numbers" > Mapping mode, Refer to texture/texture.js comment </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 notes </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>three. Datatexture = function (data, width, height, format, type, mapping, wraps, WRAPT, Magfilter, Minfilter, anisotropy) {THR Ee. Texture.call (this, null, mapping, wraps, WRAPT, Magfilter, Minfilter, format, type, anisotropy);//Call method that calls the Texture object, the original The method that belongs to texture is given to the current object datatexture to use. This.image = {data:data, width:width, height:height};//parameters Data,width, The height is assigned to the Image property};/***************************************************** below is the method property definition for the Datatexture object, inherited from 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) Properties//this.name = ';//Texture name attribute, dispensable//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 the 32*32 and 16*16 these two pictures to calculate the will show as 20*20 size of a picture, which is more than the use of 32*32//that the original The image computed by the initial slice works much better and faster.//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; The T-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)///*//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. On theWhen laying textures on three-dimensional surfaces, the texel is mapped to the appropriate output image pixels through texture mapping techniques. 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 a compression type, Look first.Gl_unsigned_byte_3_3_2, all red, green and blue are combined into a non-signed 8-bit shaping,//In Gl_unsigned_short_4_4_4_4 red, green, blue and Alph A value is 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))//through the texture unit (x, y) to get itSubscript of The Block in://(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, That is, each image block is encoded in the order of 8 bytes (64bit), according to the order of the address, they are://c0_lo,c0_hi,//c1_lo,c1_hi,//Bits_0,bits_1,bits_2,bi The 8 bytes of the ts_3//block are used to express 3 volumes://color0 = C0_lo + C0_hi * 256//color1 = C1_lo + C1_hi * 256//bits = bits _0 + bits_1 * (bits_2 + Bits_3)//Color0 and Color1 are 16-bit unsigned integers, which are used to express colors in the format rgb-unsigned_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 color0 > 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 Color0 <= color1 and code (x, Y = = 2//BLACK, if Color0 <= color1 and code (x, y) = = 3//These arithmetic operations are vector operations, respectively, to calculate the respective component R,g,b 。 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 is as follows://0.0, if color0 <= color1 and code (x, y) = = 3//1.0, otherwise//Note://First, put a The RGBA image is compressed into a compression format that contains only 1-bit alpha, and the alpha value of all alpha<0.5 pixels is set to 0.0, while the alpha value of alpha>=0.5 pixels 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 common 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 (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 color data is encoded in the same way as compressed_rgb_s3tc_dxt1_ext,//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, You do not need to know the specific values of Color0 and Color1. 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//each 4*4 block contains 64bit of compressed Alpha data and 64bit of RGB color data, 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)))//via Bits (high 47 low 0),The 3-bit control code that is located in the (x, y) texture unit can be obtained://code (x, y) = bits[3* (4*y+x) +1..3* (4*y+x) +0]//based on Bits, code (x, y), alpha0, and alpha1 (x, y) The alpha value of the texture unit://ALPHA0, code (x, y) = = 0//Alpha1, code ( x, y) = = 1//(6*alpha0 + 1*alpha1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 2//(5*alpha0 + 2*alpha 1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 3//(4*alpha0 + 3*alpha1)/7, alpha0 > alpha1 and Cod E (x, y) = = 4//(3*alpha0 + 4*alpha1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 5//(2*alpha0 + 5*alp HA1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 6//(1*alpha0 + 6*alpha1)/7, ALPHA0 > Alpha1 and C Ode (x, y) = = 7//(4*alpha0 + 1*alpha1)/5, ALPHA0 <= alpha1 and code (x, y) = 2//(3*alpha0 + ALPHA1)/5, ALPHA0 <= alpha1 and code (x, y) = = 3//(2*alpha0 + 3*alpha1)/5, ALPHA0 <= alpha1 and code (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 and 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;//signed 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 vertically, the 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, The Mark Arts and sciences have been updated.//This.onupdate = Null;//is used to specify a callback function that executes a callback function when the arts update.////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. Datatexture.prototype = Object.create (three. Texture.prototype);/*clone method///clone method clones a texture object. *////<summary>clone</summary>///<param name = " Texture "type=" datatexture "> Accept result Texture object </param>///<returns type=" Datatexture "> Return Texture Object </returns >three. DataTexture.prototype.clone = function () {var texture = new three. Datatexture (); Three. Texture.prototype.clone.call (this, Texture); return texture;//returns the 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/datatexture.js file in the three.js source file.

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

Three.js Source Note (35) Texture/datatexture.js