feat: Auroras

Vivomo · Apr 2, 2024 · e5cc30c · e5cc30c
1 parent ddb0dde
commit e5cc30c
Showing 1 changed file with 226 additions and 0 deletions.
diff --git a/app/aurora/index.html b/app/aurora/index.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Aurora</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        canvas {
+            display: block;
+        }
+    </style>
+</head>
+<body>
+
+<script type="importmap">
+    {
+      "imports": {
+        "three": "https://unpkg.com/[email protected]/build/three.module.js",
+        "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+      }
+    }
+</script>
+<script type="module">
+
+  import * as THREE from 'three';
+
+
+  const scene = new THREE.Scene();
+  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+  camera.position.z = 5;
+
+  const renderer = new THREE.WebGLRenderer();
+  renderer.setSize(window.innerWidth, window.innerHeight);
+  document.body.appendChild(renderer.domElement);
+
+  const planeGeometry = new THREE.PlaneGeometry(100, 120, 1, 1);
+  const auroraMaterial = new THREE.ShaderMaterial({
+    uniforms: {
+      iTime: { value: 0 },
+      iResolution: { value: new THREE.Vector3(window.innerWidth, window.innerHeight, 1) },
+      iMouse: { value: new THREE.Vector2() }
+    },
+    vertexShader: `
+        void main() {
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+        }
+    `,
+    // The code for the shader comes from nimitz (twitter: @stormoid)
+    fragmentShader: `
+uniform vec3      iResolution;           // viewport resolution (in pixels)
+uniform float     iTime;                 // shader playback time (in seconds)
+uniform vec4      iMouse;                // mouse pixel coords. xy: current (if MLB down), zw: click
+    #define time iTime
+
+
+mat2 mm2(in float a){float c = cos(a), s = sin(a);return mat2(c,s,-s,c);}
+mat2 m2 = mat2(0.95534, 0.29552, -0.29552, 0.95534);
+float tri(in float x){return clamp(abs(fract(x)-.5),0.01,0.49);}
+vec2 tri2(in vec2 p){return vec2(tri(p.x)+tri(p.y),tri(p.y+tri(p.x)));}
+
+float triNoise2d(in vec2 p, float spd)
+{
+    float z=1.8;
+    float z2=2.5;
+    float rz = 0.;
+    p *= mm2(p.x*0.06);
+    vec2 bp = p;
+    for (float i=0.; i<5.; i++ )
+    {
+        vec2 dg = tri2(bp*1.85)*.75;
+        dg *= mm2(time*spd);
+        p -= dg/z2;
+
+        bp *= 1.3;
+        z2 *= .45;
+        z *= .42;
+        p *= 1.21 + (rz-1.0)*.02;
+
+        rz += tri(p.x+tri(p.y))*z;
+        p*= -m2;
+   }
+    return clamp(1./pow(rz*29., 1.3),0.,.55);
+}
+
+float hash21(in vec2 n){ return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); }
+vec4 aurora(vec3 ro, vec3 rd)
+{
+    vec4 col = vec4(0);
+    vec4 avgCol = vec4(0);
+
+    for(float i=0.;i<50.;i++)
+    {
+        float of = 0.006*hash21(gl_FragCoord.xy)*smoothstep(0.,15., i);
+        float pt = ((.8+pow(i,1.4)*.002)-ro.y)/(rd.y*2.+0.4);
+        pt -= of;
+        vec3 bpos = ro + pt*rd;
+        vec2 p = bpos.zx;
+        float rzt = triNoise2d(p, 0.06);
+        vec4 col2 = vec4(0,0,0, rzt);
+        col2.rgb = (sin(1.-vec3(2.15,-.5, 1.2)+i*0.043)*0.5+0.5)*rzt;
+        avgCol =  mix(avgCol, col2, .5);
+        col += avgCol*exp2(-i*0.065 - 2.5)*smoothstep(0.,5., i);
+
+    }
+
+    col *= (clamp(rd.y*15.+.4,0.,1.));
+    return col*1.8;
+}
+
+
+//-------------------Background and Stars--------------------
+
+vec3 nmzHash33(vec3 q)
+{
+    uvec3 p = uvec3(ivec3(q));
+    p = p*uvec3(374761393U, 1103515245U, 668265263U) + p.zxy + p.yzx;
+    p = p.yzx*(p.zxy^(p >> 3U));
+    return vec3(p^(p >> 16U))*(1.0/vec3(0xffffffffU));
+}
+
+vec3 stars(in vec3 p)
+{
+    vec3 c = vec3(0.);
+    float res = iResolution.x*1.;
+
+    for (float i=0.;i<4.;i++)
+    {
+        vec3 q = fract(p*(.15*res))-0.5;
+        vec3 id = floor(p*(.15*res));
+        vec2 rn = nmzHash33(id).xy;
+        float c2 = 1.-smoothstep(0.,.6,length(q));
+        c2 *= step(rn.x,.0005+i*i*0.001);
+        c += c2*(mix(vec3(1.0,0.49,0.1),vec3(0.75,0.9,1.),rn.y)*0.1+0.9);
+        p *= 1.3;
+    }
+    return c*c*.8;
+}
+
+vec3 bg(in vec3 rd)
+{
+    float sd = dot(normalize(vec3(-0.5, -0.6, 0.9)), rd)*0.5+0.5;
+    sd = pow(sd, 5.);
+    vec3 col = mix(vec3(0.05,0.1,0.2), vec3(0.1,0.05,0.2), sd);
+    return col*.63;
+}
+
+
+void mainImage( out vec4 fragColor, in vec2 fragCoord )
+{
+ vec2 q = fragCoord.xy / iResolution.xy;
+    vec2 p = q - 0.5;
+ p.x*=iResolution.x/iResolution.y;
+
+    vec3 ro = vec3(0,0,-6.7);
+    vec3 rd = normalize(vec3(p,1.3));
+    vec2 mo = iMouse.xy / iResolution.xy-.5;
+    mo = (mo==vec2(-.5))?mo=vec2(-0.1,0.1):mo;
+    mo.x *= iResolution.x/iResolution.y;
+    rd.yz *= mm2(mo.y);
+    rd.xz *= mm2(mo.x + sin(time*0.05)*0.2);
+
+    vec3 col = vec3(0.);
+    vec3 brd = rd;
+    float fade = smoothstep(0.,0.01,abs(brd.y))*0.1+0.9;
+
+    col = bg(rd)*fade;
+
+    if (rd.y > 0.){
+        vec4 aur = smoothstep(0.,1.5,aurora(ro,rd))*fade;
+        col += stars(rd);
+        col = col*(1.-aur.a) + aur.rgb;
+    }
+    else //Reflections
+    {
+        rd.y = abs(rd.y);
+        col = bg(rd)*fade*0.6;
+        vec4 aur = smoothstep(0.0,2.5,aurora(ro,rd));
+        col += stars(rd)*0.1;
+        col = col*(1.-aur.a) + aur.rgb;
+        vec3 pos = ro + ((0.5-ro.y)/rd.y)*rd;
+        float nz2 = triNoise2d(pos.xz*vec2(.5,.7), 0.);
+        col += mix(vec3(0.2,0.25,0.5)*0.08,vec3(0.3,0.3,0.5)*0.7, nz2*0.4);
+    }
+
+  fragColor = vec4(col, 1.);
+}
+void main() {
+    vec2 fragCoord = gl_FragCoord.xy;
+    vec4 fragColor;
+    mainImage(fragColor, fragCoord);
+
+    gl_FragColor = fragColor;
+}
+    `
+  });
+
+  const plane = new THREE.Mesh(planeGeometry, auroraMaterial);
+  scene.add(plane);
+
+  function onWindowResize() {
+    camera.aspect = window.innerWidth / window.innerHeight;
+    camera.updateProjectionMatrix();
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    auroraMaterial.uniforms.iResolution.value.x = window.innerWidth;
+    auroraMaterial.uniforms.iResolution.value.y = window.innerHeight;
+  }
+
+  window.addEventListener('resize', onWindowResize, false);
+
+  function animate(time) {
+    requestAnimationFrame(animate);
+    auroraMaterial.uniforms.iTime.value = time / 1000;
+    renderer.render(scene, camera);
+  }
+
+  animate();
+
+
+
+</script>
+</body>
+</html>