Three. js source code annotation (34) Texture/Texture. js

Three. js source code annotation (34) Texture/Texture. js

 

I also just started learning. Sorry for the errors in many places.

The following code is a comment on the Texture/Texture. JS file in the THREE. js source code file.

 

/*** @ Author mrdoob/http://mrdoob.com/* @ author alteredq/http://alteredqualia.com/* @ author szimek/https://github.com/szimek/ * // The Texture class is used to create a reflection or texture Paster object // This class is the most important attribute is image, this is a JavaScript Image type object. The first parameter passed in is the object, and the objects following it are optional. If it is set by default, the default value is filled, and the default value is often filled. /// Attribute magFileter and minFileter specify the filtering method for enlarging and downgrading a texture: newest vertex, bilinear interpolation, and so on. /// Generate a texture from the url and call Three. ImageUtils. loadTexture (paras). /// this function returns a texture type object. Inside the function, the THREE. ImageLoader. load (paras) function is called again, and the THREE. Texture () constructor is called internally to generate a 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 );///*////Texture///JavaScript Image type object ///Ing mode. For available constants, see the following comments ///S-direction coverage mode. For available constants, see the following comments ///T-direction coverage mode. For available constants, see the following comments ///The filtering method when the texture is zoomed in. For available constants, see the following comments ///The filtering method when the texture is reduced. For available constants, see the following comments ///The color format of the pixel data. For available constants, see the following comments ///Data type. The default value is an unsigned 8-bit integer value ///The value ranges from 0.0 to 1.0. This value is often used to produce different surface effects. Wood and metals emit light, but the characteristics of light-emitting are different .///
 
  
Returns the created texture object.
 THREE. texture = function (image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy) {this. id = THREE. textureIdCount ++; // texture attribute idthis. uuid = THREE. math. generateUUID (); // texture uuid (universal unique identifier code) attribute this. name = ''; // specifies the texture name attribute. this is optional. image = image! = Undefined? Image: THREE. Texture. DEFAULT_IMAGE; // Texture image. The most important attribute is Image, which is a JavaScript image type object. /* In the 3D world, the size of an image is determined by the camera position. In the near area, the actual pixels of the image are larger, for example, a 64*64 image may show 50*50 at a close point, it may be 20*20 in the distance. if only some pixels are removed, the reduced image will lose a lot of details and the image will become very rough. Therefore, there are many complicated ways to deal with the problem of narrowing down the image in graphics, the reduced images are still clear. However, these computation takes some time. mipmap texture technology is currently the most effective way to solve the relationship between texture resolution and viewpoint distance. It will first compress the image into many gradually reduced images, such as a 64*64 image, will generate 64*64, 32*32, 16*16, 8*8, 4 *, 2*2, 1*1 7 images, when the screen needs to draw a pixel of 20*20, the program uses the 32*32 and 16*16 images to calculate an image that is about to be displayed as 20*20. The image calculated from the original 32*32 is 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 = []; // attribute array for storing mipmaps this. mapping = mapping! = Undefined? Mapping: THREE. texture. DEFAULT_MAPPING; // ing mode, which has THREE. UVMapping flat ing, THREE. cubeReflectionMapping cube reflection ing, THREE. cubeRefractionMapping cube refraction ing, THREE. sphericalReflectionMapping spherical reflection ing, THREE. sphericalRefractionMapping spherical refraction ing. // about the texture s direction, t direction reference http://blog.csdn.net/kylaoshu364/article/details/5608851this.wrapS = wrapS! = Undefined? WrapS: THREE. ClampToEdgeWrapping; // second direction overwrite mode. The default value is THREE. ClampToEdgeWrapping. The value exceeding 1.0 is fixed to 1.0. The texture of more than 1.0 Other places follows the texture of the last pixel. Used for overlay filtering, the texture needs to be precisely covered from 0.0 to 1.0 without blurred boundaries. // There are THREE. RepeatWrapping (repeated) and THREE. MirroredRepeatWrapping (image) this. wrapT = wrapT! = Undefined? WrapT: THREE. ClampToEdgeWrapping; // T-direction overwrite mode. The default value is THREE. ClampToEdgeWrapping. The value exceeding 1.0 is fixed to 1.0. The texture of more than 1.0 Other places follows the texture of the last pixel. Used for overlay filtering, the texture needs to be precisely covered from 0.0 to 1.0 without blurred boundaries. // There are THREE. repeatWrapping (repeated) and THREE. mirroredRepeatWrapping (image)/* grain plain (English: Texel, that is, the compound word of texture element or texture pixel) is short for texture elements, it is the basic unit in the computer graphics texture space [1]. As images are arranged by pixels, textures are represented by grain arrangement. The grain content can be defined by the image range, and its range can be obtained through some simple methods, such as the threshold value. The Wallonia distribution can be used to describe the spatial relationship between grain elements. This means that we can divide the entire texture into consecutive polygon by dividing the vertical bisector of the link between the grain and the surrounding grain map. The result is that every texture graph has a Wallonia polygon to circle it. Texture ing technology is used to map a grain to an appropriate output image pixel when texture is laid on a 3D surface. In today's computers, this process is mainly completed by graphics cards. The texture operation starts at a certain position in the space. This position can be in the world coordinate system, but is usually set in the object coordinate system. In this way, the texture will move along with the object. Then, the position (coordinate) is converted from the three-dimensional vector value to the two-dimensional Vector Value (uv) in the range of 0 to 1 by means of projection ). Then, the two-dimensional vector value is multiplied by the texture resolution to obtain the position of the grain. When the position of the required grain is not an integer, the texture filter must be used for processing. // The filtering method when the texture is enlarged or reduced. The filtering method is THREE. nearestFilter performs the nearest filter on the texture base layer, // THREE. nearestMipMapNearestFilter performs linear interpolation between the mip layer and performs the nearest filter. // THREE. nearestMipMapLinearFilter: select the nearest mip layer and perform the nearest filter. // THREE. linearFilter performs linear filtering on the texture base layer // THREE. linearMipMapNearestFilter selects the closest mip layer and performs linear filtering. // THREE. linearmimaplinearfilter executes linear interpolation between the mip layer and performs linear filtering. For details, refer to: Linear Tatic/297080342013467552467/*/this. magFilter = magFilter! = Undefined? MagFilter: THREE. LinearFilter; // The filtering method when the texture is enlarged. THREE. LinearFilter performs linear filtering on the texture base layer. this. minFilter = minFilter! = Undefined? MinFilter: THREE. LinearMipMapLinearFilter; // The filtering method when the texture is reduced. THREE. linearmimapnearestfilter selects the nearest mip layer and performs linear filtering. this. anisotropy = anisotropy! = Undefined? Anisotropy: 1; // undirected, value range: 0.0-1.0. This value is often used to produce different surface effects. both wood and metal emit light, however, the characteristics of light-emitting are different. /*************************************** * *********************************** parameter format defines image data format in the array texels. Optional values: image data array 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 three primary colors GL_RGBA Red, Green, Blue and Alpha values GL_BGR Blue, Green, Red values GL_BGRA Blue, Green, red and Alpha GL_LUMINANCE gray GL_LUMINANCE_ALPHA gray and Alpha values *************************** **************************************** * *****/this. format = format! = Undefined? Format: THREE. RGBAFormat; // color format of pixel data. The default value is THREE. RGBAFormat, which also has the following optional parameters // THREE. alphaFormat = 1019; // GL_ALPHA Alpha value // THREE. RGBFormat = 1020; // Red, Green, and Blue values // THREE. RGBAFormat = 1021; // Red, Green, Blue, and Alpha values // THREE. luminanceFormat = 1022; // gray value // THREE. luminanceAlphaFormat = 1023; // gray value and Alpha value /******************************** **************************************** * the parameter type defines the image. The data type in the data array texels. The following figure shows the value of GL_BITMAP (0 or 1) GL_BYTE signed 8-bit integer value (one byte) in the Data Type annotation in the image data array texels) GL_UNSIGNED_BYTE unsigned 8-bit integer value (one byte) GL_SHORT signed 16-bit integer value (2 bytes) GL_UNSIGNED_SHORT unsigned 16 uninteger value (2 bytes) GL_INT signed 32-bit integer value (4 bytes) GL_UNSIGNED_INT unsigned 32-bit integer value (4 bytes) GL_FLOAT single precision floating point type (4 bytes) gl_unsigned_byte_3_2 compressed to unsigned 8-bit integer: r3, G3, b2gl_unsigned_byte_24173_rev compressed to unsigned 8-bit integer: B2, G3, R3GL_UNSIGNED_SHORT_5_6_5 compressed to unsigned 16-bit integer: R5, G6, and limit compressed Unsigned 16-bit integer: B5, G6, R5GL_UNSIGNED_SHORT_4_4_4_4 compressed to unsigned 16-bit integer: R4, G4, B4, expires compressed to unsigned 16-bit integer: A4, B4, G4, r4GL_UNSIGNED_SHORT_5_5_5_1 compression to unsigned 16-bit shaping: R5, G5, B5, and B5. compression to unsigned 16-bit shaping: A1, B5, G5, and ↓ compression to unsigned 32-bit shaping: r8, G8, B8, and struct are compressed to 32-bit unsigned_int_10_10_10_2 unsigned_integer: R10, G10, B10, A2GL_UNSIGNED_INT_2_10_10 _ 10_REV compression to 32-bit integer: A2, B10, G10, R10 you may notice the compression type. first look at gl_unsigned_byte_3_2, all red, green and blue are combined into an unsigned 8-bit integer. In GL_UNSIGNED_SHORT_4_4_4_4, red, green, blue, and alpha values are packaged into an unsigned short type. **************************************** **************************************** *****************//********************* ********************* S3TC compression texture format ************** **************************************** **************************************** * ***** reference: http://www.opengpu.org/forum.php? Mod = viewthread & tid = 1010S3TC = DXTC the compressed texture stored in S3TC format is stored in the basic unit of 4x4 Texture unit blocks (texel blocks). Each Texture unit block (texel blocks) it has 64-bit or-bit texture data ). In this way, the length and width of each texture must be a multiple of 4. The image stores these 4x4 texture blocks (texel blocks) in order of row and column. Each texel blocks is regarded as a "pixel" of an image ". For textures with a length not multiple of 4, the texture units that are added will not be put into the image during compression. (Another saying is that less than 4 will be filled with space for 4 processing, Nvidia's Photoshop DDS plug-in does not allow such images to be stored in DXT format) for a length of w, for an image whose width is h and the block size is blocksize, its size is (calculated in bytes) ceil (w/4) * ceil (h/4) * When decoding an S3TC image, blocksize can use the following formula to obtain the address of the block where a texture unit (x, y) is located (calculated in bytes) blocksize * (ceil (w/4) * floor (y/3) + floor (x/4) through the Texture unit (x, y) returns the subscript of the block in which it is located: (x % 4, y % 4) there are four different S3TC image formats: 1. COMPRESSED_RGB_S3TC_DXT1_EXT each 4x4 Texture unit block contains 8 bytes of RGB data. That is to say, each image block is encoded into 8 bytes (64 bit) in order of addresses. They are: c0_lo, c0 The eight bytes of _ hi, c1_lo, c1_hi, bits_0, bits_1, bits_2, and bits_3 are used to express three quantities: color0 = c0_lo + c0_hi * 256 color1 = c1_lo + c1_hi * 256 bits = bits_0 + 256*(bits_1 + 256*(bits_2 + 256 * bits_3 )) color0 and color1 are 16-bit UNSIGNED_SHORT_5_6_5 integers used to express colors. RGB0 and RGB1 are used to indicate that bits is a 32-bit unsigned integer. From bits, we can obtain the two-digit control code of the texture unit (x, y): (x, y between 0 and 3) code (x, y) = bits [2*(4 * y + x) + 1 .. 2*(4 * y + x) + 0]: 2*(4 * y + x) + 1 bit and 2*(4 * y + x) bits 31st bits are high, and 0th bits are low. In this way, the RGB values of the texture unit located in (x, y) can be obtained: 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, which calculate the R, G, and B of each component respectively. The S3TC image in the format of BLACK = RGB (, 0) does not contain Alpha, so the entire image is not transparent. COMPRESSED_RGBA_S3TC_DXT1_EXT each 4*4 pieces of 8-byte RGB color and minimum Alpha transparency data, the color data extraction method is exactly the same as COMPRESSED_RGB_S3TC_DXT1_EXT, the difference is Alpha data: for the Alpha value of the texture unit 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 containing only one Alpha. The Alpha value of all pixels with Alpha <0.5 is set to 0.0, the Alpha value of Alpha> = 0.5 pixels is set to 1.0. when a RGBA image is compressed into COMPRESSED_RGBA_S3TC_DXT1_EXT format. Secondly, if the final Alpha of A Texture unit is 0.0, the R, G, and B color values of the texture unit will be set to 0. finally, applications in this format must comply with this rule. In addition, when a general internal format is specified, COMPRESSED_RGB_S3TC_DXT1_EXT format may be used, but COMPRESSED_RGBA_S3TC_DXT1_EXT is not allowed (it should be related to OpenGL) 3. COMPRESSED_RGBA_S3TC_DXT3_EXT each 4*4 blocks contain 64bit uncompressed Alpha data and 64bit RGB color data. The color data is encoded in the same way as COMPRESSED_RGB_S3TC_DXT1_EXT, the only difference is that the two-bit control code is encoded in an unnoticeable way. In other words, it is like knowing Color0> Color1 without knowing the specific values of Color0 and Color1. The Alpha value of the texture unit of each block is sequentially encoded into 8 Bytes: a0, a1, a2, a3, a4, a5, a6, a7 uses these 8 bytes to obtain a 64-bit unsigned integer: alpha = a0 + 256*(a1 + 256*(a2 + 256*(a3 + 256*(a4 + 256*(a5 + 256*(a6 + 256 * a7 ))) ))) the high position is 63 digits, and the low position is 0 digits. With this alpha, we can obtain the Alpha value of the texture Unit located at (x, y) alpha (x, y) = bits [4*(4 * y + x) + 3 .. 4*(4 * y + x) + 0] the maximum value represented by 4 digits is 15. Therefore, it is converted to [0.0, 1.0], Alpha = alpha (x, y) /154. COMPRESSED_RGBA_S3TC_DXT5_EXT each 4*4 blocks contain 64-bit compressed Alpha data and 64-bit RGB color data. Is exactly the same as COMPRESSED_RGBA_S3TC_DXT3_EXT. Alpha data is 8 bytes of compressed data. The eight bytes are alpha0, alpha1, bits_0, bits_1, bits_2, bits_3, bits_4, and bits_5. alpha0 and alpha1 are unsigned char data, to convert to the actual Alpha value, we need to multiply the other 6 digits 1/255.0 bits_N, then it can be decoded into a 48-bit unsigned integer bits = bits_0 + 256*(bits_1 + 256*(bits_2 + 256*(bits_3 + 256*(bits_4 + 256 * bits_5) ))) through bits (47 at a high position and 0 at a low position), we can obtain the three-digit control code: code (x, y) in the (x, y) Texture unit) = bits [3*(4 * y + x) + 1 .. 3*(4 * y + x) + 0] texture units (x, y) can be obtained based on bits, code (x, y), alpha0, and alpha1. Alpha value of: 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 * alpha1)/7, alpha0> alpha1 and code (x, y) = 3 (4 * alpha0 + 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 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 compression texture format ******* **************************************** **************************************** * ************/This. type = type! = Undefined? Type: THREE. unsignedByteType; // data type. The default value is the unsigned 8-bit integer value (one byte) THREE. unsignedByteType. the following optional parameters also support 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. signed type = 1011; // signed 16-bit integer value (2 bytes) // THREE. unsigned1_type = 1012; // unsigned 16 unshaping value (2 bytes) // THREE. intType = 1013; // 32-bit signed integer value (4 bytes) // THREE. unsignedIntType = 1014; // 32-bit unsigned integer value (4 bytes) // THREE. floatType = 1015; // single precision Float Type (4 bytes) // THREE. unsignedByteType = 1009; // unsigned 8-bit integer value (one byte) // THREE. unsignedda-4444type = 1016; // compress to unsigned 16-bit integer: R4, G4, B4, A4 // THREE. unsignedda-5551type = 1017; // compress to unsigned 16-bit shaping: R5, G5, B5, A1 // THREE. unsigned316565type = 1018; // compress to unsigned 16-bit integer: R5, G6, B5 // THREE. RGB_S3TC_DXT1_Format = 2001; // The compression color format without the alpha channel // THREE. RGBA_S3TC_DXT1_Format = 2002; // compression color format containing only one alpha channel // THREE. RGBA_S3TC_DXT3_Format = 2003; // contains Class is the compression color format of the control code alpha channel // THREE. RGBA_S3TC_DXT5_Format = 2004; // The 8-byte alpha channel compression color format this. offset = new THREE. vector2 (0, 0); // offset value this. repeat = new THREE. vector2 (1, 1); // duplicate value this. generateMipmaps = true; // whether to generate Mipmaps. The default value is truethis. premultiplyAlpha = false; // pre-multiply Alpha value. If it is set to true, the rgb value of the grain is first multiplied by the alpha value, and then stored in. this. flipY = true; // whether vertical flip is required for Arts and Sciences. The default value is falsethis. unpackAlignment = 4; // valid values: 1, 2, 4, 8 (see http: // w Ww.khw.s.org/opengles/sdk/docs/man/xhtml/glpixelstorei.xml) // The default value is 4. Specifies the requirements to start calibration for each pixel row in the memory. // The allowed values are 1 (byte alignment), 2 (row alignment, even number of bytes), 4 (alignment), and 8 (the row begins at the boundary of the double character ). For more information, see glpixelstorei. // Http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xmlthis._needsUpdate = false; // when set to true, Mark arts and sciences have been updated. this. onUpdate = null; // used to specify the callback function. When arts and sciences are updated, the callback function is executed. // TODO: this. onUpdate usage has time to test}; THREE. texture. DEFAULT_IMAGE = undefined; // default texture image THREE. texture. DEFAULT_MAPPING = new THREE. UVMapping (); // default texture ing method. /*************************************** * *** the following functions are provided by the Texture object. **************************************** /THREE. texture. prototype = {constructor: THREE. texture, // constructor, returns a reference to the Texture function that creates this object. The/* // get needsUpdate method is used to obtain the value of the Texture object to be updated. // NOTE: get needsUpdate () is used in Quaternion. prototype. needsUpdate, which can be used in browsers other than IE. *////Get needsUpdate///
 
  
Returns whether the tag value needs to be updated for a texture object.
 Get needsUpdate () {// return this. _ needsUpdate;},/* // get needsUpdate is used to set whether the marked value (parameter value) needs to be updated for the texture object and the new texture object. /// NOTE: the usage of get needsUpdate () is Quaternion. prototype. needsUpdate, which can be used in browsers other than IE. *////Get needsUpdate///True or false ///
 
  
Returns the updated texture object.
 Set needsUpdate (value) {if (value = true) this. update (); // update the texture object this. _ needsUpdate = value;},/* clone method // clone method to clone a texture object. *////Clone///Texture object that receives the result ///
 
  
Returns a texture object.
 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; // returns the texture object},/* update method // update method updates the texture object *////UpdateUpdate: function () {this. dispatchEvent ({type: 'update'}) ;},/* dispose method // The dispose method deletes objects from the memory and releases resources. /// NOTE: When you delete a texture object, do not forget to call this method. Otherwise, memory leakage may occur. *////DisposeDispose: function () {this. dispatchEvent ({type: 'dispose '}) ;}}; // The EventDispatcher method is applied to the current Texture object. THREE. eventDispatcher. prototype. apply (THREE. texture. prototype); // set the global Texture object counter. THREE. textureIdCount = 0;

Wuji (http://blog.csdn.net/omni360)

This article follows the "signature-non-commercial use-consistency" creation public agreement

Reprinted please keep this sentence: Wuji-this blog focuses on Agile development and mobile and IOT device research: data visualization, GOLANG, Html5, WEBGL, THREE. JS. Otherwise, the post from this blog will not be reprinted or reprinted. Thank you for your cooperation.

The following code is a comment on the Texture/Texture. JS file in the THREE. js source code file.

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