Source

Extra/PostEffect.js

  1. import Color from '../Color';
  2. import RenderTexture from '../Renderers/RenderTexture';
  3. import Sprite from '../Objects/Sprite';
  4. import SpriteCommand from '../Renderers/Commands/SpriteCommand';
  5. import WebGL from '../Renderers/WebGL/RenderWebGL';
  7. /**
  8.  * A class to create post-effects
  9.  *
  10.  * @category Shaders
  11.  */
  12. class PostEffect {
  13.     /**
  14.      * Constructor
  15.      *
  16.      * @param {Program} program A Program instance.
  17.      */
  18.     constructor(program) {
  19.         /**
  20.         * The render API to use
  21.         *
  22.         * @type {RenderAPI}
  23.         * @protected
  24.         */
  25.         this.renderApi = WebGL.getInstance();
  27.         /**
  28.         * Textures where we will apply effects
  29.         *
  30.         * @type {RenderTexture}
  31.         * @private
  32.         */
  33.         this.renderTexture = null;
  35.         /**
  36.         * Full screen sprite with the resulting effects
  37.         *
  38.         * @type {Sprite}
  39.         * @private
  40.         */
  41.         this.sprite = new Sprite();
  42.         this.sprite.setCustomProgram(program);
  43.     }
  45.     /**
  46.      * Init the post effect composer
  47.      *
  48.      * @param {number} width Resulting effect width
  49.      * @param {number} height Resulting effect height
  50.      * @param {boolean=} useDepthBuffer True to use depth buffer (useful in 3D)
  51.      * @param {boolean=} userStencilBuffer True to use stencil buffer
  52.      * @return {PostEffect} A reference to the instance
  53.      */
  54.     init(width, height, useDepthBuffer = true, userStencilBuffer = false) {
  55.         // Init texture
  56.         this.renderTexture = new RenderTexture(width, height, 1, useDepthBuffer, userStencilBuffer);
  58.         // Link resulting texture to the sprite
  59.         this.sprite.setSize(1, -1);
  60.         this.sprite.setTexture(this.renderTexture.getTextures()[0]);
  61.         this.sprite.setTextureRect(0, 0, width, height);
  63.         return this;
  64.     }
  66.     /**
  67.      * Begin
  68.      *
  69.      * @param {Color=} color A Color instance
  70.      */
  71.     begin(color = new Color(30, 30, 30)) {
  72.         if (!this.renderTexture) {
  73.             return;
  74.         }
  76.         this.renderTexture.clear(color);
  77.     }
  79.     /**
  80.      * End
  81.      */
  82.     end() {
  83.         if (!this.renderTexture) {
  84.             return;
  85.         }
  87.         // Display result
  88.         this.renderTexture.display();
  90.         // Draw the full screen quad
  91.         SpriteCommand.draw(this.renderApi, this.sprite);
  92.     }
  94.     /**
  95.      * Render the given scene
  96.      *
  97.      * @param {Scene} scene A Scene instance
  98.      * @param {Camera} camera A Camera instance
  99.      */
  100.     render(scene, camera) {
  101.         this.renderTexture.render(scene, camera);
  102.     }
  104.     /**
  105.      * Set program to use
  106.      *
  107.      * @param {Program} program A Program instance
  108.      * @return {PostEffect} A reference to the instance
  109.      */
  110.     setProgram(program) {
  111.         this.sprite.setCustomProgram(program);
  113.         return this;
  114.     }
  116.     /**
  117.      * Set value of an element from the program
  118.      *
  119.      * @param {string} name Element's name in the shader
  120.      * @param {Type} type Type of value to send
  121.      * @param {Array.<number>|number|boolean|Texture|Float32Array} value A value
  122.      * @return {PostEffect} A reference to the instance
  123.      */
  124.     setEffectValue(name, type, value, groupCount) {
  125.         this.renderApi.setUniform(this.sprite.getCustomProgram(), name, type, value, groupCount);
  127.         return this;
  128.     }
  129. }
  131. export default PostEffect;