Textures.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="list.js"></script>
  7. <script src="page.js"></script>
  8. <link type="text/css" rel="stylesheet" href="page.css" />
  9. </head>
  10. <body>
  11. <h1>材质常量(Texture Constants)</h1>
  12. <h2>映射模式</h2>
  13. <code>
  14. THREE.UVMapping
  15. THREE.CubeReflectionMapping
  16. THREE.CubeRefractionMapping
  17. THREE.EquirectangularReflectionMapping
  18. THREE.EquirectangularRefractionMapping
  19. THREE.SphericalReflectionMapping
  20. THREE.CubeUVReflectionMapping
  21. THREE.CubeUVRefractionMapping
  22. </code>
  23. <p>
  24. 这些常量定义了纹理贴图的映射模式。<br />
  25. [page:Constant UVMapping]是默认值,纹理使用网格的坐标来进行映射。<br /><br />
  26. 其它的值定义了环境映射的类型。<br /><br />
  27. [page:Constant CubeReflectionMapping] 和 [page:Constant CubeRefractionMapping] 用于 [page:CubeTexture CubeTexture] ——
  28. 由6个纹理组合而成,每个纹理都是立方体的一个面。
  29. 对于[page:CubeTexture CubeTexture]来说,[page:Constant CubeReflectionMapping]是其默认值。<br /><br />
  30. [page:Constant EquirectangularReflectionMapping] 和 [page:Constant EquirectangularRefractionMapping]
  31. 用于等距圆柱投影的环境贴图,也被叫做经纬线映射贴图。等距圆柱投影贴图表示沿着其水平中线360°的视角,以及沿着其垂直轴向180°的视角。贴图顶部和底部的边缘分别对应于它所映射的球体的北极和南极。
  32. <br /><br />
  33. [page:Constant SphericalReflectionMapping] 用球形反射贴图,例如它可以通过剪裁镜面球的照片来获得。
  34. 无论摄像机相对于立方贴图对象或者表面的位置时怎样的,球形贴图被渲染时将会“面朝”摄像机。<br /><br />
  35. 请查看示例:[example:webgl_materials_envmaps materials / envmaps] 。
  36. </p>
  37. <h2>包裹模式</h2>
  38. <code>
  39. THREE.RepeatWrapping
  40. THREE.ClampToEdgeWrapping
  41. THREE.MirroredRepeatWrapping
  42. </code>
  43. <p>
  44. 这些常量定义了纹理贴图的 [page:Texture.wrapS wrapS] 和 [page:Texture.wrapT wrapT] 属性,定义了水平和垂直方向上纹理的包裹方式。
  45. <br /><br />
  46. 使用[page:constant RepeatWrapping],纹理将简单地重复到无穷大。
  47. With [page:constant RepeatWrapping] the texture will simply repeat to infinity.<br /><br />
  48. [page:constant ClampToEdgeWrapping]是默认值,纹理中的最后一个像素将延伸到网格的边缘。<br /><br />
  49. 使用[page:constant MirroredRepeatWrapping], 纹理将重复到无穷大,在每次重复时将进行镜像。
  50. </p>
  51. <h2>放大滤镜(Magnification Filters)</h2>
  52. <code>
  53. THREE.NearestFilter
  54. THREE.LinearFilter
  55. </code>
  56. <p>
  57. 这些常量用于纹理的[page:Texture.magFilter magFilter]属性,它们定义了当被纹理化的像素映射到小于或者等于1纹理元素(texel)的区域时,将要使用的纹理放大函数。<br /><br />
  58. [page:constant NearestFilter]返回与指定纹理坐标(在曼哈顿距离之内)最接近的纹理元素的值。<br /><br />
  59. [page:constant LinearFilter]是默认值,返回距离指定的纹理坐标最近的四个纹理元素的加权平均值,
  60. 并且可以包含纹理的其他部分中,被包裹或者被重复的项目,具体取决于 [page:Texture.wrapS wrapS] 和 [page:Texture.wrapT wrapT] 的值,and on the exact mapping。
  61. </p>
  62. <h2>缩小滤镜(Minification Filters)</h2>
  63. <code>
  64. THREE.NearestFilter
  65. THREE.NearestMipmapNearestFilter
  66. THREE.NearestMipmapLinearFilter
  67. THREE.LinearFilter
  68. THREE.LinearMipmapNearestFilter
  69. THREE.LinearMipmapLinearFilter
  70. </code>
  71. <p>
  72. 这些常量用于纹理的[page:Texture.minFilter minFilter]属性,它们定义了当被纹理化的像素映射到大于1纹理元素(texel)的区域时,将要使用的纹理缩小函数。<br /><br />
  73. 除了[page:constant NearestFilter] 和 [page:constant LinearFilter],
  74. 下面的四个函数也可以用于缩小:<br /><br />
  75. [page:constant NearestMipmapNearestFilter]选择与被纹理化像素的尺寸最匹配的mipmap,
  76. 并以[page:constant NearestFilter](最靠近像素中心的纹理元素)为标准来生成纹理值。
  77. <br /><br />
  78. [page:constant NearestMipmapLinearFilter]选择与被纹理化像素的尺寸最接近的两个mipmap,
  79. 并以[page:constant NearestFilter]为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。
  80. <br /><br />
  81. [page:constant LinearMipmapNearestFilter]选择与被纹理化像素的尺寸最匹配的mipmap,
  82. 并以[page:constant LinearFilter](最靠近像素中心的四个纹理元素的加权平均值)为标准来生成纹理值。
  83. <br /><br />
  84. [page:constant LinearMipmapLinearFilter]是默认值,它选择与被纹理化像素的尺寸最接近的两个mipmap,
  85. 并以[page:constant LinearFilter]为标准来从每个mipmap中生成纹理值。最终的纹理值是这两个值的加权平均值。<br /><br />
  86. 请查看示例:[example:webgl_materials_texture_filters materials / texture / filters]。
  87. </p>
  88. <h2>类型</h2>
  89. <code>
  90. THREE.UnsignedByteType
  91. THREE.ByteType
  92. THREE.ShortType
  93. THREE.UnsignedShortType
  94. THREE.IntType
  95. THREE.UnsignedIntType
  96. THREE.FloatType
  97. THREE.HalfFloatType
  98. THREE.UnsignedShort4444Type
  99. THREE.UnsignedShort5551Type
  100. THREE.UnsignedShort565Type
  101. THREE.UnsignedInt248Type
  102. </code>
  103. <p>
  104. 这些常量用于纹理的[page:Texture.type type]属性,这些属性必须与正确的格式相对应。详情请查看下方。<br /><br />
  105. [page:constant UnsignedByteType] 是默认值。
  106. </p>
  107. <h2>格式</h2>
  108. <code>
  109. THREE.AlphaFormat
  110. THREE.RGBFormat
  111. THREE.RGBAFormat
  112. THREE.LuminanceFormat
  113. THREE.LuminanceAlphaFormat
  114. THREE.RGBEFormat
  115. THREE.DepthFormat
  116. THREE.DepthStencilFormat
  117. </code>
  118. <p>
  119. 这些常量用于纹理的[page:Texture.format format]属性,它们定义了shader(着色器)将如何读取的2D纹理或者*texels*(纹理元素)的元素。.<br /><br />
  120. [page:constant AlphaFormat] 丢弃红、绿、蓝分量,仅读取Alpha分量。<br /><br />
  121. [page:constant RGBFormat] 丢弃Alpha分量,仅读取红、绿、蓝分量。<br /><br />
  122. [page:constant RGBAFormat] 是默认值,它将读取红、绿、蓝和Alpha分量。<br /><br />
  123. [page:constant LuminanceFormat] 将每个元素作为单独的亮度分量来读取。
  124. 将其转换为范围限制在[0,1]区间的浮点数,然后通过将亮度值放入红、绿、蓝通道,并将1.0赋给Alpha通道,来组装成一个RGBA元素。<br /><br />
  125. [page:constant LuminanceAlphaFormat] 将每个元素同时作为亮度分量和Alpha分量来读取。
  126. 和上面[page:constant LuminanceFormat]的处理过程是一致的,除了Alpha分量具有除了*1.0*以外的值。<br /><br />
  127. [page:constant RGBEFormat] 与 [page:constant RGBAFormat] 是相同的。<br /><br />
  128. [page:constant DepthFormat]将每个元素作为单独的深度值来读取,将其转换为范围限制在[0,1]区间的浮点数。
  129. 它是[page:DepthTexture DepthTexture]的默认值。<br /><br />
  130. [page:constant DepthStencilFormat]将每个元素同时作为一对深度值和模板值来读取。
  131. 其中的深度分量解释为[page:constant DepthFormat]。
  132. 模板分量基于深度+模板的内部格式来进行解释。
  133. <br /><br />
  134. 请注意,纹理必须具有正确的[page:Texture.type type]设置,正如上一节所描述的那样。
  135. 请参阅[link:https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext/texImage2D WebGLRenderingContext.texImage2D]
  136. 来获得有关详细信息。
  137. </p>
  138. <h2>DDS / ST3C 压缩纹理格式</h2>
  139. <code>
  140. THREE.RGB_S3TC_DXT1_Format
  141. THREE.RGBA_S3TC_DXT1_Format
  142. THREE.RGBA_S3TC_DXT3_Format
  143. THREE.RGBA_S3TC_DXT5_Format
  144. </code>
  145. <p>
  146. 要使用[page:CompressedTexture CompressedTexture]中的[page:Texture.format format]属性,
  147. 需要获得[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/ WEBGL_compressed_texture_s3tc]
  148. 扩展的支持。<br /><br />
  149. 通过这个扩展,这里的四种[link:https://en.wikipedia.org/wiki/S3_Texture_Compression S3TC]格式将可以使用:<br />
  150. [page:constant RGB_S3TC_DXT1_Format]:RGB图像格式的DXT1压缩图像。
  151. [page:constant RGBA_S3TC_DXT1_Format]:RGB图像格式的DXT1压缩图像,Alpha仅具有是/否透明两个值。<br />
  152. [page:constant RGBA_S3TC_DXT3_Format]:RGBA图像格式的DXT3压缩图像,和32位RGBA纹理贴图相比,它提供了4:1的压缩比。<br />
  153. [page:constant RGBA_S3TC_DXT5_Format]:RGBA图像格式的DXT5压缩图像,它也提供了4:1的压缩比,但与DX3格式的不同之处在于其Alpha是如何被压缩的。<br />
  154. </p>
  155. <h2>PVRTC 压缩纹理格式(PVRTC Compressed Texture Formats)</h2>
  156. <code>
  157. THREE.RGB_PVRTC_4BPPV1_Format
  158. THREE.RGB_PVRTC_2BPPV1_Format
  159. THREE.RGBA_PVRTC_4BPPV1_Format
  160. THREE.RGBA_PVRTC_2BPPV1_Format
  161. </code>
  162. <p>
  163. 要使用[page:CompressedTexture CompressedTexture]中的[page:Texture.format format]属性,需要获得
  164. [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/ WEBGL_compressed_texture_pvrtc]
  165. 扩展的支持。<br />
  166. PVRTC通常只在具有PowerVR芯片的移动设备上可用,这些设备主要是苹果设备。<br /><br />
  167. 通过这个扩展,这里的四种[link:https://en.wikipedia.org/wiki/PVRTC PVRTC]格式将可以使用:<br />
  168. [page:constant RGB_PVRTC_4BPPV1_Format]:4位模式下的RGB压缩,每4x4像素一个块。<br />
  169. [page:constant RGB_PVRTC_2BPPV1_Format]:2位模式下的RGB压缩,每8x4像素一个块。<br />
  170. [page:constant RGBA_PVRTC_4BPPV1_Format]: 4位模式下的RGBA压缩,每4x4像素一个块。<br />
  171. [page:constant RGBA_PVRTC_2BPPV1_Format]: 2位模式下的RGB压缩,每8x4像素一个块。<br />
  172. </p>
  173. <h2>ETC 压缩纹理格式</h2>
  174. <code>
  175. THREE.RGB_ETC1_Format
  176. THREE.RGB_ETC2_Format
  177. THREE.RGBA_ETC2_EAC_Format
  178. </code>
  179. <p>
  180. For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
  181. these require support for the [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/ WEBGL_compressed_texture_etc1]
  182. (ETC1) or [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/ WEBGL_compressed_texture_etc]
  183. (ETC2) extensions. <br /><br />
  184. </p>
  185. <h2>ASTC Compressed Texture Format</h2>
  186. <code>
  187. THREE.RGBA_ASTC_4x4_Format
  188. THREE.RGBA_ASTC_5x4_Format
  189. THREE.RGBA_ASTC_5x5_Format
  190. THREE.RGBA_ASTC_6x5_Format
  191. THREE.RGBA_ASTC_6x6_Format
  192. THREE.RGBA_ASTC_8x5_Format
  193. THREE.RGBA_ASTC_8x6_Format
  194. THREE.RGBA_ASTC_8x8_Format
  195. THREE.RGBA_ASTC_10x5_Format
  196. THREE.RGBA_ASTC_10x6_Format
  197. THREE.RGBA_ASTC_10x8_Format
  198. THREE.RGBA_ASTC_10x10_Format
  199. THREE.RGBA_ASTC_12x10_Format
  200. THREE.RGBA_ASTC_12x12_Format
  201. THREE.SRGB8_ALPHA8_ASTC_4x4_Format
  202. THREE.SRGB8_ALPHA8_ASTC_5x4_Format
  203. THREE.SRGB8_ALPHA8_ASTC_5x5_Format
  204. THREE.SRGB8_ALPHA8_ASTC_6x5_Format
  205. THREE.SRGB8_ALPHA8_ASTC_6x6_Format
  206. THREE.SRGB8_ALPHA8_ASTC_8x5_Format
  207. THREE.SRGB8_ALPHA8_ASTC_8x6_Format
  208. THREE.SRGB8_ALPHA8_ASTC_8x8_Format
  209. THREE.SRGB8_ALPHA8_ASTC_10x5_Format
  210. THREE.SRGB8_ALPHA8_ASTC_10x6_Format
  211. THREE.SRGB8_ALPHA8_ASTC_10x8_Format
  212. THREE.SRGB8_ALPHA8_ASTC_10x10_Format
  213. THREE.SRGB8_ALPHA8_ASTC_12x10_Format
  214. THREE.SRGB8_ALPHA8_ASTC_12x12_Format
  215. </code>
  216. <p>
  217. For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
  218. these require support for the [link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/ WEBGL_compressed_texture_astc] extension. <br /><br />
  219. </p>
  220. <h2>编码</h2>
  221. <code>
  222. THREE.LinearEncoding
  223. THREE.sRGBEncoding
  224. THREE.GammaEncoding
  225. THREE.RGBEEncoding
  226. THREE.LogLuvEncoding
  227. THREE.RGBM7Encoding
  228. THREE.RGBM16Encoding
  229. THREE.RGBDEncoding
  230. THREE.BasicDepthPacking
  231. THREE.RGBADepthPacking
  232. </code>
  233. <p>
  234. 这些常量用于纹理的[page:Texture.encoding encoding]属性。<br /><br />
  235. 如果编码类型在纹理已被一个材质使用之后发生了改变,
  236. 你需要来设置[page:Material.needsUpdate Material.needsUpdate]为*true*来使得材质重新编译。<br /><br />
  237. [page:constant LinearEncoding]是默认值。
  238. 除此之外的其他值仅在材质的贴图、envMap和emissiveMap中有效。
  239. </p>
  240. <h2>源代码</h2>
  241. <p>
  242. [link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
  243. </p>
  244. </body>
  245. </html>