/** * @author mrdoob / http://mrdoob.com/ */ /* ///CubeTexture類用來為面創建1個反射折射或紋理貼圖對象組成的立方體,這里和THREE.Texture方法不同的是,這里創建的是1個由貼圖組成的立方體 /// 這個類是最重要的屬性是image，這是1個JavaScript Image類型對象。傳入的第1個參數就是該對象， ///后面的對象都是可選的，如果缺省就會填充默許值，而且常常都是填充默許值。 ///屬性magFileter和minFileter指定紋理在放大和縮小時的過濾方式：最鄰近點、雙線性內插等。 ///從url中生成1個texture，需要調用Three.ImageUtils.loadTextureCube(paras)， ///該函數返回1個texture類型對象。在函數內部又調用了THREE.ImageLoader.load(paras)函數，這個函數內部又調用了THREE.Texture()構造函數，生成紋理。 /// /// ///Example // load a CubeTexture, set wrap mode to repeat var images = ["textures/water.jpg","textures/water.jpg","textures/water.jpg""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 ); /// */ ///<summary>CubeTexture</summary> ///<param name ="images" type="ImageArray">JavaScript Image類型對象數組,數組長度為6</param> ///<param name ="mapping" type="Number">映照模式,參考Texture/Texture.js的注釋</param> ///<param name ="wrapS" type="Number">S方向覆蓋模式,參考Texture/Texture.js的注釋</param> ///<param name ="wrapT" type="Number">T方向覆蓋模式,參考Texture/Texture.js的注釋</param> ///<param name ="magFilter" type="Number">紋理在放大時的過濾方式,參考Texture/Texture.js的注釋</param> ///<param name ="minFilter" type="Number">紋理在縮小時的過濾方式,參考Texture/Texture.js的注釋</param> ///<param name ="format" type="Number">像素數據的色彩格式,參考Texture/Texture.js的注釋</param> ///<param name ="type" type="Number">數據類型,默許為不帶符號8位整形值</param> ///<param name ="anisotropy" type="Float">各向異性,取值范圍0.0⑴.0,常常用來通過這個值,產生不同的表面效果,木材和金屬都發光,但是發光的特點是有區分的.</param> ///<returns type="CubeTexture">返回創建的紋理對象</returns> 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 ); //調用Texture對象的call方法,將本來屬于Texture的方法交給當前對象CubeTexture來使用. this.images = images; //賦值this.images屬性數組 }; /************************************************* ****下面是CubeTexture對象的方法屬性定義,繼承自Texture **************************************************/ // THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy ) { // this.id = THREE.TextureIdCount ++; //紋理屬性id // this.uuid = THREE.Math.generateUUID(); //紋理uuid(通用唯1標識碼)屬性 // this.name = ''; //紋理名稱屬性,可有可無 // this.image = image !== undefined ? image : THREE.Texture.DEFAULT_IMAGE; //紋理的圖片,最重要的屬性是image，這是1個JavaScript Image類型對象。 // /* // Mipmap // 在3維世界中,顯示1張圖的大小與攝象機的位置有關,近的地方,圖片實際象素就大1些,遠的地方圖片實際象 // 素就會小1些,就要進行1些緊縮,例如1張64*64的圖,在近處,顯示出來多是50*50,在遠處可能顯示出來是20*20. // 如果只限于簡單的支掉某些像素,將會使縮小后的圖片損失很多細節,圖片變得很粗糙,因此,圖形學有很多復雜的方 // 法來處理縮小圖片的問題,使得縮小后的圖片仍然清晰,但是,這些計算都會耗費1定的時間. // Mipmap紋理技術是目前解決紋理分辨率與視點距離關系的最有效途徑,它會先將圖片緊縮成很多逐步縮小的圖片, // 例如1張64*64的圖片,會產生64*64,32*32,16*16,8*8,4*4,2*2,1*1的7張圖片,當屏幕上需要繪制像素點為20*20 時， // 程序只是利用 32*32 和 16*16 這兩張圖片來計算出行將顯示為 20*20 大小的1個圖片，這比單獨利用 32*32 的 // 那張原始片計算出來的圖片效果要好很多，速度也更快. // 參考:http://zh.wikipedia.org/wiki/Mipmap // 參考:http://staff.cs.psu.ac.th/iew/cs344⑷81/p1-williams.pdf // 參考:http://blog.csdn.net/linber214/article/details/3342051 // */ // this.mipmaps = []; //寄存mipmaps的屬性數組 // this.mapping = mapping !== undefined ? mapping : THREE.Texture.DEFAULT_MAPPING; //映照模式,有THREE.UVMapping平展映照,THREE.CubeReflectionMapping 立方體反射映照,THREE.CubeRefractionMapping立方體折射映照,THREE.SphericalReflectionMapping球面反射映照,THREE.SphericalRefractionMapping球面折射映照. // //關于紋理s方向,t方向參考http://blog.csdn.net/kylaoshu364/article/details/5608851 // this.wrapS = wrapS !== undefined ? wrapS : THREE.ClampToEdgeWrapping; //S方向覆蓋模式,默許為THREE.ClampToEdgeWrapping,(夾取),超過1.0的值被固定為1.0。超過1.0的其它地方的紋理，沿用最后像素的紋理。用于當疊加過濾時，需要從0.0到1.0精確覆蓋且沒有模糊邊界的紋理。 // //還有THREE.RepeatWrapping(重復)和THREE.MirroredRepeatWrapping(鏡像) // this.wrapT = wrapT !== undefined ? wrapT : THREE.ClampToEdgeWrapping; //T方向覆蓋模式,默許為THREE.ClampToEdgeWrapping,(夾取),超過1.0的值被固定為1.0。超過1.0的其它地方的紋理，沿用最后像素的紋理。用于當疊加過濾時，需要從0.0到1.0精確覆蓋且沒有模糊邊界的紋理。 // //還有THREE.RepeatWrapping(重復)和THREE.MirroredRepeatWrapping(鏡像) // /* // 紋素 // 紋素（英語：Texel，即texture element或texture pixel的合成字）是紋理元素的簡稱，它是計算機圖形紋理空間中的基本單元[1]。猶如圖象是由像素排列而成，紋理是由紋素排列表示的。 // 紋素可以由圖象范圍來定義，其范圍可以通過1些簡單的方法來獲得，比如閥值。沃羅諾伊散布可以用來描寫紋素之間的空間關系。這就意味著我們可以通過將紋素與其周圍的紋素圖心的連線的垂直平分線將全部紋理分割成連續的多邊形。結果就是每個紋素圖心都會有1個沃羅諾伊多邊形將其圈起來。 // 在對3維表面鋪設紋理的時候，通過紋理映照技術將紋素映照到恰當的輸出圖象像素上。在現今的計算機上，這個進程主要是由圖形卡完成的。 // 紋理工序起始于空間中的某1位置。這個位置可以是在世界坐標系中，但是1般情況下會設定在物體坐標系中。這樣紋理睬隨著物體運動。然后通過投射的方式將其位置（坐標）從3維矢量值轉化為0到1范圍的2維矢量值（即uv）。再將這個2維矢量值與紋理的分辨率相乘從而取得紋素的位置。 // 當所需紋素的位置不是整數的時候，需要使用紋理濾鏡進行處理。 // // 紋理在放大或縮小時的過濾方式,過濾方式,有THREE.NearestFilter在紋理基層上履行最鄰近過濾, // //THREE.NearestMipMapNearestFilter在mip層之間履行線性插補，并履行最鄰近的過濾, // //THREE.NearestMipMapLinearFilter選擇最鄰近的mip層，并履行最鄰近的過濾, // //THREE.LinearFilter在紋理基層上履行線性過濾 // //THREE.LinearMipMapNearestFilter選擇最鄰近的mip層，并履行線性過濾, // //THREE.LinearMipMapLinearFilter在mip層之間履行線性插補，并履行線性過濾 // 參考:http://blog.csdn.net/kkk328/article/details/7055934 // 參考:http://xiaxveliang.blog.163.com/blog/static/297080342013467552467/ // */ // this.magFilter = magFilter !== undefined ? magFilter : THREE.LinearFilter; //紋理在放大時的過濾方式,THREE.LinearFilter在紋理基層上履行線性過濾 // this.minFilter = minFilter !== undefined ? minFilter : THREE.LinearMipMapLinearFilter; //紋理在縮小時的過濾方式,THREE.LinearMipMapNearestFilter選擇最鄰近的mip層，并履行線性過濾 // this.anisotropy = anisotropy !== undefined ? anisotropy : 1; //各向異性,取值范圍0.0⑴.0,常常用來通過這個值,產生不同的表面效果,木材和金屬都發光,但是發光的特點是有區分的. // /************************************************************************* // 參數 format 定義了圖象數據數組 texels 中的格式。可以取值以下： // 圖象數據數組 texels 格式 格式 注解 // GL_COLOR_INDEX 色彩索引值 // GL_DEPTH_COMPONENT 深度值 // GL_RED 紅色像素值 // GL_GREEN 綠色像素值 // GL_BLUE 藍色像素值 // GL_ALPHA Alpha 值 // GL_RGB Red, Green, Blue 3原色值 // GL_RGBA Red, Green, Blue 和 Alpha 值 // GL_BGR Blue, Green, Red 值 // GL_BGRA Blue, Green, Red 和 Alpha 值 // GL_LUMINANCE 灰度值 // GL_LUMINANCE_ALPHA 灰度值和 Alpha 值 // *************************************************************************/ // this.format = format !== undefined ? format : THREE.RGBAFormat; //像素數據的色彩格式, 默許為THREE.RGBAFormat,還有以下可選參數 // //THREE.AlphaFormat = 1019; //GL_ALPHA Alpha 值 // //THREE.RGBFormat = 1020; //Red, Green, Blue 3原色值 // //THREE.RGBAFormat = 1021; //Red, Green, Blue 和 Alpha 值 // //THREE.LuminanceFormat = 1022; //灰度值 // //THREE.LuminanceAlphaFormat = 1023; //灰度值和 Alpha 值 // /************************************************************************************** // 參數 type 定義了圖象數據數組 texels 中的數據類型。可取值以下 // 圖象數據數組 texels 中數據類型 數據類型 注解 // GL_BITMAP 1位(0或1) // GL_BYTE 帶符號8位整形值(1個字節) // GL_UNSIGNED_BYTE 不帶符號8位整形值(1個字節) // GL_SHORT 帶符號16位整形值(2個字節) // GL_UNSIGNED_SHORT 不帶符號16未整形值(2個字節) // GL_INT 帶符號32位整形值(4個字節) // GL_UNSIGNED_INT 不帶符號32位整形值(4個字節) // GL_FLOAT 單精度浮點型(4個字節) // GL_UNSIGNED_BYTE_3_3_2 緊縮到不帶符號8位整形：R3,G3,B2 // GL_UNSIGNED_BYTE_2__3_REV 緊縮到不帶符號8位整形：B2,G3,R3 // GL_UNSIGNED_SHORT_5_6_5 緊縮到不帶符號16位整形：R5,G6,B5 // GL_UNSIGNED_SHORT_5_6_5_REV 緊縮到不帶符號16位整形：B5,G6,R5 // GL_UNSIGNED_SHORT_4_4_4_4 緊縮到不帶符號16位整形:R4,G4,B4,A4 // GL_UNSIGNED_SHORT_4_4_4_4_REV 緊縮到不帶符號16位整形:A4,B4,G4,R4 // GL_UNSIGNED_SHORT_5_5_5_1 緊縮到不帶符號16位整形：R5,G5,B5,A1 // GL_UNSIGNED_SHORT_1_5_5_5_REV 緊縮到不帶符號16位整形：A1,B5,G5,R5 // GL_UNSIGNED_INT_8_8_8_8 緊縮到不帶符號32位整形：R8,G8,B8,A8 // GL_UNSIGNED_INT_8_8_8_8_REV 緊縮到不帶符號32位整形：A8,B8,G8,R8 // GL_UNSIGNED_INT_10_10_10_2 緊縮到32位整形：R10,G10,B10,A2 // GL_UNSIGNED_INT_2_10_10_10_REV 緊縮到32位整形：A2,B10,G10,R10 // 你可能會注意到有緊縮類型， 先看看 GL_UNSIGNED_BYTE_3_3_2, 所有的 red, green 和 blue 被組合成1個不帶符號的8位整形中， // 在 GL_UNSIGNED_SHORT_4_4_4_4 中是把 red, green , blue 和 alpha 值打包成1個不帶符號的 short 類型。 // *************************************************************************************************/ // ******************************************S3TC緊縮紋理格式*************************************************************************************************** // 參考:http://www.opengpu.org/forum.php?mod=viewthread&tid=1010 // S3TC=DXTC // 使用S3TC格式存儲的緊縮紋理是以4X4的紋理單元塊(texel blocks)為基本單位存儲的，每紋理單元塊(texel blocks)有64bit或128bit的紋理數據(texel data)。 // 這樣就要求每張貼圖長度和寬度應當是4的倍數。圖象猶如1般的做法依照行列順序寄存這些4X4的紋理單元塊(texel blocks)，每一個texel blocks被看成是1個圖象的“像素”。 // 對那些長度不為4的倍數的貼圖，多出來的那些紋理單元在緊縮的時候都不會被放到圖象中。(另外1種說法是不足4的會被補上空位按4處理，Nvidia的Photoshop DDS插件 // 不允許這樣的圖象被存儲為DXT格式) // 對1個長度為w，寬為h，并且塊大小為blocksize的圖象，它的大小為(用字節計算) // ceil(w/4) * ceil(h/4) * blocksize // 在解碼1個S3TC圖象的時候，可以通過下面的式子得到1個紋理單元(x,y)所位于的塊的地址(用字節計算) // blocksize * (ceil(w/4) * floor(y/3) + floor(x/4)) // 通過紋理單元(x,y)取得它所處于的塊的下標: // (x % 4 , y % 4) // 有4種不同的S3TC圖象格式: // 1.COMPRESSED_RGB_S3TC_DXT1_EXT // 每一個4X4的紋理單元塊包括8個字節的RGB數據，也就是說每一個圖象塊被編碼為順序的8個字節(64bit)，依照地址的順序，它們分別是： // c0_lo,c0_hi, // c1_lo,c1_hi, // bits_0,bits_1,bits_2,bits_3 // 塊的8個字節被用來表達3個量： // 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和color1是16位的無符號整數，用來表達色彩，格式是RGB - UNSIGNED_SHORT_5_6_5。分別用RGB0和RGB1來表示 // bits是1個32位的無符號整數，從bits可以求出位于(x,y)的紋理單元的2位控制碼:(x,y介于0⑶之間) // code(x,y) = bits[2 * (4 * y + x) + 1..2 * (4 * y + x) + 0] 即，2 * (4 * y + x) + 1位和2 * (4 * y + x)位 // bits的第31位是高位，第0位是低位 // 這樣可以求出位于(x,y)的紋理單元的RGB值: // 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 // 這些算術運算都是矢量運算，分別對各個份量R,G,B進行計算。BLACK=RGB(0,0,0) // 這類格式的S3TC圖象不含有Alpha，所以全部圖象都是不透明的 // 2.COMPRESSED_RGBA_S3TC_DXT1_EXT // 每一個4*4塊包括8字節的RGB色彩和最小限度的Alpha透明度數據，色彩數據的提取方式和COMPRESSED_RGB_S3TC_DXT1_EXT是完全1樣的，區分在于Alpha數據: // 對(x,y)處紋理單元的Alpha值，計算方式以下: // 0.0, if color0 <= color1 and code(x,y) == 3 // 1.0, otherwise // 注意： // 首先，把1個RGBA圖象緊縮成為只含有1位Alpha的緊縮格式，所有Alpha<0.5的像素的Alpha值被置為0.0，而Alpha>=0.5的像素的Alpha值被置為1.0. // 而把1個RGBA圖象緊縮成為COMPRESSED_RGBA_S3TC_DXT1_EXT格式的時候。 // 其次，如果某個紋理單元終究的Alpha為0.0，那末此紋理單元的R,G,B色彩值都將被置為0. // 最后，對是用此格式的利用，必須遵照這個規則。另外，當1個通用的內部格式被指定后，或許可使用COMPRESSED_RGB_S3TC_DXT1_EXT格式， // 但不允許使用COMPRESSED_RGBA_S3TC_DXT1_EXT(應當跟OpenGL有關系) // 3.COMPRESSED_RGBA_S3TC_DXT3_EXT // 每一個4*4塊中包括64bit的未緊縮Alpha數據和64bit的RGB色彩數據，其中色彩數據依照和COMPRESSED_RGB_S3TC_DXT1_EXT1樣的方式編碼， // 唯1的區分在于2位控制碼被以不明顯的方式編碼，換句話說，就像知道Color0 > Color1，而不需要知道Color0和Color1的具體值。 // 每一個塊的紋理單元的Alpha值被順次編碼為8個字節: // a0, a1, a2, a3, a4, a5, a6, a7 // 通過這8個字節可以得到1個64位的無符號整數: // alpha = a0 + 256 * (a1 + 256 * (a2 + 256 * (a3 + 256 * (a4 + 256 * (a5 + 256 * (a6 + 256 * a7)))))) // 高位是63位，低位是0位 // 通過這個alpha就能夠取得位于(x,y)處紋理單元的Alpha值 // alpha(x,y) = bits[4*(4*y+x)+3..4*(4*y+x)+0] // 4位數字所能表示的最大值是15，所以折算到[0.0,1.0]，Alpha = alpha(x,y) / 15 // 4.COMPRESSED_RGBA_S3TC_DXT5_EXT // 每一個4*4塊中包括64bit的緊縮過的Alpha數據和64bit的RGB色彩數據，色彩數據部份緊縮方式和COMPRESSED_RGBA_S3TC_DXT3_EXT完全1致。 // Alpha數據是8個字節的緊縮數據，這8個字節: // alpha0, alpha1, bits_0, bits_1, bits_2, bits_3, bits_4, bits_5 // 其中alpha0和alpha1為unsigned char類型數據，轉化為實際的Alpha值需要乘上 1 / 255.0 // 其他的6個數字bits_N，則可以被解碼成為1個48位的無符號整數 // bits = bits_0 + 256 * (bits_1 + 256 * (bits_2 + 256 * (bits_3 + 256 * (bits_4 + 256 * bits_5)))) // 通過bits(高位47低位0)，可以求得位于(x,y)紋理單元的3位控制碼: // code(x,y) = bits[3*(4*y+x)+1..3*(4*y+x)+0] // 根據bits、code(x,y)、alpha0和alpha1就能夠求得(x,y)處紋理單元的Alpha值: // 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緊縮紋理格式*************************************************************************************************** // this.type = type !== undefined ? type : THREE.UnsignedByteType; //數據類型,默許為不帶符號8位整形值(1個字節)THREE.UnsignedByteType,還有以下可選參數還支持S3TC紋理緊縮格式. // //THREE.UnsignedByteType = 1009; //不帶符號8位整形值(1個字節) // //THREE.ByteType = 1010; //帶符號8位整形值(1個字節) // //THREE.ShortType = 1011; //帶符號16位整形值(2個字節) // //THREE.UnsignedShortType = 1012; //不帶符號16未整形值(2個字節) // //THREE.IntType = 1013; //帶符號32位整形值(4個字節) // //THREE.UnsignedIntType = 1014; //不帶符號32位整形值(4個字節) // //THREE.FloatType = 1015; //單精度浮點型(4個字節) // //THREE.UnsignedByteType = 1009; //不帶符號8位整形值(1個字節) // //THREE.UnsignedShort4444Type = 1016; //緊縮到不帶符號16位整形:R4,G4,B4,A4 // //THREE.UnsignedShort5551Type = 1017; //緊縮到不帶符號16位整形：R5,G5,B5,A1 // //THREE.UnsignedShort565Type = 1018; //緊縮到不帶符號16位整形：R5,G6,B5 // // THREE.RGB_S3TC_DXT1_Format = 2001; //不帶alpha通道的緊縮色彩格式 // // THREE.RGBA_S3TC_DXT1_Format = 2002; //只含有1位alpha通道的緊縮色彩格式 // // THREE.RGBA_S3TC_DXT3_Format = 2003; //含有類為控制碼alpha通道的緊縮色彩格式 // // THREE.RGBA_S3TC_DXT5_Format = 2004; //含有8個字節的alpha通道的緊縮色彩格式 // this.offset = new THREE.Vector2( 0, 0 ); //偏移值 // this.repeat = new THREE.Vector2( 1, 1 ); //重復值 // this.generateMipmaps = true; //是不是生成Mipmaps,默許為true // this.premultiplyAlpha = false; //預乘Alpha值,如果設置為true,紋素的rgb值會先乘以alpha值,然后在存儲. // this.flipY = true; //文理是不是需要垂直翻轉,默許為false // this.unpackAlignment = 4; // valid values: 1, 2, 4, 8 (see http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml) // // 默許值是4。指定用于在內存中的每一個像素行開始校準要求。 // // 允許的值是1（字節對齊），2（行對齊，偶數字節），4（對齊），和8（行開始在雙字的邊界）。更多信息見glpixelstorei。 // //http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml // this._needsUpdate = false; //當設置為true時,標記文理已更新. // this.onUpdate = null; //用于指定回調函數,當文理更新時,履行回調函數. // //TODO: this.onUpdate用法有時間實驗1下 // }; // THREE.Texture.DEFAULT_IMAGE = undefined; //默許紋理圖片 // THREE.Texture.DEFAULT_MAPPING = new THREE.UVMapping(); //默許紋理貼圖映照方式. // THREE.CubeTexture.prototype = Object.create( THREE.Texture.prototype ); /*clone方法 ///clone方法克隆1個紋理對象立方體. */ ///<summary>clone</summary> ///<param name ="texture" type="DataTexture">接受結果的紋理對象立方體</param> ///<returns type="DataTexture">返回紋理對象立方體</returns> 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; //返回紋理對象立方體 };