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 配置参数。
参数 | 类型 | 描述 |
---|---|---|
blurX | number | 屏幕横向模糊半径。 |
blurY | number | 屏幕纵向模糊半径。 |
strength | number | 泛光强度。 |
radius | number | 泛光半径。 |
luminosityThreshold | number | 泛光强度过滤阈值。 |
一般我们可以通过对物体材质添加发光贴图和颜色来控制物体的发光效果:
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;
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()