WebGPUBindings.js 8.4 KB

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