engine.multiRender.ts 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429
  1. import { InternalTexture, InternalTextureSource } from '../../Materials/Textures/internalTexture';
  2. import { IMultiRenderTargetOptions } from '../../Materials/Textures/multiRenderTarget';
  3. import { IColor4Like } from "../../Maths/math.like";
  4. import { Logger } from '../../Misc/logger';
  5. import { Nullable } from '../../types';
  6. import { Constants } from '../constants';
  7. import { ThinEngine } from '../thinEngine';
  8. declare module "../../Engines/thinEngine" {
  9. export interface ThinEngine {
  10. /**
  11. * Unbind a list of render target textures from the webGL context
  12. * This is used only when drawBuffer extension or webGL2 are active
  13. * @param textures defines the render target textures to unbind
  14. * @param disableGenerateMipMaps defines a boolean indicating that mipmaps must not be generated
  15. * @param onBeforeUnbind defines a function which will be called before the effective unbind
  16. */
  17. unBindMultiColorAttachmentFramebuffer(textures: InternalTexture[], disableGenerateMipMaps: boolean, onBeforeUnbind?: () => void): void;
  18. /**
  19. * Create a multi render target texture
  20. * @see https://doc.babylonjs.com/features/webgl2#multiple-render-target
  21. * @param size defines the size of the texture
  22. * @param options defines the creation options
  23. * @param noDrawBuffers if set to true, the engine won't make an initializing call of drawBuffers
  24. * @returns the cube texture as an InternalTexture
  25. */
  26. createMultipleRenderTarget(size: any, options: IMultiRenderTargetOptions, noDrawBuffers?: boolean): InternalTexture[];
  27. /**
  28. * Update the sample count for a given multiple render target texture
  29. * @see https://doc.babylonjs.com/features/webgl2#multisample-render-targets
  30. * @param textures defines the textures to update
  31. * @param samples defines the sample count to set
  32. * @param noDrawBuffers if set to true, the engine won't make an initializing call of drawBuffers
  33. * @returns the effective sample count (could be 0 if multisample render targets are not supported)
  34. */
  35. updateMultipleRenderTargetTextureSampleCount(textures: Nullable<InternalTexture[]>, samples: number, noDrawBuffers?: boolean): number;
  36. /**
  37. * Select a subsets of attachments to draw to.
  38. * @param attachments gl attachments
  39. */
  40. bindAttachments(attachments: number[]) : void;
  41. /**
  42. * Creates a layout object to draw/clear on specific textures in a MRT
  43. * @param textureStatus textureStatus[i] indicates if the i-th is active
  44. * @returns A layout to be fed to the engine, calling `bindAttachments`.
  45. */
  46. buildTextureLayout(textureStatus: boolean[]) : number[];
  47. /**
  48. * Restores the webgl state to only draw on the main color attachment
  49. * when the frame buffer associated is the canvas frame buffer
  50. */
  51. restoreSingleAttachment() : void;
  52. /**
  53. * Restores the webgl state to only draw on the main color attachment
  54. * when the frame buffer associated is not the canvas frame buffer
  55. */
  56. restoreSingleAttachmentForRenderTarget() : void;
  57. /**
  58. * Clears a list of attachments
  59. * @param attachments list of the attachments
  60. * @param colorMain clear color for the main attachment (the first one)
  61. * @param colorOthers clear color for the other attachments
  62. * @param clearDepth true to clear the depth buffer. Used only for the first attachment
  63. * @param clearStencil true to clear the stencil buffer. Used only for the first attachment
  64. */
  65. clearAttachments(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void;
  66. }
  67. }
  68. ThinEngine.prototype.restoreSingleAttachment = function(): void {
  69. const gl = this._gl;
  70. this.bindAttachments([gl.BACK]);
  71. };
  72. ThinEngine.prototype.restoreSingleAttachmentForRenderTarget = function(): void {
  73. const gl = this._gl;
  74. this.bindAttachments([gl.COLOR_ATTACHMENT0]);
  75. };
  76. ThinEngine.prototype.buildTextureLayout = function(textureStatus: boolean[]): number[] {
  77. const gl = this._gl;
  78. const result = [];
  79. for (let i = 0; i < textureStatus.length; i++) {
  80. if (textureStatus[i]) {
  81. result.push((<any>gl)["COLOR_ATTACHMENT" + i]);
  82. } else {
  83. result.push(gl.NONE);
  84. }
  85. }
  86. return result;
  87. };
  88. ThinEngine.prototype.bindAttachments = function(attachments: number[]): void {
  89. const gl = this._gl;
  90. gl.drawBuffers(attachments);
  91. };
  92. ThinEngine.prototype.clearAttachments = function(attachments: number[], colorMain: Nullable<IColor4Like>, colorOthers: Nullable<IColor4Like>, clearDepth: boolean, clearStencil: boolean): void {
  93. if (attachments.length === 0) {
  94. return;
  95. }
  96. const gl = this._gl;
  97. gl.drawBuffers([attachments[0]]);
  98. this.clear(colorMain, colorMain !== null, clearDepth, clearStencil);
  99. const saveVal = attachments[0];
  100. attachments[0] = gl.NONE;
  101. gl.drawBuffers(attachments);
  102. this.clear(colorOthers, colorOthers !== null, false, false);
  103. attachments[0] = saveVal;
  104. };
  105. ThinEngine.prototype.unBindMultiColorAttachmentFramebuffer = function(textures: InternalTexture[], disableGenerateMipMaps: boolean = false, onBeforeUnbind?: () => void): void {
  106. this._currentRenderTarget = null;
  107. // If MSAA, we need to bitblt back to main texture
  108. var gl = this._gl;
  109. var attachments = textures[0]._attachments!;
  110. var count = attachments.length;
  111. if (textures[0]._MSAAFramebuffer) {
  112. gl.bindFramebuffer(gl.READ_FRAMEBUFFER, textures[0]._MSAAFramebuffer);
  113. gl.bindFramebuffer(gl.DRAW_FRAMEBUFFER, textures[0]._framebuffer);
  114. for (var i = 0; i < count; i++) {
  115. var texture = textures[i];
  116. for (var j = 0; j < count; j++) {
  117. attachments[j] = gl.NONE;
  118. }
  119. attachments[i] = (<any>gl)[this.webGLVersion > 1 ? "COLOR_ATTACHMENT" + i : "COLOR_ATTACHMENT" + i + "_WEBGL"];
  120. gl.readBuffer(attachments[i]);
  121. gl.drawBuffers(attachments);
  122. gl.blitFramebuffer(0, 0, texture.width, texture.height,
  123. 0, 0, texture.width, texture.height,
  124. gl.COLOR_BUFFER_BIT, gl.NEAREST);
  125. }
  126. for (var i = 0; i < count; i++) {
  127. attachments[i] = (<any>gl)[this.webGLVersion > 1 ? "COLOR_ATTACHMENT" + i : "COLOR_ATTACHMENT" + i + "_WEBGL"];
  128. }
  129. gl.drawBuffers(attachments);
  130. }
  131. for (var i = 0; i < count; i++) {
  132. var texture = textures[i];
  133. if (texture.generateMipMaps && !disableGenerateMipMaps && !texture.isCube) {
  134. this._bindTextureDirectly(gl.TEXTURE_2D, texture, true);
  135. gl.generateMipmap(gl.TEXTURE_2D);
  136. this._bindTextureDirectly(gl.TEXTURE_2D, null);
  137. }
  138. }
  139. if (onBeforeUnbind) {
  140. if (textures[0]._MSAAFramebuffer) {
  141. // Bind the correct framebuffer
  142. this._bindUnboundFramebuffer(textures[0]._framebuffer);
  143. }
  144. onBeforeUnbind();
  145. }
  146. this._bindUnboundFramebuffer(null);
  147. };
  148. ThinEngine.prototype.createMultipleRenderTarget = function(size: any, options: IMultiRenderTargetOptions, noDrawBuffers?: boolean): InternalTexture[] {
  149. var generateMipMaps = false;
  150. var generateDepthBuffer = true;
  151. var generateStencilBuffer = false;
  152. var generateDepthTexture = false;
  153. var textureCount = 1;
  154. var defaultType = Constants.TEXTURETYPE_UNSIGNED_INT;
  155. var defaultSamplingMode = Constants.TEXTURE_TRILINEAR_SAMPLINGMODE;
  156. var types = new Array<number>();
  157. var samplingModes = new Array<number>();
  158. if (options !== undefined) {
  159. generateMipMaps = options.generateMipMaps === undefined ? false : options.generateMipMaps;
  160. generateDepthBuffer = options.generateDepthBuffer === undefined ? true : options.generateDepthBuffer;
  161. generateStencilBuffer = options.generateStencilBuffer === undefined ? false : options.generateStencilBuffer;
  162. generateDepthTexture = options.generateDepthTexture === undefined ? false : options.generateDepthTexture;
  163. textureCount = options.textureCount || 1;
  164. if (options.types) {
  165. types = options.types;
  166. }
  167. if (options.samplingModes) {
  168. samplingModes = options.samplingModes;
  169. }
  170. }
  171. var gl = this._gl;
  172. // Create the framebuffer
  173. var framebuffer = gl.createFramebuffer();
  174. this._bindUnboundFramebuffer(framebuffer);
  175. var width = size.width || size;
  176. var height = size.height || size;
  177. var textures = [];
  178. var attachments = [];
  179. var depthStencilBuffer = this._setupFramebufferDepthAttachments(generateStencilBuffer, generateDepthBuffer, width, height);
  180. for (var i = 0; i < textureCount; i++) {
  181. var samplingMode = samplingModes[i] || defaultSamplingMode;
  182. var type = types[i] || defaultType;
  183. if (type === Constants.TEXTURETYPE_FLOAT && !this._caps.textureFloatLinearFiltering) {
  184. // if floating point linear (gl.FLOAT) then force to NEAREST_SAMPLINGMODE
  185. samplingMode = Constants.TEXTURE_NEAREST_SAMPLINGMODE;
  186. }
  187. else if (type === Constants.TEXTURETYPE_HALF_FLOAT && !this._caps.textureHalfFloatLinearFiltering) {
  188. // if floating point linear (HALF_FLOAT) then force to NEAREST_SAMPLINGMODE
  189. samplingMode = Constants.TEXTURE_NEAREST_SAMPLINGMODE;
  190. }
  191. var filters = this._getSamplingParameters(samplingMode, generateMipMaps);
  192. if (type === Constants.TEXTURETYPE_FLOAT && !this._caps.textureFloat) {
  193. type = Constants.TEXTURETYPE_UNSIGNED_INT;
  194. Logger.Warn("Float textures are not supported. Render target forced to TEXTURETYPE_UNSIGNED_BYTE type");
  195. }
  196. var texture = new InternalTexture(this, InternalTextureSource.MultiRenderTarget);
  197. var attachment = (<any>gl)[this.webGLVersion > 1 ? "COLOR_ATTACHMENT" + i : "COLOR_ATTACHMENT" + i + "_WEBGL"];
  198. textures.push(texture);
  199. attachments.push(attachment);
  200. gl.activeTexture((<any>gl)["TEXTURE" + i]);
  201. gl.bindTexture(gl.TEXTURE_2D, texture._hardwareTexture!.underlyingResource);
  202. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filters.mag);
  203. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filters.min);
  204. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  205. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  206. gl.texImage2D(gl.TEXTURE_2D, 0, this._getRGBABufferInternalSizedFormat(type), width, height, 0, gl.RGBA, this._getWebGLTextureType(type), null);
  207. gl.framebufferTexture2D(gl.DRAW_FRAMEBUFFER, attachment, gl.TEXTURE_2D, texture._hardwareTexture!.underlyingResource, 0);
  208. if (generateMipMaps) {
  209. this._gl.generateMipmap(this._gl.TEXTURE_2D);
  210. }
  211. // Unbind
  212. this._bindTextureDirectly(gl.TEXTURE_2D, null);
  213. texture._framebuffer = framebuffer;
  214. texture._depthStencilBuffer = depthStencilBuffer;
  215. texture.baseWidth = width;
  216. texture.baseHeight = height;
  217. texture.width = width;
  218. texture.height = height;
  219. texture.isReady = true;
  220. texture.samples = 1;
  221. texture.generateMipMaps = generateMipMaps;
  222. texture.samplingMode = samplingMode;
  223. texture.type = type;
  224. texture._generateDepthBuffer = generateDepthBuffer;
  225. texture._generateStencilBuffer = generateStencilBuffer;
  226. texture._attachments = attachments;
  227. texture._textureArray = textures;
  228. this._internalTexturesCache.push(texture);
  229. }
  230. if (generateDepthTexture && this._caps.depthTextureExtension) {
  231. // Depth texture
  232. var depthTexture = new InternalTexture(this, InternalTextureSource.MultiRenderTarget);
  233. gl.activeTexture(gl.TEXTURE0);
  234. gl.bindTexture(gl.TEXTURE_2D, depthTexture._hardwareTexture!.underlyingResource);
  235. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  236. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  237. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  238. gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  239. gl.texImage2D(
  240. gl.TEXTURE_2D,
  241. 0,
  242. this.webGLVersion < 2 ? gl.DEPTH_COMPONENT : gl.DEPTH_COMPONENT16,
  243. width,
  244. height,
  245. 0,
  246. gl.DEPTH_COMPONENT,
  247. gl.UNSIGNED_SHORT,
  248. null
  249. );
  250. gl.framebufferTexture2D(
  251. gl.FRAMEBUFFER,
  252. gl.DEPTH_ATTACHMENT,
  253. gl.TEXTURE_2D,
  254. depthTexture._hardwareTexture!.underlyingResource,
  255. 0
  256. );
  257. depthTexture._framebuffer = framebuffer;
  258. depthTexture.baseWidth = width;
  259. depthTexture.baseHeight = height;
  260. depthTexture.width = width;
  261. depthTexture.height = height;
  262. depthTexture.isReady = true;
  263. depthTexture.samples = 1;
  264. depthTexture.generateMipMaps = generateMipMaps;
  265. depthTexture.samplingMode = gl.NEAREST;
  266. depthTexture._generateDepthBuffer = generateDepthBuffer;
  267. depthTexture._generateStencilBuffer = generateStencilBuffer;
  268. textures.push(depthTexture);
  269. this._internalTexturesCache.push(depthTexture);
  270. }
  271. if (!noDrawBuffers) {
  272. gl.drawBuffers(attachments);
  273. }
  274. this._bindUnboundFramebuffer(null);
  275. this.resetTextureCache();
  276. return textures;
  277. };
  278. ThinEngine.prototype.updateMultipleRenderTargetTextureSampleCount = function(textures: Nullable<InternalTexture[]>, samples: number, noDrawBuffers?: boolean): number {
  279. if (this.webGLVersion < 2 || !textures) {
  280. return 1;
  281. }
  282. if (textures[0].samples === samples) {
  283. return samples;
  284. }
  285. var count = textures[0]._attachments!.length;
  286. if (count === 0) {
  287. return 1;
  288. }
  289. var gl = this._gl;
  290. samples = Math.min(samples, this.getCaps().maxMSAASamples);
  291. // Dispose previous render buffers
  292. if (textures[0]._depthStencilBuffer) {
  293. gl.deleteRenderbuffer(textures[0]._depthStencilBuffer);
  294. textures[0]._depthStencilBuffer = null;
  295. }
  296. if (textures[0]._MSAAFramebuffer) {
  297. gl.deleteFramebuffer(textures[0]._MSAAFramebuffer);
  298. textures[0]._MSAAFramebuffer = null;
  299. }
  300. for (var i = 0; i < count; i++) {
  301. if (textures[i]._MSAARenderBuffer) {
  302. gl.deleteRenderbuffer(textures[i]._MSAARenderBuffer);
  303. textures[i]._MSAARenderBuffer = null;
  304. }
  305. }
  306. if (samples > 1 && gl.renderbufferStorageMultisample) {
  307. let framebuffer = gl.createFramebuffer();
  308. if (!framebuffer) {
  309. throw new Error("Unable to create multi sampled framebuffer");
  310. }
  311. this._bindUnboundFramebuffer(framebuffer);
  312. let depthStencilBuffer = this._setupFramebufferDepthAttachments(textures[0]._generateStencilBuffer, textures[0]._generateDepthBuffer, textures[0].width, textures[0].height, samples);
  313. var attachments = [];
  314. for (var i = 0; i < count; i++) {
  315. var texture = textures[i];
  316. var attachment = (<any>gl)[this.webGLVersion > 1 ? "COLOR_ATTACHMENT" + i : "COLOR_ATTACHMENT" + i + "_WEBGL"];
  317. var colorRenderbuffer = gl.createRenderbuffer();
  318. if (!colorRenderbuffer) {
  319. throw new Error("Unable to create multi sampled framebuffer");
  320. }
  321. gl.bindRenderbuffer(gl.RENDERBUFFER, colorRenderbuffer);
  322. gl.renderbufferStorageMultisample(gl.RENDERBUFFER, samples, this._getRGBAMultiSampleBufferFormat(texture.type), texture.width, texture.height);
  323. gl.framebufferRenderbuffer(gl.FRAMEBUFFER, attachment, gl.RENDERBUFFER, colorRenderbuffer);
  324. texture._MSAAFramebuffer = framebuffer;
  325. texture._MSAARenderBuffer = colorRenderbuffer;
  326. texture.samples = samples;
  327. texture._depthStencilBuffer = depthStencilBuffer;
  328. gl.bindRenderbuffer(gl.RENDERBUFFER, null);
  329. attachments.push(attachment);
  330. }
  331. if (!noDrawBuffers) {
  332. gl.drawBuffers(attachments);
  333. }
  334. } else {
  335. this._bindUnboundFramebuffer(textures[0]._framebuffer);
  336. }
  337. this._bindUnboundFramebuffer(null);
  338. return samples;
  339. };