WebGPUBindings.js 9.7 KB

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