WebGPURenderPipeline.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744
  1. import { GPUPrimitiveTopology, GPUIndexFormat, GPUCompareFunction, GPUFrontFace, GPUCullMode, GPUVertexFormat, GPUBlendFactor, GPUBlendOperation, BlendColorFactor, OneMinusBlendColorFactor, GPUColorWriteFlags, GPUStencilOperation, GPUInputStepMode } from './constants.js';
  2. import {
  3. FrontSide, BackSide, DoubleSide,
  4. NeverDepth, AlwaysDepth, LessDepth, LessEqualDepth, EqualDepth, GreaterEqualDepth, GreaterDepth, NotEqualDepth,
  5. NeverStencilFunc, AlwaysStencilFunc, LessStencilFunc, LessEqualStencilFunc, EqualStencilFunc, GreaterEqualStencilFunc, GreaterStencilFunc, NotEqualStencilFunc,
  6. KeepStencilOp, ZeroStencilOp, ReplaceStencilOp, InvertStencilOp, IncrementStencilOp, DecrementStencilOp, IncrementWrapStencilOp, DecrementWrapStencilOp,
  7. NoBlending, NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending,
  8. AddEquation, SubtractEquation, ReverseSubtractEquation, MinEquation, MaxEquation,
  9. ZeroFactor, OneFactor, SrcColorFactor, OneMinusSrcColorFactor, SrcAlphaFactor, OneMinusSrcAlphaFactor, DstAlphaFactor, OneMinusDstAlphaFactor, DstColorFactor, OneMinusDstColorFactor, SrcAlphaSaturateFactor
  10. } from 'three';
  11. class WebGPURenderPipeline {
  12. constructor( device, renderer, sampleCount ) {
  13. this.cacheKey = null;
  14. this.shaderAttributes = null;
  15. this.stageVertex = null;
  16. this.stageFragment = null;
  17. this.usedTimes = 0;
  18. this._device = device;
  19. this._renderer = renderer;
  20. this._sampleCount = sampleCount;
  21. }
  22. init( cacheKey, stageVertex, stageFragment, object, nodeBuilder ) {
  23. const material = object.material;
  24. const geometry = object.geometry;
  25. // determine shader attributes
  26. const shaderAttributes = this._getShaderAttributes( nodeBuilder, geometry );
  27. // vertex buffers
  28. const vertexBuffers = [];
  29. for ( const attribute of shaderAttributes ) {
  30. const name = attribute.name;
  31. const geometryAttribute = geometry.getAttribute( name );
  32. const stepMode = ( geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ) ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
  33. vertexBuffers.push( {
  34. arrayStride: attribute.arrayStride,
  35. attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
  36. stepMode: stepMode
  37. } );
  38. }
  39. this.cacheKey = cacheKey;
  40. this.shaderAttributes = shaderAttributes;
  41. this.stageVertex = stageVertex;
  42. this.stageFragment = stageFragment;
  43. // blending
  44. let alphaBlend = {};
  45. let colorBlend = {};
  46. if ( material.transparent === true && material.blending !== NoBlending ) {
  47. alphaBlend = this._getAlphaBlend( material );
  48. colorBlend = this._getColorBlend( material );
  49. }
  50. // stencil
  51. let stencilFront = {};
  52. if ( material.stencilWrite === true ) {
  53. stencilFront = {
  54. compare: this._getStencilCompare( material ),
  55. failOp: this._getStencilOperation( material.stencilFail ),
  56. depthFailOp: this._getStencilOperation( material.stencilZFail ),
  57. passOp: this._getStencilOperation( material.stencilZPass )
  58. };
  59. }
  60. //
  61. const primitiveState = this._getPrimitiveState( object, material );
  62. const colorWriteMask = this._getColorWriteMask( material );
  63. const depthCompare = this._getDepthCompare( material );
  64. const colorFormat = this._renderer.getCurrentColorFormat();
  65. const depthStencilFormat = this._renderer.getCurrentDepthStencilFormat();
  66. this.pipeline = this._device.createRenderPipeline( {
  67. vertex: Object.assign( {}, stageVertex.stage, { buffers: vertexBuffers } ),
  68. fragment: Object.assign( {}, stageFragment.stage, { targets: [ {
  69. format: colorFormat,
  70. blend: {
  71. alpha: alphaBlend,
  72. color: colorBlend
  73. },
  74. writeMask: colorWriteMask
  75. } ] } ),
  76. primitive: primitiveState,
  77. depthStencil: {
  78. format: depthStencilFormat,
  79. depthWriteEnabled: material.depthWrite,
  80. depthCompare: depthCompare,
  81. stencilFront: stencilFront,
  82. stencilBack: {}, // three.js does not provide an API to configure the back function (gl.stencilFuncSeparate() was never used)
  83. stencilReadMask: material.stencilFuncMask,
  84. stencilWriteMask: material.stencilWriteMask
  85. },
  86. multisample: {
  87. count: this._sampleCount
  88. },
  89. layout: 'auto'
  90. } );
  91. }
  92. _getAlphaBlend( material ) {
  93. const blending = material.blending;
  94. const premultipliedAlpha = material.premultipliedAlpha;
  95. let alphaBlend = undefined;
  96. switch ( blending ) {
  97. case NormalBlending:
  98. if ( premultipliedAlpha === false ) {
  99. alphaBlend = {
  100. srcFactor: GPUBlendFactor.One,
  101. dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
  102. operation: GPUBlendOperation.Add
  103. };
  104. }
  105. break;
  106. case AdditiveBlending:
  107. alphaBlend = {
  108. srcFactor: GPUBlendFactor.Zero,
  109. dstFactor: GPUBlendFactor.One,
  110. operation: GPUBlendOperation.Add
  111. };
  112. break;
  113. case SubtractiveBlending:
  114. if ( premultipliedAlpha === true ) {
  115. alphaBlend = {
  116. srcFactor: GPUBlendFactor.OneMinusSrcColor,
  117. dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
  118. operation: GPUBlendOperation.Add
  119. };
  120. }
  121. break;
  122. case MultiplyBlending:
  123. if ( premultipliedAlpha === true ) {
  124. alphaBlend = {
  125. srcFactor: GPUBlendFactor.Zero,
  126. dstFactor: GPUBlendFactor.SrcAlpha,
  127. operation: GPUBlendOperation.Add
  128. };
  129. }
  130. break;
  131. case CustomBlending:
  132. const blendSrcAlpha = material.blendSrcAlpha;
  133. const blendDstAlpha = material.blendDstAlpha;
  134. const blendEquationAlpha = material.blendEquationAlpha;
  135. if ( blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null ) {
  136. alphaBlend = {
  137. srcFactor: this._getBlendFactor( blendSrcAlpha ),
  138. dstFactor: this._getBlendFactor( blendDstAlpha ),
  139. operation: this._getBlendOperation( blendEquationAlpha )
  140. };
  141. }
  142. break;
  143. default:
  144. console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
  145. }
  146. return alphaBlend;
  147. }
  148. _getBlendFactor( blend ) {
  149. let blendFactor;
  150. switch ( blend ) {
  151. case ZeroFactor:
  152. blendFactor = GPUBlendFactor.Zero;
  153. break;
  154. case OneFactor:
  155. blendFactor = GPUBlendFactor.One;
  156. break;
  157. case SrcColorFactor:
  158. blendFactor = GPUBlendFactor.SrcColor;
  159. break;
  160. case OneMinusSrcColorFactor:
  161. blendFactor = GPUBlendFactor.OneMinusSrcColor;
  162. break;
  163. case SrcAlphaFactor:
  164. blendFactor = GPUBlendFactor.SrcAlpha;
  165. break;
  166. case OneMinusSrcAlphaFactor:
  167. blendFactor = GPUBlendFactor.OneMinusSrcAlpha;
  168. break;
  169. case DstColorFactor:
  170. blendFactor = GPUBlendFactor.DstColor;
  171. break;
  172. case OneMinusDstColorFactor:
  173. blendFactor = GPUBlendFactor.OneMinusDstColor;
  174. break;
  175. case DstAlphaFactor:
  176. blendFactor = GPUBlendFactor.DstAlpha;
  177. break;
  178. case OneMinusDstAlphaFactor:
  179. blendFactor = GPUBlendFactor.OneMinusDstAlpha;
  180. break;
  181. case SrcAlphaSaturateFactor:
  182. blendFactor = GPUBlendFactor.SrcAlphaSaturated;
  183. break;
  184. case BlendColorFactor:
  185. blendFactor = GPUBlendFactor.BlendColor;
  186. break;
  187. case OneMinusBlendColorFactor:
  188. blendFactor = GPUBlendFactor.OneMinusBlendColor;
  189. break;
  190. default:
  191. console.error( 'THREE.WebGPURenderer: Blend factor not supported.', blend );
  192. }
  193. return blendFactor;
  194. }
  195. _getBlendOperation( blendEquation ) {
  196. let blendOperation;
  197. switch ( blendEquation ) {
  198. case AddEquation:
  199. blendOperation = GPUBlendOperation.Add;
  200. break;
  201. case SubtractEquation:
  202. blendOperation = GPUBlendOperation.Subtract;
  203. break;
  204. case ReverseSubtractEquation:
  205. blendOperation = GPUBlendOperation.ReverseSubtract;
  206. break;
  207. case MinEquation:
  208. blendOperation = GPUBlendOperation.Min;
  209. break;
  210. case MaxEquation:
  211. blendOperation = GPUBlendOperation.Max;
  212. break;
  213. default:
  214. console.error( 'THREE.WebGPURenderer: Blend equation not supported.', blendEquation );
  215. }
  216. return blendOperation;
  217. }
  218. _getColorBlend( material ) {
  219. const blending = material.blending;
  220. const premultipliedAlpha = material.premultipliedAlpha;
  221. const colorBlend = {
  222. srcFactor: null,
  223. dstFactor: null,
  224. operation: null
  225. };
  226. switch ( blending ) {
  227. case NormalBlending:
  228. colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
  229. colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;
  230. colorBlend.operation = GPUBlendOperation.Add;
  231. break;
  232. case AdditiveBlending:
  233. colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
  234. colorBlend.dstFactor = GPUBlendFactor.One;
  235. colorBlend.operation = GPUBlendOperation.Add;
  236. break;
  237. case SubtractiveBlending:
  238. colorBlend.srcFactor = GPUBlendFactor.Zero;
  239. colorBlend.dstFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor;
  240. colorBlend.operation = GPUBlendOperation.Add;
  241. break;
  242. case MultiplyBlending:
  243. colorBlend.srcFactor = GPUBlendFactor.Zero;
  244. colorBlend.dstFactor = GPUBlendFactor.SrcColor;
  245. colorBlend.operation = GPUBlendOperation.Add;
  246. break;
  247. case CustomBlending:
  248. colorBlend.srcFactor = this._getBlendFactor( material.blendSrc );
  249. colorBlend.dstFactor = this._getBlendFactor( material.blendDst );
  250. colorBlend.operation = this._getBlendOperation( material.blendEquation );
  251. break;
  252. default:
  253. console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
  254. }
  255. return colorBlend;
  256. }
  257. _getColorWriteMask( material ) {
  258. return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
  259. }
  260. _getDepthCompare( material ) {
  261. let depthCompare;
  262. if ( material.depthTest === false ) {
  263. depthCompare = GPUCompareFunction.Always;
  264. } else {
  265. const depthFunc = material.depthFunc;
  266. switch ( depthFunc ) {
  267. case NeverDepth:
  268. depthCompare = GPUCompareFunction.Never;
  269. break;
  270. case AlwaysDepth:
  271. depthCompare = GPUCompareFunction.Always;
  272. break;
  273. case LessDepth:
  274. depthCompare = GPUCompareFunction.Less;
  275. break;
  276. case LessEqualDepth:
  277. depthCompare = GPUCompareFunction.LessEqual;
  278. break;
  279. case EqualDepth:
  280. depthCompare = GPUCompareFunction.Equal;
  281. break;
  282. case GreaterEqualDepth:
  283. depthCompare = GPUCompareFunction.GreaterEqual;
  284. break;
  285. case GreaterDepth:
  286. depthCompare = GPUCompareFunction.Greater;
  287. break;
  288. case NotEqualDepth:
  289. depthCompare = GPUCompareFunction.NotEqual;
  290. break;
  291. default:
  292. console.error( 'THREE.WebGPURenderer: Invalid depth function.', depthFunc );
  293. }
  294. }
  295. return depthCompare;
  296. }
  297. _getPrimitiveState( object, material ) {
  298. const descriptor = {};
  299. descriptor.topology = this._getPrimitiveTopology( object );
  300. if ( object.isLine === true && object.isLineSegments !== true ) {
  301. const geometry = object.geometry;
  302. const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;
  303. descriptor.stripIndexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
  304. }
  305. switch ( material.side ) {
  306. case FrontSide:
  307. descriptor.frontFace = GPUFrontFace.CW;
  308. descriptor.cullMode = GPUCullMode.Front;
  309. break;
  310. case BackSide:
  311. descriptor.frontFace = GPUFrontFace.CW;
  312. descriptor.cullMode = GPUCullMode.Back;
  313. break;
  314. case DoubleSide:
  315. descriptor.frontFace = GPUFrontFace.CW;
  316. descriptor.cullMode = GPUCullMode.None;
  317. break;
  318. default:
  319. console.error( 'THREE.WebGPURenderer: Unknown Material.side value.', material.side );
  320. break;
  321. }
  322. return descriptor;
  323. }
  324. _getPrimitiveTopology( object ) {
  325. if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;
  326. else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;
  327. else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;
  328. else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;
  329. }
  330. _getStencilCompare( material ) {
  331. let stencilCompare;
  332. const stencilFunc = material.stencilFunc;
  333. switch ( stencilFunc ) {
  334. case NeverStencilFunc:
  335. stencilCompare = GPUCompareFunction.Never;
  336. break;
  337. case AlwaysStencilFunc:
  338. stencilCompare = GPUCompareFunction.Always;
  339. break;
  340. case LessStencilFunc:
  341. stencilCompare = GPUCompareFunction.Less;
  342. break;
  343. case LessEqualStencilFunc:
  344. stencilCompare = GPUCompareFunction.LessEqual;
  345. break;
  346. case EqualStencilFunc:
  347. stencilCompare = GPUCompareFunction.Equal;
  348. break;
  349. case GreaterEqualStencilFunc:
  350. stencilCompare = GPUCompareFunction.GreaterEqual;
  351. break;
  352. case GreaterStencilFunc:
  353. stencilCompare = GPUCompareFunction.Greater;
  354. break;
  355. case NotEqualStencilFunc:
  356. stencilCompare = GPUCompareFunction.NotEqual;
  357. break;
  358. default:
  359. console.error( 'THREE.WebGPURenderer: Invalid stencil function.', stencilFunc );
  360. }
  361. return stencilCompare;
  362. }
  363. _getStencilOperation( op ) {
  364. let stencilOperation;
  365. switch ( op ) {
  366. case KeepStencilOp:
  367. stencilOperation = GPUStencilOperation.Keep;
  368. break;
  369. case ZeroStencilOp:
  370. stencilOperation = GPUStencilOperation.Zero;
  371. break;
  372. case ReplaceStencilOp:
  373. stencilOperation = GPUStencilOperation.Replace;
  374. break;
  375. case InvertStencilOp:
  376. stencilOperation = GPUStencilOperation.Invert;
  377. break;
  378. case IncrementStencilOp:
  379. stencilOperation = GPUStencilOperation.IncrementClamp;
  380. break;
  381. case DecrementStencilOp:
  382. stencilOperation = GPUStencilOperation.DecrementClamp;
  383. break;
  384. case IncrementWrapStencilOp:
  385. stencilOperation = GPUStencilOperation.IncrementWrap;
  386. break;
  387. case DecrementWrapStencilOp:
  388. stencilOperation = GPUStencilOperation.DecrementWrap;
  389. break;
  390. default:
  391. console.error( 'THREE.WebGPURenderer: Invalid stencil operation.', stencilOperation );
  392. }
  393. return stencilOperation;
  394. }
  395. _getVertexFormat( type, bytesPerElement ) {
  396. // float
  397. if ( type === 'float' ) return GPUVertexFormat.Float32;
  398. if ( type === 'vec2' ) {
  399. if ( bytesPerElement === 2 ) {
  400. return GPUVertexFormat.Float16x2;
  401. } else {
  402. return GPUVertexFormat.Float32x2;
  403. }
  404. }
  405. if ( type === 'vec3' ) return GPUVertexFormat.Float32x3;
  406. if ( type === 'vec4' ) {
  407. if ( bytesPerElement === 2 ) {
  408. return GPUVertexFormat.Float16x4;
  409. } else {
  410. return GPUVertexFormat.Float32x4;
  411. }
  412. }
  413. // int
  414. if ( type === 'int' ) return GPUVertexFormat.Sint32;
  415. if ( type === 'ivec2' ) {
  416. if ( bytesPerElement === 1 ) {
  417. return GPUVertexFormat.Sint8x2;
  418. } else if ( bytesPerElement === 2 ) {
  419. return GPUVertexFormat.Sint16x2;
  420. } else {
  421. return GPUVertexFormat.Sint32x2;
  422. }
  423. }
  424. if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;
  425. if ( type === 'ivec4' ) {
  426. if ( bytesPerElement === 1 ) {
  427. return GPUVertexFormat.Sint8x4;
  428. } else if ( bytesPerElement === 2 ) {
  429. return GPUVertexFormat.Sint16x4;
  430. } else {
  431. return GPUVertexFormat.Sint32x4;
  432. }
  433. }
  434. // uint
  435. if ( type === 'uint' ) return GPUVertexFormat.Uint32;
  436. if ( type === 'uvec2' ) {
  437. if ( bytesPerElement === 1 ) {
  438. return GPUVertexFormat.Uint8x2;
  439. } else if ( bytesPerElement === 2 ) {
  440. return GPUVertexFormat.Uint16x2;
  441. } else {
  442. return GPUVertexFormat.Uint32x2;
  443. }
  444. }
  445. if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;
  446. if ( type === 'uvec4' ) {
  447. if ( bytesPerElement === 1 ) {
  448. return GPUVertexFormat.Uint8x4;
  449. } else if ( bytesPerElement === 2 ) {
  450. return GPUVertexFormat.Uint16x4;
  451. } else {
  452. return GPUVertexFormat.Uint32x4;
  453. }
  454. }
  455. console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
  456. }
  457. _getShaderAttributes( nodeBuilder, geometry ) {
  458. const nodeAttributes = nodeBuilder.attributes;
  459. const attributes = [];
  460. for ( let slot = 0; slot < nodeAttributes.length; slot ++ ) {
  461. const nodeAttribute = nodeAttributes[ slot ];
  462. const name = nodeAttribute.name;
  463. const type = nodeAttribute.type;
  464. const geometryAttribute = geometry.getAttribute( name );
  465. const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
  466. const format = this._getVertexFormat( type, bytesPerElement );
  467. let arrayStride = geometryAttribute.itemSize * bytesPerElement;
  468. let offset = 0;
  469. if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
  470. // @TODO: It can be optimized for "vertexBuffers" on RenderPipeline
  471. arrayStride = geometryAttribute.data.stride * bytesPerElement;
  472. offset = geometryAttribute.offset * bytesPerElement;
  473. }
  474. attributes.push( {
  475. name,
  476. arrayStride,
  477. offset,
  478. format,
  479. slot
  480. } );
  481. }
  482. return attributes;
  483. }
  484. }
  485. export default WebGPURenderPipeline;