samien
/
three.js
зеркало из https://github.com/mrdoob/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241
							<!DOCTYPE html><html lang="zh"><head>
    <meta charset="utf-8">
    <title>Uniform 类型</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@threejs">
    <meta name="twitter:title" content="Three.js – Uniform 类型">
    <meta property="og:image" content="https://threejs.org/files/share.png">
    <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
    <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">

    <link rel="stylesheet" href="../resources/lesson.css">
    <link rel="stylesheet" href="../resources/lang.css">
<script type="importmap">
{
  "imports": {
    "three": "../../build/three.module.js"
  }
}
</script>
  </head>
  <body>
    <div class="container">
      <div class="lesson-title">
        <h1>Uniform 类型</h1>
      </div>
      <div class="lesson">
        <div class="lesson-main">

          <p>
            每个 uniform 都必须有一个 `value` 属性。其值的类型必须与 GLSL 代码中 uniform 变量的类型相对应，具体的 GLSL 基本类型对应关系见下表。Uniform 结构体和数组同样受支持。基本类型的 GLSL 数组必须指定为对应 THREE 对象的数组，或者包含所有对象数据的扁平数组。换言之，GLSL 基本类型本身不应再嵌套一层数组。此规则不具有传递性。例如，一个由 `vec2` 数组组成的数组，每个子数组包含五个向量，则必须是一个数组的数组，其中每个元素可以是五个 `Vector2` 对象或十个 `number`。
          </p>

          <table>
            <thead>
              <tr>
                <th>GLSL 类型</th>
                <th>JavaScript 类型</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>int</td>
                <td>Number</td>
              </tr>
              <tr>
                <td>uint</td>
                <td>Number</td>
              </tr>
              <tr>
                <td>float</td>
                <td>Number</td>
              </tr>
              <tr>
                <td>bool</td>
                <td>Boolean</td>
              </tr>
              <tr>
                <td>bool</td>
                <td>Number</td>
              </tr>
              <tr>
                <td>vec2</td>
                <td>Vector2</td>
              </tr>
              <tr>
                <td>vec2</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>vec2</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>vec3</td>
                <td>Vector3</td>
              </tr>
              <tr>
                <td>vec3</td>
                <td>Color</td>
              </tr>
              <tr>
                <td>vec3</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>vec3</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>vec4</td>
                <td>Vector4</td>
              </tr>
              <tr>
                <td>vec4</td>
                <td>Quaternion</td>
              </tr>
              <tr>
                <td>vec4</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>vec4</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>mat2</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>mat2</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>mat3</td>
                <td>Matrix3</td>
              </tr>
              <tr>
                <td>mat3</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>mat3</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>mat4</td>
                <td>Matrix4</td>
              </tr>
              <tr>
                <td>mat4</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>mat4</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>ivec2, bvec2</td>
                <td>Float32Array (*)</td>
              </tr>
              <tr>
                <td>ivec2, bvec2</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>ivec3, bvec3</td>
                <td>Int32Array (*)</td>
              </tr>
              <tr>
                <td>ivec3, bvec3</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>ivec4, bvec4</td>
                <td>Int32Array (*)</td>
              </tr>
              <tr>
                <td>ivec4, bvec4</td>
                <td>Array (*)</td>
              </tr>
              <tr>
                <td>sampler2D</td>
                <td>Texture</td>
              </tr>
              <tr>
                <td>samplerCube</td>
                <td>CubeTexture</td>
              </tr>
            </tbody>
          </table>

          <p>
            (*) 对于相同 GLSL 类型的（最内层）数组（维度）同样适用，其中包含数组中所有向量或矩阵的分量。
          </p>

          <h2>结构化 Uniform</h2>

          <p>
            有时你可能希望在着色器代码中将 uniform 组织为 `struct`（结构体）。必须使用以下方式，`three.js` 才能正确处理结构化的 uniform 数据。
          </p>
<pre class="prettyprint notranslate lang-js" translate="no">
uniforms = {
  data: {
    value: {
      position: new Vector3(),
      direction: new Vector3( 0, 0, 1 )
    }
  }
};
</pre>
          此定义可以映射到以下 GLSL 代码：
<pre class="prettyprint notranslate lang-js" translate="no">
struct Data {
  vec3 position;
  vec3 direction;
};
uniform Data data;
</pre>

          <h2>带数组的结构化 Uniform</h2>

          <p>
            也可以在数组中管理 `structs`。此用法的语法如下：
          </p>
<pre class="prettyprint notranslate lang-js" translate="no">
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 ]
  }
};
</pre>
          此定义可以映射到以下 GLSL 代码：
<pre class="prettyprint notranslate lang-js" translate="no">
struct Data {
  vec3 position;
  vec3 direction;
};
uniform Data data[ 2 ];
</pre>

        </div>
      </div>
    </div>

  <script src="../resources/prettify.js"></script>
  <script src="../resources/lesson.js"></script>


</body></html>