WebGPURenderPipelines.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
  1. import WebGPURenderPipeline from './WebGPURenderPipeline.js';
  2. import WebGPUProgrammableStage from './WebGPUProgrammableStage.js';
  3. class WebGPURenderPipelines {
  4. constructor( renderer, properties, device, glslang, sampleCount, nodes ) {
  5. this.renderer = renderer;
  6. this.properties = properties;
  7. this.device = device;
  8. this.glslang = glslang;
  9. this.sampleCount = sampleCount;
  10. this.nodes = nodes;
  11. this.pipelines = [];
  12. this.objectCache = new WeakMap();
  13. this.stages = {
  14. vertex: new Map(),
  15. fragment: new Map()
  16. };
  17. }
  18. get( object ) {
  19. const device = this.device;
  20. const glslang = this.glslang;
  21. const properties = this.properties;
  22. const material = object.material;
  23. const materialProperties = properties.get( material );
  24. const cache = this._getCache( object );
  25. let currentPipeline;
  26. if ( this._needsUpdate( object, cache ) ) {
  27. // get shader
  28. const nodeBuilder = this.nodes.get( object );
  29. // programmable stages
  30. let stageVertex = this.stages.vertex.get( nodeBuilder.vertexShader );
  31. if ( stageVertex === undefined ) {
  32. stageVertex = new WebGPUProgrammableStage( device, glslang, nodeBuilder.vertexShader, 'vertex' );
  33. this.stages.vertex.set( nodeBuilder.vertexShader, stageVertex );
  34. }
  35. let stageFragment = this.stages.fragment.get( nodeBuilder.fragmentShader );
  36. if ( stageFragment === undefined ) {
  37. stageFragment = new WebGPUProgrammableStage( device, glslang, nodeBuilder.fragmentShader, 'fragment' );
  38. this.stages.fragment.set( nodeBuilder.fragmentShader, stageFragment );
  39. }
  40. // determine render pipeline
  41. currentPipeline = this._acquirePipeline( stageVertex, stageFragment, object, nodeBuilder );
  42. cache.currentPipeline = currentPipeline;
  43. // keep track of all pipelines which are used by a material
  44. let materialPipelines = materialProperties.pipelines;
  45. if ( materialPipelines === undefined ) {
  46. materialPipelines = new Set();
  47. materialProperties.pipelines = materialPipelines;
  48. }
  49. if ( materialPipelines.has( currentPipeline ) === false ) {
  50. materialPipelines.add( currentPipeline );
  51. currentPipeline.usedTimes ++;
  52. stageVertex.usedTimes ++;
  53. stageFragment.usedTimes ++;
  54. }
  55. // dispose
  56. if ( materialProperties.disposeCallback === undefined ) {
  57. const disposeCallback = onMaterialDispose.bind( this );
  58. materialProperties.disposeCallback = disposeCallback;
  59. material.addEventListener( 'dispose', disposeCallback );
  60. }
  61. } else {
  62. currentPipeline = cache.currentPipeline;
  63. }
  64. return currentPipeline;
  65. }
  66. dispose() {
  67. this.pipelines = [];
  68. this.objectCache = new WeakMap();
  69. this.shaderModules = {
  70. vertex: new Map(),
  71. fragment: new Map()
  72. };
  73. }
  74. _acquirePipeline( stageVertex, stageFragment, object, nodeBuilder ) {
  75. let pipeline;
  76. const pipelines = this.pipelines;
  77. // check for existing pipeline
  78. const cacheKey = this._computeCacheKey( stageVertex, stageFragment, object );
  79. for ( let i = 0, il = pipelines.length; i < il; i ++ ) {
  80. const preexistingPipeline = pipelines[ i ];
  81. if ( preexistingPipeline.cacheKey === cacheKey ) {
  82. pipeline = preexistingPipeline;
  83. break;
  84. }
  85. }
  86. if ( pipeline === undefined ) {
  87. pipeline = new WebGPURenderPipeline( this.device, this.renderer, this.sampleCount );
  88. pipeline.init( cacheKey, stageVertex, stageFragment, object, nodeBuilder );
  89. pipelines.push( pipeline );
  90. }
  91. return pipeline;
  92. }
  93. _computeCacheKey( stageVertex, stageFragment, object ) {
  94. const material = object.material;
  95. const renderer = this.renderer;
  96. const parameters = [
  97. stageVertex.id, stageFragment.id,
  98. material.transparent, material.blending, material.premultipliedAlpha,
  99. material.blendSrc, material.blendDst, material.blendEquation,
  100. material.blendSrcAlpha, material.blendDstAlpha, material.blendEquationAlpha,
  101. material.colorWrite,
  102. material.depthWrite, material.depthTest, material.depthFunc,
  103. material.stencilWrite, material.stencilFunc,
  104. material.stencilFail, material.stencilZFail, material.stencilZPass,
  105. material.stencilFuncMask, material.stencilWriteMask,
  106. material.side,
  107. this.sampleCount,
  108. renderer.getCurrentEncoding(), renderer.getCurrentColorFormat(), renderer.getCurrentDepthStencilFormat()
  109. ];
  110. return parameters.join();
  111. }
  112. _getCache( object ) {
  113. let cache = this.objectCache.get( object );
  114. if ( cache === undefined ) {
  115. cache = {};
  116. this.objectCache.set( object, cache );
  117. }
  118. return cache;
  119. }
  120. _releasePipeline( pipeline ) {
  121. if ( -- pipeline.usedTimes === 0 ) {
  122. const pipelines = this.pipelines;
  123. const i = pipelines.indexOf( pipeline );
  124. pipelines[ i ] = pipelines[ pipelines.length - 1 ];
  125. pipelines.pop();
  126. this._releaseStage( pipeline.stageVertex );
  127. this._releaseStage( pipeline.stageFragment );
  128. }
  129. }
  130. _releaseStage( stage ) {
  131. if ( -- stage.usedTimes === 0 ) {
  132. const code = stage.code;
  133. const type = stage.type;
  134. this.stages[ type ].delete( code );
  135. }
  136. }
  137. _needsUpdate( object, cache ) {
  138. const material = object.material;
  139. let needsUpdate = false;
  140. // check material state
  141. if ( cache.material !== material || cache.materialVersion !== material.version ||
  142. cache.transparent !== material.transparent || cache.blending !== material.blending || cache.premultipliedAlpha !== material.premultipliedAlpha ||
  143. cache.blendSrc !== material.blendSrc || cache.blendDst !== material.blendDst || cache.blendEquation !== material.blendEquation ||
  144. cache.blendSrcAlpha !== material.blendSrcAlpha || cache.blendDstAlpha !== material.blendDstAlpha || cache.blendEquationAlpha !== material.blendEquationAlpha ||
  145. cache.colorWrite !== material.colorWrite ||
  146. cache.depthWrite !== material.depthWrite || cache.depthTest !== material.depthTest || cache.depthFunc !== material.depthFunc ||
  147. cache.stencilWrite !== material.stencilWrite || cache.stencilFunc !== material.stencilFunc ||
  148. cache.stencilFail !== material.stencilFail || cache.stencilZFail !== material.stencilZFail || cache.stencilZPass !== material.stencilZPass ||
  149. cache.stencilFuncMask !== material.stencilFuncMask || cache.stencilWriteMask !== material.stencilWriteMask ||
  150. cache.side !== material.side
  151. ) {
  152. cache.material = material; cache.materialVersion = material.version;
  153. cache.transparent = material.transparent; cache.blending = material.blending; cache.premultipliedAlpha = material.premultipliedAlpha;
  154. cache.blendSrc = material.blendSrc; cache.blendDst = material.blendDst; cache.blendEquation = material.blendEquation;
  155. cache.blendSrcAlpha = material.blendSrcAlpha; cache.blendDstAlpha = material.blendDstAlpha; cache.blendEquationAlpha = material.blendEquationAlpha;
  156. cache.colorWrite = material.colorWrite;
  157. cache.depthWrite = material.depthWrite; cache.depthTest = material.depthTest; cache.depthFunc = material.depthFunc;
  158. cache.stencilWrite = material.stencilWrite; cache.stencilFunc = material.stencilFunc;
  159. cache.stencilFail = material.stencilFail; cache.stencilZFail = material.stencilZFail; cache.stencilZPass = material.stencilZPass;
  160. cache.stencilFuncMask = material.stencilFuncMask; cache.stencilWriteMask = material.stencilWriteMask;
  161. cache.side = material.side;
  162. needsUpdate = true;
  163. }
  164. // check renderer state
  165. const renderer = this.renderer;
  166. const encoding = renderer.getCurrentEncoding();
  167. const colorFormat = renderer.getCurrentColorFormat();
  168. const depthStencilFormat = renderer.getCurrentDepthStencilFormat();
  169. if ( cache.sampleCount !== this.sampleCount || cache.encoding !== encoding ||
  170. cache.colorFormat !== colorFormat || cache.depthStencilFormat !== depthStencilFormat ) {
  171. cache.sampleCount = this.sampleCount;
  172. cache.encoding = encoding;
  173. cache.colorFormat = colorFormat;
  174. cache.depthStencilFormat = depthStencilFormat;
  175. needsUpdate = true;
  176. }
  177. return needsUpdate;
  178. }
  179. }
  180. function onMaterialDispose( event ) {
  181. const properties = this.properties;
  182. const material = event.target;
  183. const materialProperties = properties.get( material );
  184. material.removeEventListener( 'dispose', materialProperties.disposeCallback );
  185. properties.remove( material );
  186. // remove references to pipelines
  187. const pipelines = materialProperties.pipelines;
  188. if ( pipelines !== undefined ) {
  189. for ( const pipeline of pipelines ) {
  190. this._releasePipeline( pipeline );
  191. }
  192. }
  193. }
  194. export default WebGPURenderPipelines;