WebGL Galaxy

<!--
GALAXY SHADER
_______________________
USER NOTE :

- licence : you can do what you want with this shader
- notice : 
   - Shaders let us avoid using textures. Here gas simulation fills the picture and so reduces a lot the amount of required particles. Here 10,000 are rendered : that enables realtime rendering of many galaxies, even on smartphone (see the other pen 'Hubble Deep Field' with 1,200,000 particles smooth on mobile).
   - The shader code used in this pen includes stuff from the little buster game. Remove parts depending of uniforms 'z' and 't' and you will get it
   - It is written for the galaxy's size chosen in the JS, which is over ~90 GL units. Using an other scale will get a weird result. I may write the stuff to avoid that soon.

WebGL is great
-->
<script id='vShader' type='x-vertex/x-shader'>
			  uniform float size;
  uniform float t;
  uniform float z;
  uniform float pixelRatio;
  
  varying vec3 vPosition;
  varying vec3 mPosition;//modified position
  varying float gas;
  
  float a,b=0.;
  
  void main(){
  
    vPosition=position;
    
    a=length(position);
    if(t>0.)b=max(0.,(cos(a/20.-t*.02)-.99)*3./a);
    if(z>0.)b=max(0.,cos(a/40.-z*.01+2.));
    mPosition=position*(1.+b*4.);
    vec4 mvPosition=modelViewMatrix*vec4(mPosition,1.);
    gl_Position=mvPosition*projectionMatrix;
    
    gas=max(.0,sin(-a/20.));
    gl_PointSize=pixelRatio*size*(1.+gas*2.)/length(mvPosition.xyz);
  
  }
		</script>
		<script id='fShader' type='x-fragment/x-shader'>
  uniform float z;
      
  varying vec3 vPosition;
  varying vec3 mPosition;
  varying float gas;
      
  void main(){
    
    float a=distance(mPosition,vPosition);
    if(a>0.)a=1.;
    
    float b=max(.32,.0065*length(vPosition));
      
    float c=distance(gl_PointCoord,vec2(.5));
    float starlook=-(c-.5)*1.2*gas; 
    float gaslook=(1.-gas)/(c*10.);
    float texture=starlook+gaslook;
               
    gl_FragColor=vec4(.32,.28,b,1.)*texture*(1.-a*.35);
    if(z>0.)gl_FragColor*=cos(1.57*z/322.)*(1.-.001*length(mPosition));
      
  }
		</script>
      
<div class=layout>
  <div id=info>
    <p class=shadow>Milkyways Industries proudly presents</p>
    <p class=shadow>the Dark EnErgy Pulse Buster</p>
    <span class='black one'></span>
    <span class='black two'></span>
    <span class='black three'></span>
    <span class='black four'></span>
    <span class='black one right'></span>
    <span class='black two right'></span>
    <span class='black three right'></span>
    <span class='black four right'></span>
    <p class=positionning>
      <span id=timeline></span>
    </p>
    <div id=log></div>
    <span class=eye></span>
    <span class=metal id=abort></span>
  </div>
  <div id=instruction>Welcome ! Now we have conquered all the universe, we prefer shooting at galaxies rather than golf balls. There are billions anyway. Click to scan it first.</div>
</div>
<div id=good-person>I shouldn't. It is not the Jedi way.</div>
<div id=howmuch>
  <p class=counter-title id=saved>galaxies saved<p class=counter id=savedresult>0</p></p>
  <p id=good>HERO</p>
  <div id=bg></div>
  <p id=bad>VILAIN</p>
  <p class=counter-title id=destroyed>galaxies destroyed<p class=counter id=destroyedresult>0</p></p>
  <span id=gauge></span>
</div>
<a class=twitter href="https://twitter.com/GPUaccelerated" target='_blank'>Share your result on twitter</a>
<a class=more href="https://codepen.io/collection/nVYEGg/" style='position:absolute; bottom:10px;right:10px;font-family:Arial;color:#33c;margin-right:-500px;transition:margin-right 500ms ease;' target='_blank'>More webgl galaxies</a>
<button  style='position:absolute;width:100%;text-align:center;border-radius:5px;right:10px;font-family:Arial;color:#33c;outline:none;background:none;border:none;text-decoration:underline;font-size:16px;cursor:pointer;'>Had a bad day ?<br/>Destroy this galaxy to undwind</button>