three.js DataArrayTexture
直接从原始数据、宽度、高度和深度创建纹理数组。这种类型的纹理只能与 WebGL 2 渲染上下文一起使用。
构造函数
DataArrayTexture( data, width, height, depth )
数据参数必须是 ArrayBufferView。默认继承自Texture的属性,除了magFilter和minFilter默认为THREE.NearestFilter。属性 flipY 和 generateMipmaps 最初设置为 false。
数据的解释取决于类型和格式:如果类型是 THREE.UnsignedByteType,则 Uint8Array 可用于寻址纹素数据。如果格式为 THREE.RGBAFormat,则数据需要为一个纹素提供四个值;红色、绿色、蓝色和 Alpha(通常是不透明度)。对于打包类型,THREE.UnsignedShort4444Type 和 THREE.UnsignedShort5551Type,一个纹素的所有颜色分量都可以作为 Uint16Array 的整数元素中的位域来寻址。为了使用这些类型THREE.FloatType 和 THREE.HalfFloatType,WebGL 实现必须支持各自的扩展 OES_texture_float 和 OES_texture_half_float。为了将 THREE.LinearFilter 用于基于这些类型的纹素的分量双线性插值,还必须存在 WebGL 扩展 OES_texture_float_linear 或 OES_texture_half_float_linear。
代码示例
这将创建一个 DataArrayTexture,其中每个纹理都有不同的颜色。
// 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 DataArrayTexture
const texture = new THREE.DataArrayTexture( data, width, height, depth );
texture.needsUpdate = true;
示例
WebGL2 / materials / texture2darray
属性
请参阅基本 Texture 类以了解通用属性。
.image : Image
用保存数据、宽度、高度和深度的记录类型覆盖。
方法
有关常用方法,请参见基 Texture 类。
源码
src/textures/DataArrayTexture.js
更多建议: