Three. js source code annotation (36) Texture/CubeTexture. js

Three. js source code annotation (36) Texture/CubeTexture. js

 

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

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

 

/*** @ Author mrdoob/http://mrdoob.com/* // The CubeTexture class is used to create a cube composed of a reflection, refraction, or texture Paster object for the surface, here and THREE. the Texture method is different. Here we create a cube composed of textures // 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 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. loadTextureCube (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 CubeTexture, set wrap mode to repeat var images = [textures/water.jpg, textures/water.jpg, textures/water.jpg] var texture = THREE. imageUtils. loadTextureCube (images); texture. wrapS = THREE. repeatWrapping; texture. wrapT = THREE. repeatWrapping; texture. repeat. set (4, 4 );///*////CubeTexture///Array of JavaScript Image objects. The array length is 6 ///For the ing mode, see the comments of Texture/Texture. js ///S-direction coverage mode. For details, refer to the comments of Texture/Texture. js ///T-direction coverage mode. For more information, see the comments in Texture/Texture. js ///For more information about how to filter the Texture when you zoom in, see the comments of Texture/Texture. js ///For more information about how to filter the Texture when it is reduced, see the comments of Texture/Texture. js ///For the color format of pixel data, see the comments of Texture/Texture. js ///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. cubeTexture = function (images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy) {THREE. texture. call (this, images, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy); // call the call method of the Texture object, the method that originally belongs to Texture is handed over to the current object CubeTexture for use. this. images = images; // value this. images attribute array }; /*************************************** * ************ the method attribute definition of the CubeTexture object is as follows, inherited from Tex Ture *************************************** * ********** // THREE. texture = function (image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy) {// this. id = THREE. textureIdCount ++; // texture attribute id // this. uuid = THREE. math. generateUUID (); // texture uuid (universal unique identifier code) attributes // this. name = ''; // texture name attribute; optional // this. image = image! = Undefined? Image: THREE. Texture. DEFAULT_IMAGE; // Texture image. The most important attribute is Image, which is a JavaScript image type object. /// * // Mipmap // In the 3D world, the size of an image is related to the camera position. In the near area, the actual pixel size of the image is larger, the actual image is smaller in the distance, and some compression is required. For example, if a 64*64 image is near, it may be 50*50, 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 rough. Therefore, graphics have a lot of complicated methods to narrow down the image, so that the reduced image is still clear. However, these calculations will take some time. // The 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, // For example, a 64*64 image will generate 7 images of 64*64, 32*32, 16*16, 8*8*4*4, 2*2, 1*1, when you need to draw a pixel of 20*20 on the screen, // The program only uses the 32*32 and 16*16 images to calculate An image of 20*20 is displayed, which is much better and faster than the image calculated from the original 32*32. // 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/5608851// this. 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. //// 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, 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. // When texture is laid on a 3D surface, texture ing is used to map the grain to the appropriate output image pixel. In today's computers, this process is mainly completed by graphics cards. // The texture operation starts at a location 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 /// THREE. linearMipMapNearestFilter selects the closest mip layer and performs linear filtering. // THREE. linearMipMapLinearFilter executes linear interpolation between the mip layer and performs linear filtering // reference: http://blog.csdn.net/kkk328/article/details/7055934// reference: http: // xiaxvel Iang.blog.163.com/blog/static/297080342017552467///* // 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 the format in the image data array texels. Optional 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 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 values // GL_LUMINANCE gray values // 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 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 data type in the image data array texels. Optional values: // data type annotation in image data array texels // GL_BITMAP (0 or 1) // GL_BYTE signed 8-bit integer 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 uninteger value (2 bytes) // GL_INT signed 32-bit integer value (4 bytes) // GL_UNSIGNED_INT 32-bit integer value (4 bytes) // GL_FLOAT single precision Floating Point (4 bytes) // GL_UNSIGNED_BYTE_3_3_2 compressed to unsigned 8-bit integer: R3, G3, B2 // gl_unsigned_byte_2%3_rev compressed to unsigned 8-bit integer: B2, G3, r3 // GL_UNSIGNED_SHORT_5_6_5 compressed to unsigned 16-bit integer: R5, G6, B5 // GL_UNSIGNED_SHORT_5_6_5_REV compressed to unsigned 16-bit integer: B5, G6, R5 // GL_UNSIGNED_SHORT_4_4_4_4 compressed to unsigned 16-bit integer: R4, G4, B4, a4 // gl_unsigned_short_4_4_4_rev compressed to unsigned 16-bit integer: A4, B4, G4, R4 // GL_UNSIGNED_SHORT_5_5_5_1 compressed to unsigned 16-bit integer: R5, G5, B5, B5, a1 // gl_unsigned_short_rj5_5_5_rev compressed to unsigned 16-bit integer: A1, B5, G5, R5 // GL_UNSIGNED_INT_8_8_8_8 compressed to unsigned 32-bit integer: R8, G8, B8, a8 // gl_unsigned_int_8_8_8_rev compressed to unsigned 32-bit integer: A8, B8, G8, R8 // GL_UNSIGNED_IN T_10_10_10_2 compression to 32-bit integer: R10, G10, B10, A2 // GL_UNSIGNED_INT_2_10_10_10_REV compression to 32-bit integer: A2, B10, G10, R10 // you may notice the compression type, first, let's take a 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, the blue and alpha values are packaged into an unsigned short type. //************************************** **************************************** *******************///****************** ************ **************************************** **************************************** * ****** // Reference: http://www.opengpu.org/forum.php? Mod = viewthread & tid = 1010 // S3TC = DXTC // The compressed texture stored in S3TC format is stored in a 4x4 Texture unit block (texel blocks, each Texture unit block (texel blocks) has 64bit or 128bit texture data ). // 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 those textures whose lengths are not multiples 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 an image with a length of w, a width of h, and a block size of blocksize, its size is (calculated in bytes) // ceil (w/4) * ceil (h/4) * blocksize // when decoding an S3TC image, you can use the following formula to obtain a texture unit (x, y) block address (in bytes) // blocksize * (ceil (w/4) * floor (y/3) + floor (x/4 )) // obtain the subscript of the block it is in through the Texture unit (x, y): // (x % 4, y % 4) // there are four different S3TC image formats: // 1. COMPRESSED_RGB_S3TC_DXT1_EXT // each 4x4 Texture unit block contains eight bytes of RGB data, that is, each image block is encoded into eight bytes in sequence (64bit), according to the address order, they are: // c0_lo, c0_hi, // c1_lo, c1_hi, // bits_0, bits_1, bits_2, bits_3 // The eight bytes of the block 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, which are used to express the color. The format is RGB-UNSIGNED_SHORT_5_6_5. Use RGB0 and RGB1 respectively to represent // bits is a 32-bit unsigned integer. From bits, we can find 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) bit // bits 31st bits are high, and 0th bits are low. // you can obtain 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 colo R0> 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 for each component R, G, b. BLACK = RGB (, 0) // This format of S3TC image does not contain Alpha, so the entire image is not transparent // 2. 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, with the difference being Alpha data: // For the Alpha value of the texture unit (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 Alpha <0.5 pixels is set to 0.0, while the Alpha value of Alpha> = 0.5 pixels is set to 1.0. // COMPRESSED_RGB A_S3TC_DXT1_EXT format. // Second, 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, the application in this format must comply with this rule. In addition, when a general internal format is specified, you may use the COMPRESSED_RGB_S3TC_DXT1_EXT format, // but cannot use COMPRESSED_RGBA_S3TC_DXT1_EXT (it should be related to OpenGL) // 3. COMPRESSED_RGBA_S3TC_DXT3_EXT // each 4*4 contains 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 // you can get a 64-bit unsigned integer through these 8 Bytes: // alpha = a0 + 256*(a1 + 256*(a2 + 256*(a3 + 256*(a4 + 256*(a5 + 256*(a6 + 256 * a7) ))))) // The height is 63 bits, and the low position is 0 bits // Through 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 four digits is 15. Therefore, it is converted to [0.0, 1.0], Alpha = alpha (x, y)/15 // 4. COMPRESSED_RGBA_S3TC_DXT5_EXT // each 4*4 contains 64-bit compressed The lpha data is exactly the same as the 64-bit RGB color data. The compression method of the color data is exactly the same as that of 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 char data, the actual Alpha value needs to be multiplied by 1/255.0 // the other 6 digits bits_N, 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 (High Position 47 low position 0), we can obtain the three-digit control code in the (x, y) Texture unit: // code (x, y) = bits [3*(4 * y + x) + 1 .. 3*(4 * y + x) + 0] // Based on bits, code (x, y), alpha 0 and alpha1 can obtain the Alpha value of the texture unit at (x, y): // alpha0, code (x, y) = 0 // alpha1, code (x, y, 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 * al Pha0 + 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. struct 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; // FloatType with single precision (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 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 true. // this. 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 false. // this. UnpackAlignment = 4; // valid values: 1, 2, 4, 8 (see http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml) /// 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 byte), 4 (alignment), and 8 (rows start at the boundary of the double character ). For more information, see glpixelstorei. /// Http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml// this. _ needsUpdate = false; // when it is set to true, the 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. // THREE. cubeTexture. prototype = Object. create (THREE. texture. prototype);/* clone method // clone method to clone a texture Object Cube. *////Clone///Texture Object Cube that receives the result ///
 
  
Returns the texture Object Cube.
 THREE. cubeTexture. clone = function (texture) {if (texture = undefined) texture = new THREE. cubeTexture (); THREE. texture. prototype. clone. call (this, texture); texture. images = this. images; return texture; // returns the texture Object Cube };

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/CubeTexture. JS file in the THREE. js source code file.

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