序言

本章将对画面进行高级渲染，使用threejs提供的EffectCompose，该类管理了产生最终视觉效果的后期处理过程链，使用通道可以将高级效果逐一设置。例如：扫描线和失真模拟电视屏幕，在指定场景上渲染新场景等。

目录结构

资源目录里面的结构不变，点击传送门快速查看。

|__src|__assets|__js|    |__base     基础类文件夹|     |__Camera.js 相机类|   |__geometries   定制的物体类文件夹|  |__materials    材质类文件夹|     |__Floor.js 地面材质|   |__passes   合成器通道文件夹|       |__Blur.js    模糊着色器|        |__Glows.js     发光着色器|  |__utils    工具类文件夹|     |__Sizes.js  画布大小控制类|       |__EventEmitter.js 基础事件处理器|     |__Time.js  动画刷新|   |__world    精灵类文件夹|     |__index.js 精灵类|        |__Floor.js 地面类|    |__Application.js   初始化游戏的文件 【新增--合成器需要的通道代码】|__index.js        入口|__index.css      小项目，样式一丢丢

代码一览

Blur.js代码

import shaderFragment from "../../assets/shaders/blur/fragment.glsl";
import shaderVertex from "../../assets/shaders/blur/vertex.glsl";export default {uniforms: {tDiffuse: { type: "t", value: null },uResolution: { type: "v2", value: null },uStrength: { type: "v2", value: null },},vertexShader: shaderVertex,fragmentShader: shaderFragment,
};

Glows.js代码

import shaderFragment from "../../assets/shaders/glows/fragment.glsl";
import shaderVertex from "../../assets/shaders/glows/vertex.glsl";export default {uniforms: {tDiffuse: { type: "t", value: null },uPosition: { type: "v2", value: null },uRadius: { type: "f", value: null },uColor: { type: "v3", value: null },uAlpha: { type: "f", value: null },},vertexShader: shaderVertex,fragmentShader: shaderFragment,
};

Application.js代码


import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";import BlurPass from "./passes/Blur.js";
import GlowsPass from "./passes/Glows.js";export default class Application extends React.Component {componentDidMount(){...//设置模型后期合成处理this.setPasses();...}...setPasses(){this.passes = {};//实现后期处理效果 该类管理了产生最终视觉效果的后期处理过程链  根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上this.passes.composer = new EffectComposer(this.renderer);//创建一个通道  该通道在指定的场景和相机的基础上渲染出一个新的场景   只会渲染场景，不会把结果输出到场景上this.passes.renderPass = new RenderPass(this.scene, this.camera.instance);//使用通道传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道 产生各种模糊效果和高级滤镜。this.passes.horizontalBlurPass = new ShaderPass(BlurPass);//给着色器传参this.passes.horizontalBlurPass.strength = 0;this.passes.horizontalBlurPass.material.uniforms.uResolution.value = new THREE.Vector2(this.sizes.viewport.width, this.sizes.viewport.height);this.passes.horizontalBlurPass.material.uniforms.uStrength.value = new THREE.Vector2(this.passes.horizontalBlurPass.strength, 0);this.passes.vertivalBlurPass = new ShaderPass(BlurPass);this.passes.vertivalBlurPass.strength = 0;this.passes.vertivalBlurPass.material.uniforms.uResolution.value = new THREE.Vector2(this.sizes.viewport.width, this.sizes.viewport.height);this.passes.vertivalBlurPass.material.uniforms.uStrength.value = new THREE.Vector2(this.passes.horizontalBlurPass.strength, 0);this.passes.glowPass = new ShaderPass(GlowsPass);this.passes.glowPass.color = '#ffcfe0';this.passes.glowPass.material.uniforms.uPosition.value = new THREE.Vector2(0, 0.25);this.passes.glowPass.material.uniforms.uRadius.value = 0.7;this.passes.glowPass.material.uniforms.uColor.value = new THREE.Color(this.passes.glowPass.color);this.passes.glowPass.material.uniforms.uAlpha.value = 0.55;//将后期处理通道依次添加this.passes.composer.addPass(this.passes.renderPass);this.passes.composer.addPass(this.passes.horizontalBlurPass);this.passes.composer.addPass(this.passes.vertivalBlurPass);this.passes.composer.addPass(this.passes.glowPass);//监听刷新this.time.on('tick', () => {this.passes.composer.render();})}...
}

代码解读

Blur.js与Glows.js分别为模糊与发光着色器，文件内直接引用了gsls文件，各自都在资源包内，可以在资源包章节下载。
Application.js中，首先实例化EffectComposer，来管理后期处理通道；
使用RenderPass在当前场景上渲染一个新场景；
使用通道传入自定义着色器ShaderPass；
最后使用addPass逐一添加到通道中。

运行结果

处理后

处理前

Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】相关推荐

Threejs系列--9游戏开发--沙漠赛车游戏【基础场景渲染】
Threejs系列--9游戏开发--沙漠赛车游戏[基础场景渲染] 序言准备工作目录结构代码一览 index.js代码 index.css代码 Camera.js代码 Sizes.js代码 App ...
Threejs系列--11游戏开发--沙漠赛车游戏【初步加载地面】
Threejs系列--11游戏开发--沙漠赛车游戏[初步加载地面] 序言目录结构代码一览 world/index.js代码 world/Floor.js代码 materials/Floor.js代 ...
Threejs系列--22游戏开发--沙漠赛车游戏【布置游戏开始场景】
Threejs系列--22游戏开发--沙漠赛车游戏[布置游戏开始场景] 序言目录结构代码一览 index.js代码 Objects.js代码 Materials.js代码 materials/Fl ...
Threejs系列--10游戏开发--沙漠赛车游戏【基础事件处理器】
Threejs系列--9游戏开发--沙漠赛车游戏[基础事件处理器] 序言目录结构代码一览 Time.js代码 EventEmitter.js代码 Sizes.js代码 Application.js ...
Threejs系列--16游戏开发--沙漠赛车游戏【loading与start切换效果】
Threejs系列--16游戏开发--沙漠赛车游戏[loading与start切换效果] 序言目录结构新增依赖代码一览 world/index.js代码代码解读运行结果序言本章将使页面中 ...
Threejs系列--14游戏开发--沙漠赛车游戏【纹理贴图之loading加载】
Threejs系列--14游戏开发--沙漠赛车游戏[纹理贴图之loading加载] 序言目录结构代码一览 world/index.js代码 Application.js代码代码解读运行结果序 ...
Threejs系列--18游戏开发--沙漠赛车游戏【loading资源加载进度条】
Threejs系列--18游戏开发--沙漠赛车游戏[loading资源加载进度条] 序言目录结构代码一览 AreaFloorBorderBufferGeometry.js代码 AreaFloorB ...
jpct-ae开发3D赛车游戏
http://magicbird.iteye.com/blog/1578367 jpct-ae开发3D赛车游戏博客分类: jpct ae jpct-ae游戏引擎的资料比较少,本人是在官网中hellow ...
libGDX游戏开发之修改游戏帧数FPS（十三）
libGDX游戏开发之修改游戏帧数FPS(十三) libGDX系列,游戏开发有unity3D巴拉巴拉的,为啥还用java开发?因为我是Java程序员emm-国内用libgdx比较少,多数情况需要去官网 ...

Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】

Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】

序言

目录结构

代码一览

Blur.js代码

Glows.js代码

Application.js代码

代码解读

运行结果

Threejs系列--13游戏开发--沙漠赛车游戏【使用效果合成器添加高级效果】相关推荐

最新文章

热门文章