CodePen view

Apply a special effect on a scene, and toggle it to view how it affects the scene.

configuration.json

{
    "story":
    {
        "uid": "fx-story",
        "name": "Special Effects Story",
        "slug": "fx-story",
        "description": "This is a demonstration of special effects applied to the background",
        "default": "scene-0",

        "scenes":
        [
            {
                "uid": "scene-0",
                "name": "First scene",
                "slug": "first-scene",
                "description": "This is the first and only scene",
                "fx": "fxSet-overall",

                "media":
                {
                    "uid": "media-0",
                    "type": "image",
                    "fx": "fxSet-background",

                    "source":
                    {
                        "format": "equi",
                        "url": "01-forest.jpg"
                    }
                }
            }
        ]
    },

    "postProcessing":
    {
        "fxSets":
        [
            {
                "uid": "fxSet-background",
                "set":
                [
                    {
                        "type": "HorizontalBlurShader",
                        "uid": "fxSet-background-horizontalblur-0",

                        "params":
                        {
                            "h": 0.0001
                        }
                    },

                    {
                        "type": "VerticalBlurShader",
                        "uid": "fxSet-background-verticalblur-0",

                        "params":
                        {
                            "v": 0.001
                        }
                    },

                    {
                        "type": "FilmShader",
                        "uid": "fxSet-background-film-0",

                        "params":
                        {
                            "nIntensity": 0.1,
                            "sIntensity": 0.8,
                            "sCount": 1024,
                            "grayscale": 0
                        }
                    },

                    {
                        "type": "SepiaShader",
                        "uid": "fxSet-background-sepia-0",

                        "params":
                        {
                            "amount": 0.7
                        }
                    }
                ]
            },

            {
                "uid": "fxSet-overall",
                "set":
                [
                    {
                        "type": "VignetteShader",
                        "uid": "fxSet-overall-vignette-0",

                        "params":
                        {
                            "offset": 0.20,
                            "darkness": 26
                        }
                    }
                ]
            }
        ]
    },

    "actions":
    [
        {
            "uid": "action-toggle-fx",
            "target": "viewer.renderer.renderPipeline",

            "property":
            {
                "name": "enabled",
                "operation": "toggle"
            }
        }
    ],

    "plugins":
    {
        "prefix": "../../plugins/",

        "engines":
        [
            {
                "uid": "org.forgejs.simplebutton",
                "url": "SimpleButton/"
            }
        ],

        "instances":
        [
            {
                "uid": "simplebutton-fx-enable",
                "engine": "org.forgejs.simplebutton",
                "enabled": true,

                "options":
                {
                    "bottom": 10,
                    "right": 10,
                    "width": 100,
                    "height": 50,
                    "value": "Toggle FX"
                },

                "events":
                {
                    "onClick": ["action-toggle-fx"]
                }
            }
        ]
    }
}

Back to samples

3rd Jan 2017