WebGLTextures.js 25 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. import { LinearFilter, NearestFilter, RGBFormat, RGBAFormat, DepthFormat, DepthStencilFormat, UnsignedShortType, UnsignedIntType, UnsignedInt248Type, FloatType, HalfFloatType, ClampToEdgeWrapping, NearestMipMapLinearFilter, NearestMipMapNearestFilter } from '../../constants.js';
  5. import { _Math } from '../../math/Math.js';
  6. function WebGLTextures( _gl, extensions, state, properties, capabilities, utils, info ) {
  7. var _videoTextures = {};
  8. var _canvas;
  9. //
  10. function clampToMaxSize( image, maxSize ) {
  11. if ( image.width > maxSize || image.height > maxSize ) {
  12. if ( 'data' in image ) {
  13. console.warn( 'THREE.WebGLRenderer: image in DataTexture is too big (' + image.width + 'x' + image.height + ').' );
  14. return;
  15. }
  16. // Warning: Scaling through the canvas will only work with images that use
  17. // premultiplied alpha.
  18. var scale = maxSize / Math.max( image.width, image.height );
  19. var canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
  20. canvas.width = Math.floor( image.width * scale );
  21. canvas.height = Math.floor( image.height * scale );
  22. var context = canvas.getContext( '2d' );
  23. context.drawImage( image, 0, 0, image.width, image.height, 0, 0, canvas.width, canvas.height );
  24. console.warn( 'THREE.WebGLRenderer: image is too big (' + image.width + 'x' + image.height + '). Resized to ' + canvas.width + 'x' + canvas.height, image );
  25. return canvas;
  26. }
  27. return image;
  28. }
  29. function isPowerOfTwo( image ) {
  30. return _Math.isPowerOfTwo( image.width ) && _Math.isPowerOfTwo( image.height );
  31. }
  32. function makePowerOfTwo( image ) {
  33. if ( image instanceof HTMLImageElement || image instanceof HTMLCanvasElement || image instanceof ImageBitmap ) {
  34. if ( _canvas === undefined ) _canvas = document.createElementNS( 'http://www.w3.org/1999/xhtml', 'canvas' );
  35. _canvas.width = _Math.floorPowerOfTwo( image.width );
  36. _canvas.height = _Math.floorPowerOfTwo( image.height );
  37. var context = _canvas.getContext( '2d' );
  38. context.drawImage( image, 0, 0, _canvas.width, _canvas.height );
  39. console.warn( 'THREE.WebGLRenderer: image is not power of two (' + image.width + 'x' + image.height + '). Resized to ' + _canvas.width + 'x' + _canvas.height, image );
  40. return _canvas;
  41. }
  42. return image;
  43. }
  44. function textureNeedsPowerOfTwo( texture ) {
  45. if ( _gl.isWebGL2 ) return false;
  46. return ( texture.wrapS !== ClampToEdgeWrapping || texture.wrapT !== ClampToEdgeWrapping ) ||
  47. ( texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter );
  48. }
  49. function textureNeedsGenerateMipmaps( texture, isPowerOfTwo ) {
  50. return texture.generateMipmaps && isPowerOfTwo &&
  51. texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter;
  52. }
  53. function generateMipmap( target, texture, width, height ) {
  54. _gl.generateMipmap( target );
  55. var textureProperties = properties.get( texture );
  56. textureProperties.__maxMipLevel = Math.log2( Math.max( width, height ) );
  57. }
  58. function getInternalFormat( glFormat, glType ) {
  59. if ( ! _gl.isWebGL2 ) return glFormat;
  60. if ( glFormat === _gl.RGB ) {
  61. if ( glType === _gl.FLOAT ) return _gl.RGB32F;
  62. if ( glType === _gl.HALF_FLOAT ) return _gl.RGB16F;
  63. if ( glType === _gl.UNSIGNED_BYTE ) return _gl.RGB8;
  64. }
  65. if ( glFormat === _gl.RGBA ) {
  66. if ( glType === _gl.FLOAT ) return _gl.RGBA32F;
  67. if ( glType === _gl.HALF_FLOAT ) return _gl.RGBA16F;
  68. if ( glType === _gl.UNSIGNED_BYTE ) return _gl.RGBA8;
  69. }
  70. return glFormat;
  71. }
  72. // Fallback filters for non-power-of-2 textures
  73. function filterFallback( f ) {
  74. if ( f === NearestFilter || f === NearestMipMapNearestFilter || f === NearestMipMapLinearFilter ) {
  75. return _gl.NEAREST;
  76. }
  77. return _gl.LINEAR;
  78. }
  79. //
  80. function onTextureDispose( event ) {
  81. var texture = event.target;
  82. texture.removeEventListener( 'dispose', onTextureDispose );
  83. deallocateTexture( texture );
  84. if ( texture.isVideoTexture ) {
  85. delete _videoTextures[ texture.id ];
  86. }
  87. info.memory.textures --;
  88. }
  89. function onRenderTargetDispose( event ) {
  90. var renderTarget = event.target;
  91. renderTarget.removeEventListener( 'dispose', onRenderTargetDispose );
  92. deallocateRenderTarget( renderTarget );
  93. info.memory.textures --;
  94. }
  95. //
  96. function deallocateTexture( texture ) {
  97. var textureProperties = properties.get( texture );
  98. if ( texture.image && textureProperties.__image__webglTextureCube ) {
  99. // cube texture
  100. _gl.deleteTexture( textureProperties.__image__webglTextureCube );
  101. } else {
  102. // 2D texture
  103. if ( textureProperties.__webglInit === undefined ) return;
  104. _gl.deleteTexture( textureProperties.__webglTexture );
  105. }
  106. // remove all webgl properties
  107. properties.remove( texture );
  108. }
  109. function deallocateRenderTarget( renderTarget ) {
  110. var renderTargetProperties = properties.get( renderTarget );
  111. var textureProperties = properties.get( renderTarget.texture );
  112. if ( ! renderTarget ) return;
  113. if ( textureProperties.__webglTexture !== undefined ) {
  114. _gl.deleteTexture( textureProperties.__webglTexture );
  115. }
  116. if ( renderTarget.depthTexture ) {
  117. renderTarget.depthTexture.dispose();
  118. }
  119. if ( renderTarget.isWebGLRenderTargetCube ) {
  120. for ( var i = 0; i < 6; i ++ ) {
  121. _gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer[ i ] );
  122. if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer[ i ] );
  123. }
  124. } else {
  125. _gl.deleteFramebuffer( renderTargetProperties.__webglFramebuffer );
  126. if ( renderTargetProperties.__webglDepthbuffer ) _gl.deleteRenderbuffer( renderTargetProperties.__webglDepthbuffer );
  127. }
  128. properties.remove( renderTarget.texture );
  129. properties.remove( renderTarget );
  130. }
  131. //
  132. function setTexture2D( texture, slot ) {
  133. var textureProperties = properties.get( texture );
  134. if ( texture.isVideoTexture ) updateVideoTexture( texture );
  135. if ( texture.version > 0 && textureProperties.__version !== texture.version ) {
  136. var image = texture.image;
  137. if ( image === undefined ) {
  138. console.warn( 'THREE.WebGLRenderer: Texture marked for update but image is undefined', texture );
  139. } else if ( image.complete === false ) {
  140. console.warn( 'THREE.WebGLRenderer: Texture marked for update but image is incomplete', texture );
  141. } else {
  142. uploadTexture( textureProperties, texture, slot );
  143. return;
  144. }
  145. }
  146. state.activeTexture( _gl.TEXTURE0 + slot );
  147. state.bindTexture( _gl.TEXTURE_2D, textureProperties.__webglTexture );
  148. }
  149. function setTextureCube( texture, slot ) {
  150. var textureProperties = properties.get( texture );
  151. if ( texture.image.length === 6 ) {
  152. if ( texture.version > 0 && textureProperties.__version !== texture.version ) {
  153. if ( ! textureProperties.__image__webglTextureCube ) {
  154. texture.addEventListener( 'dispose', onTextureDispose );
  155. textureProperties.__image__webglTextureCube = _gl.createTexture();
  156. info.memory.textures ++;
  157. }
  158. state.activeTexture( _gl.TEXTURE0 + slot );
  159. state.bindTexture( _gl.TEXTURE_CUBE_MAP, textureProperties.__image__webglTextureCube );
  160. _gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, texture.flipY );
  161. var isCompressed = ( texture && texture.isCompressedTexture );
  162. var isDataTexture = ( texture.image[ 0 ] && texture.image[ 0 ].isDataTexture );
  163. var cubeImage = [];
  164. for ( var i = 0; i < 6; i ++ ) {
  165. if ( ! isCompressed && ! isDataTexture ) {
  166. cubeImage[ i ] = clampToMaxSize( texture.image[ i ], capabilities.maxCubemapSize );
  167. } else {
  168. cubeImage[ i ] = isDataTexture ? texture.image[ i ].image : texture.image[ i ];
  169. }
  170. }
  171. var image = cubeImage[ 0 ],
  172. isPowerOfTwoImage = isPowerOfTwo( image ),
  173. glFormat = utils.convert( texture.format ),
  174. glType = utils.convert( texture.type ),
  175. glInternalFormat = getInternalFormat( glFormat, glType );
  176. setTextureParameters( _gl.TEXTURE_CUBE_MAP, texture, isPowerOfTwoImage );
  177. for ( var i = 0; i < 6; i ++ ) {
  178. if ( ! isCompressed ) {
  179. if ( isDataTexture ) {
  180. state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, glInternalFormat, cubeImage[ i ].width, cubeImage[ i ].height, 0, glFormat, glType, cubeImage[ i ].data );
  181. } else {
  182. state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, 0, glInternalFormat, glFormat, glType, cubeImage[ i ] );
  183. }
  184. } else {
  185. var mipmap, mipmaps = cubeImage[ i ].mipmaps;
  186. for ( var j = 0, jl = mipmaps.length; j < jl; j ++ ) {
  187. mipmap = mipmaps[ j ];
  188. if ( texture.format !== RGBAFormat && texture.format !== RGBFormat ) {
  189. if ( state.getCompressedTextureFormats().indexOf( glFormat ) > - 1 ) {
  190. state.compressedTexImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data );
  191. } else {
  192. console.warn( 'THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .setTextureCube()' );
  193. }
  194. } else {
  195. state.texImage2D( _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i, j, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
  196. }
  197. }
  198. }
  199. }
  200. if ( ! isCompressed ) {
  201. textureProperties.__maxMipLevel = 0;
  202. } else {
  203. textureProperties.__maxMipLevel = mipmaps.length - 1;
  204. }
  205. if ( textureNeedsGenerateMipmaps( texture, isPowerOfTwoImage ) ) {
  206. // We assume images for cube map have the same size.
  207. generateMipmap( _gl.TEXTURE_CUBE_MAP, texture, image.width, image.height );
  208. }
  209. textureProperties.__version = texture.version;
  210. if ( texture.onUpdate ) texture.onUpdate( texture );
  211. } else {
  212. state.activeTexture( _gl.TEXTURE0 + slot );
  213. state.bindTexture( _gl.TEXTURE_CUBE_MAP, textureProperties.__image__webglTextureCube );
  214. }
  215. }
  216. }
  217. function setTextureCubeDynamic( texture, slot ) {
  218. state.activeTexture( _gl.TEXTURE0 + slot );
  219. state.bindTexture( _gl.TEXTURE_CUBE_MAP, properties.get( texture ).__webglTexture );
  220. }
  221. function setTextureParameters( textureType, texture, isPowerOfTwoImage ) {
  222. var extension;
  223. if ( isPowerOfTwoImage ) {
  224. _gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, utils.convert( texture.wrapS ) );
  225. _gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, utils.convert( texture.wrapT ) );
  226. _gl.texParameteri( textureType, _gl.TEXTURE_MAG_FILTER, utils.convert( texture.magFilter ) );
  227. _gl.texParameteri( textureType, _gl.TEXTURE_MIN_FILTER, utils.convert( texture.minFilter ) );
  228. } else {
  229. _gl.texParameteri( textureType, _gl.TEXTURE_WRAP_S, _gl.CLAMP_TO_EDGE );
  230. _gl.texParameteri( textureType, _gl.TEXTURE_WRAP_T, _gl.CLAMP_TO_EDGE );
  231. if ( texture.wrapS !== ClampToEdgeWrapping || texture.wrapT !== ClampToEdgeWrapping ) {
  232. console.warn( 'THREE.WebGLRenderer: Texture is not power of two. Texture.wrapS and Texture.wrapT should be set to THREE.ClampToEdgeWrapping.', texture );
  233. }
  234. _gl.texParameteri( textureType, _gl.TEXTURE_MAG_FILTER, filterFallback( texture.magFilter ) );
  235. _gl.texParameteri( textureType, _gl.TEXTURE_MIN_FILTER, filterFallback( texture.minFilter ) );
  236. if ( texture.minFilter !== NearestFilter && texture.minFilter !== LinearFilter ) {
  237. console.warn( 'THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter.', texture );
  238. }
  239. }
  240. extension = extensions.get( 'EXT_texture_filter_anisotropic' );
  241. if ( extension ) {
  242. if ( texture.type === FloatType && extensions.get( 'OES_texture_float_linear' ) === null ) return;
  243. if ( texture.type === HalfFloatType && extensions.get( 'OES_texture_half_float_linear' ) === null ) return;
  244. if ( texture.anisotropy > 1 || properties.get( texture ).__currentAnisotropy ) {
  245. _gl.texParameterf( textureType, extension.TEXTURE_MAX_ANISOTROPY_EXT, Math.min( texture.anisotropy, capabilities.getMaxAnisotropy() ) );
  246. properties.get( texture ).__currentAnisotropy = texture.anisotropy;
  247. }
  248. }
  249. }
  250. function uploadTexture( textureProperties, texture, slot ) {
  251. if ( textureProperties.__webglInit === undefined ) {
  252. textureProperties.__webglInit = true;
  253. texture.addEventListener( 'dispose', onTextureDispose );
  254. textureProperties.__webglTexture = _gl.createTexture();
  255. info.memory.textures ++;
  256. }
  257. state.activeTexture( _gl.TEXTURE0 + slot );
  258. state.bindTexture( _gl.TEXTURE_2D, textureProperties.__webglTexture );
  259. _gl.pixelStorei( _gl.UNPACK_FLIP_Y_WEBGL, texture.flipY );
  260. _gl.pixelStorei( _gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, texture.premultiplyAlpha );
  261. _gl.pixelStorei( _gl.UNPACK_ALIGNMENT, texture.unpackAlignment );
  262. var image = clampToMaxSize( texture.image, capabilities.maxTextureSize );
  263. if ( textureNeedsPowerOfTwo( texture ) && isPowerOfTwo( image ) === false ) {
  264. image = makePowerOfTwo( image );
  265. }
  266. var isPowerOfTwoImage = isPowerOfTwo( image ),
  267. glFormat = utils.convert( texture.format ),
  268. glType = utils.convert( texture.type ),
  269. glInternalFormat = getInternalFormat( glFormat, glType );
  270. setTextureParameters( _gl.TEXTURE_2D, texture, isPowerOfTwoImage );
  271. var mipmap, mipmaps = texture.mipmaps;
  272. if ( texture.isDepthTexture ) {
  273. // populate depth texture with dummy data
  274. glInternalFormat = _gl.DEPTH_COMPONENT;
  275. if ( texture.type === FloatType ) {
  276. if ( ! _gl.isWebGL2 ) throw new Error( 'Float Depth Texture only supported in WebGL2.0' );
  277. glInternalFormat = _gl.DEPTH_COMPONENT32F;
  278. } else if ( _gl.isWebGL2 ) {
  279. // WebGL 2.0 requires signed internalformat for glTexImage2D
  280. glInternalFormat = _gl.DEPTH_COMPONENT16;
  281. }
  282. if ( texture.format === DepthFormat && glInternalFormat === _gl.DEPTH_COMPONENT ) {
  283. // The error INVALID_OPERATION is generated by texImage2D if format and internalformat are
  284. // DEPTH_COMPONENT and type is not UNSIGNED_SHORT or UNSIGNED_INT
  285. // (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
  286. if ( texture.type !== UnsignedShortType && texture.type !== UnsignedIntType ) {
  287. console.warn( 'THREE.WebGLRenderer: Use UnsignedShortType or UnsignedIntType for DepthFormat DepthTexture.' );
  288. texture.type = UnsignedShortType;
  289. glType = utils.convert( texture.type );
  290. }
  291. }
  292. // Depth stencil textures need the DEPTH_STENCIL internal format
  293. // (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
  294. if ( texture.format === DepthStencilFormat ) {
  295. glInternalFormat = _gl.DEPTH_STENCIL;
  296. // The error INVALID_OPERATION is generated by texImage2D if format and internalformat are
  297. // DEPTH_STENCIL and type is not UNSIGNED_INT_24_8_WEBGL.
  298. // (https://www.khronos.org/registry/webgl/extensions/WEBGL_depth_texture/)
  299. if ( texture.type !== UnsignedInt248Type ) {
  300. console.warn( 'THREE.WebGLRenderer: Use UnsignedInt248Type for DepthStencilFormat DepthTexture.' );
  301. texture.type = UnsignedInt248Type;
  302. glType = utils.convert( texture.type );
  303. }
  304. }
  305. state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, null );
  306. } else if ( texture.isDataTexture ) {
  307. // use manually created mipmaps if available
  308. // if there are no manual mipmaps
  309. // set 0 level mipmap and then use GL to generate other mipmap levels
  310. if ( mipmaps.length > 0 && isPowerOfTwoImage ) {
  311. for ( var i = 0, il = mipmaps.length; i < il; i ++ ) {
  312. mipmap = mipmaps[ i ];
  313. state.texImage2D( _gl.TEXTURE_2D, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
  314. }
  315. texture.generateMipmaps = false;
  316. textureProperties.__maxMipLevel = mipmaps.length - 1;
  317. } else {
  318. state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, image.width, image.height, 0, glFormat, glType, image.data );
  319. textureProperties.__maxMipLevel = 0;
  320. }
  321. } else if ( texture.isCompressedTexture ) {
  322. for ( var i = 0, il = mipmaps.length; i < il; i ++ ) {
  323. mipmap = mipmaps[ i ];
  324. if ( texture.format !== RGBAFormat && texture.format !== RGBFormat ) {
  325. if ( state.getCompressedTextureFormats().indexOf( glFormat ) > - 1 ) {
  326. state.compressedTexImage2D( _gl.TEXTURE_2D, i, glInternalFormat, mipmap.width, mipmap.height, 0, mipmap.data );
  327. } else {
  328. console.warn( 'THREE.WebGLRenderer: Attempt to load unsupported compressed texture format in .uploadTexture()' );
  329. }
  330. } else {
  331. state.texImage2D( _gl.TEXTURE_2D, i, glInternalFormat, mipmap.width, mipmap.height, 0, glFormat, glType, mipmap.data );
  332. }
  333. }
  334. textureProperties.__maxMipLevel = mipmaps.length - 1;
  335. } else {
  336. // regular Texture (image, video, canvas)
  337. // use manually created mipmaps if available
  338. // if there are no manual mipmaps
  339. // set 0 level mipmap and then use GL to generate other mipmap levels
  340. if ( mipmaps.length > 0 && isPowerOfTwoImage ) {
  341. for ( var i = 0, il = mipmaps.length; i < il; i ++ ) {
  342. mipmap = mipmaps[ i ];
  343. state.texImage2D( _gl.TEXTURE_2D, i, glInternalFormat, glFormat, glType, mipmap );
  344. }
  345. texture.generateMipmaps = false;
  346. textureProperties.__maxMipLevel = mipmaps.length - 1;
  347. } else {
  348. state.texImage2D( _gl.TEXTURE_2D, 0, glInternalFormat, glFormat, glType, image );
  349. textureProperties.__maxMipLevel = 0;
  350. }
  351. }
  352. if ( textureNeedsGenerateMipmaps( texture, isPowerOfTwoImage ) ) {
  353. generateMipmap( _gl.TEXTURE_2D, texture, image.width, image.height );
  354. }
  355. textureProperties.__version = texture.version;
  356. if ( texture.onUpdate ) texture.onUpdate( texture );
  357. }
  358. // Render targets
  359. // Setup storage for target texture and bind it to correct framebuffer
  360. function setupFrameBufferTexture( framebuffer, renderTarget, attachment, textureTarget ) {
  361. var glFormat = utils.convert( renderTarget.texture.format );
  362. var glType = utils.convert( renderTarget.texture.type );
  363. var glInternalFormat = getInternalFormat( glFormat, glType );
  364. var array = ( _gl.isWebGL2 ) ? new Uint8Array( renderTarget.width * renderTarget.height * 4 ) : null;
  365. state.texImage2D( textureTarget, 0, glInternalFormat, renderTarget.width, renderTarget.height, 0, glFormat, glType, array );
  366. _gl.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
  367. _gl.framebufferTexture2D( _gl.FRAMEBUFFER, attachment, textureTarget, properties.get( renderTarget.texture ).__webglTexture, 0 );
  368. _gl.bindFramebuffer( _gl.FRAMEBUFFER, null );
  369. }
  370. // Setup storage for internal depth/stencil buffers and bind to correct framebuffer
  371. function setupRenderBufferStorage( renderbuffer, renderTarget ) {
  372. _gl.bindRenderbuffer( _gl.RENDERBUFFER, renderbuffer );
  373. if ( renderTarget.depthBuffer && ! renderTarget.stencilBuffer ) {
  374. _gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_COMPONENT16, renderTarget.width, renderTarget.height );
  375. _gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
  376. } else if ( renderTarget.depthBuffer && renderTarget.stencilBuffer ) {
  377. _gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.DEPTH_STENCIL, renderTarget.width, renderTarget.height );
  378. _gl.framebufferRenderbuffer( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, _gl.RENDERBUFFER, renderbuffer );
  379. } else {
  380. // FIXME: We don't support !depth !stencil
  381. _gl.renderbufferStorage( _gl.RENDERBUFFER, _gl.RGBA4, renderTarget.width, renderTarget.height );
  382. }
  383. _gl.bindRenderbuffer( _gl.RENDERBUFFER, null );
  384. }
  385. // Setup resources for a Depth Texture for a FBO (needs an extension)
  386. function setupDepthTexture( framebuffer, renderTarget ) {
  387. var isCube = ( renderTarget && renderTarget.isWebGLRenderTargetCube );
  388. if ( isCube ) throw new Error( 'Depth Texture with cube render targets is not supported' );
  389. _gl.bindFramebuffer( _gl.FRAMEBUFFER, framebuffer );
  390. if ( ! ( renderTarget.depthTexture && renderTarget.depthTexture.isDepthTexture ) ) {
  391. throw new Error( 'renderTarget.depthTexture must be an instance of THREE.DepthTexture' );
  392. }
  393. // upload an empty depth texture with framebuffer size
  394. if ( ! properties.get( renderTarget.depthTexture ).__webglTexture ||
  395. renderTarget.depthTexture.image.width !== renderTarget.width ||
  396. renderTarget.depthTexture.image.height !== renderTarget.height ) {
  397. renderTarget.depthTexture.image.width = renderTarget.width;
  398. renderTarget.depthTexture.image.height = renderTarget.height;
  399. renderTarget.depthTexture.needsUpdate = true;
  400. }
  401. setTexture2D( renderTarget.depthTexture, 0 );
  402. var webglDepthTexture = properties.get( renderTarget.depthTexture ).__webglTexture;
  403. if ( renderTarget.depthTexture.format === DepthFormat ) {
  404. _gl.framebufferTexture2D( _gl.FRAMEBUFFER, _gl.DEPTH_ATTACHMENT, _gl.TEXTURE_2D, webglDepthTexture, 0 );
  405. } else if ( renderTarget.depthTexture.format === DepthStencilFormat ) {
  406. _gl.framebufferTexture2D( _gl.FRAMEBUFFER, _gl.DEPTH_STENCIL_ATTACHMENT, _gl.TEXTURE_2D, webglDepthTexture, 0 );
  407. } else {
  408. throw new Error( 'Unknown depthTexture format' );
  409. }
  410. }
  411. // Setup GL resources for a non-texture depth buffer
  412. function setupDepthRenderbuffer( renderTarget ) {
  413. var renderTargetProperties = properties.get( renderTarget );
  414. var isCube = ( renderTarget.isWebGLRenderTargetCube === true );
  415. if ( renderTarget.depthTexture ) {
  416. if ( isCube ) throw new Error( 'target.depthTexture not supported in Cube render targets' );
  417. setupDepthTexture( renderTargetProperties.__webglFramebuffer, renderTarget );
  418. } else {
  419. if ( isCube ) {
  420. renderTargetProperties.__webglDepthbuffer = [];
  421. for ( var i = 0; i < 6; i ++ ) {
  422. _gl.bindFramebuffer( _gl.FRAMEBUFFER, renderTargetProperties.__webglFramebuffer[ i ] );
  423. renderTargetProperties.__webglDepthbuffer[ i ] = _gl.createRenderbuffer();
  424. setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer[ i ], renderTarget );
  425. }
  426. } else {
  427. _gl.bindFramebuffer( _gl.FRAMEBUFFER, renderTargetProperties.__webglFramebuffer );
  428. renderTargetProperties.__webglDepthbuffer = _gl.createRenderbuffer();
  429. setupRenderBufferStorage( renderTargetProperties.__webglDepthbuffer, renderTarget );
  430. }
  431. }
  432. _gl.bindFramebuffer( _gl.FRAMEBUFFER, null );
  433. }
  434. // Set up GL resources for the render target
  435. function setupRenderTarget( renderTarget ) {
  436. var renderTargetProperties = properties.get( renderTarget );
  437. var textureProperties = properties.get( renderTarget.texture );
  438. renderTarget.addEventListener( 'dispose', onRenderTargetDispose );
  439. textureProperties.__webglTexture = _gl.createTexture();
  440. info.memory.textures ++;
  441. var isCube = ( renderTarget.isWebGLRenderTargetCube === true );
  442. var isTargetPowerOfTwo = isPowerOfTwo( renderTarget );
  443. // Setup framebuffer
  444. if ( isCube ) {
  445. renderTargetProperties.__webglFramebuffer = [];
  446. for ( var i = 0; i < 6; i ++ ) {
  447. renderTargetProperties.__webglFramebuffer[ i ] = _gl.createFramebuffer();
  448. }
  449. } else {
  450. renderTargetProperties.__webglFramebuffer = _gl.createFramebuffer();
  451. }
  452. // Setup color buffer
  453. if ( isCube ) {
  454. state.bindTexture( _gl.TEXTURE_CUBE_MAP, textureProperties.__webglTexture );
  455. setTextureParameters( _gl.TEXTURE_CUBE_MAP, renderTarget.texture, isTargetPowerOfTwo );
  456. for ( var i = 0; i < 6; i ++ ) {
  457. setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer[ i ], renderTarget, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_CUBE_MAP_POSITIVE_X + i );
  458. }
  459. if ( textureNeedsGenerateMipmaps( renderTarget.texture, isTargetPowerOfTwo ) ) {
  460. generateMipmap( _gl.TEXTURE_CUBE_MAP, renderTarget.texture, renderTarget.width, renderTarget.height );
  461. }
  462. state.bindTexture( _gl.TEXTURE_CUBE_MAP, null );
  463. } else {
  464. state.bindTexture( _gl.TEXTURE_2D, textureProperties.__webglTexture );
  465. setTextureParameters( _gl.TEXTURE_2D, renderTarget.texture, isTargetPowerOfTwo );
  466. setupFrameBufferTexture( renderTargetProperties.__webglFramebuffer, renderTarget, _gl.COLOR_ATTACHMENT0, _gl.TEXTURE_2D );
  467. if ( textureNeedsGenerateMipmaps( renderTarget.texture, isTargetPowerOfTwo ) ) {
  468. generateMipmap( _gl.TEXTURE_2D, renderTarget.texture, renderTarget.width, renderTarget.height );
  469. }
  470. state.bindTexture( _gl.TEXTURE_2D, null );
  471. }
  472. // Setup depth and stencil buffers
  473. if ( renderTarget.depthBuffer ) {
  474. setupDepthRenderbuffer( renderTarget );
  475. }
  476. }
  477. function updateRenderTargetMipmap( renderTarget ) {
  478. var texture = renderTarget.texture;
  479. var isTargetPowerOfTwo = isPowerOfTwo( renderTarget );
  480. if ( textureNeedsGenerateMipmaps( texture, isTargetPowerOfTwo ) ) {
  481. var target = renderTarget.isWebGLRenderTargetCube ? _gl.TEXTURE_CUBE_MAP : _gl.TEXTURE_2D;
  482. var webglTexture = properties.get( texture ).__webglTexture;
  483. state.bindTexture( target, webglTexture );
  484. generateMipmap( target, texture, renderTarget.width, renderTarget.height );
  485. state.bindTexture( target, null );
  486. }
  487. }
  488. function updateVideoTexture( texture ) {
  489. var id = texture.id;
  490. var frame = info.render.frame;
  491. // Check the last frame we updated the VideoTexture
  492. if ( _videoTextures[ id ] !== frame ) {
  493. _videoTextures[ id ] = frame;
  494. texture.update();
  495. }
  496. }
  497. this.setTexture2D = setTexture2D;
  498. this.setTextureCube = setTextureCube;
  499. this.setTextureCubeDynamic = setTextureCubeDynamic;
  500. this.setupRenderTarget = setupRenderTarget;
  501. this.updateRenderTargetMipmap = updateRenderTargetMipmap;
  502. }
  503. export { WebGLTextures };