forked from mrdoob/three.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathDataArrayTexture.html
178 lines (143 loc) · 5.78 KB
/
DataArrayTexture.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:Texture] →
<h1>[name]</h1>
<p class="desc">
Creates an array of textures directly from raw data, width and height and
depth.
</p>
<h2>Constructor</h2>
<h3>[name]( data, width, height, depth )</h3>
<p>
The data argument must be an
[link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
The properties inherited from [page:Texture] are the
default, except magFilter and minFilter default to THREE.NearestFilter.
The properties flipY and generateMipmaps are initially set to false.
</p>
<p>
The interpretation of the data depends on type and format: If the type is
THREE.UnsignedByteType, a Uint8Array will be useful for addressing the
texel data. If the format is THREE.RGBAFormat, data needs four values for
one texel; Red, Green, Blue and Alpha (typically the opacity).<br />
For the packed types, THREE.UnsignedShort4444Type and
THREE.UnsignedShort5551Type all color components of one texel can be
addressed as bitfields within an integer element of a Uint16Array.<br />
In order to use the types THREE.FloatType and THREE.HalfFloatType, the
WebGL implementation must support the respective extensions
OES_texture_float and OES_texture_half_float. In order to use
THREE.LinearFilter for component-wise, bilinear interpolation of the
texels based on these types, the WebGL extensions OES_texture_float_linear
or OES_texture_half_float_linear must also be present.
</p>
<h2>Code Example</h2>
<p>This creates a [name] where each texture has a different color.</p>
<code>
// create a buffer with color data
const width = 512;
const height = 512;
const depth = 100;
const size = width * height;
const data = new Uint8Array( 4 * size * depth );
for ( let i = 0; i < depth; i ++ ) {
const color = new THREE.Color( Math.random(), Math.random(), Math.random() );
const r = Math.floor( color.r * 255 );
const g = Math.floor( color.g * 255 );
const b = Math.floor( color.b * 255 );
for ( let j = 0; j < size; j ++ ) {
const stride = ( i * size + j ) * 4;
data[ stride ] = r;
data[ stride + 1 ] = g;
data[ stride + 2 ] = b;
data[ stride + 3 ] = 255;
}
}
// used the buffer to create a [name]
const texture = new THREE.DataArrayTexture( data, width, height, depth );
texture.needsUpdate = true;
</code>
<h2>Examples</h2>
<p>
[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]
[example:webgl2_rendertarget_texture2darray WebGL2 / rendertarget / texture2darray]
</p>
<h2>Properties</h2>
<p>See the base [page:Texture Texture] class for common properties.</p>
<h3>[property:Boolean flipY]</h3>
<p>
Whether the texture is flipped along the Y axis when uploaded to the GPU.
Default is `false`.
</p>
<h3>[property:Boolean generateMipmaps]</h3>
<p>
Whether to generate mipmaps (if possible) for the texture. Default is
`false`.
</p>
<h3>[property:Object image]</h3>
<p>Overridden with a object holding data, width, height, and depth.</p>
<h3>[property:Boolean isDataArrayTexture]</h3>
<p>Read-only flag to check if a given object is of type [name].</p>
<h3>[property:number magFilter]</h3>
<p>
How the texture is sampled when a texel covers more than one pixel. The
default is [page:Textures THREE.NearestFilter], which uses the value of
the closest texel.<br /><br />
See the [page:Textures texture constants] page for details.
</p>
<h3>[property:number minFilter]</h3>
<p>
How the texture is sampled when a texel covers less than one pixel. The
default is [page:Textures THREE.NearestFilter], which uses the value of
the closest texel.<br /><br />
See the [page:Textures texture constants] page for details.
</p>
<h3>[property:number unpackAlignment]</h3>
<p>
`1` by default. Specifies the alignment requirements for the start of each
pixel row in memory. The allowable values are 1 (byte-alignment), 2 (rows
aligned to even-numbered bytes), 4 (word-alignment), and 8 (rows start on
double-word boundaries). See
[link:https://registry.khronos.org/OpenGL-Refpages/es3.0/html/glPixelStorei.xhtml glPixelStorei] for more information.
</p>
<h3>[property:number wrapR]</h3>
<p>
This defines how the texture is wrapped in the depth direction.<br />
The default is [page:Textures THREE.ClampToEdgeWrapping], where the edge
is clamped to the outer edge texels. The other two choices are
[page:Textures THREE.RepeatWrapping] and [page:Textures THREE.MirroredRepeatWrapping].
See the [page:Textures texture constants]
page for details.
</p>
<h3>[property:Set layerUpdates]</h3>
<p>
A set of all layers which need to be updated in the texture. See
[Page:DataArrayTexture.addLayerUpdate addLayerUpdate].
</p>
<h2>Methods</h2>
<h3>[method:addLayerUpdate addLayerUpdate]( layerIndex )</h3>
<p>
Describes that a specific layer of the texture needs to be updated.
Normally when [page:Texture.needsUpdate needsUpdate] is set to true, the
entire compressed texture array is sent to the GPU. Marking specific
layers will only transmit subsets of all mipmaps associated with a
specific depth in the array which is often much more performant.
</p>
<h3>[method:clearLayerUpdates clearLayerUpdates]()</h3>
<p>
Resets the layer updates registry. See
[Page:DataArrayTexture.addLayerUpdate addLayerUpdate].
</p>
<p>See the base [page:Texture Texture] class for common methods.</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>