You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
272 lines
5.8 KiB
272 lines
5.8 KiB
2 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<base href="../../../" />
|
||
|
|
<script src="page.js"></script>
|
||
|
|
<link type="text/css" rel="stylesheet" href="page.css" />
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>[name]</h1>
|
||
|
|
|
||
|
|
<p class="desc">Uniforms 是 GLSL 着色器中的全局变量。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>代码示例</h2>
|
||
|
|
<p>
|
||
|
|
When declaring a uniform of a [page:ShaderMaterial], it is declared by value or by object.
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
uniforms: {
|
||
|
|
time: { value: 1.0 },
|
||
|
|
resolution: new Uniform( new Vector2() )
|
||
|
|
};
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Uniform 种类</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
每个 Uniform 必须包括一个 *value* 属性。value 的类型必须和下表中 GLSL 的基本类型相对应。同样，Uniform 的结构体和队列
|
||
|
|
也是支持的。 GLSL基本类型队列必须要么被显示声明为一个 THREE 对象的队列，要么被声明为一个包含所有对象数据的队列。这就是说，
|
||
|
|
队列中的 GLSL 基础类型不能再是一个队列。举例，一个有 5 个 *vec2* 元素的队列，必须是一个包含 5 个 [page:Vector2] 的队列数组，
|
||
|
|
或包含 10 个 *number* 的队列。
|
||
|
|
|
||
|
|
</p>
|
||
|
|
<table>
|
||
|
|
<caption><a id="uniform-types">Uniform 类型</a></caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>GLSL 类型</th>
|
||
|
|
<th>JavaScript 类型</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
<tbody>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>int</td>
|
||
|
|
<td>[page:Number]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>uint (WebGL 2)</td>
|
||
|
|
<td>[page:Number]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>float</td>
|
||
|
|
<td>[page:Number]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>bool</td>
|
||
|
|
<td>[page:Boolean]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>bool</td>
|
||
|
|
<td>[page:Number]</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>vec2</td>
|
||
|
|
<td>[page:Vector2 THREE.Vector2]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec2</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec2</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec3</td>
|
||
|
|
<td>[page:Vector3 THREE.Vector3]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec3</td>
|
||
|
|
<td>[page:Color THREE.Color]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec3</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec3</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec4</td>
|
||
|
|
<td>[page:Vector4 THREE.Vector4]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec4</td>
|
||
|
|
<td>[page:Quaternion THREE.Quaternion]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec4</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>vec4</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>mat2</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat2</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat3</td>
|
||
|
|
<td>[page:Matrix3 THREE.Matrix3]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat3</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat3</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat4</td>
|
||
|
|
<td>[page:Matrix4 THREE.Matrix4]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat4</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>mat4</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>ivec2, bvec2</td>
|
||
|
|
<td>[page:Float32Array Float32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>ivec2, bvec2</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>ivec3, bvec3</td>
|
||
|
|
<td>[page:Int32Array Int32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>ivec3, bvec3</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>ivec4, bvec4</td>
|
||
|
|
<td>[page:Int32Array Int32Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>ivec4, bvec4</td>
|
||
|
|
<td>[page:Array Array] (*)</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
<tr>
|
||
|
|
<td>sampler2D</td>
|
||
|
|
<td>[page:Texture THREE.Texture]</td>
|
||
|
|
</tr>
|
||
|
|
<tr>
|
||
|
|
<td>samplerCube</td>
|
||
|
|
<td>[page:CubeTexture THREE.CubeTexture]</td>
|
||
|
|
</tr>
|
||
|
|
|
||
|
|
</tbody>
|
||
|
|
</table>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
(*) 与最内层队列中 GSLS 的类型保持一致。包含队列中所有矢量的元素或矩阵中的元素。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Structured Uniforms</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Sometimes you want to organize uniforms as *structs* in your shader code. The following style must be used so *three.js* is able
|
||
|
|
to process structured uniform data.
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
uniforms = {
|
||
|
|
data: {
|
||
|
|
value: {
|
||
|
|
position: new Vector3(),
|
||
|
|
direction: new Vector3( 0, 0, 1 )
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</code>
|
||
|
|
This definition can be mapped on the following GLSL code:
|
||
|
|
<code>
|
||
|
|
struct Data {
|
||
|
|
vec3 position;
|
||
|
|
vec3 direction;
|
||
|
|
};
|
||
|
|
|
||
|
|
uniform Data data;
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Structured Uniforms with Arrays</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
It's also possible to manage *structs* in arrays. The syntax for this use case looks like so:
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
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 ]
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</code>
|
||
|
|
This definition can be mapped on the following GLSL code:
|
||
|
|
<code>
|
||
|
|
struct Data {
|
||
|
|
vec3 position;
|
||
|
|
vec3 direction;
|
||
|
|
};
|
||
|
|
|
||
|
|
uniform Data data[ 2 ];
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>构造函数</h2>
|
||
|
|
|
||
|
|
<h3>[name]( [param:Object value] )</h3>
|
||
|
|
<p>
|
||
|
|
value -- 包含需要设置 Uniform 数据的对象。 数据类型必须是上述类型中的一种。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>属性</h2>
|
||
|
|
|
||
|
|
<h3>[property:Object value]</h3>
|
||
|
|
<p>
|
||
|
|
当前 uniform 的值。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>方法</h2>
|
||
|
|
|
||
|
|
<h3>[method:Uniform clone]()</h3>
|
||
|
|
<p>
|
||
|
|
返回该 Uniform 的克隆。<br />
|
||
|
|
如果 Uniform 的 value 属性是一个带 clone() 方法的 [page:Object]，则克隆该对象时，value 的 clone() 方法也会被调用，否则克隆时只会使用赋值语句。
|
||
|
|
队列中的值会在该 Uniform 和 被克隆对象间共享。
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>源代码</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|