ThreeJS Shader的效果样例雷达图和大气层(二)

一、雷达图

   

 实现原理：图中是一个旋转的渐变扇形，可以通过先实现一个扇形、然后再实现一个渐变扇形，最后再将扇形旋转来达到最终效果

1. 实现一个夹角为O的扇形，已X轴正方向为单位向量M，UV点到(0,0)形成向量N，通过M和N的点乘就可以得到一个夹角，然后判断角度小于O就可以了

2. 实现扇形的渐变色，主要是通过smoothstep实现，smoothstep是在两个值之间取渐变值，这样就可以实现离X轴越远越暗的效果

3. 如何让扇形旋转起来呢，上面已经实现了一个扇形A，通过将扇形B按照一定角度旋转到A，就可以得到对应的渐变色颜色值了，这样一个渐变的旋转角度就可以实现一个旋转的渐变扇形

4. 实现蓝色线圈，也是通过smoothstep函数，一个smoothstep最后会生成0-1的跳变值，如果是两个smoothstep相减会生成一个波峰的颜色值

    

主要原理是先实现一个扇形渐变的区域，这个不是很复杂，然后通过不断渲染页面时，将该扇形旋转到某个角度即可

const vertex = '\
    varying vec2 vUv;\
    void main() {\
      vUv = uv;\
      vec4 modelPosition = modelMatrix * vec4(position, 1.0);\
      gl_Position = projectionMatrix * viewMatrix * modelPosition;\
    }\
  ';

  const frag = '\
    uniform float uTime;\
    varying vec2 vUv;\
    float drawCircle(vec2 vUv, float radius) {\
      float res = length(vUv);\
      float width = 0.005;\
      return smoothstep(radius - width, radius, res) - smoothstep(radius, radius + width, res);\
    }\
    float drawSector(vec2 vUv, float radius) {\
      float angle = uTime;\
      vec2 newvUv = mat2(cos(angle), sin(angle), -sin(angle), cos(angle)) * vUv;\
      vec2 x = vec2(1.0, 0.0);\
      vec2 y = vec2(0.0, 1.0);\
      float res = dot(newvUv, y);\
      float angle2 = acos(dot(x, normalize(newvUv)));\
      if (angle2 > 0.0 && angle2 < 1.5707 && length(newvUv) < 0.45 && res > 0.0) {\
        return 1.0 - smoothstep(0.0, 1.5707, angle2);\
      } else {\
        return 0.0;\
      }\
    }\
    void main() {\
      vec2 newvUv = vUv;\
      newvUv -= vec2(0.5);\
      vec3 color = vec3(0.0, 0.0, 0.0);\
      float circle = drawCircle(newvUv, 0.45);\
      float circle2 = drawCircle(newvUv, 0.3);\
      float circle3 = drawCircle(newvUv, 0.1);\
      color += circle + circle2 + circle3;\
      color += drawSector(newvUv, 0.45);\
      gl_FragColor = vec4(color * vec3(0.0, 1.0, 0.0), 1.0);\
    }\
  ';

 

三、遮罩层

1. 第一种方法：采用shader中法向量的概念，取法向量和球体上各个坐标点与相机形成的向量之间的点积，离相机位置越近，

　　越靠近相机位置，点积值越大，且为正值，反之越远，则点积越小，同时可能为负值，这时候用产生的点积数据作为透明度，

　　即可得到渐变的效果

var vertex    =
    'varying vec3    vVertexWorldPosition;\
    varying vec3    vVertexNormal;\
    varying vec4    vFragColor;\
    void main(){\
        vVertexNormal    = normalize(normalMatrix * normal);\
        vVertexWorldPosition    = (modelMatrix * vec4(position, 1.0)).xyz;\
        gl_Position    = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\
    }';

  var frag    =
    'uniform vec3    glowColor;\
    uniform float    coeficient;\
    varying vec3    vVertexNormal;\
    varying vec3    vVertexWorldPosition;\
    varying vec4    vFragColor;\
    void main(){\
            vec3 worldVertexToCamera = cameraPosition - vVertexWorldPosition;\
            vec3 viewCameraToVertex    = (viewMatrix * vec4(worldVertexToCamera, 0.0)).xyz;\
            viewCameraToVertex = normalize(viewCameraToVertex);\
            float intensity = coeficient + dot(vVertexNormal, viewCameraToVertex);\
            if (intensity < 0.0) {\
              gl_FragColor = vec4(vec3(0.0, 1.0, 0.0), 1.0);\
            } else {\
              gl_FragColor = vec4(glowColor, intensity);\
            }\
    }';

 

2. 第二种方法通过ThreeJS官方提供的样例，使用EffectCompose的方式来实现，其中也是通过添加shader着色器的原理实现的