effectRenderer.js 8.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import { VertexBuffer } from "../Buffers/buffer.js";
  2. import { Viewport } from "../Maths/math.viewport.js";
  3. import { Observable } from "../Misc/observable.js";
  4. import { Effect } from "./effect.js";
  5. import { DrawWrapper } from "./drawWrapper.js";
  6. // Prevents ES6 Crash if not imported.
  7. import "../Shaders/postprocess.vertex.js";
  8. // Fullscreen quad buffers by default.
  9. const defaultOptions = {
  10. positions: [1, 1, -1, 1, -1, -1, 1, -1],
  11. indices: [0, 1, 2, 0, 2, 3],
  12. };
  13. /**
  14. * Helper class to render one or more effects.
  15. * You can access the previous rendering in your shader by declaring a sampler named textureSampler
  16. */
  17. export class EffectRenderer {
  18. /**
  19. * Creates an effect renderer
  20. * @param engine the engine to use for rendering
  21. * @param options defines the options of the effect renderer
  22. */
  23. constructor(engine, options = defaultOptions) {
  24. this._fullscreenViewport = new Viewport(0, 0, 1, 1);
  25. const positions = options.positions ?? defaultOptions.positions;
  26. const indices = options.indices ?? defaultOptions.indices;
  27. this.engine = engine;
  28. this._vertexBuffers = {
  29. [VertexBuffer.PositionKind]: new VertexBuffer(engine, positions, VertexBuffer.PositionKind, false, false, 2),
  30. };
  31. this._indexBuffer = engine.createIndexBuffer(indices);
  32. this._onContextRestoredObserver = engine.onContextRestoredObservable.add(() => {
  33. this._indexBuffer = engine.createIndexBuffer(indices);
  34. for (const key in this._vertexBuffers) {
  35. const vertexBuffer = this._vertexBuffers[key];
  36. vertexBuffer._rebuild();
  37. }
  38. });
  39. }
  40. /**
  41. * Sets the current viewport in normalized coordinates 0-1
  42. * @param viewport Defines the viewport to set (defaults to 0 0 1 1)
  43. */
  44. setViewport(viewport = this._fullscreenViewport) {
  45. this.engine.setViewport(viewport);
  46. }
  47. /**
  48. * Binds the embedded attributes buffer to the effect.
  49. * @param effect Defines the effect to bind the attributes for
  50. */
  51. bindBuffers(effect) {
  52. this.engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effect);
  53. }
  54. /**
  55. * Sets the current effect wrapper to use during draw.
  56. * The effect needs to be ready before calling this api.
  57. * This also sets the default full screen position attribute.
  58. * @param effectWrapper Defines the effect to draw with
  59. */
  60. applyEffectWrapper(effectWrapper) {
  61. this.engine.setState(true);
  62. this.engine.depthCullingState.depthTest = false;
  63. this.engine.stencilState.stencilTest = false;
  64. this.engine.enableEffect(effectWrapper._drawWrapper);
  65. this.bindBuffers(effectWrapper.effect);
  66. effectWrapper.onApplyObservable.notifyObservers({});
  67. }
  68. /**
  69. * Saves engine states
  70. */
  71. saveStates() {
  72. this._savedStateDepthTest = this.engine.depthCullingState.depthTest;
  73. this._savedStateStencilTest = this.engine.stencilState.stencilTest;
  74. }
  75. /**
  76. * Restores engine states
  77. */
  78. restoreStates() {
  79. this.engine.depthCullingState.depthTest = this._savedStateDepthTest;
  80. this.engine.stencilState.stencilTest = this._savedStateStencilTest;
  81. }
  82. /**
  83. * Draws a full screen quad.
  84. */
  85. draw() {
  86. this.engine.drawElementsType(0, 0, 6);
  87. }
  88. _isRenderTargetTexture(texture) {
  89. return texture.renderTarget !== undefined;
  90. }
  91. /**
  92. * renders one or more effects to a specified texture
  93. * @param effectWrapper the effect to renderer
  94. * @param outputTexture texture to draw to, if null it will render to the screen.
  95. */
  96. render(effectWrapper, outputTexture = null) {
  97. // Ensure effect is ready
  98. if (!effectWrapper.effect.isReady()) {
  99. return;
  100. }
  101. this.saveStates();
  102. // Reset state
  103. this.setViewport();
  104. const out = outputTexture === null ? null : this._isRenderTargetTexture(outputTexture) ? outputTexture.renderTarget : outputTexture;
  105. if (out) {
  106. this.engine.bindFramebuffer(out);
  107. }
  108. this.applyEffectWrapper(effectWrapper);
  109. this.draw();
  110. if (out) {
  111. this.engine.unBindFramebuffer(out);
  112. }
  113. this.restoreStates();
  114. }
  115. /**
  116. * Disposes of the effect renderer
  117. */
  118. dispose() {
  119. const vertexBuffer = this._vertexBuffers[VertexBuffer.PositionKind];
  120. if (vertexBuffer) {
  121. vertexBuffer.dispose();
  122. delete this._vertexBuffers[VertexBuffer.PositionKind];
  123. }
  124. if (this._indexBuffer) {
  125. this.engine._releaseBuffer(this._indexBuffer);
  126. }
  127. if (this._onContextRestoredObserver) {
  128. this.engine.onContextRestoredObservable.remove(this._onContextRestoredObserver);
  129. this._onContextRestoredObserver = null;
  130. }
  131. }
  132. }
  133. /**
  134. * Wraps an effect to be used for rendering
  135. */
  136. export class EffectWrapper {
  137. /**
  138. * The underlying effect
  139. */
  140. get effect() {
  141. return this._drawWrapper.effect;
  142. }
  143. set effect(effect) {
  144. this._drawWrapper.effect = effect;
  145. }
  146. /**
  147. * Creates an effect to be renderer
  148. * @param creationOptions options to create the effect
  149. */
  150. constructor(creationOptions) {
  151. /**
  152. * Event that is fired right before the effect is drawn (should be used to update uniforms)
  153. */
  154. this.onApplyObservable = new Observable();
  155. let effectCreationOptions;
  156. const uniformNames = creationOptions.uniformNames || [];
  157. if (creationOptions.vertexShader) {
  158. effectCreationOptions = {
  159. fragmentSource: creationOptions.fragmentShader,
  160. vertexSource: creationOptions.vertexShader,
  161. spectorName: creationOptions.name || "effectWrapper",
  162. };
  163. }
  164. else {
  165. // Default scale to use in post process vertex shader.
  166. uniformNames.push("scale");
  167. effectCreationOptions = {
  168. fragmentSource: creationOptions.fragmentShader,
  169. vertex: "postprocess",
  170. spectorName: creationOptions.name || "effectWrapper",
  171. };
  172. // Sets the default scale to identity for the post process vertex shader.
  173. this.onApplyObservable.add(() => {
  174. this.effect.setFloat2("scale", 1, 1);
  175. });
  176. }
  177. const defines = creationOptions.defines ? creationOptions.defines.join("\n") : "";
  178. this._drawWrapper = new DrawWrapper(creationOptions.engine);
  179. if (creationOptions.useShaderStore) {
  180. effectCreationOptions.fragment = effectCreationOptions.fragmentSource;
  181. if (!effectCreationOptions.vertex) {
  182. effectCreationOptions.vertex = effectCreationOptions.vertexSource;
  183. }
  184. delete effectCreationOptions.fragmentSource;
  185. delete effectCreationOptions.vertexSource;
  186. this.effect = creationOptions.engine.createEffect(effectCreationOptions, creationOptions.attributeNames || ["position"], uniformNames, creationOptions.samplerNames, defines, undefined, creationOptions.onCompiled, undefined, undefined, creationOptions.shaderLanguage);
  187. }
  188. else {
  189. this.effect = new Effect(effectCreationOptions, creationOptions.attributeNames || ["position"], uniformNames, creationOptions.samplerNames, creationOptions.engine, defines, undefined, creationOptions.onCompiled, undefined, undefined, undefined, creationOptions.shaderLanguage);
  190. this._onContextRestoredObserver = creationOptions.engine.onContextRestoredObservable.add(() => {
  191. this.effect._pipelineContext = null; // because _prepareEffect will try to dispose this pipeline before recreating it and that would lead to webgl errors
  192. this.effect._prepareEffect();
  193. });
  194. }
  195. }
  196. /**
  197. * Disposes of the effect wrapper
  198. */
  199. dispose() {
  200. if (this._onContextRestoredObserver) {
  201. this.effect.getEngine().onContextRestoredObservable.remove(this._onContextRestoredObserver);
  202. this._onContextRestoredObserver = null;
  203. }
  204. this.effect.dispose();
  205. }
  206. }
  207. //# sourceMappingURL=effectRenderer.js.map