BabylonJS / Editor

Community managed visual editor for Babylon.js
http://editor.babylonjs.com/
813 stars 232 forks source link

Access Default Rendering Pipeline runtime? #269

Closed tapanij closed 2 years ago

tapanij commented 3 years ago

Hey. Is it possible to get default rendering pipeline created by the editor in runtime? I could disable it in editor and create new in a script but then the scene in the editor would not look like as intended and gets harder to test different values. What I need is to disable or enable fxaa runtime.

PartyGodTroy commented 3 years ago

Hey @tapanij.

The Scene object has a postProcessRenderPipelineManager property, which has a supportedPipelines property. The supportedPipelines property contains a list of rendering pipelines in the scene.

The example below should be a good jumping-on point, attach this script to your scene. Take a look at the _setupRenderingPipeline function.

note that the supported pipelines are of type PostProcessRenderPipeline and may not all be DefaultRenderingPipelines depending on what you added.

Also, check out https://doc.babylonjs.com/how_to/how_to_use_postprocessrenderpipeline https://doc.babylonjs.com/how_to/using_default_rendering_pipeline

Hope that helps 🖖🏾

/**
 * This represents a script that is attached to a node in the editor.
 * Available nodes are:
 *      - Meshes
 *      - Lights
 *      - Cameas
 *      - Transform nodes
 *      - Scenes
 * 
 * You can extend the desired class according to the node type.
 * Example:
 *      export default class MyMesh extends Mesh {
 *          public onUpdate(): void {
 *              this.rotation.y += 0.04;
 *          }
 *      }
 * The function "onInitialize" is called immediately after the constructor is called.
 * The functions "onStart" and "onUpdate" are called automatically.
 */
export default class MyScene extends Scene {
    private _defaultRenderingPipelineRef:DefaultRenderingPipeline
    private _glowLayer:GlowLayer
    private _camera:Camera

    // This value will be visible in the inspector
    @visibleInInspector('number','BlurKernalSize', .5)
    blurKernalSize:number
    /**
     * Override constructor.
     * @warn do not fill.
     */
    // @ts-ignore ignoring the super call as we don't want to re-init
    protected constructor() { }

    /**
     * Called on the node is being initialized.
     * 
     * 
     * This function is called immediatly after the constructor has been called.
     */
    public onInitialize(): void {
        this.enablePhysics(Vector3.Zero(), new CannonJSPlugin())
        // ...
        this._setupRenderingPipeline()

    }

    private _setupRenderingPipeline() {
        // Adding a glow layer, optional
        this._glowLayer = new GlowLayer("glow", this);
        this._glowLayer.intensity = this.blurKernalSize ?? 0.5
        // Here we get the pipeline by its name here it's 'default'. from there you can tweak/add/remove to your liking🧐
        const pipeline = this._defaultRenderingPipelineRef = 
            this.postProcessRenderPipelineManager
            .supportedPipelines
            .find( p => p.name  === 'default') as DefaultRenderingPipeline

        if(pipeline){
            pipeline.glowLayerEnabled = true
        }

    }

    /**
     * Called on the scene starts.
     */
    public onStart(): void {
        // ...

        console.log('scene starting') 
        this.actionManager = new ActionManager(this);
        this.actionManager.registerAction(new ExecuteCodeAction({ trigger: ActionManager.OnKeyDownTrigger, parameter: '0' }, (evt) => {
            if (this.debugLayer && this.debugLayer.isVisible()) {
                this.debugLayer.hide();
            } else {
                this.debugLayer.show();
            }
        }));
    }

    /**
     * Called each frame.
     */
    public onUpdate(): void {

        // ...
    }

    /**
     * Called on a message has been received and sent from a graph.
     * @param message defines the name of the message sent from the graph.
     * @param data defines the data sent in the message.
     * @param sender defines the reference to the graph class that sent the message.
     */
    public onMessage(name: string, data: any, sender: any): void {
        switch (name) {
            case "myMessage":
                // Do something...
                break;
        }
    }
}
julien-moreau commented 3 years ago

Hey @tapanij,

@PartyGodTroy is right you can access the pipeline this way (using the Babylon.JS API). Anyway, I recently added references to these pipelines in the tools.ts file like:

import { defaultRenderingPipelineRef } from "../tools";
...

export default class MyScene extends Scene {
    ...
    public onInitialize(): void {
        ...
        defaultRenderingPipelineRef.glowLayerEnabled = true;
        ...
    }
}

This will be available in the version rc-3 that I'm going to deploy ASAP

PartyGodTroy commented 3 years ago

Awesome! @julien-moreau

julien-moreau commented 3 years ago

@PartyGodTroy, for the rc-3 i have redone ALL inspector tools so they now use React. Are you interested to test them right now and provide some feedbacks/bug reports?

PartyGodTroy commented 3 years ago

@julien-moreau Sure!

julien-moreau commented 2 years ago

Deployed and available in 4.0.1 :)