学习交流欢迎加群:789723098,博主会将一些demo整理共享
我们都知道,three.js库里面内置了很多着色器通道对象供我们渲染场景,本文将对EffectComposer、RenderPass、FilmPass这三个通道进行学习和实现:
1.RenderPass这个通道会在当前场景(scene)和摄像机(camera)的基础上渲染出一个新场景,新建:
let renderPass = new THREE.RenderPass(scene, camera);
2.FilmPass这个通道通过扫描线和失真模拟电视屏幕效果,实现的效果超有时代感,新建:
/*四个参数分别为粗糙程度,扫描线强度,扫描线数量,是否转换为灰度图*/
let effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
//将渲染结果输出到屏幕
effectFilm.renderToScreen = true;
3.EffectComposer可以理解为着色器通道容器,着色器通道按照先后顺序添加进来并执行,新建:
/*渲染效果组合器,每个通道都按照传入的顺序执行*/
let composer = new THREE.EffectComposer(renderer);
composer.addPass(renderPass);
composer.addPass(effectFilm);
本文实现的demo基于three.js_r86(请自行下载),代码所用js文件和图片都在下载的那个包里面,请读者自行引用。
实现效果: