Uniform.html 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274
  1. <!DOCTYPE html>
  2. <html lang="it">
  3. <head>
  4. <meta charset="utf-8" />
  5. <base href="../../../" />
  6. <script src="page.js"></script>
  7. <link type="text/css" rel="stylesheet" href="page.css" />
  8. </head>
  9. <body>
  10. <h1>[name]</h1>
  11. <p class="desc">Le uniform sono delle variabili GLSL globali. Vengono passate ai programmi shader.
  12. </p>
  13. <h2>Codice di Esempio</h2>
  14. <p>
  15. Quando si dichiara una uniform di uno [page:ShaderMaterial], viene dichiarata per valore o per oggetto.
  16. </p>
  17. <code>
  18. uniforms: {
  19. time: { value: 1.0 },
  20. resolution: new Uniform( new Vector2() )
  21. };
  22. </code>
  23. <h2>Tipi Uniform</h2>
  24. <p>
  25. Ogni uniform deve avere una proprietà `value`. Il tipo di value deve corrispondere al tipo
  26. della variabile uniform nel codice GLSL come specificato per i tipi primitivi GLSL nella tabella
  27. sotto. Anche le strutture uniform e gli array sono supportati. Gli array GLSL di tipo primitivo
  28. devono essere specificati come un array del corrispondente oggetto THREE o come un array flat
  29. contenente i dati di tutti gli oggetti. In altre parole; le primitive GLSL negli array
  30. non devono essere rappresentate dagli array. Questa regola non si applica in modo transitivo.
  31. Un array di array `vec2`, ciascuno con una lunghezza di cinque vettori, deve essere un array di array,
  32. di cinque oggetti [page:Vector2] o di dieci `numeri`.
  33. </p>
  34. <table>
  35. <caption><a id="uniform-types">Tipi Uniform</a></caption>
  36. <thead>
  37. <tr>
  38. <th>GLSL type</th>
  39. <th>JavaScript type</th>
  40. </tr>
  41. </thead>
  42. <tbody>
  43. <tr>
  44. <td>int</td>
  45. <td>[page:Number]</td>
  46. </tr>
  47. <tr>
  48. <td>uint</td>
  49. <td>[page:Number]</td>
  50. </tr>
  51. <tr>
  52. <td>float</td>
  53. <td>[page:Number]</td>
  54. </tr>
  55. <tr>
  56. <td>bool</td>
  57. <td>[page:Boolean]</td>
  58. </tr>
  59. <tr>
  60. <td>bool</td>
  61. <td>[page:Number]</td>
  62. </tr>
  63. <tr>
  64. <td>vec2</td>
  65. <td>[page:Vector2 THREE.Vector2]</td>
  66. </tr>
  67. <tr>
  68. <td>vec2</td>
  69. <td>[page:Float32Array Float32Array] (*)</td>
  70. </tr>
  71. <tr>
  72. <td>vec2</td>
  73. <td>[page:Array Array] (*)</td>
  74. </tr>
  75. <tr>
  76. <td>vec3</td>
  77. <td>[page:Vector3 THREE.Vector3]</td>
  78. </tr>
  79. <tr>
  80. <td>vec3</td>
  81. <td>[page:Color THREE.Color]</td>
  82. </tr>
  83. <tr>
  84. <td>vec3</td>
  85. <td>[page:Float32Array Float32Array] (*)</td>
  86. </tr>
  87. <tr>
  88. <td>vec3</td>
  89. <td>[page:Array Array] (*)</td>
  90. </tr>
  91. <tr>
  92. <td>vec4</td>
  93. <td>[page:Vector4 THREE.Vector4]</td>
  94. </tr>
  95. <tr>
  96. <td>vec4</td>
  97. <td>[page:Quaternion THREE.Quaternion]</td>
  98. </tr>
  99. <tr>
  100. <td>vec4</td>
  101. <td>[page:Float32Array Float32Array] (*)</td>
  102. </tr>
  103. <tr>
  104. <td>vec4</td>
  105. <td>[page:Array Array] (*)</td>
  106. </tr>
  107. <tr>
  108. <td>mat2</td>
  109. <td>[page:Float32Array Float32Array] (*)</td>
  110. </tr>
  111. <tr>
  112. <td>mat2</td>
  113. <td>[page:Array Array] (*)</td>
  114. </tr>
  115. <tr>
  116. <td>mat3</td>
  117. <td>[page:Matrix3 THREE.Matrix3]</td>
  118. </tr>
  119. <tr>
  120. <td>mat3</td>
  121. <td>[page:Float32Array Float32Array] (*)</td>
  122. </tr>
  123. <tr>
  124. <td>mat3</td>
  125. <td>[page:Array Array] (*)</td>
  126. </tr>
  127. <tr>
  128. <td>mat4</td>
  129. <td>[page:Matrix4 THREE.Matrix4]</td>
  130. </tr>
  131. <tr>
  132. <td>mat4</td>
  133. <td>[page:Float32Array Float32Array] (*)</td>
  134. </tr>
  135. <tr>
  136. <td>mat4</td>
  137. <td>[page:Array Array] (*)</td>
  138. </tr>
  139. <tr>
  140. <td>ivec2, bvec2</td>
  141. <td>[page:Float32Array Float32Array] (*)</td>
  142. </tr>
  143. <tr>
  144. <td>ivec2, bvec2</td>
  145. <td>[page:Array Array] (*)</td>
  146. </tr>
  147. <tr>
  148. <td>ivec3, bvec3</td>
  149. <td>[page:Int32Array Int32Array] (*)</td>
  150. </tr>
  151. <tr>
  152. <td>ivec3, bvec3</td>
  153. <td>[page:Array Array] (*)</td>
  154. </tr>
  155. <tr>
  156. <td>ivec4, bvec4</td>
  157. <td>[page:Int32Array Int32Array] (*)</td>
  158. </tr>
  159. <tr>
  160. <td>ivec4, bvec4</td>
  161. <td>[page:Array Array] (*)</td>
  162. </tr>
  163. <tr>
  164. <td>sampler2D</td>
  165. <td>[page:Texture THREE.Texture]</td>
  166. </tr>
  167. <tr>
  168. <td>samplerCube</td>
  169. <td>[page:CubeTexture THREE.CubeTexture]</td>
  170. </tr>
  171. </tbody>
  172. </table>
  173. <p>
  174. (*) Lo stesso per un array (dimensione) (più interno) dello stesso tipo GLSL, contenente i componenti di tutti i vettori o le matrici nell'array.
  175. </p>
  176. <h2>Uniform Strutturate</h2>
  177. <p>
  178. A volte vuoi organizzare le uniform come `structs` nel tuo codice shader.
  179. È necessario utilizzare lo stile seguente in modo che three.js sia in grado di elaborare dati strutturati uniform.
  180. </p>
  181. <code>
  182. uniforms = {
  183. data: {
  184. value: {
  185. position: new Vector3(),
  186. direction: new Vector3( 0, 0, 1 )
  187. }
  188. }
  189. };
  190. </code>
  191. Questa definizione può essere mappata con il seguente codice GLSL:
  192. <code>
  193. struct Data {
  194. vec3 position;
  195. vec3 direction;
  196. };
  197. uniform Data data;
  198. </code>
  199. <h2>Uniforms Strutturate con Array</h2>
  200. <p>
  201. È anche possibile gestire `structs` negli array. La sintassi per questo caso d'uso appare così:
  202. </p>
  203. <code>
  204. const entry1 = {
  205. position: new Vector3(),
  206. direction: new Vector3( 0, 0, 1 )
  207. };
  208. const entry2 = {
  209. position: new Vector3( 1, 1, 1 ),
  210. direction: new Vector3( 0, 1, 0 )
  211. };
  212. uniforms = {
  213. data: {
  214. value: [ entry1, entry2 ]
  215. }
  216. };
  217. </code>
  218. Questa definizione può essere mappata con il seguente codice GLSL:
  219. <code>
  220. struct Data {
  221. vec3 position;
  222. vec3 direction;
  223. };
  224. uniform Data data[ 2 ];
  225. </code>
  226. <h2>Costruttore</h2>
  227. <h3>[name]( [param:Object value] )</h3>
  228. <p>
  229. value -- Un oggetto contenente il valore per impostare la uniform. Il suo tipo deve essere uno dei tipi uniform descritti sopra.
  230. </p>
  231. <h2>Proprietà</h2>
  232. <h3>[property:Object value]</h3>
  233. <p>
  234. Il valore corrente della uniform.
  235. </p>
  236. <h2>Metodi</h2>
  237. <h3>[method:Uniform clone]()</h3>
  238. <p>
  239. Restituisce un clone della uniform.<br />
  240. Se il valore della proprietà uniform è un [page:Object] con un metodo clone(), viene utilizzato, altrimenti il valore è copiato per assegnazione.
  241. I valori dell'array sono condivisi tra le [page:Uniform] clonate.
  242. </p>
  243. <h2>Source</h2>
  244. <p>
  245. [link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
  246. </p>
  247. </body>
  248. </html>