Orillusion

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.intensity = 0.25;
Engine3D.setting.render.postProcessing.bloom.brightness = 0.25;


//创建渲染器
let renderJob = new ForwardRenderJob(this.scene);
renderJob.addPost(new HDRBloomPost());
Engine3D.startRender(renderJob);

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

参数类型描述
blurXnumber屏幕横向模糊半径。
blurYnumber屏幕纵向模糊半径。
intensitynumber强度设置。
brightnessnumber亮度设置。

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

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


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
ts
import { BoxGeometry, CameraUtil, Color, defaultTexture, DirectLight, Engine3D, ForwardRenderJob, GLTFParser, GUIHelp, HDRBloomPost, LitMaterial, HoverCameraController, MeshRenderer, Object3D, Scene3D, webGPUContext } from '@orillusion/core';

export class Sample_bloom {
	scene: Scene3D;
	constructor() { }

	async run() {
		await Engine3D.init({});
		GUIHelp.init();

		this.scene = new Scene3D();
		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 renderJob = new ForwardRenderJob(this.scene);
		let bloom = new HDRBloomPost();
		bloom.debug();
		
		renderJob.addPost(bloom);
		Engine3D.startRender(renderJob);
	}

	async initScene() {
		// 初始化平行光;
		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 = defaultTexture.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 = defaultTexture.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);
		}

		// 加载外部模型文件;
		let minimalObj = await Engine3D.res.loadGltf('https://cdn.orillusion.com/gltfs/wukong/wukong.gltf');
		this.scene.addChild(minimalObj);
	}
}
new Sample_bloom().run();