three.js Uniform

2023-02-16 17:31 更新

Uniforms 是 GLSL 著色器中的全局變量。

代碼示例

在聲明一個 ShaderMaterial 的 uniform 時,它是按值或按對象聲明的。

uniforms: {
	time: { value: 1.0 },
	resolution: new Uniform( new Vector2() )
};

Uniform 種類

每個 Uniform 必須包括一個 value 屬性。value 的類型必須和下表中 GLSL 的基本類型相對應。同樣,Uniform 的結構體和隊列 也是支持的。 GLSL基本類型隊列必須要么被顯示聲明為一個 THREE 對象的隊列,要么被聲明為一個包含所有對象數據的隊列。這就是說, 隊列中的 GLSL 基礎類型不能再是一個隊列。舉例,一個有 5 個 vec2 元素的隊列,必須是一個包含 5 個 Vector2 的隊列數組, 或包含 10 個 number 的隊列。

GLSL 類型 JavaScript 類型
int Number
uint (WebGL 2) Number
float Number
bool Boolean
bool Number
vec2 THREE.Vector2
vec2 Float32Array (*)
vec2 Array (*)
vec3 THREE.Vector3
vec3 THREE.Color
vec3 Float32Array (*)
vec3 Array (*)
vec4 THREE.Vector4
vec4 THREE.Quaternion
vec4 Float32Array (*)
vec4 Array (*)
mat2 Float32Array (*)
mat2 Array (*)
mat3 THREE.Matrix3
mat3 Float32Array (*)
mat3 Array (*)
mat4 THREE.Matrix4
mat4 Float32Array (*)
mat4 Array (*)
ivec2, bvec2 Float32Array (*)
ivec2, bvec2 Array (*)
ivec3, bvec3 Int32Array (*)
ivec3, bvec3 Array (*)
ivec4, bvec4 Int32Array (*)
ivec4, bvec4 Array (*)
sampler2D THREE.Texture
samplerCube THREE.CubeTexture

(*) 與最內層隊列中 GSLS 的類型保持一致。包含隊列中所有矢量的元素或矩陣中的元素。

結構制服

有時您希望在著色器代碼中將制服組織為結構。必須使用以下樣式,以便 three.js 能夠處理結構化統(tǒng)一數據。

uniforms = {
	data: {
		value: {
			position: new Vector3(),
			direction: new Vector3( 0, 0, 1 )
		 }
	}
};

此定義可以映射到以下 GLSL 代碼:

struct Data {
	vec3 position;
	vec3 direction;
};

uniform Data data;

帶數組的結構化制服

也可以管理數組中的結構。此用例的語法如下所示:

const entry1 = {
	position: new Vector3(),
	direction: new Vector3( 0, 0, 1 )
};
const entry2 = {
	position: new Vector3( 1, 1, 1 ),
	direction: new Vector3( 0, 1, 0 )
};

uniforms = {
	data: {
		value: [ entry1, entry2 ]
	}
};

此定義可以映射到以下 GLSL 代碼:

struct Data {
	vec3 position;
	vec3 direction;
};

uniform Data data[ 2 ];

構造函數

Uniform( value : Object )

value -- 包含需要設置 Uniform 數據的對象。 數據類型必須是上述類型中的一種。

屬性

.value : Object

當前 uniform 的值。

方法

.clone () : Uniform

返回該 Uniform 的克隆。如果 Uniform 的 value 屬性是一個帶 clone() 方法的 Object,則克隆該對象時,value 的 clone() 方法也會被調用,否則克隆時只會使用賦值語句。 隊列中的值會在該 Uniform 和 被克隆對象間共享。

源代碼

src/core/Uniform.js


以上內容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號