1
0

DataTexture.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. [page:Texture] &rarr;
  11. <h1>[name]</h1>
  12. <p class="desc">
  13. Creates a texture directly from raw data, width and height.
  14. </p>
  15. <h2>Constructor</h2>
  16. <h3>
  17. [name]( data, width, height, format, type, mapping, wrapS, wrapT,
  18. magFilter, minFilter, anisotropy, colorSpace )
  19. </h3>
  20. <p>
  21. The data argument must be an
  22. [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
  23. Further parameters correspond to the properties
  24. inherited from [page:Texture], where both magFilter and minFilter default
  25. to THREE.NearestFilter.
  26. </p>
  27. <p>
  28. The interpretation of the data depends on type and format: If the type is
  29. THREE.UnsignedByteType, a Uint8Array will be useful for addressing the
  30. texel data. If the format is THREE.RGBAFormat, data needs four values for
  31. one texel; Red, Green, Blue and Alpha (typically the opacity).<br />
  32. For the packed types, THREE.UnsignedShort4444Type and
  33. THREE.UnsignedShort5551Type all color components of one texel can be
  34. addressed as bitfields within an integer element of a Uint16Array.<br />
  35. In order to use the types THREE.FloatType and THREE.HalfFloatType, the
  36. WebGL implementation must support the respective extensions
  37. OES_texture_float and OES_texture_half_float. In order to use
  38. THREE.LinearFilter for component-wise, bilinear interpolation of the
  39. texels based on these types, the WebGL extensions OES_texture_float_linear
  40. or OES_texture_half_float_linear must also be present.
  41. </p>
  42. <h2>Code Example</h2>
  43. <code>
  44. // create a buffer with color data
  45. const width = 512;
  46. const height = 512;
  47. const size = width * height;
  48. const data = new Uint8Array( 4 * size );
  49. const color = new THREE.Color( 0xffffff );
  50. const r = Math.floor( color.r * 255 );
  51. const g = Math.floor( color.g * 255 );
  52. const b = Math.floor( color.b * 255 );
  53. for ( let i = 0; i < size; i ++ ) {
  54. const stride = i * 4;
  55. data[ stride ] = r;
  56. data[ stride + 1 ] = g;
  57. data[ stride + 2 ] = b;
  58. data[ stride + 3 ] = 255;
  59. }
  60. // used the buffer to create a [name]
  61. const texture = new THREE.DataTexture( data, width, height );
  62. texture.needsUpdate = true;
  63. </code>
  64. <h2>Properties</h2>
  65. <p>See the base [page:Texture Texture] class for common properties.</p>
  66. <h3>[property:Boolean flipY]</h3>
  67. <p>
  68. If set to `true`, the texture is flipped along the vertical axis when
  69. uploaded to the GPU. Default is `false`.
  70. </p>
  71. <h3>[property:Boolean generateMipmaps]</h3>
  72. <p>
  73. Whether to generate mipmaps (if possible) for a texture. False by default.
  74. </p>
  75. <h3>[property:Object image]</h3>
  76. <p>Overridden with a object holding data, width, and height.</p>
  77. <h3>[property:Boolean isDataTexture]</h3>
  78. <p>Read-only flag to check if a given object is of type [name].</p>
  79. <h3>[property:number unpackAlignment]</h3>
  80. <p>
  81. `1` by default. Specifies the alignment requirements for the start of each
  82. pixel row in memory. The allowable values are 1 (byte-alignment), 2 (rows
  83. aligned to even-numbered bytes), 4 (word-alignment), and 8 (rows start on
  84. double-word boundaries). See
  85. [link:http://www.khronos.org/opengles/sdk/docs/man/xhtml/glPixelStorei.xml glPixelStorei] for more information.
  86. </p>
  87. <h2>Methods</h2>
  88. <p>See the base [page:Texture Texture] class for common methods.</p>
  89. <h2>Source</h2>
  90. <p>
  91. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  92. </p>
  93. </body>
  94. </html>