Textures.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE html>
  2. <html lang="en">
  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>Mapping Modes</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. <div>
  24. These define the texture's mapping mode.<br />
  25. [page:Constant UVMapping] is the default, and maps the texture using the mesh's UV coordinates.<br /><br />
  26. The rest define environment mapping types.<br /><br />
  27. [page:Constant CubeReflectionMapping] and [page:Constant CubeRefractionMapping] are for
  28. use with a [page:CubeTexture CubeTexture], which is made up of six textures, one for each face of the cube.<br />
  29. [page:Constant CubeReflectionMapping] is the default for a [page:CubeTexture CubeTexture]. <br /><br />
  30. [page:Constant EquirectangularReflectionMapping] and [page:Constant EquirectangularRefractionMapping]
  31. are for use with an equirectangular environment map.<br /><br />
  32. [page:Constant SphericalReflectionMapping] is for use with a spherical reflection map.<br /><br />
  33. See the [example:webgl_materials_envmaps materials / envmaps] example.
  34. </div>
  35. <h2>Wrapping Modes</h2>
  36. <code>
  37. THREE.RepeatWrapping
  38. THREE.ClampToEdgeWrapping
  39. THREE.MirroredRepeatWrapping
  40. </code>
  41. <div>
  42. These define the texture's [page:Texture.wrapS wrapS] and [page:Texture.wrapT wrapT] properties,
  43. which define horizontal and vertical texture wrapping.<br /><br />
  44. With [page:constant RepeatWrapping] the texture will simply repeat to infinity.<br /><br />
  45. [page:constant ClampToEdgeWrapping] is the default.
  46. The last pixel of the texture stretches to the edge of the mesh.<br /><br />
  47. With [page:constant MirroredRepeatWrapping] the texture will repeats to infinity, mirroring on each repeat.<br />
  48. </div>
  49. <h2>Magnification Filters</h2>
  50. <code>
  51. THREE.NearestFilter
  52. THREE.LinearFilter
  53. </code>
  54. <div>
  55. For use with a texture's [page:Texture.magFilter magFilter] property,
  56. these define the texture magnification function to be used when the pixel being textured maps to an
  57. area less than or equal to one texture element (texel).<br /><br />
  58. [page:constant NearestFilter] returns the value of the texture element that is nearest
  59. (in Manhattan distance) to the specified texture coordinates.<br /><br />
  60. [page:constant LinearFilter] is the default and returns the weighted average
  61. of the four texture elements that are closest to the specified texture coordinates,
  62. and can include items wrapped or repeated from other parts of a texture,
  63. depending on the values of [page:Texture.wrapS wrapS] and [page:Texture.wrapT wrapT], and on the exact mapping.
  64. </div>
  65. <h2>Minification Filters</h2>
  66. <code>
  67. THREE.NearestFilter
  68. THREE.NearestMipMapNearestFilter
  69. THREE.NearestMipMapLinearFilter
  70. THREE.LinearFilter
  71. THREE.LinearMipMapNearestFilter
  72. THREE.LinearMipMapLinearFilter
  73. </code>
  74. <div>
  75. For use with a texture's [page:Texture.minFilter minFilter] property, these define
  76. the texture minifying function that is used whenever the pixel being textured maps
  77. to an area greater than one texture element (texel).<br /><br />
  78. In addition to [page:constant NearestFilter] and [page:constant LinearFilter],
  79. the following four functions can be used for minification:<br /><br />
  80. [page:constant NearestMipMapNearestFilter] chooses the mipmap that most closely
  81. matches the size of the pixel being textured
  82. and uses the [page:constant NearestFilter] criterion (the texel nearest to the
  83. center of the pixel) to produce a texture value.<br /><br />
  84. [page:constant NearestMipMapLinearFilter] chooses the two mipmaps that most closely
  85. match the size of the pixel being textured and uses the [page:constant NearestFilter] criterion to produce
  86. a texture value from each mipmap. The final texture value is a weighted average of those two values.<br /><br />
  87. [page:constant LinearMipMapNearestFilter] chooses the mipmap that most closely matches
  88. the size of the pixel being textured and uses the [page:constant LinearFilter] criterion
  89. (a weighted average of the four texels that are closest to the center of the pixel)
  90. to produce a texture value.<br /><br />
  91. [page:constant LinearMipMapLinearFilter] is the default and chooses the two mipmaps
  92. that most closely match the size of the pixel being textured and uses the [page:constant LinearFilter] criterion
  93. to produce a texture value from each mipmap. The final texture value is a weighted average of those two values.<br /><br />
  94. See the [example:webgl_materials_texture_filters materials / texture / filters] example.
  95. </div>
  96. <h2>Types</h2>
  97. <code>
  98. THREE.UnsignedByteType
  99. THREE.ByteType
  100. THREE.ShortType
  101. THREE.UnsignedShortType
  102. THREE.IntType
  103. THREE.UnsignedIntType
  104. THREE.FloatType
  105. THREE.HalfFloatType
  106. THREE.UnsignedShort4444Type
  107. THREE.UnsignedShort5551Type
  108. THREE.UnsignedShort565Type
  109. THREE.UnsignedInt248Type
  110. </code>
  111. <div>
  112. For use with a texture's [page:Texture.type type] property, which must correspond to the correct format. See below for details.<br /><br />
  113. [page:constant UnsignedByteType] is the default.
  114. </div>
  115. <h2>Formats</h2>
  116. <code>
  117. THREE.AlphaFormat
  118. THREE.RGBFormat
  119. THREE.RGBAFormat
  120. THREE.LuminanceFormat
  121. THREE.LuminanceAlphaFormat
  122. THREE.RGBEFormat
  123. THREE.DepthFormat
  124. THREE.DepthStencilFormat
  125. </code>
  126. <div>
  127. For use with a texture's [page:Texture.format format] property, these define
  128. how elements of a 2d texture, or *texels*, are read by shaders.<br /><br />
  129. [page:constant AlphaFormat] discards the red, green and blue components and reads just the alpha component.
  130. The [page:Texture.type type] must be [page:constant UnsignedByteType].<br /><br />
  131. [page:constant RGBFormat] discards the alpha components and reads the red, green and blue components.
  132. The [page:Texture.type type] must be [page:constant UnsignedByteType] or [page:constant UnsignedShort565Type].<br /><br />
  133. [page:constant RGBAFormat] is the default and reads the red, green, blue and alpha components.
  134. The [page:Texture.type type] must be [page:constant UnsignedByteType], [page:constant UnsignedShort4444Type] or [page:constant THREE.UnsignedShort5551Type].<br /><br />
  135. [page:constant LuminanceFormat] reads each element as a single luminance component.
  136. This is then converted to a floating point, clamped to the range [0,1], and then assembled
  137. into an RGBA element by placing the luminance value in the red, green and blue channels,
  138. and attaching 1.0 to the alpha channel. The [page:Texture.type type] must be [page:constant UnsignedByteType].<br /><br />
  139. [page:constant LuminanceAlphaFormat] reads each element as a luminance/alpha double.
  140. The same process occurs as for the [page:constant LuminanceFormat], except that the
  141. alpha channel may have values other than *1.0*. The [page:Texture.type type] must be [page:constant UnsignedByteType].<br /><br />
  142. [page:constant RGBEFormat] is identical to [page:constant RGBAFormat].<br /><br />
  143. [page:constant DepthFormat] reads each element as a single depth value, converts it to floating point, and clamps to the range [0,1].
  144. The [page:Texture.type type] must be [page:constant UnsignedIntType] or [page:constant UnsignedShortType].
  145. This is the default for [page:DepthTexture DepthTexture].<br /><br />
  146. [page:constant DepthStencilFormat] reads each element is a pair of depth and stencil values.
  147. The depth component of the pair is interpreted as in [page:constant DepthFormat].
  148. The stencil component is interpreted based on the depth + stencil internal format.
  149. The [page:Texture.type type] must be [page:constant UnsignedInt248Type].<br /><br />
  150. Note that the texture must have the correct [page:Texture.type type] set, as described above.
  151. See <a href="https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext/texImage2D">this page</a> for details.
  152. </div>
  153. <h2>DDS / ST3C Compressed Texture Formats</h2>
  154. <code>
  155. THREE.RGB_S3TC_DXT1_Format
  156. THREE.RGBA_S3TC_DXT1_Format
  157. THREE.RGBA_S3TC_DXT3_Format
  158. THREE.RGBA_S3TC_DXT5_Format
  159. </code>
  160. <div>
  161. For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
  162. these require support for the
  163. <a href="https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/">WEBGL_compressed_texture_s3tc</a>
  164. extension. <br />
  165. According to <a href="http://webglstats.com/">WebglStats</a>, as of February 2016
  166. over 80% of WebGL enabled devices support this extension.<br /><br />
  167. There are four <a href="https://en.wikipedia.org/wiki/S3_Texture_Compression">S3TC</a> formats available via this extension. These are:<br />
  168. [page:constant RGB_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format.<br />
  169. [page:constant RGBA_S3TC_DXT1_Format]: A DXT1-compressed image in an RGB image format with a simple on/off alpha value.<br />
  170. [page:constant RGBA_S3TC_DXT3_Format]: A DXT3-compressed image in an RGBA image format. Compared to a 32-bit RGBA texture, it offers 4:1 compression.<br />
  171. [page:constant RGBA_S3TC_DXT5_Format]: A DXT5-compressed image in an RGBA image format. It also provides a 4:1 compression, but differs to the DXT3 compression in how the alpha compression is done.<br />
  172. </div>
  173. <h2>PVRTC Compressed Texture Formats</h2>
  174. <code>
  175. THREE.RGB_PVRTC_4BPPV1_Format
  176. THREE.RGB_PVRTC_2BPPV1_Format
  177. THREE.RGBA_PVRTC_4BPPV1_Format
  178. THREE.RGBA_PVRTC_2BPPV1_Format
  179. </code>
  180. <div>
  181. For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
  182. these require support for the <a href="https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/">WEBGL_compressed_texture_pvrtc</a>
  183. extension. <br />
  184. According to <a href="http://webglstats.com/">WebglStats</a>, as of February 2016
  185. less than 8% of WebGL enabled devices support this extenstion.
  186. PVRTC is typically only available on mobile devices with PowerVR chipsets,
  187. which are mainly Apple devices.<br /><br />
  188. There are four <a href="https://en.wikipedia.org/wiki/PVRTC">PVRTC</a> formats available via this extension. These are:<br />
  189. [page:constant RGB_PVRTC_4BPPV1_Format]: RGB compression in 4-bit mode. One block for each 4×4 pixels.<br />
  190. [page:constant RGB_PVRTC_2BPPV1_Format]: RGB compression in 2-bit mode. One block for each 8×4 pixels.<br />
  191. [page:constant RGBA_PVRTC_4BPPV1_Format]: RGBA compression in 4-bit mode. One block for each 4×4 pixels.<br />
  192. [page:constant RGBA_PVRTC_2BPPV1_Format]: RGBA compression in 2-bit mode. One block for each 8×4 pixels.<br />
  193. </div>
  194. <h2>ETC Compressed Texture Format</h2>
  195. <code>
  196. THREE.RGB_ETC1_Format
  197. </code>
  198. <div>
  199. For use with a [page:CompressedTexture CompressedTexture]'s [page:Texture.format format] property,
  200. these require support for the <a href="https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/">WEBGL_compressed_texture_etc1</a>
  201. extension. <br />
  202. According to <a href="http://webglstats.com/">WebglStats</a>, as of February 2016
  203. just over 13% of WebGL enabled devices support this extenstion.<br /><br />
  204. </div>
  205. <h2>Encoding</h2>
  206. <code>
  207. THREE.LinearEncoding
  208. THREE.sRGBEncoding
  209. THREE.GammaEncoding
  210. THREE.RGBEEncoding
  211. THREE.LogLuvEncoding
  212. THREE.RGBM7Encoding
  213. THREE.RGBM16Encoding
  214. THREE.RGBDEncoding
  215. THREE.BasicDepthPacking
  216. THREE.RGBADepthPacking
  217. </code>
  218. <div>
  219. For use with a Texture's [page:Texture.encoding encoding] property.<br /><br />
  220. If the encoding type is changed after the texture has already been used by a material,
  221. you will need to set [page:Material.needsUpdate Material.needsUpdate] to *true* to make the material recompile.<br /><br />
  222. [page:constant LinearEncoding] is the default.
  223. Values other than this are only valid for a material's map, envMap and emissiveMap.
  224. </div>
  225. <h2>Source</h2>
  226. [link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
  227. </body>
  228. </html>