WebGPURenderPipeline.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737
  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: 0, 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. } );
  90. }
  91. _getArrayStride( type, bytesPerElement ) {
  92. // @TODO: This code is GLSL specific. We need to update when we switch to WGSL.
  93. if ( type === 'float' || type === 'int' || type === 'uint' ) return bytesPerElement;
  94. if ( type === 'vec2' || type === 'ivec2' || type === 'uvec2' ) return bytesPerElement * 2;
  95. if ( type === 'vec3' || type === 'ivec3' || type === 'uvec3' ) return bytesPerElement * 3;
  96. if ( type === 'vec4' || type === 'ivec4' || type === 'uvec4' ) return bytesPerElement * 4;
  97. console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
  98. }
  99. _getAlphaBlend( material ) {
  100. const blending = material.blending;
  101. const premultipliedAlpha = material.premultipliedAlpha;
  102. let alphaBlend = undefined;
  103. switch ( blending ) {
  104. case NormalBlending:
  105. if ( premultipliedAlpha === false ) {
  106. alphaBlend = {
  107. srcFactor: GPUBlendFactor.One,
  108. dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
  109. operation: GPUBlendOperation.Add
  110. };
  111. }
  112. break;
  113. case AdditiveBlending:
  114. // no alphaBlend settings
  115. break;
  116. case SubtractiveBlending:
  117. if ( premultipliedAlpha === true ) {
  118. alphaBlend = {
  119. srcFactor: GPUBlendFactor.OneMinusSrcColor,
  120. dstFactor: GPUBlendFactor.OneMinusSrcAlpha,
  121. operation: GPUBlendOperation.Add
  122. };
  123. }
  124. break;
  125. case MultiplyBlending:
  126. if ( premultipliedAlpha === true ) {
  127. alphaBlend = {
  128. srcFactor: GPUBlendFactor.Zero,
  129. dstFactor: GPUBlendFactor.SrcAlpha,
  130. operation: GPUBlendOperation.Add
  131. };
  132. }
  133. break;
  134. case CustomBlending:
  135. const blendSrcAlpha = material.blendSrcAlpha;
  136. const blendDstAlpha = material.blendDstAlpha;
  137. const blendEquationAlpha = material.blendEquationAlpha;
  138. if ( blendSrcAlpha !== null && blendDstAlpha !== null && blendEquationAlpha !== null ) {
  139. alphaBlend = {
  140. srcFactor: this._getBlendFactor( blendSrcAlpha ),
  141. dstFactor: this._getBlendFactor( blendDstAlpha ),
  142. operation: this._getBlendOperation( blendEquationAlpha )
  143. };
  144. }
  145. break;
  146. default:
  147. console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
  148. }
  149. return alphaBlend;
  150. }
  151. _getBlendFactor( blend ) {
  152. let blendFactor;
  153. switch ( blend ) {
  154. case ZeroFactor:
  155. blendFactor = GPUBlendFactor.Zero;
  156. break;
  157. case OneFactor:
  158. blendFactor = GPUBlendFactor.One;
  159. break;
  160. case SrcColorFactor:
  161. blendFactor = GPUBlendFactor.SrcColor;
  162. break;
  163. case OneMinusSrcColorFactor:
  164. blendFactor = GPUBlendFactor.OneMinusSrcColor;
  165. break;
  166. case SrcAlphaFactor:
  167. blendFactor = GPUBlendFactor.SrcAlpha;
  168. break;
  169. case OneMinusSrcAlphaFactor:
  170. blendFactor = GPUBlendFactor.OneMinusSrcAlpha;
  171. break;
  172. case DstColorFactor:
  173. blendFactor = GPUBlendFactor.DstColor;
  174. break;
  175. case OneMinusDstColorFactor:
  176. blendFactor = GPUBlendFactor.OneMinusDstColor;
  177. break;
  178. case DstAlphaFactor:
  179. blendFactor = GPUBlendFactor.DstAlpha;
  180. break;
  181. case OneMinusDstAlphaFactor:
  182. blendFactor = GPUBlendFactor.OneMinusDstAlpha;
  183. break;
  184. case SrcAlphaSaturateFactor:
  185. blendFactor = GPUBlendFactor.SrcAlphaSaturated;
  186. break;
  187. case BlendColorFactor:
  188. blendFactor = GPUBlendFactor.BlendColor;
  189. break;
  190. case OneMinusBlendColorFactor:
  191. blendFactor = GPUBlendFactor.OneMinusBlendColor;
  192. break;
  193. default:
  194. console.error( 'THREE.WebGPURenderer: Blend factor not supported.', blend );
  195. }
  196. return blendFactor;
  197. }
  198. _getBlendOperation( blendEquation ) {
  199. let blendOperation;
  200. switch ( blendEquation ) {
  201. case AddEquation:
  202. blendOperation = GPUBlendOperation.Add;
  203. break;
  204. case SubtractEquation:
  205. blendOperation = GPUBlendOperation.Subtract;
  206. break;
  207. case ReverseSubtractEquation:
  208. blendOperation = GPUBlendOperation.ReverseSubtract;
  209. break;
  210. case MinEquation:
  211. blendOperation = GPUBlendOperation.Min;
  212. break;
  213. case MaxEquation:
  214. blendOperation = GPUBlendOperation.Max;
  215. break;
  216. default:
  217. console.error( 'THREE.WebGPURenderer: Blend equation not supported.', blendEquation );
  218. }
  219. return blendOperation;
  220. }
  221. _getColorBlend( material ) {
  222. const blending = material.blending;
  223. const premultipliedAlpha = material.premultipliedAlpha;
  224. const colorBlend = {
  225. srcFactor: null,
  226. dstFactor: null,
  227. operation: null
  228. };
  229. switch ( blending ) {
  230. case NormalBlending:
  231. colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
  232. colorBlend.dstFactor = GPUBlendFactor.OneMinusSrcAlpha;
  233. colorBlend.operation = GPUBlendOperation.Add;
  234. break;
  235. case AdditiveBlending:
  236. colorBlend.srcFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.One : GPUBlendFactor.SrcAlpha;
  237. colorBlend.operation = GPUBlendOperation.Add;
  238. break;
  239. case SubtractiveBlending:
  240. colorBlend.srcFactor = GPUBlendFactor.Zero;
  241. colorBlend.dstFactor = ( premultipliedAlpha === true ) ? GPUBlendFactor.Zero : GPUBlendFactor.OneMinusSrcColor;
  242. colorBlend.operation = GPUBlendOperation.Add;
  243. break;
  244. case MultiplyBlending:
  245. colorBlend.srcFactor = GPUBlendFactor.Zero;
  246. colorBlend.dstFactor = GPUBlendFactor.SrcColor;
  247. colorBlend.operation = GPUBlendOperation.Add;
  248. break;
  249. case CustomBlending:
  250. colorBlend.srcFactor = this._getBlendFactor( material.blendSrc );
  251. colorBlend.dstFactor = this._getBlendFactor( material.blendDst );
  252. colorBlend.operation = this._getBlendOperation( material.blendEquation );
  253. break;
  254. default:
  255. console.error( 'THREE.WebGPURenderer: Blending not supported.', blending );
  256. }
  257. return colorBlend;
  258. }
  259. _getColorWriteMask( material ) {
  260. return ( material.colorWrite === true ) ? GPUColorWriteFlags.All : GPUColorWriteFlags.None;
  261. }
  262. _getDepthCompare( material ) {
  263. let depthCompare;
  264. if ( material.depthTest === false ) {
  265. depthCompare = GPUCompareFunction.Always;
  266. } else {
  267. const depthFunc = material.depthFunc;
  268. switch ( depthFunc ) {
  269. case NeverDepth:
  270. depthCompare = GPUCompareFunction.Never;
  271. break;
  272. case AlwaysDepth:
  273. depthCompare = GPUCompareFunction.Always;
  274. break;
  275. case LessDepth:
  276. depthCompare = GPUCompareFunction.Less;
  277. break;
  278. case LessEqualDepth:
  279. depthCompare = GPUCompareFunction.LessEqual;
  280. break;
  281. case EqualDepth:
  282. depthCompare = GPUCompareFunction.Equal;
  283. break;
  284. case GreaterEqualDepth:
  285. depthCompare = GPUCompareFunction.GreaterEqual;
  286. break;
  287. case GreaterDepth:
  288. depthCompare = GPUCompareFunction.Greater;
  289. break;
  290. case NotEqualDepth:
  291. depthCompare = GPUCompareFunction.NotEqual;
  292. break;
  293. default:
  294. console.error( 'THREE.WebGPURenderer: Invalid depth function.', depthFunc );
  295. }
  296. }
  297. return depthCompare;
  298. }
  299. _getPrimitiveState( object, material ) {
  300. const descriptor = {};
  301. descriptor.topology = this._getPrimitiveTopology( object );
  302. if ( object.isLine === true && object.isLineSegments !== true ) {
  303. const geometry = object.geometry;
  304. const count = ( geometry.index ) ? geometry.index.count : geometry.attributes.position.count;
  305. descriptor.stripIndexFormat = ( count > 65535 ) ? GPUIndexFormat.Uint32 : GPUIndexFormat.Uint16; // define data type for primitive restart value
  306. }
  307. switch ( material.side ) {
  308. case FrontSide:
  309. descriptor.frontFace = GPUFrontFace.CCW;
  310. descriptor.cullMode = GPUCullMode.Back;
  311. break;
  312. case BackSide:
  313. descriptor.frontFace = GPUFrontFace.CW;
  314. descriptor.cullMode = GPUCullMode.Back;
  315. break;
  316. case DoubleSide:
  317. descriptor.frontFace = GPUFrontFace.CCW;
  318. descriptor.cullMode = GPUCullMode.None;
  319. break;
  320. default:
  321. console.error( 'THREE.WebGPURenderer: Unknown Material.side value.', material.side );
  322. break;
  323. }
  324. return descriptor;
  325. }
  326. _getPrimitiveTopology( object ) {
  327. if ( object.isMesh ) return GPUPrimitiveTopology.TriangleList;
  328. else if ( object.isPoints ) return GPUPrimitiveTopology.PointList;
  329. else if ( object.isLineSegments ) return GPUPrimitiveTopology.LineList;
  330. else if ( object.isLine ) return GPUPrimitiveTopology.LineStrip;
  331. }
  332. _getStencilCompare( material ) {
  333. let stencilCompare;
  334. const stencilFunc = material.stencilFunc;
  335. switch ( stencilFunc ) {
  336. case NeverStencilFunc:
  337. stencilCompare = GPUCompareFunction.Never;
  338. break;
  339. case AlwaysStencilFunc:
  340. stencilCompare = GPUCompareFunction.Always;
  341. break;
  342. case LessStencilFunc:
  343. stencilCompare = GPUCompareFunction.Less;
  344. break;
  345. case LessEqualStencilFunc:
  346. stencilCompare = GPUCompareFunction.LessEqual;
  347. break;
  348. case EqualStencilFunc:
  349. stencilCompare = GPUCompareFunction.Equal;
  350. break;
  351. case GreaterEqualStencilFunc:
  352. stencilCompare = GPUCompareFunction.GreaterEqual;
  353. break;
  354. case GreaterStencilFunc:
  355. stencilCompare = GPUCompareFunction.Greater;
  356. break;
  357. case NotEqualStencilFunc:
  358. stencilCompare = GPUCompareFunction.NotEqual;
  359. break;
  360. default:
  361. console.error( 'THREE.WebGPURenderer: Invalid stencil function.', stencilFunc );
  362. }
  363. return stencilCompare;
  364. }
  365. _getStencilOperation( op ) {
  366. let stencilOperation;
  367. switch ( op ) {
  368. case KeepStencilOp:
  369. stencilOperation = GPUStencilOperation.Keep;
  370. break;
  371. case ZeroStencilOp:
  372. stencilOperation = GPUStencilOperation.Zero;
  373. break;
  374. case ReplaceStencilOp:
  375. stencilOperation = GPUStencilOperation.Replace;
  376. break;
  377. case InvertStencilOp:
  378. stencilOperation = GPUStencilOperation.Invert;
  379. break;
  380. case IncrementStencilOp:
  381. stencilOperation = GPUStencilOperation.IncrementClamp;
  382. break;
  383. case DecrementStencilOp:
  384. stencilOperation = GPUStencilOperation.DecrementClamp;
  385. break;
  386. case IncrementWrapStencilOp:
  387. stencilOperation = GPUStencilOperation.IncrementWrap;
  388. break;
  389. case DecrementWrapStencilOp:
  390. stencilOperation = GPUStencilOperation.DecrementWrap;
  391. break;
  392. default:
  393. console.error( 'THREE.WebGPURenderer: Invalid stencil operation.', stencilOperation );
  394. }
  395. return stencilOperation;
  396. }
  397. _getVertexFormat( type, bytesPerElement ) {
  398. // float
  399. if ( type === 'float' ) return GPUVertexFormat.Float32;
  400. if ( type === 'vec2' ) {
  401. if ( bytesPerElement === 2 ) {
  402. return GPUVertexFormat.Float16x2;
  403. } else {
  404. return GPUVertexFormat.Float32x2;
  405. }
  406. }
  407. if ( type === 'vec3' ) return GPUVertexFormat.Float32x3;
  408. if ( type === 'vec4' ) {
  409. if ( bytesPerElement === 2 ) {
  410. return GPUVertexFormat.Float16x4;
  411. } else {
  412. return GPUVertexFormat.Float32x4;
  413. }
  414. }
  415. // int
  416. if ( type === 'int' ) return GPUVertexFormat.Sint32;
  417. if ( type === 'ivec2' ) {
  418. if ( bytesPerElement === 1 ) {
  419. return GPUVertexFormat.Sint8x2;
  420. } else if ( bytesPerElement === 2 ) {
  421. return GPUVertexFormat.Sint16x2;
  422. } else {
  423. return GPUVertexFormat.Sint32x2;
  424. }
  425. }
  426. if ( type === 'ivec3' ) return GPUVertexFormat.Sint32x3;
  427. if ( type === 'ivec4' ) {
  428. if ( bytesPerElement === 1 ) {
  429. return GPUVertexFormat.Sint8x4;
  430. } else if ( bytesPerElement === 2 ) {
  431. return GPUVertexFormat.Sint16x4;
  432. } else {
  433. return GPUVertexFormat.Sint32x4;
  434. }
  435. }
  436. // uint
  437. if ( type === 'uint' ) return GPUVertexFormat.Uint32;
  438. if ( type === 'uvec2' ) {
  439. if ( bytesPerElement === 1 ) {
  440. return GPUVertexFormat.Uint8x2;
  441. } else if ( bytesPerElement === 2 ) {
  442. return GPUVertexFormat.Uint16x2;
  443. } else {
  444. return GPUVertexFormat.Uint32x2;
  445. }
  446. }
  447. if ( type === 'uvec3' ) return GPUVertexFormat.Uint32x3;
  448. if ( type === 'uvec4' ) {
  449. if ( bytesPerElement === 1 ) {
  450. return GPUVertexFormat.Uint8x4;
  451. } else if ( bytesPerElement === 2 ) {
  452. return GPUVertexFormat.Uint16x4;
  453. } else {
  454. return GPUVertexFormat.Uint32x4;
  455. }
  456. }
  457. console.error( 'THREE.WebGPURenderer: Shader variable type not supported yet.', type );
  458. }
  459. _getShaderAttributes( nodeBuilder, geometry ) {
  460. const nodeAttributes = nodeBuilder.attributes;
  461. const attributes = [];
  462. for ( let slot = 0; slot < nodeAttributes.length; slot++ ) {
  463. const nodeAttribute = nodeAttributes[ slot ];
  464. const name = nodeAttribute.name;
  465. const type = nodeAttribute.type;
  466. const geometryAttribute = geometry.getAttribute( name );
  467. const bytesPerElement = ( geometryAttribute !== undefined ) ? geometryAttribute.array.BYTES_PER_ELEMENT : 4;
  468. const arrayStride = this._getArrayStride( type, bytesPerElement );
  469. const format = this._getVertexFormat( type, bytesPerElement );
  470. attributes.push( {
  471. name,
  472. arrayStride,
  473. format,
  474. slot
  475. } );
  476. }
  477. return attributes;
  478. }
  479. }
  480. export default WebGPURenderPipeline;