WebGPURenderPipeline.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735
  1. import { 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, utils ) {
  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._utils = utils;
  20. }
  21. init( cacheKey, stageVertex, stageFragment, object, nodeBuilder ) {
  22. const material = object.material;
  23. const geometry = object.geometry;
  24. // determine shader attributes
  25. const shaderAttributes = this._getShaderAttributes( nodeBuilder, geometry );
  26. // vertex buffers
  27. const vertexBuffers = [];
  28. for ( const attribute of shaderAttributes ) {
  29. const name = attribute.name;
  30. const geometryAttribute = geometry.getAttribute( name );
  31. const stepMode = ( geometryAttribute !== undefined && geometryAttribute.isInstancedBufferAttribute ) ? GPUInputStepMode.Instance : GPUInputStepMode.Vertex;
  32. vertexBuffers.push( {
  33. arrayStride: attribute.arrayStride,
  34. attributes: [ { shaderLocation: attribute.slot, offset: attribute.offset, format: attribute.format } ],
  35. stepMode: stepMode
  36. } );
  37. }
  38. this.cacheKey = cacheKey;
  39. this.shaderAttributes = shaderAttributes;
  40. this.stageVertex = stageVertex;
  41. this.stageFragment = stageFragment;
  42. // blending
  43. let alphaBlend = {};
  44. let colorBlend = {};
  45. if ( material.transparent === true && material.blending !== NoBlending ) {
  46. alphaBlend = this._getAlphaBlend( material );
  47. colorBlend = this._getColorBlend( material );
  48. }
  49. // stencil
  50. let stencilFront = {};
  51. if ( material.stencilWrite === true ) {
  52. stencilFront = {
  53. compare: this._getStencilCompare( material ),
  54. failOp: this._getStencilOperation( material.stencilFail ),
  55. depthFailOp: this._getStencilOperation( material.stencilZFail ),
  56. passOp: this._getStencilOperation( material.stencilZPass )
  57. };
  58. }
  59. //
  60. const primitiveState = this._getPrimitiveState( object, material );
  61. const colorWriteMask = this._getColorWriteMask( material );
  62. const depthCompare = this._getDepthCompare( material );
  63. const colorFormat = this._utils.getCurrentColorFormat();
  64. const depthStencilFormat = this._utils.getCurrentDepthStencilFormat();
  65. const sampleCount = this._utils.getSampleCount();
  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: 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._utils.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. _getStencilCompare( material ) {
  325. let stencilCompare;
  326. const stencilFunc = material.stencilFunc;
  327. switch ( stencilFunc ) {
  328. case NeverStencilFunc:
  329. stencilCompare = GPUCompareFunction.Never;
  330. break;
  331. case AlwaysStencilFunc:
  332. stencilCompare = GPUCompareFunction.Always;
  333. break;
  334. case LessStencilFunc:
  335. stencilCompare = GPUCompareFunction.Less;
  336. break;
  337. case LessEqualStencilFunc:
  338. stencilCompare = GPUCompareFunction.LessEqual;
  339. break;
  340. case EqualStencilFunc:
  341. stencilCompare = GPUCompareFunction.Equal;
  342. break;
  343. case GreaterEqualStencilFunc:
  344. stencilCompare = GPUCompareFunction.GreaterEqual;
  345. break;
  346. case GreaterStencilFunc:
  347. stencilCompare = GPUCompareFunction.Greater;
  348. break;
  349. case NotEqualStencilFunc:
  350. stencilCompare = GPUCompareFunction.NotEqual;
  351. break;
  352. default:
  353. console.error( 'THREE.WebGPURenderer: Invalid stencil function.', stencilFunc );
  354. }
  355. return stencilCompare;
  356. }
  357. _getStencilOperation( op ) {
  358. let stencilOperation;
  359. switch ( op ) {
  360. case KeepStencilOp:
  361. stencilOperation = GPUStencilOperation.Keep;
  362. break;
  363. case ZeroStencilOp:
  364. stencilOperation = GPUStencilOperation.Zero;
  365. break;
  366. case ReplaceStencilOp:
  367. stencilOperation = GPUStencilOperation.Replace;
  368. break;
  369. case InvertStencilOp:
  370. stencilOperation = GPUStencilOperation.Invert;
  371. break;
  372. case IncrementStencilOp:
  373. stencilOperation = GPUStencilOperation.IncrementClamp;
  374. break;
  375. case DecrementStencilOp:
  376. stencilOperation = GPUStencilOperation.DecrementClamp;
  377. break;
  378. case IncrementWrapStencilOp:
  379. stencilOperation = GPUStencilOperation.IncrementWrap;
  380. break;
  381. case DecrementWrapStencilOp:
  382. stencilOperation = GPUStencilOperation.DecrementWrap;
  383. break;
  384. default:
  385. console.error( 'THREE.WebGPURenderer: Invalid stencil operation.', stencilOperation );
  386. }
  387. return stencilOperation;
  388. }
  389. _getVertexFormat( type, bytesPerElement ) {
  390. // float
  391. if ( type === 'float' ) return GPUVertexFormat.Float32;
  392. if ( type === 'vec2' ) {
  393. if ( bytesPerElement === 2 ) {
  394. return GPUVertexFormat.Float16x2;
  395. } else {
  396. return GPUVertexFormat.Float32x2;
  397. }
  398. }
  399. if ( type === 'vec3' ) return GPUVertexFormat.Float32x3;
  400. if ( type === 'vec4' ) {
  401. if ( bytesPerElement === 2 ) {
  402. return GPUVertexFormat.Float16x4;
  403. } else {
  404. return GPUVertexFormat.Float32x4;
  405. }
  406. }
  407. // int
  408. if ( type === 'int' ) return GPUVertexFormat.Sint32;
  409. if ( type === 'ivec2' ) {
  410. if ( bytesPerElement === 1 ) {
  411. return GPUVertexFormat.Sint8x2;
  412. } else if ( bytesPerElement === 2 ) {
  413. return GPUVertexFormat.Sint16x2;
  414. } else {
  415. return GPUVertexFormat.Sint32x2;
  416. }
  417. }
  418. if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;
  419. if ( type === 'ivec4' ) {
  420. if ( bytesPerElement === 1 ) {
  421. return GPUVertexFormat.Sint8x4;
  422. } else if ( bytesPerElement === 2 ) {
  423. return GPUVertexFormat.Sint16x4;
  424. } else {
  425. return GPUVertexFormat.Sint32x4;
  426. }
  427. }
  428. // uint
  429. if ( type === 'uint' ) return GPUVertexFormat.Uint32;
  430. if ( type === 'uvec2' ) {
  431. if ( bytesPerElement === 1 ) {
  432. return GPUVertexFormat.Uint8x2;
  433. } else if ( bytesPerElement === 2 ) {
  434. return GPUVertexFormat.Uint16x2;
  435. } else {
  436. return GPUVertexFormat.Uint32x2;
  437. }
  438. }
  439. if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;
  440. if ( type === 'uvec4' ) {
  441. if ( bytesPerElement === 1 ) {
  442. return GPUVertexFormat.Uint8x4;
  443. } else if ( bytesPerElement === 2 ) {
  444. return GPUVertexFormat.Uint16x4;
  445. } else {
  446. return GPUVertexFormat.Uint32x4;
  447. }
  448. }
  449. console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
  450. }
  451. _getShaderAttributes( nodeBuilder, geometry ) {
  452. const nodeAttributes = nodeBuilder.attributes;
  453. const attributes = [];
  454. for ( let slot = 0; slot < nodeAttributes.length; slot ++ ) {
  455. const nodeAttribute = nodeAttributes[ slot ];
  456. const name = nodeAttribute.name;
  457. const type = nodeAttribute.type;
  458. const geometryAttribute = geometry.getAttribute( name );
  459. const bytesPerElement = geometryAttribute.array.BYTES_PER_ELEMENT;
  460. const format = this._getVertexFormat( type, bytesPerElement );
  461. let arrayStride = geometryAttribute.itemSize * bytesPerElement;
  462. let offset = 0;
  463. if ( geometryAttribute.isInterleavedBufferAttribute === true ) {
  464. // @TODO: It can be optimized for "vertexBuffers" on RenderPipeline
  465. arrayStride = geometryAttribute.data.stride * bytesPerElement;
  466. offset = geometryAttribute.offset * bytesPerElement;
  467. }
  468. attributes.push( {
  469. name,
  470. arrayStride,
  471. offset,
  472. format,
  473. slot
  474. } );
  475. }
  476. return attributes;
  477. }
  478. }
  479. export default WebGPURenderPipeline;