ThreeJS Shader的效果样例光影墙、扩散面(四)

一切皆有因果

一、实现一个光影墙
　　1. 根据自定义坐标点，输出一个光影墙
　　

1. /**
2. * 添加光影墙
3. */
4. function addLightWall() {
5.   const geometry = new THREE.BufferGeometry();
6.   const vertices = new Float32Array([
7.     5, 0, 2,
8.     3, 0, 5,
9.     -2, 0, 5,
10.     -4, 0, 2,
11.     -4, 5, 2,
12.     -2, 5, 5,
13.     3, 5, 5,
14.     5, 5, 2
15.   ]);
16.   const indices = new Uint16Array([
17.     0, 1, 7,
18.     1, 6, 7,
19.     1, 2, 6,
20.     2, 5, 6,
21.     2, 3, 5,
22.     3, 4, 5
23.   ])
25.   geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3));
26.   geometry.setIndex(new THREE.BufferAttribute(indices, 1));
27.   geometry.setAttribute('aHeight', new THREE.BufferAttribute(new Float32Array(new Array(geometry.getAttribute('position').count).fill(5.0)), 1));
28.   
29.   const uniforms = {
30.     uTime: { value: 0.01 },
31.   };
32.   setShader(geometry, vertex, frag, [0, 2.5, 0], uniforms)
33. }
35. function setShader(geometry, vertexShader, fragmentShader, position = [0, 0, 0], uniforms = {}, isLine = false) {
36.   material = new THREE.ShaderMaterial({
37.     vertexShader: vertexShader,
38.     fragmentShader: fragmentShader,
39.     side: THREE.DoubleSide,
40.     uniforms: uniforms,
41.     transparent: true,
42.     // blending: THREE.AdditiveBlending, // 多个元素的颜色相互叠加，颜色可能会变亮，会叠加setClearColor设置的背景色
43.   });
44.   material.depthTest = true;
45.   material.depthWrite = false;
46.   let planeMesh = new THREE.Mesh(geometry, material);
47.   if (isLine) {
48.     planeMesh = new THREE.Points(geometry, material);
49.   }
50.   planeMesh.position.x = position[0];
51.   planeMesh.position.y = position[1];
52.   planeMesh.position.z = position[2];
53.   scene.add(planeMesh);
54. }

复制代码

自定义坐标 
　　2. 圆柱体的光影墙
　　

1. /**
2. * 添加光影墙
3. */
4. function addLightWall() {
5.   const geometry = new THREE.CylinderGeometry(3, 3, 5.0, 32, 32, true);
6.   geometry.setAttribute('aHeight', new THREE.BufferAttribute(new Float32Array(new Array(geometry.getAttribute('position').count).fill(5.0)), 1));
7.   
8.   // 生成一个渐变色的光影墙
9.   const vertex = `
10.       varying vec3 vPosition;
11.       varying vec2 vUv;
12.       varying float vHeight;
13.       attribute float aHeight;
14.       void main() {
15.         vHeight = aHeight;
16.         vUv = uv;
17.         vPosition = position;
18.         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
19.       }
20.   `;
22.   const frag = `
23.       varying vec3 vPosition;
24.       varying vec2 vUv;
25.       varying float vHeight;
26.       void main() {
27.         float d = (vHeight - distance(vPosition, vec3(vPosition.x, -2.5, vPosition.z))) / vHeight;
28.         gl_FragColor = vec4(0.0, 1.0, 1.0, d);
29.       }
30.   `;
32.   const uniforms = {
33.     uTime: { value: 0.01 },
34.   };
35.   setShader(geometry, vertex, frag, [0, 2.5, 0], uniforms)
36. }
38. function setShader(geometry, vertexShader, fragmentShader, position = [0, 0, 0], uniforms = {}, isLine = false) {
39.   material = new THREE.ShaderMaterial({
40.     vertexShader: vertexShader,
41.     fragmentShader: fragmentShader,
42.     side: THREE.DoubleSide,
43.     uniforms: uniforms,
44.     transparent: true,
45.     // blending: THREE.AdditiveBlending, // 多个元素的颜色相互叠加，颜色可能会变亮，会叠加setClearColor设置的背景色
46.   });
47.   material.depthTest = true;
48.   material.depthWrite = false;
49.   let planeMesh = new THREE.Mesh(geometry, material);
50.   if (isLine) {
51.     planeMesh = new THREE.Points(geometry, material);
52.   }
53.   planeMesh.position.x = position[0];
54.   planeMesh.position.y = position[1];
55.   planeMesh.position.z = position[2];
56.   scene.add(planeMesh);
57. }

复制代码

圆柱体光影墙 
　　3. 为圆柱体添加可移动的线圈
　　

1. /**
2. * 添加光影墙
3. */
4. function addLightWall() {
5.   const geometry = new THREE.CylinderGeometry(3, 3, 5.0, 32, 32, true);
6.   geometry.setAttribute('aHeight', new THREE.BufferAttribute(new Float32Array(new Array(geometry.getAttribute('position').count).fill(5.0)), 1));
8.   // 生成一个可以向上移动的墙体线
9.   const vertex = `
10.       varying vec3 vPosition;
11.       varying vec2 vUv;
12.       varying float vHeight;
13.       attribute float aHeight;
14.       void main() {
15.         vHeight = aHeight;
16.         vUv = uv;
17.         vPosition = position;
18.         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
19.       }
20.   `;
22.   const frag = `
23.       uniform float uTime;
24.       varying vec3 vPosition;
25.       varying vec2 vUv;
26.       varying float vHeight;
27.       void main() {
28.         float dis = distance(vPosition, vec3(vPosition.x, -2.5, vPosition.z));
29.         float highlightPos = mod(uTime * 5.0, vHeight) - 2.5;
30.         float highlightDis = distance(vec3(vPosition.x, highlightPos, vPosition.z), vec3(vPosition.x, -2.5, vPosition.z));
31.         float highlightOpa = (vHeight - highlightDis) / vHeight;
32.         float opacity = (vHeight - dis) / vHeight;
33.         if (abs(dis - highlightDis) < 0.05) {
34.           gl_FragColor = vec4(0.04, 0.95, 0.95, highlightOpa + 0.2);
35.         } else {
36.           gl_FragColor = vec4(0.0, 1.0, 1.0, opacity);
37.         }
38.       }
39.   `;
41.   const uniforms = {
42.     uTime: { value: 0.01 },
43.   };
44.   setShader(geometry, vertex, frag, [0, 2.5, 0], uniforms)
45. }
47. function setShader(geometry, vertexShader, fragmentShader, position = [0, 0, 0], uniforms = {}, isLine = false) {
48.   material = new THREE.ShaderMaterial({
49.     vertexShader: vertexShader,
50.     fragmentShader: fragmentShader,
51.     side: THREE.DoubleSide,
52.     uniforms: uniforms,
53.     transparent: true,
54.     // blending: THREE.AdditiveBlending, // 多个元素的颜色相互叠加，颜色可能会变亮，会叠加setClearColor设置的背景色
55.   });
56.   material.depthTest = true;
57.   material.depthWrite = false;
58.   let planeMesh = new THREE.Mesh(geometry, material);
59.   if (isLine) {
60.     planeMesh = new THREE.Points(geometry, material);
61.   }
62.   planeMesh.position.x = position[0];
63.   planeMesh.position.y = position[1];
64.   planeMesh.position.z = position[2];
65.   scene.add(planeMesh);
66. }

复制代码

移动线圈光影墙 
二、实现一个渐变色的波纹圆圈
　　1. 实现一个固定的渐变色圆圈
　　原理：
　　　　1) UV点的范围是[0, 1]，所以各个像素点距离圆心的距离范围是0~0.5，如果乘以2刚好是透明度的范围(0~1)，这样就可以实现一个简单的渐变圆
　　　　2) 假设厚度为t，那么颜色的透明度的范围是[1, 1-t]，而我们实际需要的是[1, 0]，可以用图二来表示两个线性关系，可以得到两个方程式
　　　　　　方程式1：y = -x + 1; 
　　　　　　方程式2：y = -t + 1;  
　　　　　　现在我们知道方程式二中的y的值(像素点到中心的距离distance),通过解方程式就可以得到方程式1中所对应的透明度的值为 (distance - 1) / t + 1；
　　　　

          

　　

　　

1. /**
2. * 添加一个扩散面
3. */
4. function addDiffuseCircle() {
5.   const geometry = new THREE.CircleGeometry(3, 48);
7.   // 绘制一个渐变圈宽度可控的圆弧
8.   const vertex = `
9.       varying vec2 vUv;
10.       void main() {
11.         vUv = uv;
12.         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
13.       }
14.   `;
16.   const frag = `
17.       uniform float uTime;
18.       uniform float uThickness;
19.       varying vec2 vUv;
20.       void main() {
21.         // 使用UV坐标计算各个点到中心点的距离，需要减0.5，将圆心移动到(0.5, 0.5)的位置，半径为0.5，透明度范围为0~1，所以需要乘以2
22.         float distance = length(vUv - 0.5) * 2.0;
23.         float opacity = (distance - 1.0) / uThickness + 1.0;
24.         gl_FragColor = vec4(0.0, 1.0, 1.0, opacity);
25.       }
26.   `;
28.   const uniforms = {
29.     uThickness: { value: 0.8, range: [0, 1] }, // 渐变色的厚度
30.     uSpeed: { value: 0.5, range: [0, 5] },
31.     uTime: { value: 0.01 },
32.   };
33.   setGui(uniforms);
34.   setShader(geometry, vertex, frag, [0,0,0], uniforms);
35. }
37. function setShader(geometry, vertexShader, fragmentShader, position = [0, 0, 0], uniforms = {}, isLine = false) {
38.   material = new THREE.ShaderMaterial({
39.     vertexShader: vertexShader,
40.     fragmentShader: fragmentShader,
41.     side: THREE.DoubleSide,
42.     uniforms: uniforms,
43.     transparent: true,
44.     // blending: THREE.AdditiveBlending, // 多个元素的颜色相互叠加，颜色可能会变亮，会叠加setClearColor设置的背景色
45.   });
46.   material.depthTest = true;
47.   material.depthWrite = false;
48.   let planeMesh = new THREE.Mesh(geometry, material);
49.   if (isLine) {
50.     planeMesh = new THREE.Points(geometry, material);
51.   }
52.   planeMesh.position.x = position[0];
53.   planeMesh.position.y = position[1];
54.   planeMesh.position.z = position[2];
56.   planeMesh.rotateX(Math.PI / 2);
57.   scene.add(planeMesh);
58. }

复制代码

厚度可变的渐变圆 
　　2. 半径自动缩放的渐变圆
　　

1. /**
2. * 添加一个扩散面
3. */
4. function addDiffuseCircle() {
5.   const geometry = new THREE.CircleGeometry(3, 48);
7.   // 创建一个大小可控的渐变圆弧
8.   const vertex = `
9.       varying vec2 vUv;
10.       void main() {
11.         vUv = uv;
12.         gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
13.       }
14.   `;
16.   const frag = `
17.       uniform float uTime;
18.       uniform float uThickness;
19.       uniform float uSpeed;
20.       varying vec2 vUv;
21.       void main() {
22.         // 使用UV坐标计算各个点到中心点的距离，需要减0.5，将圆心移动到(0.5, 0.5)的位置，半径为0.5，透明度范围为0~1，所以需要乘以2
23.         // 假设从内像外开始扩散，距离和时间关系是 最内部: 距离0，时间0；最外部：距离1，时间1，如果用1-时间的话，
24.         // 所以此时1-时间+距离和样例1中的透明度相同
25.         float timeDis = fract(uTime * uSpeed);
26.         float distance = length(vUv - 0.5) * 2.0;
27.         if (timeDis < distance) {
28.           gl_FragColor = vec4(0.0, 0.0, 1.0, 0.0);
29.         } else {
30.           float opacity = (1.0 - timeDis + distance - 1.0) / uThickness + 1.0;
31.           gl_FragColor = vec4(0.0, 1.0, 1.0, opacity);
32.         }
33.       }
34.   `;
36.   const uniforms = {
37.     uThickness: { value: 0.8, range: [0, 1] }, // 渐变色的厚度
38.     uSpeed: { value: 0.5, range: [0, 5] },
39.     uTime: { value: 0.01 },
40.   };
42.   setShader(geometry, vertex, frag, [0,0,0], uniforms);
43. }
45. function setShader(geometry, vertexShader, fragmentShader, position = [0, 0, 0], uniforms = {}, isLine = false) {
46.   material = new THREE.ShaderMaterial({
47.     vertexShader: vertexShader,
48.     fragmentShader: fragmentShader,
49.     side: THREE.DoubleSide,
50.     uniforms: uniforms,
51.     transparent: true,
52.     // blending: THREE.AdditiveBlending, // 多个元素的颜色相互叠加，颜色可能会变亮，会叠加setClearColor设置的背景色
53.   });
54.   material.depthTest = true;
55.   material.depthWrite = false;
56.   let planeMesh = new THREE.Mesh(geometry, material);
57.   if (isLine) {
58.     planeMesh = new THREE.Points(geometry, material);
59.   }
60.   planeMesh.position.x = position[0];
61.   planeMesh.position.y = position[1];
62.   planeMesh.position.z = position[2];
64.   planeMesh.rotateX(Math.PI / 2);
65.   scene.add(planeMesh);
66. }

复制代码

自动缩放的渐变圆 

来源:https://www.cnblogs.com/codeOnMar/p/18406443
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！