three.js DataArrayTexture

2023-02-16 17:49 更新

直接从原始数据、宽度、高度和深度创建纹理数组。这种类型的纹理只能与 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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号