<script id="vertexShader">
      precision mediump float;
      precision mediump int;
      uniform mat4 modelViewMatrix; // optional
      uniform mat4 projectionMatrix; // optional
      attribute vec3 position;
      attribute vec4 color;
      varying vec3 vPosition;
      varying vec4 vColor;
      void main() {
        vPosition = position;
        vColor = color;
        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1);
      }
</script>
<script id="fragmentShader">
  #define PI = 3.1459;
  
      precision mediump float;
      precision mediump int;
      uniform float time;
      varying vec3 vPosition;
      varying vec4 vColor;
  
//  Classic Perlin 3D Noise 
//  by Stefan Gustavson
//
vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
vec3 fade(vec3 t) {return t*t*t*(t*(t*6.0-15.0)+10.0);}

float cnoise(vec3 P){
  vec3 Pi0 = floor(P); // Integer part for indexing
  vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
  Pi0 = mod(Pi0, 289.0);
  Pi1 = mod(Pi1, 289.0);
  vec3 Pf0 = fract(P); // Fractional part for interpolation
  vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
  vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
  vec4 iy = vec4(Pi0.yy, Pi1.yy);
  vec4 iz0 = Pi0.zzzz;
  vec4 iz1 = Pi1.zzzz;

  vec4 ixy = permute(permute(ix) + iy);
  vec4 ixy0 = permute(ixy + iz0);
  vec4 ixy1 = permute(ixy + iz1);

  vec4 gx0 = ixy0 / 7.0;
  vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
  gx0 = fract(gx0);
  vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
  vec4 sz0 = step(gz0, vec4(0.0));
  gx0 -= sz0 * (step(0.0, gx0) - 0.5);
  gy0 -= sz0 * (step(0.0, gy0) - 0.5);

  vec4 gx1 = ixy1 / 7.0;
  vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
  gx1 = fract(gx1);
  vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
  vec4 sz1 = step(gz1, vec4(0.0));
  gx1 -= sz1 * (step(0.0, gx1) - 0.5);
  gy1 -= sz1 * (step(0.0, gy1) - 0.5);

  vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
  vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
  vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
  vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
  vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
  vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
  vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
  vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);

  vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
  g000 *= norm0.x;
  g010 *= norm0.y;
  g100 *= norm0.z;
  g110 *= norm0.w;
  vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
  g001 *= norm1.x;
  g011 *= norm1.y;
  g101 *= norm1.z;
  g111 *= norm1.w;

  float n000 = dot(g000, Pf0);
  float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
  float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
  float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
  float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
  float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
  float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
  float n111 = dot(g111, Pf1);

  vec3 fade_xyz = fade(Pf0);
  vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
  vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
  float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
  return 2.2 * n_xyz;
}
  
      void main() {
        vec4 color = vec4( vColor.rgb,0.001 );
        float c = 0.8+cnoise(vPosition+time*0.04);
        color.r = c;
        color.g = c*0.2;
        color.b = c*0.3;
        color.a += 1.+cnoise(vPosition+time*0.09);
        gl_FragColor = color;
      }
  
  
</script>

body {
  margin:0;
  overflow:hidden;
}

const renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;
document.body.appendChild(renderer.domElement);

let scene = new THREE.Scene();

fogColor = new THREE.Color(0x252545);
 
scene.background = fogColor;
scene.fog = new THREE.Fog(fogColor, 0.0025, 32);


let camera = new THREE.PerspectiveCamera(
  45, window.innerWidth / window.innerHeight, 
  0.1, 2000);
    camera.position.set( 0, 0,10 );



let rig = new THREE.Group();
camera.rotation.y = -0.2;
    rig.add(camera)
scene.add(rig);
rig.rotateZ(1)

let group = new THREE.Group();

let cubeGeometry = bufferedField(5,250);
let cubeMaterial = new THREE.MeshStandardMaterial({color:0x808080});
let cubeMaterial2 = new THREE.MeshStandardMaterial({color:0x202020, roughness: 0.3});
let cubeMaterial3 = new THREE.RawShaderMaterial({
      uniforms: {
          time: { value: 1.0 }
      },
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
      transparent: true,
      blending:THREE.AdditiveBlending
    });

let cubeMesh = new THREE.Mesh(cubeGeometry, cubeMaterial2);
    group.add(cubeMesh)

let otherMesh = new THREE.Mesh(bufferedField(30), cubeMaterial2);
    otherMesh.rotateX(0);
    otherMesh.rotateZ(4);

let otherMesh2 = new THREE.Mesh(bufferedField(7), cubeMaterial);
    otherMesh2.rotateX(0);
    otherMesh2.rotateZ(1);
    group.add(otherMesh2);

let otherMesh3 = new THREE.Mesh(bufferedField(1,50, 0.01), cubeMaterial);
    otherMesh3.rotateX(0);
    otherMesh3.rotateZ(1);
    group.add(otherMesh3);

let otherMesh4 = new THREE.Mesh(new THREE.SphereGeometry(1, ), cubeMaterial3);
    otherMesh4.rotateX(0);
    otherMesh4.rotateZ(1);
    group.add(otherMesh4);


let canvas1 = document.createElement("canvas");
    canvas1.width = canvas1.height = 512;
let ctx1 = canvas1.getContext("2d");
document.body.appendChild(canvas1);
    drawLines(ctx1);
let tex1 = new THREE.CanvasTexture(canvas1);
  
var plane1 = new THREE.PlaneGeometry(5, 5);
var planeMaterial1 = new THREE.MeshBasicMaterial( { map: tex1, transparent:true, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, alphaTest: 0.2 } );

let planeMesh1 = new THREE.Mesh(plane1, planeMaterial1);

group.add(planeMesh1)

for(let i = 0; i < 75; i++) {
  let pulse = Math.random()*60;
  let m = planeMesh1.clone();
      m.rotation.set(Math.random()*5, Math.random()*5, Math.random()*5)
      m.scale.set(pulse, pulse, pulse)
      m.needsUpdate = true;
  group.add(m)
}


// var geometry =  new THREE.DecalGeometry(cubeMesh, new THREE.Vector3(0, 0, 2), new THREE.Vector3(0, 0, 0), new THREE.Vector3(2, 2, 2));
// // var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// //var mesh = new THREE.Mesh( geometry, material );

// let material = new THREE.MeshBasicMaterial({
//       color: 0xffffff,
//       transparent: true,
//       blending:THREE.AdditiveBlending
//     });

// let mesh = new THREE.Mesh(geometry, material);

// group.add(mesh)


scene.add(group);


let light = new THREE.PointLight( 0xff00ff, 1, 100 )
    light.position.set(0,0,0);
    light.lookAt(new THREE.Vector3())

let light2 = new THREE.AmbientLight( 0x202060, 1, 100 )
    light2.position.set(0,0,0);
    light2.lookAt(new THREE.Vector3())

let light3 = new THREE.SpotLight( 0x202030, 4, 40, 3, 1,2 )
    light3.position.set(0,0,20);
    light3.lookAt(new THREE.Vector3())
scene.add(light3)

scene.add(light);
scene.add(light2);


function resize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
}

window.addEventListener("resize", resize)

window.addEventListener("mousemove", orbitCamera)

let target = new THREE.Vector2();
let current = new THREE.Vector2();

function orbitCamera(e) {
  const { clientX, clientY } = e;
  target.x = (clientX / window.innerWidth);
  target.y = (clientY / window.innerHeight);
 
}
let t = 0;
function draw() {
  requestAnimationFrame(draw)
  cubeMaterial3.uniforms.time.value += 0.5;
  let pulse = 1.1 + (Math.sin(t)*0.5)
  light.intensity = pulse;
  cubeMesh.rotateY(0.007)
  
   otherMesh.rotateY(0.0015);
  otherMesh2.rotateY(0.001);
  otherMesh3.rotateZ(0.0005);
  otherMesh4.scale.set(pulse*0.6, pulse*0.6, pulse*0.6)
  otherMesh4.needsUpdate = true;
   //mesh.rotateY(0.02);
   //mesh.rotateZ(0.03)
  group.rotation.y = 0.5-target.x;
  group.rotation.z = 0.5-target.y;
  group.rotation.x = (0.5-Math.sin(t*0.1))*0.6;
  t+= 0.02;
  
  
  rig.position.x = 1+(0.5-Math.sin(t*0.5));
  rig.position.y = 1+(0.5-Math.cos(t*0.5));
  rig.lookAt(0,0,0);
  
  camera.rotation.y = (0.5-Math.cos(t*0.2))*0.25;
  camera.rotation.x = (0.5-Math.sin(t*0.1))*0.1;
  
  renderer.render(scene, camera);
}

resize();
draw();

function polarRandom(scale = 3, range =1) {
  return (1-(Math.random()*2)) * scale;
}




function bufferedField(size = 5, count = 128, scale = 0.5) {
        var bufferGeometry = new THREE.BufferGeometry();
      var radius = 125;
      var positions = [];
      var normals = [];
      var colors = [];
      var vector = new THREE.Vector3();
      var color = new THREE.Color( 0xffffff );
      var cube = new THREE.BoxGeometry(0.25, 0.25, 0.25);
      var geometry = new THREE.Geometry();
          var axis = new THREE.Vector3( 0, 1, 0 );
        var angle = Math.PI / 2;
      for ( var i = 1, l = count; i <= l; i ++ ) {
  
          vector.set(polarRandom(.5), polarRandom(1), size);

        
        vector.applyAxisAngle( axis, Math.random()*Math.PI*2 );
        geometry.copy( new THREE.BoxGeometry(0.1+Math.random(), 0.1+Math.random(), 0.1+Math.random()*scale) );
        geometry.lookAt( vector );
        geometry.translate( vector.x, vector.y, vector.z );
        color.setHSL( ( i / l ), 1.0, 0.7 );
        geometry.faces.forEach( function ( face ) {
          positions.push( geometry.vertices[ face.a ].x );
          positions.push( geometry.vertices[ face.a ].y );
          positions.push( geometry.vertices[ face.a ].z );
          positions.push( geometry.vertices[ face.b ].x );
          positions.push( geometry.vertices[ face.b ].y );
          positions.push( geometry.vertices[ face.b ].z );
          positions.push( geometry.vertices[ face.c ].x );
          positions.push( geometry.vertices[ face.c ].y );
          positions.push( geometry.vertices[ face.c ].z );
          normals.push( face.normal.x );
          normals.push( face.normal.y );
          normals.push( face.normal.z );
          normals.push( face.normal.x );
          normals.push( face.normal.y );
          normals.push( face.normal.z );
          normals.push( face.normal.x );
          normals.push( face.normal.y );
          normals.push( face.normal.z );
          colors.push( color.r );
          colors.push( color.g );
          colors.push( color.b );
          colors.push( color.r );
          colors.push( color.g );
          colors.push( color.b );
          colors.push( color.r );
          colors.push( color.g );
          colors.push( color.b );
        } );
      }
      bufferGeometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
      bufferGeometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ) );
      bufferGeometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
  return bufferGeometry;
}

function drawLines(ctx) {
  ctx.beginPath();
  ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
  ctx.lineWidth = 3;
ctx.arc(256, 256, 250, 0, 2 * Math.PI);
ctx.stroke();
  
}