How to convert shader code to tsl in this situation

Questions
,
1

image
image1352×1153 53.3 KB

This shader code inserts the shader code string of the material in the middle. How should I handle it when converting TSL code? Just ignore it ${shader. vertesShader}?

3 
const NOISE = `
float N21 (vec2 st) { // https://thebookofshaders.com/10/
    return fract( sin( dot( st.xy, vec2(12.9898,78.233 ) ) ) *  43758.5453123);
}

float smoothNoise( vec2 ip ){ // https://www.youtube.com/watch?v=zXsWftRdsvU
  
  vec2 lv = fract( ip );
  vec2 id = floor( ip );
  
  lv = lv * lv * ( 3. - 2. * lv );
  
  float bl = N21( id );
  float br = N21( id + vec2( 1, 0 ));
  float b = mix( bl, br, lv.x );
  
  float tl = N21( id + vec2( 0, 1 ));
  float tr = N21( id + vec2( 1, 1 ));
  float t = mix( tl, tr, lv.x );

  return clamp(mix( b, t, lv.y ) * 0.5 + 0.5, 0., 1.);
}

float smoothNoise2(vec2 p){

  p.y += time;
  p /= 4.;
  
  float n = smoothNoise(p) * 1.5;
  n += smoothNoise(p * 2.01) * 0.25;
  n += smoothNoise(p * 4.02) * 0.125;
  n += smoothNoise(p * 8.03) * 0.0625;
  n /= (1.5 + 0.25 + 0.125 + 0.0625);
  return clamp(n, 0., 1.);
}
`;
    let gm = new LineBasicMaterial({
      color: 0xffffff,
      transparent: true,
      opacity: 0.7,
      //@ts-ignore
      onBeforeCompile: shader => {
        shader.uniforms.time = this.uniforms.time;
        shader.uniforms.noiseTex = this.uniforms.noise;
        shader.uniforms.size = this.uniforms.size;
        shader.vertexShader = `
      uniform float time;
      uniform float size;
      uniform sampler2D noiseTex;
      attribute vec2 gEnds;
      varying float vGEnds;
      varying float vH;

      ${shader.vertexShader}
    `.replace(
          `#include <begin_vertex>`,
          `#include <begin_vertex>
        
      vec3 pos = position;
      
      vec2 nUv = (vec2(pos.x, -pos.z) - vec2(-25.)) / 50.;
      float h = texture2D(noiseTex, nUv).g;
      h = (h - 0.5) * 4.;
      
      pos.y = -mod(10. - (pos.y - time * 5.), 15.)*2.5 + 10.;
      h = pos.y - h;
      pos.y += gEnds.x * (gEnds.y*size);
      transformed = pos;
      vGEnds = gEnds.x;
      vH = smoothstep(3., 0., h);
      `
        );
        shader.fragmentShader = `
      uniform float time;
      varying float vGEnds;
      varying float vH;
      ${NOISE}
      ${shader.fragmentShader}
    `.replace(
          `vec4 diffuseColor = vec4( diffuse, opacity );`,
          `
      float op = 1. - vGEnds;
      op = pow(op, 3.);
      float h = (pow(vH, 3.) * 0.5 + 0.5);
      vec3 col = diffuse * h; // lighter close to the surface
      col *= 1. + smoothstep(0.99, 1., h); // sparkle at the surface
      vec4 diffuseColor = vec4( col, op );
      `
        );
      }
    });