postprocessing

> 编程语言

开源

一个用于 three.js 的后处理库。

2.8K stars0 点赞1 次浏览

访问官网 GitHub

工具介绍

一个用于 three.js 的后处理库。

后期处理

一个用于 three.js 的后期处理库。

演示 · 沙盒 · 文档 · 维基

安装

此库需要同级依赖 three。

bash

npm install three postprocessing

使用

后期处理引入了通道（pass）和效果（effect）的概念，通过全屏图像处理工具来扩展常见的渲染工作流程。为了获得最佳的后期处理工作流程，应使用以下 WebGL 属性：

javascript

import { WebGLRenderer } from "three";

const renderer = new WebGLRenderer({
	powerPreference: "high-performance",
	antialias: false,
	stencil: false,
	depth: false
});

EffectComposer 用于管理和运行各个处理通道。通常的做法是使用 RenderPass 作为第一个通道，以自动清除缓冲区并渲染场景，供后续处理使用。全屏图像效果通过 EffectPass 进行渲染。有关如何设置渲染器、场景和相机的更多信息，请参考 three.js 的使用示例。

javascript

import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect()));

requestAnimationFrame(function render() {

	requestAnimationFrame(render);
	composer.render();

});