WebGPUBindings.js 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386
  1. import WebGPUUniformsGroup from './WebGPUUniformsGroup.js';
  2. import { FloatUniform, Matrix4Uniform } from './WebGPUUniform.js';
  3. import WebGPUSampler from './WebGPUSampler.js';
  4. import WebGPUSampledTexture from './WebGPUSampledTexture.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( 'THREE.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 textures = this.textures;
  45. const data = this.get( object );
  46. const bindings = data.bindings;
  47. const updateMap = this.updateMap;
  48. const frame = this.info.render.frame;
  49. const sharedUniformsGroups = this.sharedUniformsGroups;
  50. let needsBindGroupRefresh = false;
  51. // iterate over all bindings and check if buffer updates or a new binding group is required
  52. for ( const binding of bindings ) {
  53. if ( binding.isUniformsGroup ) {
  54. const isShared = sharedUniformsGroups.has( binding.name );
  55. const isUpdated = updateMap.get( binding ) === frame;
  56. if ( isShared && isUpdated ) continue;
  57. const array = binding.array;
  58. const bufferGPU = binding.bufferGPU;
  59. binding.onBeforeUpdate( object, camera );
  60. const needsBufferWrite = binding.update();
  61. if ( needsBufferWrite === true ) {
  62. this.device.defaultQueue.writeBuffer(
  63. bufferGPU,
  64. 0,
  65. array,
  66. 0
  67. );
  68. }
  69. updateMap.set( binding, frame );
  70. } else if ( binding.isSampler ) {
  71. const material = object.material;
  72. const texture = material[ binding.name ];
  73. textures.updateSampler( texture );
  74. const samplerGPU = textures.getSampler( texture );
  75. if ( binding.samplerGPU !== samplerGPU ) {
  76. binding.samplerGPU = samplerGPU;
  77. needsBindGroupRefresh = true;
  78. }
  79. } else if ( binding.isSampledTexture ) {
  80. const material = object.material;
  81. const texture = material[ binding.name ];
  82. const forceUpdate = textures.updateTexture( texture );
  83. const textureGPU = textures.getTextureGPU( texture );
  84. if ( binding.textureGPU !== textureGPU || forceUpdate === true ) {
  85. binding.textureGPU = textureGPU;
  86. needsBindGroupRefresh = true;
  87. }
  88. }
  89. }
  90. if ( needsBindGroupRefresh === true ) {
  91. data.group = this._createBindGroup( bindings, data.layout );
  92. }
  93. }
  94. dispose() {
  95. this.uniformsData = new WeakMap();
  96. this.updateMap = new WeakMap();
  97. }
  98. _createBindLayout( bindings ) {
  99. let bindingPoint = 0;
  100. const entries = [];
  101. for ( const binding of bindings ) {
  102. entries.push( { binding: bindingPoint, visibility: binding.visibility, type: binding.type } );
  103. bindingPoint ++;
  104. }
  105. return this.device.createBindGroupLayout( { entries: entries } );
  106. }
  107. _createBindGroup( bindings, layout ) {
  108. let bindingPoint = 0;
  109. const entries = [];
  110. for ( const binding of bindings ) {
  111. if ( binding.isUniformsGroup ) {
  112. if ( binding.bufferGPU === null ) {
  113. const byteLength = binding.getByteLength();
  114. binding.array = new Float32Array( new ArrayBuffer( byteLength ) );
  115. binding.bufferGPU = this.device.createBuffer( {
  116. size: byteLength,
  117. usage: binding.usage,
  118. } );
  119. }
  120. entries.push( { binding: bindingPoint, resource: { buffer: binding.bufferGPU } } );
  121. } else if ( binding.isSampler ) {
  122. if ( binding.samplerGPU === null ) {
  123. binding.samplerGPU = this.textures.getDefaultSampler();
  124. }
  125. entries.push( { binding: bindingPoint, resource: binding.samplerGPU } );
  126. } else if ( binding.isSampledTexture ) {
  127. if ( binding.textureGPU === null ) {
  128. binding.textureGPU = this.textures.getDefaultTexture();
  129. }
  130. entries.push( { binding: bindingPoint, resource: binding.textureGPU.createView() } );
  131. }
  132. bindingPoint ++;
  133. }
  134. return this.device.createBindGroup( {
  135. layout: layout,
  136. entries: entries
  137. } );
  138. }
  139. _getMeshBasicBindings() {
  140. const bindings = [];
  141. // ubos
  142. const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
  143. const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
  144. const modelGroup = new WebGPUUniformsGroup();
  145. modelGroup.setName( 'modelUniforms' );
  146. modelGroup.addUniform( modelViewUniform );
  147. modelGroup.addUniform( modelViewMatrixUniform );
  148. modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
  149. modelViewUniform.setValue( object.matrixWorld );
  150. modelViewMatrixUniform.setValue( object.modelViewMatrix );
  151. } );
  152. // opacity
  153. const opacityUniform = new FloatUniform( 'opacity', 1 );
  154. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  155. const opacityGroup = new WebGPUUniformsGroup();
  156. opacityGroup.setName( 'opacityUniforms' );
  157. opacityGroup.addUniform( opacityUniform );
  158. opacityGroup.visibility = GPUShaderStage.FRAGMENT;
  159. opacityGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
  160. const material = object.material;
  161. const opacity = ( material.transparent === true ) ? material.opacity : 1.0;
  162. opacityUniform.setValue( opacity );
  163. } );
  164. // samplers
  165. const diffuseSampler = new WebGPUSampler();
  166. diffuseSampler.setName( 'map' );
  167. // textures
  168. const diffuseTexture = new WebGPUSampledTexture();
  169. diffuseTexture.setName( 'map' );
  170. //
  171. bindings.push( modelGroup );
  172. bindings.push( cameraGroup );
  173. bindings.push( opacityGroup );
  174. bindings.push( diffuseSampler );
  175. bindings.push( diffuseTexture );
  176. return bindings;
  177. }
  178. _getPointsBasicBindings() {
  179. const bindings = [];
  180. // ubos
  181. const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
  182. const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
  183. const modelGroup = new WebGPUUniformsGroup();
  184. modelGroup.setName( 'modelUniforms' );
  185. modelGroup.addUniform( modelViewUniform );
  186. modelGroup.addUniform( modelViewMatrixUniform );
  187. modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
  188. modelViewUniform.setValue( object.matrixWorld );
  189. modelViewMatrixUniform.setValue( object.modelViewMatrix );
  190. } );
  191. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  192. //
  193. bindings.push( modelGroup );
  194. bindings.push( cameraGroup );
  195. return bindings;
  196. }
  197. _getLinesBasicBindings() {
  198. const bindings = [];
  199. // ubos
  200. const modelViewUniform = new Matrix4Uniform( 'modelMatrix' );
  201. const modelViewMatrixUniform = new Matrix4Uniform( 'modelViewMatrix' );
  202. const modelGroup = new WebGPUUniformsGroup();
  203. modelGroup.setName( 'modelUniforms' );
  204. modelGroup.addUniform( modelViewUniform );
  205. modelGroup.addUniform( modelViewMatrixUniform );
  206. modelGroup.setOnBeforeUpdate( function ( object/*, camera */ ) {
  207. modelViewUniform.setValue( object.matrixWorld );
  208. modelViewMatrixUniform.setValue( object.modelViewMatrix );
  209. } );
  210. const cameraGroup = this.sharedUniformsGroups.get( 'cameraUniforms' );
  211. //
  212. bindings.push( modelGroup );
  213. bindings.push( cameraGroup );
  214. return bindings;
  215. }
  216. _setupSharedUniformsGroups() {
  217. const projectionMatrixUniform = new Matrix4Uniform( 'projectionMatrix' );
  218. const viewMatrixUniform = new Matrix4Uniform( 'viewMatrix' );
  219. const cameraGroup = new WebGPUUniformsGroup();
  220. cameraGroup.setName( 'cameraUniforms' );
  221. cameraGroup.addUniform( projectionMatrixUniform );
  222. cameraGroup.addUniform( viewMatrixUniform );
  223. cameraGroup.setOnBeforeUpdate( function ( object, camera ) {
  224. projectionMatrixUniform.setValue( camera.projectionMatrix );
  225. viewMatrixUniform.setValue( camera.matrixWorldInverse );
  226. } );
  227. this.sharedUniformsGroups.set( cameraGroup.name, cameraGroup );
  228. }
  229. }
  230. export default WebGPUBindings;