# Post-processing resources

# brief introduction

Taking into account the complexity of the handwriting post-processing pipeline, for the convenience of developers, the small game framework has built-in post-processing effects, as well as post-processing resources that can simply use them.

# Important attributes and methods

The built-in post-processing effects all use built-in post-processing nodes. For details, please refer to [built-in post-processing nodes](./rg-nodes.md#built-in nodes).

# Instructions

Post-processing resources are currently cannot be created by tools, they can only be created by scripts and attached to camera.

1. Create a new script resource and add it to the main camera of the scene.

2. Modify the content of the script and create a post-processing resource in the onAwake phase.

    import engine from "engine";
    @engine.decorators.serialize("postprocess")
    export default class postprocess extends engine.Script {
        public onAwake() {
            const pp = new engine.PostProcessAsset();
            pp.addBloom();
            pp.addToneMapping("", 0.5);
            this.entity.getComponent<engine.Camera>(engine.Camera).postProcess = pp;
        }
    }
   

3. Play the scene and observe whether the scene has corresponding effects after flooding and tone mapping.

//TODO img

# HDR

The hdr switch on the post-processing resource can determine whether the post-processing process uses high dynamic range.

In the following situations, the hdr switch should be turned on:

1. If the output color of the camera has a high dynamic range, then hdr should also be turned on in the post-processing resources;
2. If the post-processing resources include flooding effects, then turning on hdr will get better results.

# Comparison before and after enabling hdr:

No post-processing	Turn on flood, turn off hdr
Turn on Flood, turn on hdr	Turn on Flood and tone mapping, turn on hdr

# Precautions

1. Please use the interface exposed by the post-processing resource to change the post-processing effect. If you modify the internal data directly, it may not be effective.
2. When adding post-processing effects to addXXX, pass in the name in the first parameter. Then you can modify it according to this name (addXXX passes in the same name to replace, and remove passes in the same name to delete).

   const pp = new engine.PostProcessAsset();
   pp.addBloom("bloom", 20/*radius*/);
   
   // want to modify the range of floodlight
   pp.addBloom("bloom", 15);
   
   // want to remove the floodlight effect
   pp.remove("bloom");