Depth of Field - DepthOfField

The depth of field effect implemented by the engine defines the nearest and farthest distance thresholds from the camera. Objects within the range between the camera and the nearest distance are rendered sharply; once an object exceeds the nearest distance, it becomes increasingly blurred as the distance increases, until it reaches the maximum blur level at the farthest distance.

//Initialize the engine
let engine = await Engine3D.init();

engine.setting.render.postProcessing.depthOfView.near = 150;
engine.setting.render.postProcessing.depthOfView.far = 300;
engine.setting.render.postProcessing.depthOfView.pixelOffset = 1;

// Add a DepthOfFieldPost
let postProcessing = this.scene.addComponent(PostProcessingComponent);
postProcessing.addPost(DepthOfFieldPost); //Depth of field effect.

//Start rendering
let view = new View3D();
view.scene = this.scene;
view.camera = this.camera;
engine.startRenderView(view);

Configuration parameters for engine.setting.render.postProcessing.depthOfView.

Parameter	Type	Description
near	number	Objects closer than this distance will not be blurred
far	number	Objects farther than this distance will receive the maximum amount of blur. Objects between [near,far] are blurred using a factor linearly interpolated between [0,1]
pixelOffset	number	Pixel diffusion distance of the blur effect

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

<

import { DepthOfFieldPost, DirectLight, Engine3D, PostProcessingComponent, View3D, LitMaterial, HoverCameraController, KelvinUtil, MeshRenderer, Object3D, PlaneGeometry, Scene3D, SphereGeometry, SSR_IS_Kernel, CameraUtil, AtmosphericComponent } from '@orillusion/core';
import * as dat from 'dat.gui';

class Sample_DepthOfView {
    lightObj: Object3D;
    scene: Scene3D;
    engine: Engine3D;
    constructor() {}

    async run() {
        this.engine = await Engine3D.init({
            canvasConfig: {
                devicePixelRatio: 1
            },
            setting: {
                shadow: {
                    enable: true,
                    shadowBound: 100
                }
            }
        });

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

        let camera = CameraUtil.createCamera3DObject(this.scene);
        camera.perspective(60, this.engine.aspect, 1, 5000.0);
        let ctrl = camera.object3D.addComponent(HoverCameraController);
        ctrl.setCamera(100, -15, 150);

        await this.initScene(this.scene);

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

        let postProcessing = this.scene.addComponent(PostProcessingComponent);
        let DOFPost = postProcessing.addPost(DepthOfFieldPost);
        DOFPost.near = 160
        DOFPost.far = 550
        DOFPost.pixelOffset = 2

        let GUIHelp = new dat.GUI();
        GUIHelp.addFolder('Depth of Field');
        GUIHelp.add(DOFPost, 'near', 0, 400, 1);
        GUIHelp.add(DOFPost, 'far', 150, 1000, 1);
    }

    async initScene(scene: Scene3D) {
        /******** light *******/
        {
            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 = 5;
            scene.addChild(this.lightObj);
        }

        // load a test gltf model
        let minimalObj = await this.engine.res.loadGltf('https://cdn.orillusion.com/PBR/ToyCar/ToyCar.gltf');
        minimalObj.scaleX = minimalObj.scaleY = minimalObj.scaleZ = 800;
        scene.addChild(minimalObj);

        this.createPlane(scene);
        return true;
    }

    private createPlane(scene: Scene3D) {
        let mat = new LitMaterial();
        {
            let debugGeo = new PlaneGeometry(2000, 2000);
            let obj: Object3D = new Object3D();
            let mr = obj.addComponent(MeshRenderer);
            mr.material = mat;
            mr.geometry = debugGeo;
            scene.addChild(obj);
        }

        {
            let sphereGeometry = new SphereGeometry(10, 50, 50);
            let obj: Object3D = new Object3D();
            let mr = obj.addComponent(MeshRenderer);
            mr.material = mat;
            mr.geometry = sphereGeometry;
            obj.x = 30;
            obj.y = 10;
            scene.addChild(obj);
        }

        {
            let seeds = SSR_IS_Kernel.createSeeds();
            let sphereGeometry = new SphereGeometry(2, 50, 50);
            for (let i = 0; i < seeds.length; i++) {
                let pt = seeds[i];
                let obj: Object3D = new Object3D();
                let mr = obj.addComponent(MeshRenderer);
                mr.material = mat;
                mr.geometry = sphereGeometry;

                obj.y = pt.z;
                obj.x = pt.x;
                obj.z = pt.y;
                scene.addChild(obj);
            }
        }
    }
}

new Sample_DepthOfView().run();