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

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

/** * @author mrdoob/http://mrdoob.com/* @author alteredq/http://alteredqualia.com/* @author Szimek/https://github The. com/szimek/*//*///texture class is used to create a reflection refraction or texture map object for a polygon///The most important property of this class 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. example//load a texture, set wrap mode to repeat var texture = three. Imageutils.loadtexture ("textures/water.jpg"); Texture.wraps = three. repeatwrapping; Texture.wrapt = three. repeatwrapping; Texture.repeat.set (4, 4);///*////<summary>texture</summary>///<param name = "image" type= "image" > JavaScript Image Type Object </param>///<param name = "Mapping" type= "number" > Mapping mode, the available constants refer to the following comments </param>/// <param name = "wraps" type= "number" >s direction override mode, use constant reference below comment </param>///<param name = "Wrapt" type= "number" >t direction override mode, use constant reference below comment </param>///<param name = "Magfilter" type= "number" > Texture in the magnification of the filter, the use of constant reference to the following note </param>///<param name = "Minfilter" type= "number" > texture at the time of the reduction of the filter, the use of constant reference to the following comments </ Param>///<param name = "format" type= the color format of the "number" > Pixel data, the available constants refer to the following comment </param>///<param name = "Type" Type= "number" > data type, default to non-signed 8-bit shaping value </param>///<param name = "Anisotropy" type= "Float" > anisotropy, Value Range 0.0-1.0, Often used to produce different surface effects through this value, wood and metal are luminous, but the characteristics of luminescence are different. </param>///<returns type= "Texture" > returns the Texture object created </returns >three. Texture = function (image, mapping, wraps, WRAPT, Magfilter, Minfilter, format, type, anisotropy) {this.id = three. Textureidcount ++;//Texture Property Idthis.uuid = three. Math.generateuuid ();//Texture UUID (Universal unique Identifier) Property this.name = ";//Texture Name property, 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 and the location of the camera, near the place, the image of the actual pixel is larger, far away from the actual pixels will be smaller, you need to do some compression, such as a 64The *64 figure, which appears in the vicinity, may be 50*50, and may appear to be 20*20 in the distance.       If it is limited to the simple support of some pixels, will reduce the image loss of a lot of detail, the picture becomes very rough, so, graphics has a lot of complicated ways to deal with the problem of reducing the picture, so that the reduced image is still clear, however, these calculations will take a certain amount of 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 many shrinking pictures, such as a picture of 64*64, will produce 7 pictures of 64*64,32*32,16*16,8*8,4*4,2*2,1*1, When you need to draw pixels to 20*20 on the screen, the program just uses 32*32 and 16*16 to calculate a picture that will be displayed as 20*20 size, which is much better and faster than the image computed from the original piece of 32*32 alone.       . Reference: Http://zh.wikipedia.org/wiki/Mipmap Reference: Http://staff.cs.psu.ac.th/iew/cs344-481/p1-williams.pdf reference: HTTP://BL og.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 map.//About texture S-direction, T-direction reference http://blog.csdn.net/kylaoshu364/article/details/ 5608851this.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. and 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 (English: Texel, i.e. texture element or texture 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. When the texture is enlarged or shrunk, the filtering method, the filter mode, and the Three.nearestfilter are performed on the texture base to filter the nearest neighbor,//three. Nearestmipmapnearestfilter in MILinear interpolation is performed between the P-layers, and the nearest filter is performed,//three. Nearestmipmaplinearfilter selects the closest MIP layer and performs the closest filtering,//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 a linear filter 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 perform 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 tri-primary value Gl_rgba red, GrEen, blue and alpha values GL_BGR blue, green, red values Gl_bgra blue, green, red and alpha values gl_luminance grayscale values Gl_luminance_alpha grayscale values and Alph A value *************************************************************************/this.format = format!== undefined? Format:three. rgbaformat;//pixel data in color format, default to Three.rgbaformat, and the following optional parameter//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 integer value (one byte) gl_short 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 compressed to unsigned 8-bit shaping: r3,g3,b2gl_unsigned_byte_2__3_rev compression to unsigned 8-bit shaping: b2,g3,r3gl_unsigned _short_5_6_5 compression to unsigned 16-bit shaping: R5,g6,b5gl_unsigned_short_5_6_5_rev compression to unsigned 16-bit shaping: b5,g6,r5gl_unsigned_short_4_4_4_4 compression to unsigned 16-bit shaping: R4,g4,b4,a4gl_unsigned_short_4_4_4_4_rev compression to unsigned 16-bit shaping: a4,b4,g4,r4gl_unsigned_short_5_5_5_1 compression to unsigned 16-bit shaping: R5,G5,B5 , A1gl_unsigned_short_1_5_5_5_rev compressed to unsigned 16-bit shaping: a1,b5,g5,r5gl_unsigned_int_8_8_8_8 compression to unsigned 32-bit shaping: r8,g8,b8,a8gl_ Unsigned_int_8_8_8_8_rev compression to unsigned 32-bit shaping: a8,b8,g8,r8gl_unsigned_int_10_10_10_2 compression to 32-bit shaping: r10,g10,b10,a2gl_unsigned_ Int_2_10_10_10_rev compression to 32-bit shaping: a2,b10,g10,r10 You may notice a compression type, first look at Gl_unsigned_byte_3_3_2, all red, green and blue is combined into a unsigned 8-bit shape, in gl_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=1010S3TC= DXTC compressed textures stored using the S3TC format are a block of texture cells in 4x4 (texeL blocks) is stored for the basic unit, with 64bit or 128bit of texture data per texture cell block (texel blocks) (Texel data). 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's 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) * Floor (Y/3) + F Loor (X/4) obtains the subscript of the block it is in by using the texture unit (x, y): 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 sequential 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,bits_3 block of 8  Bytes are used to express 3 volumes: Color0 = C0_lo + C0_hi * color1 = C1_lo + c1_hi * * * bits = bits_0 + * (Bits_1 + The Color0 and Color1 are 16-bit unsigned integers that are used to express the color, and the format is rgb-unsigned_short_5_6_5. * (Bits_2 + Bits_3). Using RGB0 and RGB1, respectively, to represent bits as a 32-bit unsigned integer, you can find the 2-bit control code for the texture unit (x, y) in bits: (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 31st bits are high, and the No. 0 bit is low so you can find the RGB value of the texture unit at (x, y): RGB0, If Color0 > Color1 and Code (x, y) = = 0 RGB1, if color0 > Color         1 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 Col Or0 <= Color1 and code (x, y) = = 2 BLACK, if Color0 <= color1 and code (x, y) = = 3 These arithmetic operations Are all vector operations, and each component r,g,b is calculated separately. Black=rgb (0,0,0) S3TC images in this format do not contain alpha, so the entire image is opaque 2. Compressed_rgba_s3tc_dxt1_ext each 4*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 Compressed_rgb_s3tc_dxt1_ext. The difference is the Alpha data: for the alpha value of the texture cell (x, y), the method is calculated 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, and the alpha value of all alpha<0.5 pixels is set to 0.0, and 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 common internal format is specified, it may be possible to use the Compressed_rgb_s3tc_dxt1_ext format, but the use of compressed_rgba_s3tc_dxt1_ext (which should be related to OpenGL) 3 is not allowed. 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 the exact 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 * (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 bit number can represent the maximum value is 15, so the conversion to [ 0.0,1.0],alpha = Alpha (x, y)/154.compressed_rgba_s3tc_dxt5_ext each 4*4 block contains 64bit of compressed Alpha data and 64bit of RGB color data, Color data Partial compression method and Compressed_rgba_s3tc_dxt3_extFully consistent. The Alpha data is 8 bytes of compressed data, 8 bytes: alpha0, Alpha1, Bits_0, Bits_1, Bits_2, Bits_3, Bits_4, bits_5 where alpha0 and alpha1 are unsigned Char type data, which is translated into the actual alpha value needs to be multiplied by 1/255.0 other 6 digits bits_n, then it can be decoded into a 48-bit unsigned integer bits = bits_0 + * (Bits_1 + 256 * (Bits_3 + bits_4 * (bits_5)))) With bits (high 47 low 0), a 3-bit control code located at 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 can obtain the alpha value of the (x, y) 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*alph A0 + 2*ALPHA1)/7, ALPHA0 > Alpha1 and Code (x, y) = = 3 (4*alpha0 + 3*alpha1)/7, ALPHA0 > Alpha 1 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 C Ode (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 code (x, y) = = 4 (1*ALPHA0 + 4*alpha1)/5, ALPHA0 <= alpha1 and code (x, y) = = 5 0.0, Alph A0 <= 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 with no alpha channel//three. Rgba_s3tc_dxt1_format = 2002;//contains only the compressed color format//Three of the 1-bit alpha channel. Rgba_s3tc_dxt3_format = 2003;//contains the compressed color format//Three of the class as the control code alpha channel. 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 = Truethis.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 falsethis.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 (lineStart at the boundary of the double word).  See Glpixelstorei for more information. Http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xmlthis._needsUpdate = false;//When set to True, The Mark Arts and sciences have been updated. This.onupdate = null;//is used to specify a callback function, and when the arts update, the callback function is executed.//todo:this.onupdate usage time to experiment}; Three. Texture.default_image = undefined;//default texture picture THREE.Texture.DEFAULT_MAPPING = new three. Uvmapping ();//The default texture map mapping method./******************************************** The following are the function functions provided by the texture object. ******************** /three. Texture.prototype = {Constructor:three. The texture,//constructor that returns a reference to the Texture function that created this object/*///get the Needsupdate method used to obtain whether the texture object needs to update the value of the tag///note:get needsupdate () The usage is Quaternion.prototype.needsUpdate, which can be used on browsers other than IE browsers. *////<summary>get needsupdate</summary> <returns type= "Boolean" > returns whether the texture object needs to update the value of the tag </returns>get needsupdate () {//return this._needsupdate;},/ The *///get Needsupdate method is used by setting whether the texture object needs to update the value of the tag (parameter value), with the new texture object.///note:get needsupdate () The usage is Quaternion.prototype.needsUpdate, which can be used on browsers other than IE browsers. *////<summary>get NeedsupdatE</summary>///<param name = "Value" type= "Boolean" >true or False</param>///<returns type= " Texture "> returns the updated Texture object. </returns>set needsupdate (value) {if (value = = True) this.update ();//Update Texture Object this._needs Update = Value;},/*clone Method///clone method clones a texture object. *////<summary>clone</summary>///<param name = "Texture" Type= "Texture" > Texture object that accepts the result </param>///<returns type= "Texture" > Return Texture Object </returns>clone:function ( Texture) {if (texture = = = undefined) texture = new three. Texture (); texture.image = This.image;texture.mipmaps = This.mipmaps.slice (0); texture.mapping = this.mapping; Texture.wraps = This.wraps;texture.wrapt = This.wrapt;texture.magfilter = This.magfilter;texture.minfilter = This.minfilter;texture.anisotropy = This.anisotropy;texture.format = This.format;texture.type = This.type; Texture.offset.copy (This.offset); texture.repeat.copy (this.repeat); texture.generatemipmaps = This.generatemipmaps ; Texture.premultiplyalpha = This.premultiplyalpha;texture.flipy = This.flipy;texture.unpackalignment = This.unpackalignment;return texture;//return Texture Object},/* The Update method///update method updates the Texture object *////<summary>update</summary>update:function () {this.dispatchevent ({type: ' Update ');},/*dispose method///dispose method removes the object from memory and frees the resource.///note: When deleting a texture object, do not forget to call this method, otherwise it will cause a memory leak .*////<summary> Dispose</summary>dispose:function () {this.dispatchevent ({type: ' Dispose '});}};/ The Eventdispatcher method is applied to the current texture object. THREE.EventDispatcher.prototype.apply (three. Texture.prototype);///Set Global Texture object counter. Three.textureidcount = 0;

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/texture.js file in the three.js source file.

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

Three.js Source Note (34) Texture/texture.js