Threejs GLSL着色器

import * as THREE from 'three'


const skyTopColor = '#acbee7';
const skyBottomColor = '#ffffff';

const fogNear = 75;
const fogFar = 100;
//虚线
const vertexShadertexDashedGlob = `  
        varying vec2 vUv;
        varying vec3 vWorldPosition;

        void main() {
            vUv = uv; 
            vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;  
            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);  
        }`;

const fragmentShadertexDashedGlob = `  
        varying vec2 vUv;  
        uniform vec3 color1;  
        uniform vec3 color2;  
        uniform float stripeWidth;
        uniform vec3 fogColor;  
        uniform float fogNear;  
        uniform float fogFar;
        varying vec3 vWorldPosition;
        uniform sampler2D map;
        uniform vec2 repeat;

        void main() {  
          // 根据vUv.y计算条纹
          vec2 uv = vUv * repeat;
          float stripe = mod(vUv.x, 40.0);
          // 根据条纹宽度混合颜色
          vec3 color = mix(color1, mix(texture(map, uv).rgb, color2.rgb, 0.5), step(stripeWidth, abs(stripe - 5.0)));

          float dLength = length(vWorldPosition - cameraPosition);  
          float fogFactor = clamp((fogFar - dLength) / (fogFar - fogNear), 0.0, 1.0);
          gl_FragColor = vec4(mix(fogColor, color.rgb, fogFactor), min(color.z, 1.0)); 
        }`;
const textureLoaderDashedGlob = new THREE.TextureLoader();
const texBBGlob = textureLoaderDashedGlob.load(require('@/assets/1.png'));

texBBGlob.wrapS = THREE.RepeatWrapping;
texBBGlob.wrapT = THREE.RepeatWrapping;

const materialDashedGlob = new THREE.ShaderMaterial({
  uniforms: {
    color1: { value: new THREE.Color(0xff0000) },
    color2: { value: new THREE.Color(0xffffff) },
    stripeWidth: { value: 20 },
    fogColor: { value: new THREE.Color(0xdfe3eb) },
    fogNear: { value: fogNear },
    fogFar: { value: fogFar },
    map: {
      value: texBBGlob,
    },
    repeat: { value: new THREE.Vector2(0.05, 0.02) }
  },
  vertexShader: vertexShadertexDashedGlob,
  fragmentShader: fragmentShadertexDashedGlob,
  transparent: true,
  opacity: 1,
  fog: true
});

materialDashedGlob.needsUpdate = true;

//实线
const vertexShaderSolidGlob = `
      varying vec2 vUv;
      varying vec3 vWorldPosition;
      
      void main() {
        vUv = uv;  
        vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;  
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }`;

const fragmentShaderSolidGlob = `
      uniform vec3 targetColor;
      uniform vec3 fogColor;  
      uniform float fogDensity;  
      uniform float fogNear;  
      uniform float fogFar;
      varying vec3 vWorldPosition;
      varying vec2 vUv;
      uniform vec2 repeat;
      uniform sampler2D map;
    
      void main() {
        vec2 uv = vUv * repeat;
        float dLength = length(vWorldPosition - cameraPosition);  
        float fogFactor = clamp((fogFar - dLength) / (fogFar - fogNear), 0.0, 1.0);
        gl_FragColor = vec4(mix(fogColor, mix(texture(map, uv).rgb, targetColor.rgb, 0.5), fogFactor), 1); 
      }`;

const materialSolidGlob = new THREE.ShaderMaterial({
  uniforms: {
    targetColor: { value: new THREE.Color(0xffffff) },
    fogColor: { value: new THREE.Color(skyBottomColor) },
    fogNear: { value: fogNear },
    fogFar: { value: fogFar },
    map: {
      value: texBBGlob,
    },
    repeat: { value: new THREE.Vector2(0.05, 0.01) }
  },
  vertexShader: vertexShaderSolidGlob,
  fragmentShader: fragmentShaderSolidGlob,
  fog: true
});

// 渐变
const vertexShaderGradationGlob = `
        varying vec3 modelPos;
        varying vec2 vUv;
        varying vec3 vWorldPosition;
        
        void main() {
          vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;  
          modelPos = position;
          vUv = uv;
          gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
        }`;

const fragmentShaderGradationGlob = `
        varying vec2 vUv;
        uniform vec3 targetColor;
        uniform float blur;
        uniform float height;
        varying vec3 modelPos;
        uniform vec3 fogColor;  
        uniform float fogDensity;  
        uniform float fogNear;  
        uniform float fogFar;
        varying vec3 vWorldPosition;
      
        void main() {
          float dLength = length(vWorldPosition - cameraPosition);  
          float fogFactor = clamp((fogFar - dLength) / (fogFar - fogNear), 0.0, 1.0);
    
          float alp =  pow((1.0 - abs(modelPos.x)/height), 1.0);
          float d = distance(vUv.y, 0.5);
          float alpha = 1.0-smoothstep(0.0, 0.5, d);
    
          if (fogDensity > 0.0) {  
              fogFactor = 1.0 - exp(-fogDensity * fogFactor * fogFactor);  
          }  
        
          gl_FragColor = vec4(mix(fogColor, targetColor.rgb, fogFactor), pow(alpha,2.0)); 
        }`;

const materialGradationGlob = new THREE.ShaderMaterial({
  uniforms: {
    targetColor: { value: new THREE.Color(0xcf8a68) },
    height: { value: 0 },
    blur: { value: 0.1 },
    fogColor: { value: new THREE.Color(skyBottomColor) },
    fogNear: { value: fogNear },
    fogFar: { value: fogFar }
  },
  vertexShader: vertexShaderGradationGlob,
  fragmentShader: fragmentShaderGradationGlob,
  transparent: true,
  fog: true
});

//导航线
const vertexShaderEgoTrjGlob = `
  varying vec3 modelPos;
  varying vec2 vUv;
  void main() {
    vUv = uv;
    modelPos = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }`;

// 片段着色器
const fragmentShaderEgoTrjGlob = `
  varying vec2 vUv;
  uniform vec3 targetColor;
  uniform float blur;
  uniform float height;
  varying vec3 modelPos;

  void main() {
    float alp =  pow((1.0 - abs(modelPos.x)/height), 1.0);
    float d = distance(vUv.y, 0.5);
    float alpha = 1.0-smoothstep(0.0, 0.5, d);
    float distanceToEdge = distance(vUv.y, 0.5);
    alpha = 1.0-smoothstep(0.5 - blur, 0.5 + blur, distanceToEdge);
    gl_FragColor = vec4(targetColor, min(pow(alpha,6.0), alp));
  }`;

// 道路
const vertexShaderRoadGlob = `
      varying vec2 vUv;
      varying vec3 vWorldPosition;
      
      void main() {
        vUv = uv-0.5;  
        vWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;  
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }`;

const fragmentShaderRoadGlob = `
      uniform vec3 targetColor;
      uniform vec3 fogColor;  
      uniform float fogDensity;  
      uniform float fogNear;  
      uniform float fogFar;
      varying vec3 vWorldPosition;
      varying vec2 vUv;
      uniform vec2 repeat;
      uniform sampler2D map;
      uniform float offset;
    
      void main() {
        vec2 uv = (vUv-vec2(offset, 0.0)) * repeat;
        float dLength = length(vWorldPosition - cameraPosition);  
        float fogFactor = clamp((fogFar - dLength) / (fogFar - fogNear), 0.0, 1.0);
        gl_FragColor = vec4(mix(fogColor, mix(texture(map, uv).rgb, targetColor.rgb, 0.9), fogFactor), 1);
      }`;

const textureLoaderRoadGlob = new THREE.TextureLoader();

const textureRoadGlob = textureLoaderRoadGlob.load(require('@/assets/QJ6264405139.png'));
textureRoadGlob.wrapS = THREE.RepeatWrapping;
textureRoadGlob.wrapT = THREE.RepeatWrapping;
textureRoadGlob.needsUpdate = true;

const materialRoadGlob = new THREE.ShaderMaterial({
  uniforms: {
    targetColor: { value: new THREE.Color(0xffffff) },
    fogColor: { value: new THREE.Color(skyBottomColor) },
    fogNear: { value: fogNear },
    fogFar: { value: fogFar },
    map: {
      value: textureRoadGlob,
    },
    repeat: { value: new THREE.Vector2(0.05, 0.1) },
    offset: { value: 0.0 }
  },
  vertexShader: vertexShaderRoadGlob,
  fragmentShader: fragmentShaderRoadGlob,
  fog: true
});

export {
  materialDashedGlob,
  materialSolidGlob,
  materialGradationGlob,
  vertexShaderEgoTrjGlob,
  fragmentShaderEgoTrjGlob,
  materialRoadGlob,
  skyBottomColor,
  skyTopColor,
  fogNear,
  fogFar
}