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

序言

本章将对画面进行高级渲染，使用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逐一添加到通道中。

运行结果

处理后

处理前