WebGLUniforms.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882
  1. /**
  2. * @author tschw
  3. * @author Mugen87 / https://github.com/Mugen87
  4. * @author mrdoob / http://mrdoob.com/
  5. *
  6. * Uniforms of a program.
  7. * Those form a tree structure with a special top-level container for the root,
  8. * which you get by calling 'new WebGLUniforms( gl, program )'.
  9. *
  10. *
  11. * Properties of inner nodes including the top-level container:
  12. *
  13. * .seq - array of nested uniforms
  14. * .map - nested uniforms by name
  15. *
  16. *
  17. * Methods of all nodes except the top-level container:
  18. *
  19. * .setValue( gl, value, [textures] )
  20. *
  21. * uploads a uniform value(s)
  22. * the 'textures' parameter is needed for sampler uniforms
  23. *
  24. *
  25. * Static methods of the top-level container (textures factorizations):
  26. *
  27. * .upload( gl, seq, values, textures )
  28. *
  29. * sets uniforms in 'seq' to 'values[id].value'
  30. *
  31. * .seqWithValue( seq, values ) : filteredSeq
  32. *
  33. * filters 'seq' entries with corresponding entry in values
  34. *
  35. *
  36. * Methods of the top-level container (textures factorizations):
  37. *
  38. * .setValue( gl, name, value, textures )
  39. *
  40. * sets uniform with name 'name' to 'value'
  41. *
  42. * .setOptional( gl, obj, prop )
  43. *
  44. * like .set for an optional property of the object
  45. *
  46. */
  47. import { CubeTexture } from '../../textures/CubeTexture.js';
  48. import { Texture } from '../../textures/Texture.js';
  49. import { DataTexture2DArray } from '../../textures/DataTexture2DArray.js';
  50. import { DataTexture3D } from '../../textures/DataTexture3D.js';
  51. var emptyTexture = new Texture();
  52. var emptyTexture2dArray = new DataTexture2DArray();
  53. var emptyTexture3d = new DataTexture3D();
  54. var emptyCubeTexture = new CubeTexture();
  55. // --- Utilities ---
  56. // Array Caches (provide typed arrays for temporary by size)
  57. var arrayCacheF32 = [];
  58. var arrayCacheI32 = [];
  59. // Float32Array caches used for uploading Matrix uniforms
  60. var mat4array = new Float32Array( 16 );
  61. var mat3array = new Float32Array( 9 );
  62. var mat2array = new Float32Array( 4 );
  63. // Flattening for arrays of vectors and matrices
  64. function flatten( array, nBlocks, blockSize ) {
  65. var firstElem = array[ 0 ];
  66. if ( firstElem <= 0 || firstElem > 0 ) return array;
  67. // unoptimized: ! isNaN( firstElem )
  68. // see http://jacksondunstan.com/articles/983
  69. var n = nBlocks * blockSize,
  70. r = arrayCacheF32[ n ];
  71. if ( r === undefined ) {
  72. r = new Float32Array( n );
  73. arrayCacheF32[ n ] = r;
  74. }
  75. if ( nBlocks !== 0 ) {
  76. firstElem.toArray( r, 0 );
  77. for ( var i = 1, offset = 0; i !== nBlocks; ++ i ) {
  78. offset += blockSize;
  79. array[ i ].toArray( r, offset );
  80. }
  81. }
  82. return r;
  83. }
  84. function arraysEqual( a, b ) {
  85. if ( a.length !== b.length ) return false;
  86. for ( var i = 0, l = a.length; i < l; i ++ ) {
  87. if ( a[ i ] !== b[ i ] ) return false;
  88. }
  89. return true;
  90. }
  91. function copyArray( a, b ) {
  92. for ( var i = 0, l = b.length; i < l; i ++ ) {
  93. a[ i ] = b[ i ];
  94. }
  95. }
  96. // Texture unit allocation
  97. function allocTexUnits( textures, n ) {
  98. var r = arrayCacheI32[ n ];
  99. if ( r === undefined ) {
  100. r = new Int32Array( n );
  101. arrayCacheI32[ n ] = r;
  102. }
  103. for ( var i = 0; i !== n; ++ i )
  104. r[ i ] = textures.allocateTextureUnit();
  105. return r;
  106. }
  107. // --- Setters ---
  108. // Note: Defining these methods externally, because they come in a bunch
  109. // and this way their names minify.
  110. // Single scalar
  111. function setValue1f( gl, v ) {
  112. var cache = this.cache;
  113. if ( cache[ 0 ] === v ) return;
  114. gl.uniform1f( this.addr, v );
  115. cache[ 0 ] = v;
  116. }
  117. function setValue1i( gl, v ) {
  118. var cache = this.cache;
  119. if ( cache[ 0 ] === v ) return;
  120. gl.uniform1i( this.addr, v );
  121. cache[ 0 ] = v;
  122. }
  123. // Single float vector (from flat array or THREE.VectorN)
  124. function setValue2fv( gl, v ) {
  125. var cache = this.cache;
  126. if ( v.x !== undefined ) {
  127. if ( cache[ 0 ] !== v.x || cache[ 1 ] !== v.y ) {
  128. gl.uniform2f( this.addr, v.x, v.y );
  129. cache[ 0 ] = v.x;
  130. cache[ 1 ] = v.y;
  131. }
  132. } else {
  133. if ( arraysEqual( cache, v ) ) return;
  134. gl.uniform2fv( this.addr, v );
  135. copyArray( cache, v );
  136. }
  137. }
  138. function setValue3fv( gl, v ) {
  139. var cache = this.cache;
  140. if ( v.x !== undefined ) {
  141. if ( cache[ 0 ] !== v.x || cache[ 1 ] !== v.y || cache[ 2 ] !== v.z ) {
  142. gl.uniform3f( this.addr, v.x, v.y, v.z );
  143. cache[ 0 ] = v.x;
  144. cache[ 1 ] = v.y;
  145. cache[ 2 ] = v.z;
  146. }
  147. } else if ( v.r !== undefined ) {
  148. if ( cache[ 0 ] !== v.r || cache[ 1 ] !== v.g || cache[ 2 ] !== v.b ) {
  149. gl.uniform3f( this.addr, v.r, v.g, v.b );
  150. cache[ 0 ] = v.r;
  151. cache[ 1 ] = v.g;
  152. cache[ 2 ] = v.b;
  153. }
  154. } else {
  155. if ( arraysEqual( cache, v ) ) return;
  156. gl.uniform3fv( this.addr, v );
  157. copyArray( cache, v );
  158. }
  159. }
  160. function setValue4fv( gl, v ) {
  161. var cache = this.cache;
  162. if ( v.x !== undefined ) {
  163. if ( cache[ 0 ] !== v.x || cache[ 1 ] !== v.y || cache[ 2 ] !== v.z || cache[ 3 ] !== v.w ) {
  164. gl.uniform4f( this.addr, v.x, v.y, v.z, v.w );
  165. cache[ 0 ] = v.x;
  166. cache[ 1 ] = v.y;
  167. cache[ 2 ] = v.z;
  168. cache[ 3 ] = v.w;
  169. }
  170. } else {
  171. if ( arraysEqual( cache, v ) ) return;
  172. gl.uniform4fv( this.addr, v );
  173. copyArray( cache, v );
  174. }
  175. }
  176. // Single matrix (from flat array or MatrixN)
  177. function setValue2fm( gl, v ) {
  178. var cache = this.cache;
  179. var elements = v.elements;
  180. if ( elements === undefined ) {
  181. if ( arraysEqual( cache, v ) ) return;
  182. gl.uniformMatrix2fv( this.addr, false, v );
  183. copyArray( cache, v );
  184. } else {
  185. if ( arraysEqual( cache, elements ) ) return;
  186. mat2array.set( elements );
  187. gl.uniformMatrix2fv( this.addr, false, mat2array );
  188. copyArray( cache, elements );
  189. }
  190. }
  191. function setValue3fm( gl, v ) {
  192. var cache = this.cache;
  193. var elements = v.elements;
  194. if ( elements === undefined ) {
  195. if ( arraysEqual( cache, v ) ) return;
  196. gl.uniformMatrix3fv( this.addr, false, v );
  197. copyArray( cache, v );
  198. } else {
  199. if ( arraysEqual( cache, elements ) ) return;
  200. mat3array.set( elements );
  201. gl.uniformMatrix3fv( this.addr, false, mat3array );
  202. copyArray( cache, elements );
  203. }
  204. }
  205. function setValue4fm( gl, v ) {
  206. var cache = this.cache;
  207. var elements = v.elements;
  208. if ( elements === undefined ) {
  209. if ( arraysEqual( cache, v ) ) return;
  210. gl.uniformMatrix4fv( this.addr, false, v );
  211. copyArray( cache, v );
  212. } else {
  213. if ( arraysEqual( cache, elements ) ) return;
  214. mat4array.set( elements );
  215. gl.uniformMatrix4fv( this.addr, false, mat4array );
  216. copyArray( cache, elements );
  217. }
  218. }
  219. // Single texture (2D / Cube)
  220. function setValueT1( gl, v, textures ) {
  221. var cache = this.cache;
  222. var unit = textures.allocateTextureUnit();
  223. if ( cache[ 0 ] !== unit ) {
  224. gl.uniform1i( this.addr, unit );
  225. cache[ 0 ] = unit;
  226. }
  227. textures.safeSetTexture2D( v || emptyTexture, unit );
  228. }
  229. function setValueT2DArray1( gl, v, textures ) {
  230. var cache = this.cache;
  231. var unit = textures.allocateTextureUnit();
  232. if ( cache[ 0 ] !== unit ) {
  233. gl.uniform1i( this.addr, unit );
  234. cache[ 0 ] = unit;
  235. }
  236. textures.setTexture2DArray( v || emptyTexture2dArray, unit );
  237. }
  238. function setValueT3D1( gl, v, textures ) {
  239. var cache = this.cache;
  240. var unit = textures.allocateTextureUnit();
  241. if ( cache[ 0 ] !== unit ) {
  242. gl.uniform1i( this.addr, unit );
  243. cache[ 0 ] = unit;
  244. }
  245. textures.setTexture3D( v || emptyTexture3d, unit );
  246. }
  247. function setValueT6( gl, v, textures ) {
  248. var cache = this.cache;
  249. var unit = textures.allocateTextureUnit();
  250. if ( cache[ 0 ] !== unit ) {
  251. gl.uniform1i( this.addr, unit );
  252. cache[ 0 ] = unit;
  253. }
  254. textures.safeSetTextureCube( v || emptyCubeTexture, unit );
  255. }
  256. // Integer / Boolean vectors or arrays thereof (always flat arrays)
  257. function setValue2iv( gl, v ) {
  258. var cache = this.cache;
  259. if ( arraysEqual( cache, v ) ) return;
  260. gl.uniform2iv( this.addr, v );
  261. copyArray( cache, v );
  262. }
  263. function setValue3iv( gl, v ) {
  264. var cache = this.cache;
  265. if ( arraysEqual( cache, v ) ) return;
  266. gl.uniform3iv( this.addr, v );
  267. copyArray( cache, v );
  268. }
  269. function setValue4iv( gl, v ) {
  270. var cache = this.cache;
  271. if ( arraysEqual( cache, v ) ) return;
  272. gl.uniform4iv( this.addr, v );
  273. copyArray( cache, v );
  274. }
  275. // Helper to pick the right setter for the singular case
  276. function getSingularSetter( type ) {
  277. switch ( type ) {
  278. case 0x1406: return setValue1f; // FLOAT
  279. case 0x8b50: return setValue2fv; // _VEC2
  280. case 0x8b51: return setValue3fv; // _VEC3
  281. case 0x8b52: return setValue4fv; // _VEC4
  282. case 0x8b5a: return setValue2fm; // _MAT2
  283. case 0x8b5b: return setValue3fm; // _MAT3
  284. case 0x8b5c: return setValue4fm; // _MAT4
  285. case 0x8b5e: case 0x8d66: return setValueT1; // SAMPLER_2D, SAMPLER_EXTERNAL_OES
  286. case 0x8b5f: return setValueT3D1; // SAMPLER_3D
  287. case 0x8b60: return setValueT6; // SAMPLER_CUBE
  288. case 0x8DC1: return setValueT2DArray1; // SAMPLER_2D_ARRAY
  289. case 0x1404: case 0x8b56: return setValue1i; // INT, BOOL
  290. case 0x8b53: case 0x8b57: return setValue2iv; // _VEC2
  291. case 0x8b54: case 0x8b58: return setValue3iv; // _VEC3
  292. case 0x8b55: case 0x8b59: return setValue4iv; // _VEC4
  293. }
  294. }
  295. // Array of scalars
  296. function setValue1fv( gl, v ) {
  297. var cache = this.cache;
  298. if ( arraysEqual( cache, v ) ) return;
  299. gl.uniform1fv( this.addr, v );
  300. copyArray( cache, v );
  301. }
  302. function setValue1iv( gl, v ) {
  303. var cache = this.cache;
  304. if ( arraysEqual( cache, v ) ) return;
  305. gl.uniform1iv( this.addr, v );
  306. copyArray( cache, v );
  307. }
  308. // Array of vectors (flat or from THREE classes)
  309. function setValueV2a( gl, v ) {
  310. var cache = this.cache;
  311. var data = flatten( v, this.size, 2 );
  312. if ( arraysEqual( cache, data ) ) return;
  313. gl.uniform2fv( this.addr, data );
  314. this.updateCache( data );
  315. }
  316. function setValueV3a( gl, v ) {
  317. var cache = this.cache;
  318. var data = flatten( v, this.size, 3 );
  319. if ( arraysEqual( cache, data ) ) return;
  320. gl.uniform3fv( this.addr, data );
  321. this.updateCache( data );
  322. }
  323. function setValueV4a( gl, v ) {
  324. var cache = this.cache;
  325. var data = flatten( v, this.size, 4 );
  326. if ( arraysEqual( cache, data ) ) return;
  327. gl.uniform4fv( this.addr, data );
  328. this.updateCache( data );
  329. }
  330. // Array of matrices (flat or from THREE clases)
  331. function setValueM2a( gl, v ) {
  332. var cache = this.cache;
  333. var data = flatten( v, this.size, 4 );
  334. if ( arraysEqual( cache, data ) ) return;
  335. gl.uniformMatrix2fv( this.addr, false, data );
  336. this.updateCache( data );
  337. }
  338. function setValueM3a( gl, v ) {
  339. var cache = this.cache;
  340. var data = flatten( v, this.size, 9 );
  341. if ( arraysEqual( cache, data ) ) return;
  342. gl.uniformMatrix3fv( this.addr, false, data );
  343. this.updateCache( data );
  344. }
  345. function setValueM4a( gl, v ) {
  346. var cache = this.cache;
  347. var data = flatten( v, this.size, 16 );
  348. if ( arraysEqual( cache, data ) ) return;
  349. gl.uniformMatrix4fv( this.addr, false, data );
  350. this.updateCache( data );
  351. }
  352. // Array of textures (2D / Cube)
  353. function setValueT1a( gl, v, textures ) {
  354. var cache = this.cache;
  355. var n = v.length;
  356. var units = allocTexUnits( textures, n );
  357. if ( arraysEqual( cache, units ) === false ) {
  358. gl.uniform1iv( this.addr, units );
  359. copyArray( cache, units );
  360. }
  361. for ( var i = 0; i !== n; ++ i ) {
  362. textures.safeSetTexture2D( v[ i ] || emptyTexture, units[ i ] );
  363. }
  364. }
  365. function setValueT6a( gl, v, textures ) {
  366. var cache = this.cache;
  367. var n = v.length;
  368. var units = allocTexUnits( textures, n );
  369. if ( arraysEqual( cache, units ) === false ) {
  370. gl.uniform1iv( this.addr, units );
  371. copyArray( cache, units );
  372. }
  373. for ( var i = 0; i !== n; ++ i ) {
  374. textures.safeSetTextureCube( v[ i ] || emptyCubeTexture, units[ i ] );
  375. }
  376. }
  377. // Helper to pick the right setter for a pure (bottom-level) array
  378. function getPureArraySetter( type ) {
  379. switch ( type ) {
  380. case 0x1406: return setValue1fv; // FLOAT
  381. case 0x8b50: return setValueV2a; // _VEC2
  382. case 0x8b51: return setValueV3a; // _VEC3
  383. case 0x8b52: return setValueV4a; // _VEC4
  384. case 0x8b5a: return setValueM2a; // _MAT2
  385. case 0x8b5b: return setValueM3a; // _MAT3
  386. case 0x8b5c: return setValueM4a; // _MAT4
  387. case 0x8b5e: return setValueT1a; // SAMPLER_2D
  388. case 0x8b60: return setValueT6a; // SAMPLER_CUBE
  389. case 0x1404: case 0x8b56: return setValue1iv; // INT, BOOL
  390. case 0x8b53: case 0x8b57: return setValue2iv; // _VEC2
  391. case 0x8b54: case 0x8b58: return setValue3iv; // _VEC3
  392. case 0x8b55: case 0x8b59: return setValue4iv; // _VEC4
  393. }
  394. }
  395. // --- Uniform Classes ---
  396. function SingleUniform( id, activeInfo, addr ) {
  397. this.id = id;
  398. this.addr = addr;
  399. this.cache = [];
  400. this.setValue = getSingularSetter( activeInfo.type );
  401. // this.path = activeInfo.name; // DEBUG
  402. }
  403. function PureArrayUniform( id, activeInfo, addr ) {
  404. this.id = id;
  405. this.addr = addr;
  406. this.cache = [];
  407. this.size = activeInfo.size;
  408. this.setValue = getPureArraySetter( activeInfo.type );
  409. // this.path = activeInfo.name; // DEBUG
  410. }
  411. PureArrayUniform.prototype.updateCache = function ( data ) {
  412. var cache = this.cache;
  413. if ( data instanceof Float32Array && cache.length !== data.length ) {
  414. this.cache = new Float32Array( data.length );
  415. }
  416. copyArray( cache, data );
  417. };
  418. function StructuredUniform( id ) {
  419. this.id = id;
  420. this.seq = [];
  421. this.map = {};
  422. }
  423. StructuredUniform.prototype.setValue = function ( gl, value, textures ) {
  424. var seq = this.seq;
  425. for ( var i = 0, n = seq.length; i !== n; ++ i ) {
  426. var u = seq[ i ];
  427. u.setValue( gl, value[ u.id ], textures );
  428. }
  429. };
  430. // --- Top-level ---
  431. // Parser - builds up the property tree from the path strings
  432. var RePathPart = /([\w\d_]+)(\])?(\[|\.)?/g;
  433. // extracts
  434. // - the identifier (member name or array index)
  435. // - followed by an optional right bracket (found when array index)
  436. // - followed by an optional left bracket or dot (type of subscript)
  437. //
  438. // Note: These portions can be read in a non-overlapping fashion and
  439. // allow straightforward parsing of the hierarchy that WebGL encodes
  440. // in the uniform names.
  441. function addUniform( container, uniformObject ) {
  442. container.seq.push( uniformObject );
  443. container.map[ uniformObject.id ] = uniformObject;
  444. }
  445. function parseUniform( activeInfo, addr, container ) {
  446. var path = activeInfo.name,
  447. pathLength = path.length;
  448. // reset RegExp object, because of the early exit of a previous run
  449. RePathPart.lastIndex = 0;
  450. while ( true ) {
  451. var match = RePathPart.exec( path ),
  452. matchEnd = RePathPart.lastIndex,
  453. id = match[ 1 ],
  454. idIsIndex = match[ 2 ] === ']',
  455. subscript = match[ 3 ];
  456. if ( idIsIndex ) id = id | 0; // convert to integer
  457. if ( subscript === undefined || subscript === '[' && matchEnd + 2 === pathLength ) {
  458. // bare name or "pure" bottom-level array "[0]" suffix
  459. addUniform( container, subscript === undefined ?
  460. new SingleUniform( id, activeInfo, addr ) :
  461. new PureArrayUniform( id, activeInfo, addr ) );
  462. break;
  463. } else {
  464. // step into inner node / create it in case it doesn't exist
  465. var map = container.map, next = map[ id ];
  466. if ( next === undefined ) {
  467. next = new StructuredUniform( id );
  468. addUniform( container, next );
  469. }
  470. container = next;
  471. }
  472. }
  473. }
  474. // Root Container
  475. function WebGLUniforms( gl, program ) {
  476. this.seq = [];
  477. this.map = {};
  478. var n = gl.getProgramParameter( program, gl.ACTIVE_UNIFORMS );
  479. for ( var i = 0; i < n; ++ i ) {
  480. var info = gl.getActiveUniform( program, i ),
  481. addr = gl.getUniformLocation( program, info.name );
  482. parseUniform( info, addr, this );
  483. }
  484. }
  485. WebGLUniforms.prototype.setValue = function ( gl, name, value, textures ) {
  486. var u = this.map[ name ];
  487. if ( u !== undefined ) u.setValue( gl, value, textures );
  488. };
  489. WebGLUniforms.prototype.setOptional = function ( gl, object, name ) {
  490. var v = object[ name ];
  491. if ( v !== undefined ) this.setValue( gl, name, v );
  492. };
  493. // Static interface
  494. WebGLUniforms.upload = function ( gl, seq, values, textures ) {
  495. for ( var i = 0, n = seq.length; i !== n; ++ i ) {
  496. var u = seq[ i ],
  497. v = values[ u.id ];
  498. if ( v.needsUpdate !== false ) {
  499. // note: always updating when .needsUpdate is undefined
  500. u.setValue( gl, v.value, textures );
  501. }
  502. }
  503. };
  504. WebGLUniforms.seqWithValue = function ( seq, values ) {
  505. var r = [];
  506. for ( var i = 0, n = seq.length; i !== n; ++ i ) {
  507. var u = seq[ i ];
  508. if ( u.id in values ) r.push( u );
  509. }
  510. return r;
  511. };
  512. export { WebGLUniforms };