create effect renderer. PG: #J3FUED#1

dist/preview release/what's new.md

@@ -22,6 +22,7 @@
 - Added support for sound sprites [Doc](https://doc.babylonjs.com/how_to/playing_sounds_and_music#playing-a-sound-sprite) ([Deltakosh](https://github.com/deltakosh/))
 - Display Oculus Quest controller when using a Quest in WebVR ([TrevorDev](https://github.com/TrevorDev))
 - Added startAndReleaseDragOnPointerEvents property to pointerDragBehavior which can be set to false when using custom drag triggering ([TrevorDev](https://github.com/TrevorDev))
+- Effect renderer to render one or multiple shader effects to a texture ([TrevorDev](https://github.com/TrevorDev))
 
 ### Engine
 - Morph targets now can morph UV channel as well ([Deltakosh](https://github.com/deltakosh/))

src/Materials/Textures/texture.ts

@@ -10,6 +10,7 @@ import { _AlphaState } from "../../States/index";
 import { _TypeStore } from '../../Misc/typeStore';
 import { _DevTools } from '../../Misc/devTools';
 import { IInspectable } from '../../Misc/iInspectable';
+import { Engine } from '../../Engines/engine';
 
 declare type CubeTexture = import("../../Materials/Textures/cubeTexture").CubeTexture;
 declare type MirrorTexture = import("../../Materials/Textures/mirrorTexture").MirrorTexture;
@@ -257,7 +258,7 @@ export class Texture extends BaseTexture {
      * This represents a texture in babylon. It can be easily loaded from a network, base64 or html input.
      * @see http://doc.babylonjs.com/babylon101/materials#texture
      * @param url define the url of the picture to load as a texture
-     * @param scene define the scene the texture will belong to
+     * @param scene define the scene or engine the texture will belong to
      * @param noMipmap define if the texture will require mip maps or not
      * @param invertY define if the texture needs to be inverted on the y axis during loading
      * @param samplingMode define the sampling mode we want for the texture while fectching from it (Texture.NEAREST_SAMPLINGMODE...)
@@ -267,8 +268,8 @@ export class Texture extends BaseTexture {
      * @param deleteBuffer define if the buffer we are loading the texture from should be deleted after load
      * @param format define the format of the texture we are trying to load (Engine.TEXTUREFORMAT_RGBA...)
      */
-    constructor(url: Nullable<string>, scene: Nullable<Scene>, noMipmap: boolean = false, invertY: boolean = true, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: Nullable<() => void> = null, onError: Nullable<(message?: string, exception?: any) => void> = null, buffer: Nullable<string | ArrayBuffer | HTMLImageElement | Blob> = null, deleteBuffer: boolean = false, format?: number) {
-        super(scene);
+    constructor(url: Nullable<string>, sceneOrEngine: Nullable<Scene | Engine>, noMipmap: boolean = false, invertY: boolean = true, samplingMode: number = Texture.TRILINEAR_SAMPLINGMODE, onLoad: Nullable<() => void> = null, onError: Nullable<(message?: string, exception?: any) => void> = null, buffer: Nullable<string | ArrayBuffer | HTMLImageElement | Blob> = null, deleteBuffer: boolean = false, format?: number) {
+        super((sceneOrEngine && (sceneOrEngine as Scene).getClassName && (sceneOrEngine as Scene).getClassName() === "Scene") ? (sceneOrEngine as Scene) : null);
 
         this.name = url || "";
         this.url = url;
@@ -281,12 +282,13 @@ export class Texture extends BaseTexture {
             this._format = format;
         }
 
-        scene = this.getScene();
+        var scene = this.getScene();
+        var engine = (sceneOrEngine && (sceneOrEngine as Engine).getCaps) ? (sceneOrEngine as Engine) : (scene ? scene.getEngine() : null);
 
-        if (!scene) {
+        if (!engine) {
             return;
         }
-        scene.getEngine().onBeforeTextureInitObservable.notifyObservers(this);
+        engine.onBeforeTextureInitObservable.notifyObservers(this);
 
         let load = () => {
             if (this._texture) {
@@ -331,8 +333,8 @@ export class Texture extends BaseTexture {
         this._texture = this._getFromCache(this.url, noMipmap, samplingMode, invertY);
 
         if (!this._texture) {
-            if (!scene.useDelayedTextureLoading) {
-                this._texture = scene.getEngine().createTexture(this.url, noMipmap, invertY, scene, samplingMode, load, onError, this._buffer, undefined, this._format);
+            if (!scene || !scene.useDelayedTextureLoading) {
+                this._texture = engine.createTexture(this.url, noMipmap, invertY, scene, samplingMode, load, onError, this._buffer, undefined, this._format);
                 if (deleteBuffer) {
                     delete this._buffer;
                 }

src/Materials/effectRenderer.ts

@@ -0,0 +1,126 @@
+import { Nullable } from '../types';
+import { Texture } from '../Materials/Textures/texture';
+import { Engine } from '../Engines/engine';
+import { VertexBuffer } from '../Meshes/buffer';
+import { Viewport } from '../Maths/math';
+import { Constants } from '../Engines/constants';
+import { Observable } from '../Misc/observable';
+import { Effect } from './effect';
+import { DataBuffer } from '../Meshes/dataBuffer';
+
+/**
+ * Helper class to render one or more effects
+ */
+export class EffectRenderer {
+    // Fullscreen quad buffers
+    private static _Vertices = [1, 1, -1, 1, -1, -1, 1, -1];
+    private static _Indices = [0, 1, 2, 0, 2, 3];
+    private _vertexBuffers: {[key: string]: VertexBuffer};
+    private _indexBuffer: DataBuffer;
+
+    private _tmpScreenBuffer: Nullable<Texture> = null;
+
+    /**
+     * Creates an effect renderer
+     * @param engine the engine to use for rendering
+     */
+    constructor(public engine: Engine) {
+        this._vertexBuffers = {
+            [VertexBuffer.PositionKind]: new VertexBuffer(engine, EffectRenderer._Vertices, VertexBuffer.PositionKind, false, false, 2),
+        };
+        this._indexBuffer = engine.createIndexBuffer(EffectRenderer._Indices);
+    }
+
+    /**
+     * renders one or more effects to a specified texture
+     * @param effectWrappers list of effects to renderer
+     * @param outputTexture texture to draw to, if null it will render to the screen
+     */
+    render(effectWrappers: Array<EffectWrapper> | EffectWrapper, outputTexture: Nullable<Texture> = null) {
+        if (!Array.isArray(effectWrappers)) {
+            effectWrappers = [effectWrappers];
+        }
+        effectWrappers.forEach((effectWrapper, i) => {
+            var renderTo = outputTexture;
+            if ((effectWrappers as Array<EffectWrapper>).length > 1 && i != (effectWrappers as Array<EffectWrapper>).length - 1) {
+                if (!this._tmpScreenBuffer) {
+                    var internalTexture = this.engine.createRenderTargetTexture(
+                        {
+                            width: Math.floor(this.engine.getRenderWidth(true)),
+                            height: Math.floor(this.engine.getRenderHeight(true)),
+                        },
+                        {
+                            generateDepthBuffer: false,
+                            generateStencilBuffer: false,
+                            generateMipMaps: false,
+                            samplingMode: Constants.TEXTURE_NEAREST_NEAREST,
+                        },
+                    );
+                    this._tmpScreenBuffer = new Texture("", null);
+                    this._tmpScreenBuffer._texture = internalTexture;
+                }
+                renderTo = this._tmpScreenBuffer;
+            }else {
+                renderTo = outputTexture;
+            }
+
+            // for any next effect make it's input the output of the previous effect
+            if (i !== 0) {
+                effectWrapper.effect.onBindObservable.addOnce(() => {
+                    effectWrapper.effect.setTexture("textureSampler", this._tmpScreenBuffer);
+                });
+            }
+
+            // Reset state
+            this.engine.setViewport(new Viewport(0, 0, 1, 1));
+            this.engine.enableEffect(effectWrapper.effect);
+
+            // Bind buffers
+            if (renderTo) {
+                this.engine.bindFramebuffer(renderTo.getInternalTexture()!);
+            }
+            this.engine.bindBuffers(this._vertexBuffers, this._indexBuffer, effectWrapper.effect);
+            effectWrapper.onApplyObservable.notifyObservers({});
+
+            // Render
+            this.engine.drawElementsType(Constants.MATERIAL_TriangleFillMode, 0, 6);
+            if (renderTo) {
+                this.engine.unBindFramebuffer(renderTo.getInternalTexture()!);
+            }
+        });
+    }
+
+    /**
+     * Disposes of the effect renderer
+     */
+    dispose() {
+        if (this._tmpScreenBuffer) {
+            this._tmpScreenBuffer.dispose();
+        }
+    }
+}
+
+/**
+ * Wraps an effect to be used for rendering
+ */
+export class EffectWrapper {
+    private static _counter = 0;
+    /**
+     * Event that is fired right before the effect is drawn (should be used to update uniforms)
+     */
+    public onApplyObservable = new Observable<{}>();
+    /**
+     * The underlying effect
+     */
+    public effect: Effect;
+
+    /**
+     * Creates an effect to be renderer
+     * @param creationOptions options to create the effect
+     */
+    constructor(creationOptions: {engine: Engine, fragmentShader: string, attributeNames: Array<string>, uniformNames: Array<string>, samplerNames: Array<string>}) {
+        var shaderName = "EffectWrapperEffect" + EffectWrapper._counter++;
+        Effect.ShadersStore[shaderName + "FragmentShader"] = creationOptions.fragmentShader;
+        this.effect = creationOptions.engine.createEffect({vertex: "postprocess", fragment: shaderName}, creationOptions.attributeNames, creationOptions.uniformNames, creationOptions.samplerNames, "", undefined);
+    }
+}

src/Materials/index.ts

@@ -14,4 +14,5 @@ export * from "./standardMaterial";
 export * from "./Textures/index";
 export * from "./uniformBuffer";
 export * from "./materialFlags";
-export * from "./Node/index";
+export * from "./Node/index";
+export * from "./effectRenderer";