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.
275 lines
6.2 KiB
275 lines
6.2 KiB
3 years ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="it">
|
||
|
|
<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">Le uniform sono delle variabili GLSL globali. Vengono passate ai programmi shader.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Codice di Esempio</h2>
|
||
|
|
<p>
|
||
|
|
Quando si dichiara una uniform di uno [page:ShaderMaterial], viene dichiarata per valore o per oggetto.
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
uniforms: {
|
||
|
|
time: { value: 1.0 },
|
||
|
|
resolution: new Uniform( new Vector2() )
|
||
|
|
};
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Tipi Uniform</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
Ogni uniform deve avere una proprietà `value`. Il tipo di value deve corrispondere al tipo
|
||
|
|
della variabile uniform nel codice GLSL come specificato per i tipi primitivi GLSL nella tabella
|
||
|
|
sotto. Anche le strutture uniform e gli array sono supportati. Gli array GLSL di tipo primitivo
|
||
|
|
devono essere specificati come un array del corrispondente oggetto THREE o come un array flat
|
||
|
|
contenente i dati di tutti gli oggetti. In altre parole; le primitive GLSL negli array
|
||
|
|
non devono essere rappresentate dagli array. Questa regola non si applica in modo transitivo.
|
||
|
|
Un array di array `vec2`, ciascuno con una lunghezza di cinque vettori, deve essere un array di array,
|
||
|
|
di cinque oggetti [page:Vector2] o di dieci `numeri`.
|
||
|
|
</p>
|
||
|
|
<table>
|
||
|
|
<caption><a id="uniform-types">Tipi Uniform</a></caption>
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th>GLSL type</th>
|
||
|
|
<th>JavaScript type</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>
|
||
|
|
(*) Lo stesso per un array (dimensione) (più interno) dello stesso tipo GLSL, contenente i componenti di tutti i vettori o le matrici nell'array.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Uniform Strutturate</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
A volte vuoi organizzare le uniform come `structs` nel tuo codice shader.
|
||
|
|
È necessario utilizzare lo stile seguente in modo che three.js sia in grado di elaborare dati strutturati uniform.
|
||
|
|
</p>
|
||
|
|
<code>
|
||
|
|
uniforms = {
|
||
|
|
data: {
|
||
|
|
value: {
|
||
|
|
position: new Vector3(),
|
||
|
|
direction: new Vector3( 0, 0, 1 )
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</code>
|
||
|
|
Questa definizione può essere mappata con il seguente codice GLSL:
|
||
|
|
<code>
|
||
|
|
struct Data {
|
||
|
|
vec3 position;
|
||
|
|
vec3 direction;
|
||
|
|
};
|
||
|
|
|
||
|
|
uniform Data data;
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Uniforms Strutturate con Array</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
È anche possibile gestire `structs` negli array. La sintassi per questo caso d'uso appare così:
|
||
|
|
</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>
|
||
|
|
Questa definizione può essere mappata con il seguente codice GLSL:
|
||
|
|
<code>
|
||
|
|
struct Data {
|
||
|
|
vec3 position;
|
||
|
|
vec3 direction;
|
||
|
|
};
|
||
|
|
|
||
|
|
uniform Data data[ 2 ];
|
||
|
|
</code>
|
||
|
|
|
||
|
|
<h2>Costruttore</h2>
|
||
|
|
|
||
|
|
<h3>[name]( [param:Object value] )</h3>
|
||
|
|
<p>
|
||
|
|
value -- Un oggetto contenente il valore per impostare la uniform. Il suo tipo deve essere uno dei tipi uniform descritti sopra.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Proprietà</h2>
|
||
|
|
|
||
|
|
<h3>[property:Object value]</h3>
|
||
|
|
<p>
|
||
|
|
Il valore corrente della uniform.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Metodi</h2>
|
||
|
|
|
||
|
|
<h3>[method:Uniform clone]()</h3>
|
||
|
|
<p>
|
||
|
|
Restituisce un clone della uniform.<br />
|
||
|
|
Se il valore della proprietà uniform è un [page:Object] con un metodo clone(), viene utilizzato, altrimenti il valore è copiato per assegnazione.
|
||
|
|
I valori dell'array sono condivisi tra le [page:Uniform] clonate.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h2>Source</h2>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|