WebGLTextureUtils.js 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751
  1. import { LinearFilter, LinearMipmapLinearFilter, LinearMipmapNearestFilter, NearestFilter, NearestMipmapLinearFilter, NearestMipmapNearestFilter, FloatType, MirroredRepeatWrapping, ClampToEdgeWrapping, RepeatWrapping, SRGBColorSpace, NeverCompare, AlwaysCompare, LessCompare, LessEqualCompare, EqualCompare, GreaterEqualCompare, GreaterCompare, NotEqualCompare } from 'three';
  2. let initialized = false, wrappingToGL, filterToGL, compareToGL;
  3. class WebGLTextureUtils {
  4. constructor( backend ) {
  5. this.backend = backend;
  6. this.gl = backend.gl;
  7. this.extensions = backend.extensions;
  8. this.defaultTextures = {};
  9. if ( initialized === false ) {
  10. this._init( this.gl );
  11. initialized = true;
  12. }
  13. }
  14. _init( gl ) {
  15. // Store only WebGL constants here.
  16. wrappingToGL = {
  17. [ RepeatWrapping ]: gl.REPEAT,
  18. [ ClampToEdgeWrapping ]: gl.CLAMP_TO_EDGE,
  19. [ MirroredRepeatWrapping ]: gl.MIRRORED_REPEAT
  20. };
  21. filterToGL = {
  22. [ NearestFilter ]: gl.NEAREST,
  23. [ NearestMipmapNearestFilter ]: gl.NEAREST_MIPMAP_NEAREST,
  24. [ NearestMipmapLinearFilter ]: gl.NEAREST_MIPMAP_LINEAR,
  25. [ LinearFilter ]: gl.LINEAR,
  26. [ LinearMipmapNearestFilter ]: gl.LINEAR_MIPMAP_NEAREST,
  27. [ LinearMipmapLinearFilter ]: gl.LINEAR_MIPMAP_LINEAR
  28. };
  29. compareToGL = {
  30. [ NeverCompare ]: gl.NEVER,
  31. [ AlwaysCompare ]: gl.ALWAYS,
  32. [ LessCompare ]: gl.LESS,
  33. [ LessEqualCompare ]: gl.LEQUAL,
  34. [ EqualCompare ]: gl.EQUAL,
  35. [ GreaterEqualCompare ]: gl.GEQUAL,
  36. [ GreaterCompare ]: gl.GREATER,
  37. [ NotEqualCompare ]: gl.NOTEQUAL
  38. };
  39. }
  40. filterFallback( f ) {
  41. const { gl } = this;
  42. if ( f === NearestFilter || f === NearestMipmapNearestFilter || f === NearestMipmapLinearFilter ) {
  43. return gl.NEAREST;
  44. }
  45. return gl.LINEAR;
  46. }
  47. getGLTextureType( texture ) {
  48. const { gl } = this;
  49. let glTextureType;
  50. if ( texture.isCubeTexture === true ) {
  51. glTextureType = gl.TEXTURE_CUBE_MAP;
  52. } else if ( texture.isDataArrayTexture === true ) {
  53. glTextureType = gl.TEXTURE_2D_ARRAY;
  54. } else {
  55. glTextureType = gl.TEXTURE_2D;
  56. }
  57. return glTextureType;
  58. }
  59. getInternalFormat( internalFormatName, glFormat, glType, colorSpace, forceLinearTransfer = false ) {
  60. const { gl, extensions } = this;
  61. if ( internalFormatName !== null ) {
  62. if ( gl[ internalFormatName ] !== undefined ) return gl[ internalFormatName ];
  63. console.warn( 'THREE.WebGLRenderer: Attempt to use non-existing WebGL internal format \'' + internalFormatName + '\'' );
  64. }
  65. let internalFormat = glFormat;
  66. if ( glFormat === gl.RED ) {
  67. if ( glType === gl.FLOAT ) internalFormat = gl.R32F;
  68. if ( glType === gl.HALF_FLOAT ) internalFormat = gl.R16F;
  69. if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.R8;
  70. }
  71. if ( glFormat === gl.RED_INTEGER ) {
  72. if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.R8UI;
  73. if ( glType === gl.UNSIGNED_SHORT ) internalFormat = gl.R16UI;
  74. if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.R32UI;
  75. if ( glType === gl.BYTE ) internalFormat = gl.R8I;
  76. if ( glType === gl.SHORT ) internalFormat = gl.R16I;
  77. if ( glType === gl.INT ) internalFormat = gl.R32I;
  78. }
  79. if ( glFormat === gl.RG ) {
  80. if ( glType === gl.FLOAT ) internalFormat = gl.RG32F;
  81. if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RG16F;
  82. if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.RG8;
  83. }
  84. if ( glFormat === gl.RGB ) {
  85. if ( glType === gl.FLOAT ) internalFormat = gl.RGB32F;
  86. if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RGB16F;
  87. if ( glType === gl.UNSIGNED_BYTE ) internalFormat = gl.RGB8;
  88. if ( glType === gl.UNSIGNED_SHORT_5_6_5 ) internalFormat = gl.RGB565;
  89. if ( glType === gl.UNSIGNED_SHORT_5_5_5_1 ) internalFormat = gl.RGB5_A1;
  90. if ( glType === gl.UNSIGNED_SHORT_4_4_4_4 ) internalFormat = gl.RGB4;
  91. if ( glType === gl.UNSIGNED_INT_5_9_9_9_REV ) internalFormat = gl.RGB9_E5;
  92. }
  93. if ( glFormat === gl.RGBA ) {
  94. if ( glType === gl.FLOAT ) internalFormat = gl.RGBA32F;
  95. if ( glType === gl.HALF_FLOAT ) internalFormat = gl.RGBA16F;
  96. if ( glType === gl.UNSIGNED_BYTE ) internalFormat = ( colorSpace === SRGBColorSpace && forceLinearTransfer === false ) ? gl.SRGB8_ALPHA8 : gl.RGBA8;
  97. if ( glType === gl.UNSIGNED_SHORT_4_4_4_4 ) internalFormat = gl.RGBA4;
  98. if ( glType === gl.UNSIGNED_SHORT_5_5_5_1 ) internalFormat = gl.RGB5_A1;
  99. }
  100. if ( glFormat === gl.DEPTH_COMPONENT ) {
  101. if ( glType === gl.UNSIGNED_INT ) internalFormat = gl.DEPTH24_STENCIL8;
  102. if ( glType === gl.FLOAT ) internalFormat = gl.DEPTH_COMPONENT32F;
  103. }
  104. if ( glFormat === gl.DEPTH_STENCIL ) {
  105. if ( glType === gl.UNSIGNED_INT_24_8 ) internalFormat = gl.DEPTH24_STENCIL8;
  106. }
  107. if ( internalFormat === gl.R16F || internalFormat === gl.R32F ||
  108. internalFormat === gl.RG16F || internalFormat === gl.RG32F ||
  109. internalFormat === gl.RGBA16F || internalFormat === gl.RGBA32F ) {
  110. extensions.get( 'EXT_color_buffer_float' );
  111. }
  112. return internalFormat;
  113. }
  114. setTextureParameters( textureType, texture ) {
  115. const { gl, extensions, backend } = this;
  116. const { currentAnisotropy } = backend.get( texture );
  117. gl.texParameteri( textureType, gl.TEXTURE_WRAP_S, wrappingToGL[ texture.wrapS ] );
  118. gl.texParameteri( textureType, gl.TEXTURE_WRAP_T, wrappingToGL[ texture.wrapT ] );
  119. if ( textureType === gl.TEXTURE_3D || textureType === gl.TEXTURE_2D_ARRAY ) {
  120. gl.texParameteri( textureType, gl.TEXTURE_WRAP_R, wrappingToGL[ texture.wrapR ] );
  121. }
  122. gl.texParameteri( textureType, gl.TEXTURE_MAG_FILTER, filterToGL[ texture.magFilter ] );
  123. // follow WebGPU backend mapping for texture filtering
  124. const minFilter = ! texture.isVideoTexture && texture.minFilter === LinearFilter ? LinearMipmapLinearFilter : texture.minFilter;
  125. gl.texParameteri( textureType, gl.TEXTURE_MIN_FILTER, filterToGL[ minFilter ] );
  126. if ( texture.compareFunction ) {
  127. gl.texParameteri( textureType, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE );
  128. gl.texParameteri( textureType, gl.TEXTURE_COMPARE_FUNC, compareToGL[ texture.compareFunction ] );
  129. }
  130. if ( extensions.has( 'EXT_texture_filter_anisotropic' ) === true ) {
  131. if ( texture.magFilter === NearestFilter ) return;
  132. if ( texture.minFilter !== NearestMipmapLinearFilter && texture.minFilter !== LinearMipmapLinearFilter ) return;
  133. if ( texture.type === FloatType && extensions.has( 'OES_texture_float_linear' ) === false ) return; // verify extension for WebGL 1 and WebGL 2
  134. if ( texture.anisotropy > 1 || currentAnisotropy !== texture.anisotropy ) {
  135. const extension = extensions.get( 'EXT_texture_filter_anisotropic' );
  136. gl.texParameterf( textureType, extension.TEXTURE_MAX_ANISOTROPY_EXT, Math.min( texture.anisotropy, backend.getMaxAnisotropy() ) );
  137. backend.get( texture ).currentAnisotropy = texture.anisotropy;
  138. }
  139. }
  140. }
  141. createDefaultTexture( texture ) {
  142. const { gl, backend, defaultTextures } = this;
  143. const glTextureType = this.getGLTextureType( texture );
  144. let textureGPU = defaultTextures[ glTextureType ];
  145. if ( textureGPU === undefined ) {
  146. textureGPU = gl.createTexture();
  147. backend.state.bindTexture( glTextureType, textureGPU );
  148. gl.texParameteri( glTextureType, gl.TEXTURE_MIN_FILTER, gl.NEAREST );
  149. gl.texParameteri( glTextureType, gl.TEXTURE_MAG_FILTER, gl.NEAREST );
  150. // gl.texImage2D( glTextureType, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, data );
  151. defaultTextures[ glTextureType ] = textureGPU;
  152. }
  153. backend.set( texture, {
  154. textureGPU,
  155. glTextureType,
  156. isDefault: true
  157. } );
  158. }
  159. createTexture( texture, options ) {
  160. const { gl, backend } = this;
  161. const { levels, width, height, depth } = options;
  162. const glFormat = backend.utils.convert( texture.format, texture.colorSpace );
  163. const glType = backend.utils.convert( texture.type );
  164. const glInternalFormat = this.getInternalFormat( texture.internalFormat, glFormat, glType, texture.colorSpace, texture.isVideoTexture );
  165. const textureGPU = gl.createTexture();
  166. const glTextureType = this.getGLTextureType( texture );
  167. backend.state.bindTexture( glTextureType, textureGPU );
  168. gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, texture.flipY );
  169. gl.pixelStorei( gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha );
  170. gl.pixelStorei( gl.UNPACK_ALIGNMENT, texture.unpackAlignment );
  171. gl.pixelStorei( gl.UNPACK_COLORSPACE_CONVERSION_WEBGL, gl.NONE );
  172. this.setTextureParameters( glTextureType, texture );
  173. if ( texture.isDataArrayTexture ) {
  174. gl.texStorage3D( gl.TEXTURE_2D_ARRAY, levels, glInternalFormat, width, height, depth );
  175. } else if ( ! texture.isVideoTexture ) {
  176. gl.texStorage2D( glTextureType, levels, glInternalFormat, width, height );
  177. }
  178. backend.set( texture, {
  179. textureGPU,
  180. glTextureType,
  181. glFormat,
  182. glType,
  183. glInternalFormat
  184. } );
  185. }
  186. copyBufferToTexture( buffer, texture ) {
  187. const { gl, backend } = this;
  188. const { textureGPU, glTextureType, glFormat, glType } = backend.get( texture );
  189. const { width, height } = texture.source.data;
  190. gl.bindBuffer( gl.PIXEL_UNPACK_BUFFER, buffer );
  191. backend.state.bindTexture( glTextureType, textureGPU );
  192. gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, false );
  193. gl.pixelStorei( gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false );
  194. gl.texSubImage2D( glTextureType, 0, 0, 0, width, height, glFormat, glType, 0 );
  195. gl.bindBuffer( gl.PIXEL_UNPACK_BUFFER, null );
  196. backend.state.unbindTexture();
  197. // debug
  198. // const framebuffer = gl.createFramebuffer();
  199. // gl.bindFramebuffer( gl.FRAMEBUFFER, framebuffer );
  200. // gl.framebufferTexture2D( gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, glTextureType, textureGPU, 0 );
  201. // const readout = new Float32Array( width * height * 4 );
  202. // const altFormat = gl.getParameter( gl.IMPLEMENTATION_COLOR_READ_FORMAT );
  203. // const altType = gl.getParameter( gl.IMPLEMENTATION_COLOR_READ_TYPE );
  204. // gl.readPixels( 0, 0, width, height, altFormat, altType, readout );
  205. // gl.bindFramebuffer( gl.FRAMEBUFFER, null );
  206. // console.log( readout );
  207. }
  208. updateTexture( texture, options ) {
  209. const { gl } = this;
  210. const { width, height } = options;
  211. const { textureGPU, glTextureType, glFormat, glType, glInternalFormat } = this.backend.get( texture );
  212. if ( texture.isRenderTargetTexture || ( textureGPU === undefined /* unsupported texture format */ ) )
  213. return;
  214. const getImage = ( source ) => {
  215. if ( source.isDataTexture ) {
  216. return source.image.data;
  217. } else if ( source instanceof ImageBitmap || source instanceof OffscreenCanvas || source instanceof HTMLImageElement || source instanceof HTMLCanvasElement ) {
  218. return source;
  219. }
  220. return source.data;
  221. };
  222. this.backend.state.bindTexture( glTextureType, textureGPU );
  223. if ( texture.isCompressedTexture ) {
  224. const mipmaps = texture.mipmaps;
  225. for ( let i = 0; i < mipmaps.length; i ++ ) {
  226. const mipmap = mipmaps[ i ];
  227. if ( texture.isCompressedArrayTexture ) {
  228. const image = options.image;
  229. if ( texture.format !== gl.RGBA ) {
  230. if ( glFormat !== null ) {
  231. gl.compressedTexSubImage3D( gl.TEXTURE_2D_ARRAY, i, 0, 0, 0, mipmap.width, mipmap.height, image.depth, glFormat, mipmap.data, 0, 0 );
  232. } else {
  233. console.warn( 'THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture()' );
  234. }
  235. } else {
  236. gl.texSubImage3D( gl.TEXTURE_2D_ARRAY, i, 0, 0, 0, mipmap.width, mipmap.height, image.depth, glFormat, glType, mipmap.data );
  237. }
  238. } else {
  239. if ( glFormat !== null ) {
  240. gl.compressedTexSubImage2D( gl.TEXTURE_2D, i, 0, 0, mipmap.width, mipmap.height, glFormat, mipmap.data );
  241. } else {
  242. console.warn( 'Unsupported compressed texture format' );
  243. }
  244. }
  245. }
  246. } else if ( texture.isCubeTexture ) {
  247. const images = options.images;
  248. for ( let i = 0; i < 6; i ++ ) {
  249. const image = getImage( images[ i ] );
  250. gl.texSubImage2D( gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, 0, 0, width, height, glFormat, glType, image );
  251. }
  252. } else if ( texture.isDataArrayTexture ) {
  253. const image = options.image;
  254. gl.texSubImage3D( gl.TEXTURE_2D_ARRAY, 0, 0, 0, 0, image.width, image.height, image.depth, glFormat, glType, image.data );
  255. } else if ( texture.isVideoTexture ) {
  256. texture.update();
  257. gl.texImage2D( glTextureType, 0, glInternalFormat, glFormat, glType, options.image );
  258. } else {
  259. const image = getImage( options.image );
  260. gl.texSubImage2D( glTextureType, 0, 0, 0, width, height, glFormat, glType, image );
  261. }
  262. }
  263. generateMipmaps( texture ) {
  264. const { gl, backend } = this;
  265. const { textureGPU, glTextureType } = backend.get( texture );
  266. backend.state.bindTexture( glTextureType, textureGPU );
  267. gl.generateMipmap( glTextureType );
  268. }
  269. deallocateRenderBuffers( renderTarget ) {
  270. const { gl, backend } = this;
  271. // remove framebuffer reference
  272. if ( renderTarget ) {
  273. const renderContextData = backend.get( renderTarget );
  274. renderContextData.renderBufferStorageSetup = undefined;
  275. if ( renderContextData.framebuffer ) {
  276. gl.deleteFramebuffer( renderContextData.framebuffer );
  277. renderContextData.framebuffer = undefined;
  278. }
  279. if ( renderContextData.depthRenderbuffer ) {
  280. gl.deleteRenderbuffer( renderContextData.depthRenderbuffer );
  281. renderContextData.depthRenderbuffer = undefined;
  282. }
  283. if ( renderContextData.stencilRenderbuffer ) {
  284. gl.deleteRenderbuffer( renderContextData.stencilRenderbuffer );
  285. renderContextData.stencilRenderbuffer = undefined;
  286. }
  287. if ( renderContextData.msaaFrameBuffer ) {
  288. gl.deleteFramebuffer( renderContextData.msaaFrameBuffer );
  289. renderContextData.msaaFrameBuffer = undefined;
  290. }
  291. if ( renderContextData.msaaRenderbuffers ) {
  292. for ( let i = 0; i < renderContextData.msaaRenderbuffers.length; i ++ ) {
  293. gl.deleteRenderbuffer( renderContextData.msaaRenderbuffers[ i ] );
  294. }
  295. renderContextData.msaaRenderbuffers = undefined;
  296. }
  297. }
  298. }
  299. destroyTexture( texture ) {
  300. const { gl, backend } = this;
  301. const { textureGPU, renderTarget } = backend.get( texture );
  302. this.deallocateRenderBuffers( renderTarget );
  303. gl.deleteTexture( textureGPU );
  304. backend.delete( texture );
  305. }
  306. copyTextureToTexture( position, srcTexture, dstTexture, level = 0 ) {
  307. const { gl, backend } = this;
  308. const { state } = this.backend;
  309. const width = srcTexture.image.width;
  310. const height = srcTexture.image.height;
  311. const { textureGPU: dstTextureGPU, glTextureType, glType, glFormat } = backend.get( dstTexture );
  312. state.bindTexture( glTextureType, dstTextureGPU );
  313. // As another texture upload may have changed pixelStorei
  314. // parameters, make sure they are correct for the dstTexture
  315. gl.pixelStorei( gl.UNPACK_FLIP_Y_WEBGL, dstTexture.flipY );
  316. gl.pixelStorei( gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, dstTexture.premultiplyAlpha );
  317. gl.pixelStorei( gl.UNPACK_ALIGNMENT, dstTexture.unpackAlignment );
  318. if ( srcTexture.isDataTexture ) {
  319. gl.texSubImage2D( gl.TEXTURE_2D, level, position.x, position.y, width, height, glFormat, glType, srcTexture.image.data );
  320. } else {
  321. if ( srcTexture.isCompressedTexture ) {
  322. gl.compressedTexSubImage2D( gl.TEXTURE_2D, level, position.x, position.y, srcTexture.mipmaps[ 0 ].width, srcTexture.mipmaps[ 0 ].height, glFormat, srcTexture.mipmaps[ 0 ].data );
  323. } else {
  324. gl.texSubImage2D( gl.TEXTURE_2D, level, position.x, position.y, glFormat, glType, srcTexture.image );
  325. }
  326. }
  327. // Generate mipmaps only when copying level 0
  328. if ( level === 0 && dstTexture.generateMipmaps ) gl.generateMipmap( gl.TEXTURE_2D );
  329. state.unbindTexture();
  330. }
  331. copyFramebufferToTexture( texture, renderContext ) {
  332. const { gl } = this;
  333. const { state } = this.backend;
  334. const { textureGPU } = this.backend.get( texture );
  335. const width = texture.image.width;
  336. const height = texture.image.height;
  337. const requireDrawFrameBuffer = texture.isDepthTexture === true || ( renderContext.renderTarget && renderContext.renderTarget.samples > 0 );
  338. if ( requireDrawFrameBuffer ) {
  339. let mask;
  340. let attachment;
  341. if ( texture.isDepthTexture === true ) {
  342. mask = gl.DEPTH_BUFFER_BIT;
  343. attachment = gl.DEPTH_ATTACHMENT;
  344. if ( renderContext.stencil ) {
  345. mask |= gl.STENCIL_BUFFER_BIT;
  346. }
  347. } else {
  348. mask = gl.COLOR_BUFFER_BIT;
  349. attachment = gl.COLOR_ATTACHMENT0;
  350. }
  351. const fb = gl.createFramebuffer();
  352. state.bindFramebuffer( gl.DRAW_FRAMEBUFFER, fb );
  353. gl.framebufferTexture2D( gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, textureGPU, 0 );
  354. gl.blitFramebuffer( 0, 0, width, height, 0, 0, width, height, mask, gl.NEAREST );
  355. gl.deleteFramebuffer( fb );
  356. } else {
  357. state.bindTexture( gl.TEXTURE_2D, textureGPU );
  358. gl.copyTexSubImage2D( gl.TEXTURE_2D, 0, 0, 0, 0, 0, width, height );
  359. state.unbindTexture();
  360. }
  361. if ( texture.generateMipmaps ) this.generateMipmaps( texture );
  362. this.backend._setFramebuffer( renderContext );
  363. }
  364. // Setup storage for internal depth/stencil buffers and bind to correct framebuffer
  365. setupRenderBufferStorage( renderbuffer, renderContext ) {
  366. const { gl } = this;
  367. const renderTarget = renderContext.renderTarget;
  368. const { samples, depthTexture, depthBuffer, stencilBuffer, width, height } = renderTarget;
  369. gl.bindRenderbuffer( gl.RENDERBUFFER, renderbuffer );
  370. if ( depthBuffer && ! stencilBuffer ) {
  371. let glInternalFormat = gl.DEPTH_COMPONENT24;
  372. if ( samples > 0 ) {
  373. if ( depthTexture && depthTexture.isDepthTexture ) {
  374. if ( depthTexture.type === gl.FLOAT ) {
  375. glInternalFormat = gl.DEPTH_COMPONENT32F;
  376. }
  377. }
  378. gl.renderbufferStorageMultisample( gl.RENDERBUFFER, samples, glInternalFormat, width, height );
  379. } else {
  380. gl.renderbufferStorage( gl.RENDERBUFFER, glInternalFormat, width, height );
  381. }
  382. gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, renderbuffer );
  383. } else if ( depthBuffer && stencilBuffer ) {
  384. if ( samples > 0 ) {
  385. gl.renderbufferStorageMultisample( gl.RENDERBUFFER, samples, gl.DEPTH24_STENCIL8, width, height );
  386. } else {
  387. gl.renderbufferStorage( gl.RENDERBUFFER, gl.DEPTH_STENCIL, width, height );
  388. }
  389. gl.framebufferRenderbuffer( gl.FRAMEBUFFER, gl.DEPTH_STENCIL_ATTACHMENT, gl.RENDERBUFFER, renderbuffer );
  390. }
  391. }
  392. async copyTextureToBuffer( texture, x, y, width, height ) {
  393. const { backend, gl } = this;
  394. const { textureGPU, glFormat, glType } = this.backend.get( texture );
  395. const fb = gl.createFramebuffer();
  396. gl.bindFramebuffer( gl.READ_FRAMEBUFFER, fb );
  397. gl.framebufferTexture2D( gl.READ_FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, textureGPU, 0 );
  398. const typedArrayType = this._getTypedArrayType( glType );
  399. const bytesPerTexel = this._getBytesPerTexel( glFormat );
  400. const elementCount = width * height;
  401. const byteLength = elementCount * bytesPerTexel;
  402. const buffer = gl.createBuffer();
  403. gl.bindBuffer( gl.PIXEL_PACK_BUFFER, buffer );
  404. gl.bufferData( gl.PIXEL_PACK_BUFFER, byteLength, gl.STREAM_READ );
  405. gl.readPixels( x, y, width, height, glFormat, glType, 0 );
  406. gl.bindBuffer( gl.PIXEL_PACK_BUFFER, null );
  407. await backend.utils._clientWaitAsync();
  408. const dstBuffer = new typedArrayType( byteLength / typedArrayType.BYTES_PER_ELEMENT );
  409. gl.bindBuffer( gl.PIXEL_PACK_BUFFER, buffer );
  410. gl.getBufferSubData( gl.PIXEL_PACK_BUFFER, 0, dstBuffer );
  411. gl.bindBuffer( gl.PIXEL_PACK_BUFFER, null );
  412. gl.deleteFramebuffer( fb );
  413. return dstBuffer;
  414. }
  415. _getTypedArrayType( glType ) {
  416. const { gl } = this;
  417. if ( glType === gl.UNSIGNED_BYTE ) return Uint8Array;
  418. if ( glType === gl.UNSIGNED_SHORT_4_4_4_4 ) return Uint16Array;
  419. if ( glType === gl.UNSIGNED_SHORT_5_5_5_1 ) return Uint16Array;
  420. if ( glType === gl.UNSIGNED_SHORT_5_6_5 ) return Uint16Array;
  421. if ( glType === gl.UNSIGNED_SHORT ) return Uint16Array;
  422. if ( glType === gl.UNSIGNED_INT ) return Uint32Array;
  423. if ( glType === gl.FLOAT ) return Float32Array;
  424. throw new Error( `Unsupported WebGL type: ${glType}` );
  425. }
  426. _getBytesPerTexel( glFormat ) {
  427. const { gl } = this;
  428. if ( glFormat === gl.RGBA ) return 4;
  429. if ( glFormat === gl.RGB ) return 3;
  430. if ( glFormat === gl.ALPHA ) return 1;
  431. }
  432. }
  433. export default WebGLTextureUtils;