WebGPUBindings.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378
  1. import WebGPUUniformsGroup from './WebGPUUniformsGroup.js';
  2. import WebGPUSampler from './WebGPUSampler.js';
  3. import WebGPUSampledTexture from './WebGPUSampledTexture.js';
  4. import { Matrix4 } from '../../../../build/three.module.js';
  5. class WebGPUBindings {
  6. constructor( device, info, properties, textures ) {
  7. this.device = device;
  8. this.info = info;
  9. this.properties = properties;
  10. this.textures = textures;
  11. this.uniformsData = new WeakMap();
  12. this.sharedUniformsGroups = new Map();
  13. this.updateMap = new WeakMap();
  14. this._setupSharedUniformsGroups();
  15. }
  16. get( object ) {
  17. let data = this.uniformsData.get( object );
  18. if ( data === undefined ) {
  19. const material = object.material;
  20. let bindings;
  21. // each material defines an array of bindings (ubos, textures, samplers etc.)
  22. if ( material.isMeshBasicMaterial ) {
  23. bindings = this._getMeshBasicBindings();
  24. } else if ( material.isPointsMaterial ) {
  25. bindings = this._getPointsBasicBindings();
  26. } else if ( material.isLineBasicMaterial ) {
  27. bindings = this._getLinesBasicBindings();
  28. } else {
  29. console.error( 'WebGPURenderer: Unknwon shader type' );
  30. }
  31. // setup (static) binding layout and (dynamic) binding group
  32. const bindLayout = this._createBindLayout( bindings );
  33. const bindGroup = this._createBindGroup( bindings, bindLayout );
  34. data = {
  35. layout: bindLayout,
  36. group: bindGroup,
  37. bindings: bindings
  38. };
  39. this.uniformsData.set( object, data );
  40. }
  41. return data;
  42. }
  43. update( object, camera ) {
  44. const data = this.get( object );
  45. const bindings = data.bindings;
  46. const updateMap = this.updateMap;
  47. const frame = this.info.render.frame;
  48. const sharedUniformsGroups = this.sharedUniformsGroups;
  49. let needsBindGroupRefresh = false;
  50. // iterate over all bindings and check if buffer updates or a new binding group is required
  51. for ( const binding of bindings ) {
  52. if ( binding.isUniformsGroup ) {
  53. const isShared = sharedUniformsGroups.has( binding.name );
  54. const isUpdated = updateMap.get( binding ) === frame;
  55. if ( isShared && isUpdated ) continue;
  56. const array = binding.array;
  57. const bufferGPU = binding.bufferGPU;
  58. const needsBufferWrite = binding.update( array, object, camera );
  59. if ( needsBufferWrite === true ) {
  60. this.device.defaultQueue.writeBuffer(
  61. bufferGPU,
  62. 0,
  63. array,
  64. 0
  65. );
  66. }
  67. updateMap.set( binding, frame );
  68. } else if ( binding.isSampler ) {
  69. const material = object.material;
  70. const texture = material[ binding.name ];
  71. needsBindGroupRefresh = this.textures.updateSampler( texture );
  72. if ( needsBindGroupRefresh === true ) {
  73. binding.samplerGPU = this.textures.getSampler( texture );
  74. }
  75. } else if ( binding.isSampledTexture ) {
  76. const material = object.material;
  77. const texture = material[ binding.name ];
  78. needsBindGroupRefresh = this.textures.updateTexture( texture );
  79. if ( needsBindGroupRefresh === true ) {
  80. binding.textureGPU = this.textures.getTextureGPU( texture );
  81. }
  82. }
  83. }
  84. if ( needsBindGroupRefresh === true ) {
  85. data.group = this._createBindGroup( bindings, data.layout );
  86. }
  87. }
  88. dispose() {
  89. this.uniformsData = new WeakMap();
  90. this.updateMap = new WeakMap();
  91. }
  92. _createBindLayout( bindings ) {
  93. let bindingPoint = 0;
  94. const entries = [];
  95. for ( const binding of bindings ) {
  96. entries.push( { binding: bindingPoint, visibility: binding.visibility, type: binding.type } );
  97. bindingPoint ++;
  98. }
  99. return this.device.createBindGroupLayout( { entries: entries } );
  100. }
  101. _createBindGroup( bindings, layout ) {
  102. let bindingPoint = 0;
  103. const entries = [];
  104. for ( const binding of bindings ) {
  105. if ( binding.isUniformsGroup ) {
  106. if ( binding.bufferGPU === null ) {
  107. const byteLength = binding.getByteLength();
  108. binding.array = new Float32Array( new ArrayBuffer( byteLength ) );
  109. binding.bufferGPU = this.device.createBuffer( {
  110. size: byteLength,
  111. usage: binding.usage,
  112. } );
  113. }
  114. entries.push( { binding: bindingPoint, resource: { buffer: binding.bufferGPU } } );
  115. } else if ( binding.isSampler ) {
  116. if ( binding.samplerGPU === null ) {
  117. binding.samplerGPU = this.textures.getDefaultSampler();
  118. }
  119. entries.push( { binding: bindingPoint, resource: binding.samplerGPU } );
  120. } else if ( binding.isSampledTexture ) {
  121. if ( binding.textureGPU === null ) {
  122. binding.textureGPU = this.textures.getDefaultTexture();
  123. }
  124. entries.push( { binding: bindingPoint, resource: binding.textureGPU.createView() } );
  125. }
  126. bindingPoint ++;
  127. }
  128. return this.device.createBindGroup( {
  129. layout: layout,
  130. entries: entries
  131. } );
  132. }
  133. _getMeshBasicBindings() {
  134. const bindings = [];
  135. // ubos
  136. const modelGroup = new WebGPUUniformsGroup();
  137. modelGroup.setName( 'modelUniforms' );
  138. modelGroup.setUniform( 'modelMatrix', new Matrix4() );
  139. modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
  140. modelGroup.setUpdateCallback( function ( array, object/*, camera */ ) {
  141. array.set( object.matrixWorld.elements, 0 );
  142. array.set( object.modelViewMatrix.elements, 16 );
  143. return true; // TODO: implement caching (return false when cache hits occurs)
  144. } );
  145. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  146. const opacityGroup = new WebGPUUniformsGroup();
  147. opacityGroup.setName( 'opacityUniforms' );
  148. opacityGroup.setUniform( 'opacity', 1.0 );
  149. opacityGroup.visibility = GPUShaderStage.FRAGMENT;
  150. opacityGroup.setUpdateCallback( function ( array, object ) {
  151. const material = object.material;
  152. const opacity = material.transparent ? material.opacity : 1.0;
  153. let updated = false;
  154. if ( array[ 0 ] !== opacity ) {
  155. array[ 0 ] = opacity;
  156. updated = true;
  157. }
  158. return updated;
  159. } );
  160. // samplers
  161. const diffuseSampler = new WebGPUSampler();
  162. diffuseSampler.setName( 'map' );
  163. // textures
  164. const diffuseTexture = new WebGPUSampledTexture();
  165. diffuseTexture.setName( 'map' );
  166. //
  167. bindings.push( modelGroup );
  168. bindings.push( cameraGroup );
  169. bindings.push( opacityGroup );
  170. bindings.push( diffuseSampler );
  171. bindings.push( diffuseTexture );
  172. return bindings;
  173. }
  174. _getPointsBasicBindings() {
  175. const bindings = [];
  176. // ubos
  177. const modelGroup = new WebGPUUniformsGroup();
  178. modelGroup.setName( 'modelUniforms' );
  179. modelGroup.setUniform( 'modelMatrix', new Matrix4() );
  180. modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
  181. modelGroup.setUpdateCallback( function ( array, object/*, camera */ ) {
  182. array.set( object.matrixWorld.elements, 0 );
  183. array.set( object.modelViewMatrix.elements, 16 );
  184. return true; // TODO: implement caching (return false when cache hits occurs)
  185. } );
  186. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  187. //
  188. bindings.push( modelGroup );
  189. bindings.push( cameraGroup );
  190. return bindings;
  191. }
  192. _getLinesBasicBindings() {
  193. const bindings = [];
  194. // ubos
  195. const modelGroup = new WebGPUUniformsGroup();
  196. modelGroup.setName( 'modelUniforms' );
  197. modelGroup.setUniform( 'modelMatrix', new Matrix4() );
  198. modelGroup.setUniform( 'modelViewMatrix', new Matrix4() );
  199. modelGroup.setUpdateCallback( function ( array, object/*, camera */ ) {
  200. array.set( object.matrixWorld.elements, 0 );
  201. array.set( object.modelViewMatrix.elements, 16 );
  202. return true; // TODO: implement caching (return false when cache hits occurs)
  203. } );
  204. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  205. //
  206. bindings.push( modelGroup );
  207. bindings.push( cameraGroup );
  208. return bindings;
  209. }
  210. _setupSharedUniformsGroups() {
  211. const cameraGroup = new WebGPUUniformsGroup();
  212. cameraGroup.setName( 'cameraUniforms' );
  213. cameraGroup.setUniform( 'projectionMatrix', new Matrix4() );
  214. cameraGroup.setUniform( 'viewMatrix', new Matrix4() );
  215. cameraGroup.setUpdateCallback( function ( array, object, camera ) {
  216. array.set( camera.projectionMatrix.elements, 0 );
  217. array.set( camera.matrixWorldInverse.elements, 16 );
  218. return true; // TODO: implement caching (return false when cache hits occurs)
  219. } );
  220. this.sharedUniformsGroups.set( cameraGroup.name, cameraGroup );
  221. }
  222. }
  223. export default WebGPUBindings;