three.js通过自定义后期处理实现智慧城市扫光效果

智慧城市中扫光效果的实现：

       在一些大屏可视化的智慧城市项目中，通常会在场景中加入一些酷炫的特效，而类似雷达的扫光效果就是其中之一，其实现原理很简单就是找到对应的世界坐标着色，有了世界坐标无论你的扫光效果或者特效，无论是圆形（直接用距离）扫还是方形（距离）或者五角星（距离加上极坐标）等等都可以。

       这说的有点简单了，就像是开车的步骤，很简单，先上车，然后点火，最后是开车。严谨的态度告诉我们要更加深入的讨论，接下来让我们一起深入的学习一下

实现方式一：着色器材质

        通过观察基本可以确定没有办法通过three.js自带的一些材质或者灯光来实现，所以就离不开着色器了，在我之前的文章：three.js通过自定义着色器实现智慧城市扫光效果中通过给定场景中的box对象和plane对象的着色器材质来实现扫光效果，原理就是知道需要被光扫的片元，也就是三维场景的中坐标，在着色器材质中场景坐标比较容易获取，只需要从顶点着色器传到片元着色器即可，具体的可以去翻之前的文章。

实现方式二：自定义后期处理

       另外一种方式的扫光效果是通过着色器实现，那就会有一个非常大的问题，如果要添加特效的模型呢，也就是.glb或者.fbx格式的模型，或者是一些是用自带材质的对象，那总不能把特效材质覆盖了模型原有的材质吧，特别是一些已经烘焙好的模型，里面已经包含了光照、阴影、贴图等信息，这个时候为了不影响原来的材质，只能通过后期处理来实现了。

优点：

1.相对于方法一中的着色器材质，后期处理的性能更加好，计算量只和屏幕分辨率有关系，所以对于显卡的计算量较小；

2.在这里可以不覆盖原来的材质，在上面进行相加，也就是假设你原来材质的颜色值是color,特效的颜色值是scanColor，可以进行相加而不是覆盖；

缺点：这里（不是指所有的后期处理）有一个小缺点就是没有办法区分场景中的物体，也就是说场景中的符合条件的片元都会被特效影响相当于是整个屏幕中的对象

       回到再开始且反复提到的，要获取到场景中的三维坐标才可以实现对应的特效，在着色器材质中，可以在顶点着色器中传到片元着色器，那自定义后期处理也可以这样吗？答案是：NO，因为后期处理针对的是整个屏幕，不信的小伙伴可以试一下直接使用自定义后期处理中的顶点着色器中的uv或者世界坐标进行着色看看是什么效果？

        会遇到一个问题，既然是整个屏幕，那就是一个二维屏幕坐标轴啊，和我们要的场景三维坐标有什么关系呢？小伙伴们，你们想一下，我们点击屏幕的时候也是二维坐标啊，那么什么可以拾取场景中的三维坐标，那里面是不是用到了一点点计算，还用到了相机，具体不知道怎么将屏幕坐标转三维坐标的，感兴趣的可以去自行搜索一下，计算原理也挺简单的。

       基于上文提到二维坐标可以转三维坐标的理论，这次我们也用到了相机对象，相机中的投影逆矩阵和模型矩阵，关于逆置矩阵和矩阵的关系，有如下关系，矩阵A * 矩阵A的逆矩阵会得到一个单位矩阵，相当于是他的倒数或者除法？感兴趣的可以自行百度一下，模型矩阵，这个主要是将本地坐标转成世界坐标，主要用于一些模型变换，比如位移、旋转、缩放等，比如一个Mesh对象被创建之后，位置一直没变过，那他本地坐标就等于世界坐标，但是如果做了上面的变换，那它的位置坐标就要乘以一个模型矩阵了，将其本地坐标转成世界坐标才可以做着顶点着色器中正确的计算，当然这些在三维框架中都是内置的自动完成的不需要我们来操作，除非是在自定义的着色器中；感兴趣的可以去搜一下，模型矩阵、视图矩阵、投影矩阵相关信息吧。

废话不多说直接上代码

import * as THREE from "three";
import { EffectComposer } from "three/examples/jsm/postprocessing/EffectComposer.js";
import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass.js";
import { ShaderPass } from "three/examples/jsm/postprocessing/ShaderPass.js";
 
export default class Postprocessing {
	Composer: EffectComposer;
	shaderPass: ShaderPass
 
	constructor(opt: { scene: any, camera: THREE.PerspectiveCamera, renderer: any }) {
		const { scene, camera, renderer } = opt;
		const renderScene = new RenderPass(scene, camera);
 
 
		var depthRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight);
		renderer.render(scene, camera, depthRenderTarget);
 
		const { width, height } = renderer.getDrawingBufferSize(
			new THREE.Vector2()
		);
 
		const effectComposer = new EffectComposer(renderer);
 
		const depthTexture = new THREE.DepthTexture(width, height);
		effectComposer.readBuffer.depthBuffer = true;
		effectComposer.readBuffer.depthTexture = depthTexture;
 
		this.shaderPass = new ShaderPass(
			new THREE.ShaderMaterial({
				uniforms: {
					time: { value: 0 },
					tDiffuse: { value: null },
					depthTexture: { value: depthTexture },
					uProjectionInverse: {
						value: camera.projectionMatrixInverse,
					},
					uMatrixWorld: { value: camera.matrixWorld }
				},
				vertexShader:
					`
				varying vec2 vUv;
				varying vec3 vPosition;
				varying vec3 v_normal;
	
				void main() {
					vUv = uv;
					vPosition = position;
					v_normal = normal;
					gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
				}
				`,
				fragmentShader:
					`
				varying vec2 vUv;
				varying vec3 vPosition;
				uniform sampler2D tDiffuse;
				uniform sampler2D depthTexture;
				uniform sampler2D scanTexture;
				uniform mat4 uProjectionInverse;
				uniform mat4 uMatrixWorld;
				uniform float time;
				vec3 WorldPosFromDepth(float depth) {
					float z = (depth - 0.5) * 2.;
					vec4 clipSpacePosition = vec4(vPosition.xy, z, 1.0);
					vec4 viewSpacePosition = uProjectionInverse * clipSpacePosition;
					viewSpacePosition /= viewSpacePosition.w;
					vec4 worldSpacePosition = uMatrixWorld * viewSpacePosition;
					return worldSpacePosition.xyz;
				}
				void main() {
					vec4 base = texture2D(tDiffuse, vUv);
					float depth = texture2D(depthTexture, vUv).r;
					vec3 pos = WorldPosFromDepth(depth);
					float dis = length(pos.xyz);
					vec3 color = vec3(base);
					vec3 scan = vec3(0.4,0.45,0.5);
					float c = fract(time) * 300.;
					float shape = smoothstep(c, c + 50.,dis) - smoothstep(c+ 80., c + 130.,dis);
					color += shape*scan;
					gl_FragColor = vec4(color, 1.);
                }
				`,
			})
		);
 
		this.Composer = effectComposer;
		this.Composer.addPass(renderScene);
		this.Composer.addPass(this.shaderPass);
	}
}

上面着色器部分只写一个和之前文章一样的圆环扩散效果，重点关注的问题是如何获取场景中的三维坐标

不同的三维引擎中的后期处理获取世界坐标的方法感觉有点类似，关于cesium是如何在后期处理中获取世界坐标可以看我之前的文章：cesium的后期处理实现类似three.js中的spotLight效果

欢迎留下你的评论，我们一起学习