WebGPUAttributeUtils.js 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293
  1. import { Float16BufferAttribute } from 'three';
  2. import { GPUInputStepMode } from './WebGPUConstants.js';
  3. const typedArraysToVertexFormatPrefix = new Map( [
  4. [ Int8Array, [ 'sint8', 'snorm8' ]],
  5. [ Uint8Array, [ 'uint8', 'unorm8' ]],
  6. [ Int16Array, [ 'sint16', 'snorm16' ]],
  7. [ Uint16Array, [ 'uint16', 'unorm16' ]],
  8. [ Int32Array, [ 'sint32', 'snorm32' ]],
  9. [ Uint32Array, [ 'uint32', 'unorm32' ]],
  10. [ Float32Array, [ 'float32', ]],
  11. ] );
  12. const typedAttributeToVertexFormatPrefix = new Map( [
  13. [ Float16BufferAttribute, [ 'float16', ]],
  14. ] );
  15. const typeArraysToVertexFormatPrefixForItemSize1 = new Map( [
  16. [ Int32Array, 'sint32' ],
  17. [ Uint32Array, 'uint32' ],
  18. [ Float32Array, 'float32' ]
  19. ] );
  20. class WebGPUAttributeUtils {
  21. constructor( backend ) {
  22. this.backend = backend;
  23. }
  24. createAttribute( attribute, usage ) {
  25. const bufferAttribute = this._getBufferAttribute( attribute );
  26. const backend = this.backend;
  27. const bufferData = backend.get( bufferAttribute );
  28. let buffer = bufferData.buffer;
  29. if ( buffer === undefined ) {
  30. const device = backend.device;
  31. let array = bufferAttribute.array;
  32. if ( ( bufferAttribute.isStorageBufferAttribute || bufferAttribute.isStorageInstancedBufferAttribute ) && bufferAttribute.itemSize === 3 ) {
  33. bufferAttribute.itemSize = 4;
  34. array = new array.constructor( bufferAttribute.count * 4 );
  35. for ( let i = 0; i < bufferAttribute.count; i ++ ) {
  36. array.set( bufferAttribute.array.subarray( i * 3, i * 3 + 3 ), i * 4 );
  37. }
  38. }
  39. const size = array.byteLength + ( ( 4 - ( array.byteLength % 4 ) ) % 4 ); // ensure 4 byte alignment, see #20441
  40. buffer = device.createBuffer( {
  41. label: bufferAttribute.name,
  42. size: size,
  43. usage: usage,
  44. mappedAtCreation: true
  45. } );
  46. new array.constructor( buffer.getMappedRange() ).set( array );
  47. buffer.unmap();
  48. bufferData.buffer = buffer;
  49. }
  50. }
  51. updateAttribute( attribute ) {
  52. const bufferAttribute = this._getBufferAttribute( attribute );
  53. const backend = this.backend;
  54. const device = backend.device;
  55. const buffer = backend.get( bufferAttribute ).buffer;
  56. const array = bufferAttribute.array;
  57. const updateRanges = bufferAttribute.updateRanges;
  58. if ( updateRanges.length === 0 ) {
  59. // Not using update ranges
  60. device.queue.writeBuffer(
  61. buffer,
  62. 0,
  63. array,
  64. 0
  65. );
  66. } else {
  67. for ( let i = 0, l = updateRanges.length; i < l; i ++ ) {
  68. const range = updateRanges[ i ];
  69. device.queue.writeBuffer(
  70. buffer,
  71. 0,
  72. array,
  73. range.start * array.BYTES_PER_ELEMENT,
  74. range.count * array.BYTES_PER_ELEMENT
  75. );
  76. }
  77. bufferAttribute.clearUpdateRanges();
  78. }
  79. }
  80. createShaderVertexBuffers( renderObject ) {
  81. const attributes = renderObject.getAttributes();
  82. const vertexBuffers = new Map();
  83. for ( let slot = 0; slot < attributes.length; slot ++ ) {
  84. const geometryAttribute = attributes[ slot ];
  85. const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
  86. const bufferAttribute = this._getBufferAttribute( geometryAttribute );
  87. let vertexBufferLayout = vertexBuffers.get( bufferAttribute );
  88. if ( vertexBufferLayout === undefined ) {
  89. let arrayStride, stepMode;
  90. if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
  91. arrayStride = geometryAttribute.data.stride * bytesPerElement;
  92. stepMode = geometryAttribute.data.isInstancedInterleavedBuffer ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
  93. } else {
  94. arrayStride = geometryAttribute.itemSize * bytesPerElement;
  95. stepMode = geometryAttribute.isInstancedBufferAttribute ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
  96. }
  97. vertexBufferLayout = {
  98. arrayStride,
  99. attributes: [],
  100. stepMode
  101. };
  102. vertexBuffers.set( bufferAttribute, vertexBufferLayout );
  103. }
  104. const format = this._getVertexFormat( geometryAttribute );
  105. const offset = ( geometryAttribute.isInterleavedBufferAttribute === true ) ? geometryAttribute.offset * bytesPerElement : 0;
  106. vertexBufferLayout.attributes.push( {
  107. shaderLocation: slot,
  108. offset,
  109. format
  110. } );
  111. }
  112. return Array.from( vertexBuffers.values() );
  113. }
  114. destroyAttribute( attribute ) {
  115. const backend = this.backend;
  116. const data = backend.get( this._getBufferAttribute( attribute ) );
  117. data.buffer.destroy();
  118. backend.delete( attribute );
  119. }
  120. async getArrayBufferAsync( attribute ) {
  121. const backend = this.backend;
  122. const device = backend.device;
  123. const data = backend.get( this._getBufferAttribute( attribute ) );
  124. const bufferGPU = data.buffer;
  125. const size = bufferGPU.size;
  126. let readBufferGPU = data.readBuffer;
  127. let needsUnmap = true;
  128. if ( readBufferGPU === undefined ) {
  129. readBufferGPU = device.createBuffer( {
  130. label: attribute.name,
  131. size,
  132. usage: GPUBufferUsage.COPY_DST | GPUBufferUsage.MAP_READ
  133. } );
  134. needsUnmap = false;
  135. data.readBuffer = readBufferGPU;
  136. }
  137. const cmdEncoder = device.createCommandEncoder( {} );
  138. cmdEncoder.copyBufferToBuffer(
  139. bufferGPU,
  140. 0,
  141. readBufferGPU,
  142. 0,
  143. size
  144. );
  145. if ( needsUnmap ) readBufferGPU.unmap();
  146. const gpuCommands = cmdEncoder.finish();
  147. device.queue.submit( [ gpuCommands ] );
  148. await readBufferGPU.mapAsync( GPUMapMode.READ );
  149. const arrayBuffer = readBufferGPU.getMappedRange();
  150. return arrayBuffer;
  151. }
  152. _getVertexFormat( geometryAttribute ) {
  153. const { itemSize, normalized } = geometryAttribute;
  154. const ArrayType = geometryAttribute.array.constructor;
  155. const AttributeType = geometryAttribute.constructor;
  156. let format;
  157. if ( itemSize == 1 ) {
  158. format = typeArraysToVertexFormatPrefixForItemSize1.get( ArrayType );
  159. } else {
  160. const prefixOptions = typedAttributeToVertexFormatPrefix.get( AttributeType ) || typedArraysToVertexFormatPrefix.get( ArrayType );
  161. const prefix = prefixOptions[ normalized ? 1 : 0 ];
  162. if ( prefix ) {
  163. const bytesPerUnit = ArrayType.BYTES_PER_ELEMENT * itemSize;
  164. const paddedBytesPerUnit = Math.floor( ( bytesPerUnit + 3 ) / 4 ) * 4;
  165. const paddedItemSize = paddedBytesPerUnit / ArrayType.BYTES_PER_ELEMENT;
  166. if ( paddedItemSize % 1 ) {
  167. throw new Error( 'THREE.WebGPUAttributeUtils: Bad vertex format item size.' );
  168. }
  169. format = `${prefix}x${paddedItemSize}`;
  170. }
  171. }
  172. if ( ! format ) {
  173. console.error( 'THREE.WebGPUAttributeUtils: Vertex format not supported yet.' );
  174. }
  175. return format;
  176. }
  177. _getBufferAttribute( attribute ) {
  178. if ( attribute.isInterleavedBufferAttribute ) attribute = attribute.data;
  179. return attribute;
  180. }
  181. }
  182. export default WebGPUAttributeUtils;