TAAPost

TAAPost is a 3D rendering anti-aliasing implementation. In the process of rasterizing 3D rendering, the display objects are stored in the form of a two-dimensional array matrix, and the edges of objects in the original image inevitably have jagged edges. The method used by TAA is to slightly offset the camera according to a certain strategy, so that the objects will get slightly different results during rasterization due to different camera offset values. This is particularly evident at the edges. The color output to the screen is the result of interpolating the historical frame and the current frame, and this result is used for the next interpolation.

// Engine Global Configuration Settings
Engine3D.setting.render.postProcessing.taa.jitterSeedCount = 8;
Engine3D.setting.render.postProcessing.taa.blendFactor = 0.1;
Engine3D.setting.render.postProcessing.taa.sharpFactor = 0.6;
Engine3D.setting.render.postProcessing.taa.sharpPreBlurFactor = 0.5;
Engine3D.setting.render.postProcessing.taa.temporalJitterScale = 0.6;

//Initialize Engine
await Engine3D.init();
// Add post-processing components
let postProcessing = this.scene.addComponent(PostProcessingComponent);
// Add TAAPost
let taaPost = postProcessing.addPost(TAAPost);
// By setting up the taaPost object (the engine's global configuration and the taaPost object based settings here are equivalent)
taaPost.jitterSeedCount = 8;
taaPost.blendFactor = 0.1;
taaPost.sharpFactor = 0.6;
taaPost.sharpPreBlurFactor = 0.5;
taaPost.temporalJitterScale = 0.6;
// Start rendering the view
let view = new View3D();
view.scene = this.scene;
view.camera = mainCamera;
Engine3D.startRenderView(view);

Engine3D.setting.render.postProcessing.taa Configuration Parameters:

Parameter	Type	Description
jitterSeedCount	number	The number of random seeds used for jittering the camera. Default is 8. (Reducing the number can solve some problems where the jitter is too obvious, but the jaggedness will become more obvious.)
blendFactor	number	The coefficient for blending the historical frame and the current frame. The smaller the parameter, the smaller the current frame ratio.
sharpFactor	number	The image sharpening coefficient [0.1,1.9]: the smaller the coefficient, the weaker the sharpening effect and the better the anti-aliasing effect. Conversely, the stronger the sharpening, the weaker the anti-aliasing effect.
sharpPreBlurFactor	number	The scaling factor of the sampling coefficient used when blurring the image.
temporalJitterScale	number	The scaling factor of the random offset value of the jittering camera [0,1]: the smaller the coefficient, the weaker the anti-aliasing effect, and the weaker the pixel jitter.

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { View3D, DirectLight, Engine3D, PostProcessingComponent, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, CameraUtil, webGPUContext, BoxGeometry, TAAPost, AtmosphericComponent } from '@orillusion/core';

class Sample_TAA {
    lightObj: Object3D;
    scene: Scene3D;

    async run() {
        Engine3D.setting.shadow.enable = true;
        Engine3D.setting.shadow.shadowBound = 100;

        await Engine3D.init({
            canvasConfig: {
                devicePixelRatio: 1
            }
        });

        this.scene = new Scene3D();
        this.scene.addComponent(AtmosphericComponent).sunY = 0.6;

        let mainCamera = CameraUtil.createCamera3DObject(this.scene, 'camera');
        mainCamera.perspective(60, webGPUContext.aspect, 1, 5000.0);
        let ctrl = mainCamera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(0, -15, 30);
        await this.initScene();

        let view = new View3D();
        view.scene = this.scene;
        view.camera = mainCamera;
        Engine3D.startRenderView(view);

        let postProcessing = this.scene.addComponent(PostProcessingComponent);
        postProcessing.addPost(TAAPost);
    }

    async initScene() {
        {
            this.lightObj = new Object3D();
            this.lightObj.rotationX = 15;
            this.lightObj.rotationY = 110;
            this.lightObj.rotationZ = 0;
            let lc = this.lightObj.addComponent(DirectLight);
            lc.lightColor = KelvinUtil.color_temperature_to_rgb(5355);
            lc.castShadow = true;
            lc.intensity = 10;
            this.scene.addChild(this.lightObj);
        }

        {
            let mat = new LitMaterial();
            mat.roughness = 1.0;
            mat.metallic = 0.0;

            let floor = new Object3D();
            let mr = floor.addComponent(MeshRenderer);
            mr.geometry = new PlaneGeometry(2000, 2000);
            mr.material = mat;
            this.scene.addChild(floor);
        }

        this.createPlane(this.scene);
    }

    private createPlane(scene: Scene3D) {
        let mat = new LitMaterial();
        mat.roughness = 0.5;
        mat.metallic = 0.2;
        {
            let sphereGeometry = new SphereGeometry(1, 50, 50);
            let obj: Object3D = new Object3D();
            let mr = obj.addComponent(MeshRenderer);
            mr.material = mat;
            mr.geometry = sphereGeometry;
            obj.x = 10;
            obj.y = 2;
            scene.addChild(obj);
        }

        const length = 5;
        for (let i = 0; i < length; i++) {
            let cubeGeometry = new BoxGeometry(1, 10, 1);
            for (let j = 0; j < length; j++) {
                let obj: Object3D = new Object3D();
                let mr = obj.addComponent(MeshRenderer);
                mr.material = mat;
                mr.geometry = cubeGeometry;
                obj.localScale = obj.localScale;
                obj.x = (i - 2.5) * 4;
                obj.z = (j - 2.5) * 4;
                obj.y = 5;
                obj.rotationX = (Math.random() - 0.5) * 90;
                obj.rotationY = (Math.random() - 0.5) * 90;
                obj.rotationZ = (Math.random() - 0.5) * 90;
                scene.addChild(obj);
            }
        }
    }
}

new Sample_TAA().run();