three.js DataArrayTexture

2023-02-16 17:49 更新

直接從原始數(shù)據(jù)、寬度、高度和深度創(chuàng)建紋理數(shù)組。這種類型的紋理只能與 WebGL 2 渲染上下文一起使用。

構(gòu)造函數(shù)

DataArrayTexture( data, width, height, depth )

數(shù)據(jù)參數(shù)必須是 ArrayBufferView。默認(rèn)繼承自Texture的屬性,除了magFilter和minFilter默認(rèn)為THREE.NearestFilter。屬性 flipY 和 generateMipmaps 最初設(shè)置為 false。

數(shù)據(jù)的解釋取決于類型和格式:如果類型是 THREE.UnsignedByteType,則 Uint8Array 可用于尋址紋素?cái)?shù)據(jù)。如果格式為 THREE.RGBAFormat,則數(shù)據(jù)需要為一個(gè)紋素提供四個(gè)值;紅色、綠色、藍(lán)色和 Alpha(通常是不透明度)。對(duì)于打包類型,THREE.UnsignedShort4444Type 和 THREE.UnsignedShort5551Type,一個(gè)紋素的所有顏色分量都可以作為 Uint16Array 的整數(shù)元素中的位域來尋址。為了使用這些類型THREE.FloatType 和 THREE.HalfFloatType,WebGL 實(shí)現(xiàn)必須支持各自的擴(kuò)展 OES_texture_float 和 OES_texture_half_float。為了將 THREE.LinearFilter 用于基于這些類型的紋素的分量雙線性插值,還必須存在 WebGL 擴(kuò)展 OES_texture_float_linear 或 OES_texture_half_float_linear。

代碼示例

這將創(chuàng)建一個(gè) DataArrayTexture,其中每個(gè)紋理都有不同的顏色。

// 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

用保存數(shù)據(jù)、寬度、高度和深度的記錄類型覆蓋。

方法

有關(guān)常用方法,請參見基 Texture 類。

源碼

src/textures/DataArrayTexture.js


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)