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 能够处理结构化统一数据。

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

公众号
微信公众号

编程狮公众号