How to use the three.ShaderMaterial function in three

const c = new Color(getRandomAttribute(COLORS));
  colors.setXYZ(i, c.r, c.g, c.b);
}
instanceGeom.addAttribute('coord', coords);
instanceGeom.addAttribute('color', colors);

// ##
// MESH
const mesh = new Mesh(instanceGeom, material);
mesh.rotation.x = radians(-90);
mesh.castShadow = true;
mesh.receiveShadow = true;

// Override the default DepthMaterial
mesh.customDepthMaterial = new ShaderMaterial({
  vertexShader: vertDeth,
  fragmentShader: fragDeth,
  uniforms: material.uniforms,
});

webgl.scene.add(mesh);

/* ---- Update ---- */
const update = () => {
  gpuSim.update();
  mesh.material.uniforms.positions.value = positionFBO.output.texture;
  webgl.update();
};

/* ---- CREATING ZONE END ---- */
/**/

this.materialOceanVertical.uniforms.u_subtransformSize = { type: "f", value: null };
        this.materialOceanVertical.uniforms.u_input = { type: "t", value: null };
        this.materialOceanVertical.depthTest = false;

        // 3 - Initial spectrum used to generate height map
        this.materialInitialSpectrum = new ShaderMaterial({
            uniforms: UniformsUtils.clone(OceanInitialSpectrum.uniforms()),
            vertexShader: OceanSimVertex.vertex(),
            fragmentShader: OceanInitialSpectrum.fragment()
        });
        this.materialInitialSpectrum.uniforms.u_wind = { type: "v2", value: new Vector2() };
        this.materialInitialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
        this.materialInitialSpectrum.depthTest = false;

        // 4 - Phases used to animate heightmap
        this.materialPhase = new ShaderMaterial({
            uniforms: UniformsUtils.clone(OceanPhase.uniforms()),
            vertexShader: OceanSimVertex.vertex(),
            fragmentShader: OceanPhase.fragment()
        });
        this.materialPhase.uniforms.u_resolution = { type: "f", value: this.resolution };
        this.materialPhase.depthTest = false;

        // 5 - Shader used to update spectrum
        this.materialSpectrum = new ShaderMaterial({
            uniforms: UniformsUtils.clone(OceanSpectrum.uniforms()),
            vertexShader: OceanSimVertex.vertex(),
            fragmentShader: OceanSpectrum.fragment()
        });
        this.materialSpectrum.uniforms.u_initialSpectrum = { type: "t", value: null };
        this.materialSpectrum.uniforms.u_resolution = { type: "f", value: this.resolution };
        this.materialSpectrum.depthTest = false;

plane = new THREE.Line(geometry, material);
      } else if (this._vertexMode === 'LINES') {
        plane = new THREE.LineSegments(geometry, material);
      } else if (this._vertexMode === 'TRI_STRIP') {
        plane = new THREE.Mesh(geometry, material);
        plane.setDrawMode(THREE.TrianglesStripDrawMode);
      } else if (this._vertexMode === 'TRI_FAN') {
        plane = new THREE.Mesh(geometry, material);
        plane.setDrawMode(THREE.TrianglesFanDrawMode);
      } else {
        plane = new THREE.Mesh(geometry, material);
      }
    } else {
      // Create plane
      const geometry = new THREE.PlaneGeometry(2, 2);
      const material = new THREE.ShaderMaterial({
        uniforms: this._uniforms,
        vertexShader: DEFAULT_VERTEX_SHADER,
        fragmentShader: fs,
        extensions: {
          derivatives: true,
          drawBuffers: false,
          fragDepth: false,
          shaderTextureLOD: false,
        },
      });
      plane = new THREE.Mesh(geometry, material);
    }

    return plane;
  }

fragmentLoader.load(RENDER_TEXTURE_FRAGMENT_SHADER, (strFragmentSh) => {
        this.m_strShaderFragment = strFragmentSh;

        const material = new THREE.ShaderMaterial({
          uniforms: this.m_uniforms,
          defines: this.m_defines,
          vertexShader: this.m_strShaderVertex,
          fragmentShader: this.m_strShaderFragment,
          side: THREE.BackSide,
          depthTest: true,
          depthFunc: THREE.GreaterEqualDepth,
          blending: THREE.NoBlending,
        });
        if (callbackMat) {
          callbackMat(material);
        }
      });
    });

getEdgeDetectionMaterial() {

		return new ShaderMaterial( {
			uniforms: {
				"maskTexture": { value: null },
				"texSize": { value: new Vector2( 0.5, 0.5 ) },
				"visibleEdgeColor": { value: new Vector3( 1.0, 1.0, 1.0 ) },
				"hiddenEdgeColor": { value: new Vector3( 1.0, 1.0, 1.0 ) },
			},

			vertexShader: `varying vec2 vUv;
				void main() {
					vUv = uv;
					gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
				}`,

			fragmentShader: `varying vec2 vUv;
				uniform sampler2D maskTexture;
				uniform vec2 texSize;

morphTargets: true,
  morphNormals: true,
  shading: THREE.FlatShading,
  side: THREE.FrontSide,
  vertexColors: THREE.FaceColors,
  transparent: true,
  opacity: 0,
  envMapIntensity: 0.2,
  emissive: colours.background.hex(),
  roughness: 0.45,
  metalness: 0.85,
  normalMap: dotsNormalMap,
  normalScale: new THREE.Vector2(0.01, 0.01)
});

var depth = new THREE.ShaderMaterial({
  vertexShader: 'varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );}',
  fragmentShader: 'varying vec2 vUv;void main() {gl_FragColor = vec4( vec3( vUv, 0. ), 1. );}'
});

var wireframe = new THREE.MeshLambertMaterial({
  wireframe: true,
  wireframeLinewidth: 0.5,
  morphTargets: true,
  transparent: true,
  emissive: colours.darkerBlue.hex(),
  opacity: 1
});

module.exports.shell = shellMaterial;
module.exports.depth = depth;
module.exports.wireframe = wireframe;

varying vec3 vWorldPosition;
			void main() {
				float h = normalize( vWorldPosition + offset ).y;
				gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h, 0.0 ), exponent ), 0.0 ) ), 1.0 );
            }
            `;
        var uniforms = {
            topColor: { type: "c", value: new THREE.Color(0x606060) },
            bottomColor: { type: "c", value: new THREE.Color(0x212121) },
            offset: { type: "f", value: 400 },
            exponent: { type: "f", value: 1.0 }
        };

        var skyGeo = new THREE.SphereBufferGeometry(1000, 32, 15);

        var skyMat = new THREE.ShaderMaterial({
            uniforms: uniforms,
            vertexShader: vertexShader,
            fragmentShader: fragmentShader,
            side: THREE.BackSide
        });

        var sky = new THREE.Mesh(skyGeo, skyMat);
        return sky;
    }
}

private _initHelper () {
    const indices = new Uint16Array([
      0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6,
      6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7
    ])
    const positions = new Float32Array(8 * 3)

    const bbGeometry = new BufferGeometry()
    bbGeometry.setIndex(new BufferAttribute(indices, 1))
    bbGeometry.addAttribute('position', new BufferAttribute(positions, 3))
    const bbMaterial = new ShaderMaterial({
      uniforms: { 'uColor': { value: new Color('skyblue') } },
      vertexShader: getShader('BasicLine.vert'),
      fragmentShader: getShader('BasicLine.frag')
    })

    this.boundingBoxMesh = new LineSegments(bbGeometry, bbMaterial)
    this.helperGroup.add(this.boundingBoxMesh)
  }

constructor( tPaper, effectComposer, renderToScreen ) {

		super( effectComposer, renderToScreen );
		let shader = WatercolorShader;
		this.uniforms = UniformsUtils.clone( shader.uniforms );

		tPaper.wrapS = tPaper.wrapT = RepeatWrapping;
		this.uniforms[ "tPaper" ].value = tPaper;

		this.material = new ShaderMaterial( {
			uniforms: this.uniforms,
			vertexShader: shader.vertexShader,
			fragmentShader: shader.fragmentShader
		} );

		this.enabled = true;
		this.renderToScreen = renderToScreen;
		this.needsSwap = true;

		this.camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
		this.scene = new Scene();

		this.quad = new Mesh( new PlaneBufferGeometry( 2, 2 ), undefined );
		this.scene.add( this.quad );

	}

setUpScene() {
    group = new THREE.Object3D()
    numBars = 64
    let positionX = -20 * (numBars / 2)

    for (var i = 0; i < numBars; i++) {
      let geometry = new THREE.PlaneBufferGeometry(18, 0, 1)
      var uniforms = {}
      var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      })
      plane = new THREE.Mesh(geometry, material)
      plane.position.x = positionX
      positionX += 20
      group.add(plane)
    }
    this.scene.add(group)
  }