Test Size and Color Shader

HTML

<script src="https://threejs.org/build/three.min.js"></script>

<div id="info">PointCloud with Custom, Dynamic Attribute</div>

<script type="x-shader/x-vertex" id="vertexshader">

   attribute float alpha;
   varying vec3 vColor;
   varying vec2 vUv;  
    void main() {
        vUv = uv;
        vColor = color;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

        gl_PointSize = 8.0 * alpha; // use alpha to vary point size, instead

        gl_Position = projectionMatrix * mvPosition;

    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">

     varying vec3 vColor;
    uniform sampler2D map;
    void main() {
    
        gl_FragColor = vec4( vColor, 1.0 );
        gl_FragColor = gl_FragColor * texture2D( map, gl_PointCoord );
    }

</script>

CSS

body {
        color: #ffffff;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #000000;
        margin: 0px;
        overflow: hidden;
    }
    #info {
        color: #fff;
        position: absolute;
        top: 0px; width: 100%;
        padding: 5px;
        z-index:100;
    }

JavaScript

// PointCloud with Custom, Dynamic Attribute

var renderer, scene, camera, cloud, uniforms;

init();
animate();

function init() {

    // renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    
    // scene
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    // point cloud geometry
    var geometry = new THREE.BufferGeometry();

    // add an attribute
    numVertices = 500;
    var positions = new Float32Array( numVertices * 3 ); 
    var alphas = new Float32Array( numVertices * 1 ); // 1 values per vertex
	var colors = new Float32Array( numVertices * 3 );
    for( var i = 0; i < numVertices; i ++ ) {
    
        // set alpha randomly
        alphas[ i ] = Math.random()*10;
        
        positions[ i*3+0 ] = Math.random()*200-100; 
        positions[ i*3+1 ] = Math.random()*200-100;       
        positions[ i*3+2 ] = Math.random()*200-100;
        
        colors[ i*3+0 ] = Math.random(); 
        colors[ i*3+1 ] = Math.random();       
        colors[ i*3+2 ] = Math.random();

    }
 
    geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
    geometry.addAttribute( 'alpha', new THREE.BufferAttribute( alphas, 1 ) );
    geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );

    var ct = new CanvasTexture( 120, 120, 25, 'white', 1, "cir", false );
	var texture1 = ct.getTexture();
    
    // uniforms
    uniforms = {

      //  color: { type: "c", value: new THREE.Color( 0x00ff00 ) },
      "map" : { type: "t", value: texture1 },

    };
    console.log("ct: ",ct);
    // point cloud material
    var shaderMaterial = new THREE.ShaderMaterial( {

        uniforms:       uniforms,
        vertexShader:   document.getElementById( 'vertexshader' ).textContent,
       ...