Orillusion

简体中文

English

简体中文

English

Appearance

HDR 屏幕泛光 - HDRBloom ​

一种屏幕后期效果，也叫高光溢出，是一种光学效果；屏幕颜色内亮度高于阈值的部分会表现出扩散到周围像素中，并且随距离的增加而递减，形成一种发光朦胧的效果。

ts
//初始化引擎
await Engine3D.init();

Engine3D.setting.render.postProcessing.bloom.blurX = 4;
Engine3D.setting.render.postProcessing.bloom.blurY = 4;
Engine3D.setting.render.postProcessing.bloom.strength = 0.25;
Engine3D.setting.render.postProcessing.bloom.radius = 0.25;

// 添加 HDRBloomPost
let postProcessing = this.scene.addComponent(PostProcessingComponent);
postProcessing.addPost(HDRBloomPost);

//开始渲染
let view = new View3D();
view.scene = this.scene;
view.camera = this.camera;
Engine3D.startRenderView(view);
//初始化引擎
await Engine3D.init();

Engine3D.setting.render.postProcessing.bloom.blurX = 4;
Engine3D.setting.render.postProcessing.bloom.blurY = 4;
Engine3D.setting.render.postProcessing.bloom.strength = 0.25;
Engine3D.setting.render.postProcessing.bloom.radius = 0.25;

// 添加 HDRBloomPost
let postProcessing = this.scene.addComponent(PostProcessingComponent);
postProcessing.addPost(HDRBloomPost);

//开始渲染
let view = new View3D();
view.scene = this.scene;
view.camera = this.camera;
Engine3D.startRenderView(view);

Engine3D.setting.render.postProcessing.bloom 配置参数。

参数类型描述
blurXnumber屏幕横向模糊半径。
blurYnumber屏幕纵向模糊半径。
strengthnumber泛光强度。
radiusnumber泛光半径。
luminosityThresholdnumber泛光强度过滤阈值。

一般我们可以通过对物体材质添加发光贴图和颜色来控制物体的发光效果：

ts
let mat = new LitMaterial();
mat.emissiveMap = Engine3D.res.whiteTexture;
mat.emissiveColor = new Color(1.0, 0.0, 0.0);
mat.emissiveIntensity = 3;
let mat = new LitMaterial();
mat.emissiveMap = Engine3D.res.whiteTexture;
mat.emissiveColor = new Color(1.0, 0.0, 0.0);
mat.emissiveIntensity = 3;


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

<
ts
import { BoxGeometry, CameraUtil, Color, View3D, DirectLight, Engine3D, PostProcessingComponent, HDRBloomPost, LitMaterial, HoverCameraController, MeshRenderer, Object3D, Scene3D, webGPUContext, AtmosphericComponent } from '@orillusion/core'
import * as dat from 'dat.gui'

export class Sample_bloom {
    scene: Scene3D

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

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

        let mainCamera = CameraUtil.createCamera3DObject(this.scene)
        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0)
        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController)
        hoverCameraController.setCamera(45, -45, 15)

        await this.initScene()

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

        let postProcessing = this.scene.addComponent(PostProcessingComponent)
        let bloom = postProcessing.addPost(HDRBloomPost)
        bloom.strength = 0.5
        bloom.radius = 0.1
        let GUIHelp = new dat.GUI()
        GUIHelp.addFolder('Depth of Field')
        GUIHelp.add(bloom, 'blurX', 0, 10, 1)
        GUIHelp.add(bloom, 'blurY', 0, 10, 1)
        GUIHelp.add(bloom, 'exposure', 0, 2, 0.1)
        GUIHelp.add(bloom, 'strength', 0, 2, 0.1)
        GUIHelp.add(bloom, 'radius', 0, 2, 0.1)
    }

    async initScene() {
        // add a dir light
        let ligthObj = new Object3D()
        let dl = ligthObj.addComponent(DirectLight)
        dl.lightColor = new Color(1.0, 0.95, 0.84, 1.0)
        ligthObj.transform.rotationX = 45
        this.scene.addChild(ligthObj)

        {
            //emisstive
            let lightMat = new LitMaterial()
            lightMat.emissiveMap = Engine3D.res.whiteTexture
            lightMat.emissiveColor = new Color(1.0, 1.0, 0.0)
            lightMat.emissiveIntensity = 5

            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = -5
            this.scene.addChild(obj)
        }

        {
            //emisstive
            let lightMat = new LitMaterial()
            lightMat.emissiveMap = Engine3D.res.whiteTexture
            lightMat.emissiveColor = new Color(0.0, 1.0, 1.0)
            lightMat.emissiveIntensity = 3

            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = 0
            this.scene.addChild(obj)
        }

        {
            let lightMat = new LitMaterial()
            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = 5
            this.scene.addChild(obj)
        }
    }
}
new Sample_bloom().run()
import { BoxGeometry, CameraUtil, Color, View3D, DirectLight, Engine3D, PostProcessingComponent, HDRBloomPost, LitMaterial, HoverCameraController, MeshRenderer, Object3D, Scene3D, webGPUContext, AtmosphericComponent } from '@orillusion/core'
import * as dat from 'dat.gui'

export class Sample_bloom {
    scene: Scene3D

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

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

        let mainCamera = CameraUtil.createCamera3DObject(this.scene)
        mainCamera.perspective(60, webGPUContext.aspect, 1, 2000.0)
        let hoverCameraController = mainCamera.object3D.addComponent(HoverCameraController)
        hoverCameraController.setCamera(45, -45, 15)

        await this.initScene()

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

        let postProcessing = this.scene.addComponent(PostProcessingComponent)
        let bloom = postProcessing.addPost(HDRBloomPost)
        bloom.strength = 0.5
        bloom.radius = 0.1
        let GUIHelp = new dat.GUI()
        GUIHelp.addFolder('Depth of Field')
        GUIHelp.add(bloom, 'blurX', 0, 10, 1)
        GUIHelp.add(bloom, 'blurY', 0, 10, 1)
        GUIHelp.add(bloom, 'exposure', 0, 2, 0.1)
        GUIHelp.add(bloom, 'strength', 0, 2, 0.1)
        GUIHelp.add(bloom, 'radius', 0, 2, 0.1)
    }

    async initScene() {
        // add a dir light
        let ligthObj = new Object3D()
        let dl = ligthObj.addComponent(DirectLight)
        dl.lightColor = new Color(1.0, 0.95, 0.84, 1.0)
        ligthObj.transform.rotationX = 45
        this.scene.addChild(ligthObj)

        {
            //emisstive
            let lightMat = new LitMaterial()
            lightMat.emissiveMap = Engine3D.res.whiteTexture
            lightMat.emissiveColor = new Color(1.0, 1.0, 0.0)
            lightMat.emissiveIntensity = 5

            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = -5
            this.scene.addChild(obj)
        }

        {
            //emisstive
            let lightMat = new LitMaterial()
            lightMat.emissiveMap = Engine3D.res.whiteTexture
            lightMat.emissiveColor = new Color(0.0, 1.0, 1.0)
            lightMat.emissiveIntensity = 3

            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = 0
            this.scene.addChild(obj)
        }

        {
            let lightMat = new LitMaterial()
            let obj = new Object3D()
            let mr = obj.addComponent(MeshRenderer)
            mr.geometry = new BoxGeometry(3, 3, 3)
            mr.material = lightMat
            obj.transform.x = 5
            this.scene.addChild(obj)
        }
    }
}
new Sample_bloom().run()