Viewing Program

Program Data

Program thumbnail for "{props.program.title}"

Title	Green Homepage
ID	5801258620764160
Created	4 years ago, 1612383868292
Updated	4 years ago, 1639607758492
Code	<!DOCTYPE html> <!-- Project created by xacer and Ethan Kim Homepage for Team Kessinger Planet designed by xacer Spaceship Model designed by Ethan Kim CRT Text Effect by Daniel INSTRUCTIONS: WASD to move =================================== Edit: It's the Green Homepage now :) --> <html> <!-- Styles n' stuff --> <head> <meta charset="utf-8"> <title>Green Homepage</title> <style> body { overflow: hidden; background-color: gray; margin: 0px; } canvas { position: absolute; top: 0px; left: 0px; } </style> <script type="application/javascript"> function retrieveData () { let members = [ "xacer", "Ethan Kim", "j.s. coder", "Flux", "PolishStudios", "mango", "Tanmay N.", "A Random Coder", "littlewhiny (ded)" ]; let creators = "xacer and Ethan Kim"; let points = 0; return { members: members, creators: creators, points: points }; } </script> </head> <body> <!-- Output canvas --> <canvas id="gl-output"></canvas> <!-- Voronoi shader --> <script id="voronoi.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position, 1, 1); v_position = (a_position * 0.5 + 0.5) * 5.0; } </script> <script id="voronoi.fsh" type="text/glsl"> #version 300 es precision highp float; uniform float u_time; in vec2 v_position; out vec4 outColor; const float PI = 3.1415926; const mat2 myt = mat2(.12121212, .13131313, -.13131313, .12121212); const vec2 mys = vec2(1e4, 1e6); vec2 rhash(vec2 uv) { uv = myt; uv = mys; return fract(fract(uv / mys) * uv); } vec3 hash(vec3 p) { return fract( sin(vec3(dot(p, vec3(1.0, 57.0, 113.0)), dot(p, vec3(57.0, 113.0, 1.0)), dot(p, vec3(113.0, 1.0, 57.0)))) * 43758.5453); } vec3 voronoi3d(const in vec3 x) { vec3 p = floor(x); vec3 f = fract(x); float id = 0.0; vec2 res = vec2(100.0); for (int k = -1; k <= 1; k++) { for (int j = -1; j <= 1; j++) { for (int i = -1; i <= 1; i++) { vec3 b = vec3(float(i), float(j), float(k)); vec3 r = vec3(b) - f + hash(p + b); float d = dot(r, r); float cond = max(sign(res.x - d), 0.0); float nCond = 1.0 - cond; float cond2 = nCond * max(sign(res.y - d), 0.0); float nCond2 = 1.0 - cond2; id = (dot(p + b, vec3(1.0, 57.0, 113.0)) * cond) + (id * nCond); res = vec2(d, res.x) * cond + res * nCond; res.y = cond2 * d + nCond2 * res.y; } } } return vec3(sqrt(res), abs(id)); } float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x34.0)+1.0)x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( NN points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z ns.z); // mod(p,NN) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } // A single iteration of Bob Jenkins' One-At-A-Time hashing algorithm. uint hash( uint x ) { x += ( x << 10u ); x ^= ( x >> 6u ); x += ( x << 3u ); x ^= ( x >> 11u ); x += ( x << 15u ); return x; } // Compound versions of the hashing algorithm I whipped together. uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y) ); } uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ); } uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); } // Construct a float with half-open range [0:1] using low 23 bits. // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0. float floatConstruct( uint m ) { const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask const uint ieeeOne = 0x3F800000u; // 1.0 in IEEE binary32 m &= ieeeMantissa; // Keep only mantissa bits (fractional part) m \|= ieeeOne; // Add fractional part to 1.0 float f = uintBitsToFloat( m ); // Range [1:2] return f - 1.0; // Range [0:1] } // Pseudo-random value in half-open range [0:1]. float random( float x ) { return floatConstruct(hash(floatBitsToUint(x))); } float random( vec2 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec3 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec4 v ) { return floatConstruct(hash(floatBitsToUint(v))); } void main () { vec2 pos = gl_FragCoord.xy / 1024.0; // Polar coordinates based on texture float phi = pos.x PI * 2.0; float theta = pos.y * PI; // Generate ray based on polar coordinates vec3 ray = normalize(vec3( sin(theta) * sin(phi), cos(theta), sin(theta) * cos(phi) )) * 30.0; float d = voronoi3d(ray * 5.0).y; d = d; float n = snoise(ray) 0.5 + 0.5; n = max(n, 0.0); n = d; n = pow(random(ray), 0.5); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); outColor = vec4(vec3(n), 1); } </script> <!-- Land shader --> <script id="landform.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position.xy, 1, 1); v_position = a_position * 14.0; } </script> <script id="landform.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform float u_seed; out vec4 outColor; const float PI = 3.1415926; // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x34.0)+1.0)x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( NN points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z ns.z); // mod(p,NN) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } float pnoise (vec3 p) { float v = 0.0; float s = 1.0; for (int i = 0; i < 5; i ++) { v += snoise(p s) / s * 0.5; s = 2.0; } return v; } void main () { vec2 pos = gl_FragCoord.xy / 1024.0; // Polar coordinates based on texture float phi = pos.x PI * 2.0; float theta = pos.y * PI; // Generate ray based on polar coordinates vec3 ray = normalize(vec3( sin(theta) * sin(phi), cos(theta), sin(theta) * cos(phi) )); float nv = pnoise(ray.xyz * 2.0) * 0.5 - 0.04; vec3 landCol; if (nv > 0.0) { landCol = vec3(0.2, 0.7, 0.2) * (sqrt(nv) + 0.5); // Desert float desertAmt = ((pnoise(ray.xyz * vec3(2.0, 4.0, 2.0) + 2.0)0.5 + 0.5) pow(1.0 - abs(ray.y), 5.0)); desertAmt = max(min(desertAmt, 1.0), 0.0); // Fade to 0 or 1 desertAmt = desertAmt * desertAmt * (3.0 - 2.0 * desertAmt); desertAmt = desertAmt * desertAmt * (3.0 - 2.0 * desertAmt); desertAmt = desertAmt * desertAmt * (3.0 - 2.0 * desertAmt); desertAmt = desertAmt * desertAmt * (3.0 - 2.0 * desertAmt); landCol = desertAmt * vec3(0.7, 0.7, 0.0) + (1.0 - desertAmt) * landCol; // Polar float polarAmt = (snoise(ray.xyz * 1.0 + 10.0) * pow(abs(ray.y), 2.0)); float f = pow(abs(ray.y), 2.0); polarAmt = f + polarAmt * (1.0 - f); polarAmt = polarAmt * polarAmt * (3.0 - 2.0 * polarAmt); polarAmt = polarAmt * polarAmt * (3.0 - 2.0 * polarAmt); polarAmt = polarAmt * polarAmt * (3.0 - 2.0 * polarAmt); landCol = polarAmt * vec3(1.0-sqrt(nv0.5)) + (1.0 - polarAmt) landCol; } if (nv < 0.0) { landCol = vec3(0.2, 0.2, 1.0) * exp(nv2.0); } outColor = vec4(landCol, nv 0.5 + 0.5); } </script> <!-- Cloud noise shader --> <script id="clouds.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position, 1, 1); v_position = a_position * 10.0; } </script> <script id="clouds.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform float u_time; out vec4 outColor; const float PI = 3.1415926; // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x34.0)+1.0)x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( NN points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z ns.z); // mod(p,NN) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 42.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } float pnoise (vec3 p) { float v = 0.0; float s = 1.0; for (int i = 0; i < 5; i ++) { v += snoise(p s) / s * 0.5; s = 2.0; } return v 0.5 + 0.5; } void main () { vec2 pos = gl_FragCoord.xy / 1024.0; // Polar coordinates based on texture float phi = pos.x * PI * 2.0; float theta = pos.y * PI; // Generate ray based on polar coordinates vec3 ray = normalize(vec3( sin(theta) * sin(phi), cos(theta), sin(theta) * cos(phi) )); float n = max(pnoise(ray.xyz * 0.5)-0.1, 0.0); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); n = pnoise(ray.xyz 3.0 + snoise(ray.xyz)); n = n * n * (3.0 - 2.0 * n); n = n * n * (3.0 - 2.0 * n); outColor = vec4(n, 0, 0, 1); } </script> <!-- Starbox shader --> <script id="starbox.vsh" type="text/glsl"> #version 300 es in vec2 a_position; void main () { gl_Position = vec4(a_position.xy, 1, 1); } </script> <script id="starbox.fsh" type="text/glsl"> #version 300 es precision highp float; out vec4 outColor; const float PI = 3.1415926; // Simplex 2D noise // vec3 permute(vec3 x) { return mod(((x34.0)+1.0)x, 289.0); } float snoise(vec2 v) { const vec4 C = vec4(0.211324865405187, 0.366025403784439, -0.577350269189626, 0.024390243902439); vec2 i = floor(v + dot(v, C.yy) ); vec2 x0 = v - i + dot(i, C.xx); vec2 i1; i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0); vec4 x12 = x0.xyxy + C.xxzz; x12.xy -= i1; i = mod(i, 289.0); vec3 p = permute( permute( i.y + vec3(0.0, i1.y, 1.0 )) + i.x + vec3(0.0, i1.x, 1.0 )); vec3 m = max(0.5 - vec3(dot(x0,x0), dot(x12.xy,x12.xy), dot(x12.zw,x12.zw)), 0.0); m = m; m = m; vec3 x = 2.0 * fract(p * C.www) - 1.0; vec3 h = abs(x) - 0.5; vec3 ox = floor(x + 0.5); vec3 a0 = x - ox; m = 1.79284291400159 - 0.85373472095314 ( a0a0 + hh ); vec3 g; g.x = a0.x * x0.x + h.x * x0.y; g.yz = a0.yz * x12.xz + h.yz * x12.yw; return 130.0 * dot(m, g); } // Classic 3D noise float mod289(float x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 mod289(vec4 x){return x - floor(x * (1.0 / 289.0)) * 289.0;} vec4 perm(vec4 x){return mod289(((x * 34.0) + 1.0) * x);} float noise(vec3 p){ vec3 a = floor(p); vec3 d = p - a; d = d * d * (3.0 - 2.0 * d); vec4 b = a.xxyy + vec4(0.0, 1.0, 0.0, 1.0); vec4 k1 = perm(b.xyxy); vec4 k2 = perm(k1.xyxy + b.zzww); vec4 c = k2 + a.zzzz; vec4 k3 = perm(c); vec4 k4 = perm(c + 1.0); vec4 o1 = fract(k3 * (1.0 / 41.0)); vec4 o2 = fract(k4 * (1.0 / 41.0)); vec4 o3 = o2 * d.z + o1 * (1.0 - d.z); vec2 o4 = o3.yw * d.x + o3.xz * (1.0 - d.x); return o4.y * d.y + o4.x * (1.0 - d.y); } // Simplex 3D Noise // by Ian McEwan, Ashima Arts // vec4 permute(vec4 x){return mod(((x34.0)+1.0)x, 289.0);} vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;} float snoise(vec3 v){ const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); // x0 = x0 - 0. + 0.0 * C vec3 x1 = x0 - i1 + 1.0 * C.xxx; vec3 x2 = x0 - i2 + 2.0 * C.xxx; vec3 x3 = x0 - 1. + 3.0 * C.xxx; // Permutations i = mod(i, 289.0 ); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients // ( NN points uniformly over a square, mapped onto an octahedron.) float n_ = 1.0/7.0; // N=7 vec3 ns = n_ D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z ns.z); // mod(p,NN) vec4 x_ = floor(j * ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.6 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 0.5 * 42.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ) + 0.5; } // Function to determine the density of a cloud nebula at a certain point (also returns color) vec4 densityOfNebula (vec3 p) { vec3 color = vec3(snoise(p 0.01), snoise(p * 0.01 + 1000.0), snoise(p * 0.01 - 1000.0)); float density = noise(p.yxz * 0.01 + 1000.0) - abs(p.y * 0.01); return vec4(color.xyz, max(density * 0.5, 0.0)); } // A single iteration of Bob Jenkins' One-At-A-Time hashing algorithm. uint hash( uint x ) { x += ( x << 10u ); x ^= ( x >> 6u ); x += ( x << 3u ); x ^= ( x >> 11u ); x += ( x << 15u ); return x; } // Compound versions of the hashing algorithm I whipped together. uint hash( uvec2 v ) { return hash( v.x ^ hash(v.y) ); } uint hash( uvec3 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ); } uint hash( uvec4 v ) { return hash( v.x ^ hash(v.y) ^ hash(v.z) ^ hash(v.w) ); } // Construct a float with half-open range [0:1] using low 23 bits. // All zeroes yields 0.0, all ones yields the next smallest representable value below 1.0. float floatConstruct( uint m ) { const uint ieeeMantissa = 0x007FFFFFu; // binary32 mantissa bitmask const uint ieeeOne = 0x3F800000u; // 1.0 in IEEE binary32 m &= ieeeMantissa; // Keep only mantissa bits (fractional part) m \|= ieeeOne; // Add fractional part to 1.0 float f = uintBitsToFloat( m ); // Range [1:2] return f - 1.0; // Range [0:1] } // Pseudo-random value in half-open range [0:1]. float random( float x ) { return floatConstruct(hash(floatBitsToUint(x))); } float random( vec2 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec3 v ) { return floatConstruct(hash(floatBitsToUint(v))); } float random( vec4 v ) { return floatConstruct(hash(floatBitsToUint(v))); } vec3 starColor (vec3 p) { const vec3 c1 = vec3(235, 47, 229) / 255.0; const vec3 c2 = vec3(237, 161, 47) / 255.0; vec3 col = c1 * random(p.xyz) * 0.5; col += c2 * random(p.yzx + 10.0) * 0.5; return col * pow(max(1.0 - abs(p.y), 0.0), 5.0); } void main () { vec2 v_position = gl_FragCoord.xy / 1024.0; // Polar coordinates based on texture float phi = v_position.x * PI * 2.0; float theta = v_position.y * PI; // Generate ray based on polar coordinates vec3 ray = normalize(vec3( sin(theta) * sin(phi), cos(theta), sin(theta) * cos(phi) )); vec3 skyColor = starColor(ray); vec3 inScatteredLight = vec3(0.0); float transmittance = 0.0; for (float distance = 600.0; distance > 0.0; distance -= 100.0) { vec3 samplePoint = ray * distance; vec4 nebulaDensity = densityOfNebula(samplePoint); inScatteredLight += nebulaDensity.xyz * nebulaDensity.w; transmittance += nebulaDensity.w; } skyColor = skyColor * exp(-transmittance) + inScatteredLight; vec3 col = vec3(0.5 + ray.xyz * 0.5); outColor = vec4(skyColor.xyz, 1.0); } </script> <!-- Baked optical depth shader --> <script id="optical-depth.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position.xy, 1, 1); v_position = a_position; } </script> <script id="optical-depth.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; // make sure these match up with the actual program const float atmosphereRadius = 1.05; const float densityFalloff = 1.0; const int numScatteringSteps = 200; const float PI = 3.1415926; vec2 raySphere (vec3 sc, float sr, vec3 ro, vec3 rd) { vec3 o = ro - sc; float b = 2.0 * dot(o, rd); float c = dot(o, o) - sr * sr; float d = b * b - 4.0 * c; if (d > 0.0) { float s = sqrt(d); float dn = max(0.0, (-b - s) * 0.5); float df = (-b + s) * 0.5; if (df >= 0.0) return vec2(dn, df - dn); } return vec2(-1.0, 0.0); } float densityAtPoint (vec2 sp) { float h = length(sp) - 1.0; float h01 = h / (atmosphereRadius - 1.0); return exp(-h01 * densityFalloff) * (1.0 - h01); } float opticalDepth (vec2 ro, vec2 rd, float rl) { float ss = rl / (float(numScatteringSteps) - 1.0); float od = 0.0; for (int i = 0; i < numScatteringSteps; i ++) { od += densityAtPoint(ro) * ss; ro += rd * ss; } return od; } vec4 encode (float d, float R) { d = floor(d * R * R * R); float b = mod(d, R); float g = mod((d - b) / R, R); float r = ((d - b) / R - g) / R; return vec4(r / R, g / R, b / R, 1.0); } float lerp (float a, float b, float k) { return a + k * (b - a); } out vec4 outColor; const vec3 v_zero = vec3(0.0); const float EPSILON = 0.0001; void main () { vec2 uv = v_position * 0.5 + 0.5; float h01 = uv.y; float y = -2.0 * uv.x + 1.0; float x = sqrt(1.0 - y * y); vec2 d = vec2(x, y); vec2 ip = vec2(0, lerp(1.0, atmosphereRadius, h01)); float dst = raySphere(v_zero, atmosphereRadius, vec3(ip, 0), vec3(d, 0)).y; float dep = opticalDepth(ip + d * EPSILON, d, dst - EPSILON * 2.0); outColor = encode(dep, 100.0); } </script> <!-- Space shader --> <script id="space.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position.xy, 1, 1); v_position = a_position; } </script> <script id="space.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform vec3 u_camera; uniform mat3 u_projection; uniform vec3 u_light; uniform sampler2D u_optical_depth; uniform sampler2D u_noise; uniform sampler2D u_stars; uniform sampler2D u_clouds; uniform sampler2D u_voronoi; out vec4 outColor; const vec3 sphereCenter = vec3(0, 0, 0); const float sphereRadius = 1.0; const float atmosphereRadius = 1.05; const float scatteringStrength = 13.0; const vec3 waveLengths = vec3(800, 530, 440); const vec3 scatterCoefs = scatteringStrength * vec3( pow(400.0 / waveLengths.x, 4.0), pow(400.0 / waveLengths.y, 4.0), pow(400.0 / waveLengths.z, 4.0) ); const float densityFalloff = 1.0; const int numScatteringPoints = 20; const float PI = 3.1415926; vec2 raySphere (vec3 sc, float sr, vec3 ro, vec3 rd) { vec3 o = ro - sc; float b = 2.0 * dot(o, rd); float c = dot(o, o) - sr * sr; float d = b * b - 4.0 * c; if (d > 0.0) { float s = sqrt(d); float dn = max(0.0, (-b - s) * 0.5); float df = (-b + s) * 0.5 ; if (df >= 0.0) return vec2(dn, df - dn); } return vec2(-1.0, 0.0); } float decode (vec3 d, float R) { return d.r + d.g / R + d.b / R / R; } float densityAtPoint (vec3 p) { float h = length(p - sphereCenter) - sphereRadius; float h01 = h / (atmosphereRadius - sphereRadius); return exp(-h01 * densityFalloff) * (1.0 - h01); } float opticalDepth (vec3 ro, vec3 rd) { float h = length(ro - sphereCenter) - sphereRadius; float h01 = h / (atmosphereRadius - sphereRadius); float a01 = dot(normalize(sphereCenter - ro), rd) * 0.5 + 0.5; return decode(texture(u_optical_depth, vec2(a01, h01)).rgb, 100.0); } void calculateLight (vec3 ro, vec3 rd, float rl, inout vec3 col) { float stepSize = rl / float(numScatteringPoints - 1); vec3 inScatteredLight = vec3(0); float viewRayOpticalDepth; float ii = 0.0; for (int i = 0; i < numScatteringPoints; i ++) { float sunRayLength = raySphere(sphereCenter, atmosphereRadius, ro, -u_light).y; viewRayOpticalDepth = opticalDepth(ro, -rd); float sunRayOpticalDepth = opticalDepth(ro, -u_light); vec3 transmittance = exp((-sunRayLength - viewRayOpticalDepth) * scatterCoefs); float localDensity = densityAtPoint(ro); inScatteredLight += localDensity * transmittance * scatterCoefs * stepSize; ro += rd * stepSize; } float originalTransmittance = exp(-2.0 * viewRayOpticalDepth); col = originalTransmittance * col + inScatteredLight; } void getColor (vec3 ro, vec3 rd) { // First calculate distance to planet surface, OR starbox vec2 dstToPlanet = raySphere(sphereCenter, sphereRadius, ro, rd); vec3 col; if (dstToPlanet.x > 0.0) { vec3 hit = ro + rd * dstToPlanet.x; vec3 normal = normalize(hit); float diffuse = -dot(normal, u_light); float light = max(diffuse, 0.0); light = light; // Get polar coordinates float phi = atan(normal.z, normal.x); float theta = acos(normal.y); // Normalize from [-PI, PI) to [0, 1) phi = (phi + PI) / (2.0 PI); // Normalize from [0, PI) to [0, 1) theta = theta / PI; // Get texture vec2 uv = vec2(phi, theta); col = texture(u_noise, uv).rgb; float nv = texture(u_noise, uv).w; // Add specular if (nv < 0.5) { float specular = pow(max(-dot(u_light, reflect(rd, normal)), 0.0), 16.0); light = 0.7 * light + specular * 0.5; } // Add light to color col = light; if (diffuse < 0.0 && nv > 0.5) { float v = texture(u_voronoi, uv).x; col += vec3(1.0, 0.7, 0.3) v * max(sqrt(-diffuse), 0.0) * (0.02 / (nv - 0.5)); } diffuse = max(diffuse, 0.0); // clouds float cloudAmt = texture(u_clouds, uv).x * pow(diffuse, 0.5); col = cloudAmt + col * (1.0 - cloudAmt); // fresnel float dp = max(-dot(rd, normal), 0.0); dp = pow(dp, 0.2) * (1.0 - max(sqrt(-diffuse), 0.0) * (0.02 / (nv - 0.5))); col = dp * col + (1.0 - dp) * vec3(1.0, 0.7, 0.3); } else { // Get polar coordinates float phi = atan(rd.z , rd.x); float theta = acos(rd.y); // Normalize from [-PI, PI) to [0, 1) phi = (phi + PI) / (2.0 * PI); // Normalize from [0, PI) to [0, 1) theta = theta / PI; // Get texture vec2 uv = vec2(phi, theta); col = texture(u_stars, uv).xyz; //col = vec3(uv.xxx); } // Then calculate distance through the atmosphere vec2 dstThroughAtmosphere = raySphere(sphereCenter, atmosphereRadius, ro, rd); if (dstToPlanet.x > 0.0) dstThroughAtmosphere.y = dstToPlanet.x - dstThroughAtmosphere.x; // If it hits the atmosphere, add atmosphere if (dstThroughAtmosphere.y > 0.0) calculateLight(ro + rd * dstThroughAtmosphere.x, rd, dstThroughAtmosphere.y, col); outColor = vec4(col, 1.0); } void main () { vec3 ray = normalize(vec3(v_position.xy, 1.0)) * u_projection; getColor(u_camera, ray); vec2 uv = v_position * 0.5 + 0.5; //outColor = texture(u_clouds, uv); } </script> <!-- Geometry shaders --> <script id="geometry.vsh" type="text/glsl"> #version 300 es in vec3 a_position; in vec3 a_normal; in vec3 a_color; uniform mat3 u_trigs; uniform vec3 u_cam; out vec3 v_color; out vec3 v_position; out vec3 v_normal; void main() { vec3 rel = a_position-u_cam; vec3 position = u_trigs * rel; gl_Position = vec4(position.x,position.y,-1.,position.z); v_color = a_color; v_normal = normalize(u_trigsa_normal); v_position = position; } </script> <script id="geometry.fsh" type="text/glsl"> #version 300 es precision mediump float; in vec3 v_color; in vec3 v_position; in vec3 v_normal; out vec4 color; void main() { vec3 light = normalize(v_position-vec3(10.,-30.,-50.)); color = vec4(v_color(0.5+0.5dot(v_normal,light)),1.); } </script> <script id="screens.vsh" type="text/glsl"> #version 300 es in vec3 a_position; in vec2 a_texcoord; uniform mat3 u_trigs; uniform vec3 u_cam; out vec2 v_texcoord; void main() { vec3 rel = a_position - u_cam; vec3 position = u_trigs rel; gl_Position = vec4(position.x,position.y,-1.,position.z); v_texcoord = a_texcoord; } </script> <script id="screens.fsh" type="text/glsl"> #version 300 es precision mediump float; in vec2 v_texcoord; uniform sampler2D u_texture; out vec4 color; void main() { color = texture(u_texture, v_texcoord); //color = vec4(v_texcoord, 0, 1); } </script> <!-- external things --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> <script src="https://cdn.jsdelivr.net/gh/EthanKim8683/JUNK/shuttleobj16.js"> </script> <script src="https://cdn.jsdelivr.net/gh/EthanKim8683/JUNK/whiteshuttle2.js"> </script> <script src="https://cdn.jsdelivr.net/gh/EthanKim8683/JUNK/blackshuttle.js"> </script> <script src="https://cdn.jsdelivr.net/gh/EthanKim8683/JUNK/manillashuttle.js"> </script> <!-- cram functions in here --> <script type="application/javascript"> function createShader(type,code) { let shader = gl.createShader(type); gl.shaderSource(shader,code); gl.compileShader(shader); return shader; } function createProgram(vertexCode,fragmentCode) { let vertexShader = createShader(gl.VERTEX_SHADER,vertexCode); let fragmentShader = createShader(gl.FRAGMENT_SHADER,fragmentCode); let program = gl.createProgram(); gl.attachShader(program,vertexShader); gl.attachShader(program,fragmentShader); gl.linkProgram(program); gl.detachShader(program, vertexShader); gl.deleteShader(vertexShader); gl.detachShader(program, fragmentShader); gl.deleteShader(fragmentShader); return program; } function rotate3D(rx,ry) { let cx = Math.cos(ry), sx = Math.sin(ry), cy = Math.cos(rx), sy = Math.sin(rx); return [ cy,-sysx,-sycx, 0,cx,-sx, sy,sxcy,cxcy, ]; } // Create a WebGL shader function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (success) return shader; console.error(gl.getShaderInfoLog(shader)); gl.deleteShader(shader); } // Create a WebGL program function createProgram2(gl, vertexId, fragmentId) { let vertexShader = createShader(gl, gl.VERTEX_SHADER, document.getElementById(vertexId).text.trim()); let fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, document.getElementById(fragmentId).text.trim()); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); const success = gl.getProgramParameter(program, gl.LINK_STATUS); if (success) return program; console.error(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } // Create an object with attribute locations function createAttribLocations(gl, program, ...names) { let obj = {}; for (let i = 0; i < names.length; i++) { obj[names[i]] = gl.getAttribLocation(program, names[i]); } return obj; } // Create an object with uniform locations function createUniformLocations(gl, program, ...names) { let obj = {}; for (let i = 0; i < names.length; i++) { obj[names[i]] = gl.getUniformLocation(program, names[i]); } return obj; } </script> <script type="application/javascript"> function getScreenImages (gl) { return (function(output) { // Generate three canvases let imgRes = 400; // Canvas const c2 = document.createElement("CANVAS"); c2.width = imgRes; c2.height = imgRes; const ctx = c2.getContext("2d"); function createAndSetupTexture () { let t = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, t); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); return t; } // 3 textures let textures = [ createAndSetupTexture(), createAndSetupTexture(), createAndSetupTexture() ]; // Credit to Green Ghost for these functions let isFill = true; let isStroke = true; function color(r, g, b, a) { a = a === undefined ? 1 : a / 255; r = Math.floor(r); g = Math.floor(g); b = Math.floor(b); return "rgba(" + r + ", " + g + ", " + b + ", " + a + ")"; } function fill(r, g, b, a) { isFill = true; if (typeof r === "string") { ctx.fillStyle = r; } else { ctx.fillStyle = color(r, g, b, a); } } function stroke(r, g, b, a) { isStroke = true; ctx.strokeStyle = color(r, g, b, a); } function beginShape() { ctx.beginPath(); } function endShape() { if (isFill) { ctx.fill(); } if (isStroke) { ctx.stroke(); } } function translate(x, y) { ctx.translate(x, y); } function pushMatrix() { ctx.save(); } function popMatrix() { ctx.restore(); } function setPath(x, y) { ctx.moveTo(x, y); } function vertex(x, y) { ctx.lineTo(x, y); } function curveVertex(cx, cy, x, y) { ctx.quadraticCurveTo(cx, cy, x, y); } function textFont(font, size) { ctx.font = size + "px " + font; } function textAlign(align, baseline) { ctx.textAlign = align; ctx.textBaseline = baseline; } function text(txt, x, y) { ctx.fillText(txt, x, y); } // Terminal effect code function blurBox5x5 (input, output) { for (let y = 0; y < 400; y++) { let i = (2 + y * 400) * 4; // Try to minimize number of memory accesses and operations done // each iteration by accumulating blur value. Could extend to // a larger blur radius without increasing cost too much. let sumR = input[i - 8] + input[i - 4] + input[i] + input[i + 4]; let sumG = input[i - 8 + 1] + input[i - 4 + 1] + input[i + 1] + input[i + 4 + 1]; let sumB = input[i - 8 + 2] + input[i - 4 + 2] + input[i + 2] + input[i + 4 + 2]; for (let x = 2; x < 398; ++x) { sumR += input[i + 8]; sumG += input[i + 8 + 1]; sumB += input[i + 8 + 2]; output[i] = sumR * 0.2; output[i + 1] = sumG * 0.2; output[i + 2] = sumB * 0.2; sumR -= input[i - 8]; sumG -= input[i - 8 + 1]; sumB -= input[i - 8 + 2]; i += 4; } } // Vertical blur pass. for (let x = 0; x < 400; x++) { let i = (x + 2 * 400) * 4; let sumR = output[i - 3200] + output[i - 1600] + output[i] + output[i + 1600]; let sumG = output[i - 3200 + 1] + output[i - 1600 + 1] + output[i + 1] + output[i + 1600 + 1]; let sumB = output[i - 3200 + 2] + output[i - 1600 + 2] + output[i + 2] + output[i + 1600 + 2]; for (let y = 2; y < 398; ++y) { sumR += output[i + 3200]; sumG += output[i + 3200 + 1]; sumB += output[i + 3200 + 2]; output[i] = sumR * 0.2; output[i + 1] = sumG * 0.2; output[i + 2] = sumB * 0.2; sumR -= output[i - 3200]; sumG -= output[i - 3200 + 1]; sumB -= output[i - 3200 + 2]; i += 400 * 4; } } } const bloomBuffer1 = new Uint8ClampedArray(400 * 400 * 4).fill(0); const bloomBuffer2 = new Uint8ClampedArray(400 * 400 * 4).fill(0); function drawBloom (pixels) { blurBox5x5(pixels, bloomBuffer1); blurBox5x5(bloomBuffer1, bloomBuffer2); var numPixels = 400 * 400 * 4; for (var i = 0; i < numPixels; i += 4) { var i1 = i + 1, i2 = i + 2; pixels[i] = 0.7 * pixels[i] + 0.6 * bloomBuffer1[i] + 0.6 * bloomBuffer2[i]; pixels[i1] = 0.7 * pixels[i1] + 0.6 * bloomBuffer1[i1] + 0.6 * bloomBuffer2[i1]; pixels[i2] = 0.7 * pixels[i2] + 0.6 * bloomBuffer1[i2] + 0.6 * bloomBuffer2[i2]; } } function drawCRTEffect (pixels) { var shiftRows = Math.random() < 0.0625; var centerOfRowsToShift = Math.random() * 300 + 50; var shiftAmount = Math.random() < 0.5 ? 28 : -28; var abs = Math.abs; let i = 0; for (var y = 0; y < 400; ++y) { var brightness = (y % 3 === 0) ? 0.3 : 1.2; for (var x = 0; x < 400; ++x) { pixels[i] = brightness; pixels[i + 1] = brightness; pixels[i + 2] = brightness; i += 4; } // Shift pixels to give it a glitchy look. if (shiftRows && abs(y - centerOfRowsToShift) < 13) { // It's a bit different if you shift to the left or // right, so handle each case in a separate loop. var shiftI = i + shiftAmount; if (shiftAmount < 0) { for (var x = 399; x >= 0; --x) { i -= 4; shiftI -= 4; pixels[i] = pixels[shiftI]; pixels[i + 1] = pixels[shiftI + 1]; pixels[i + 2] = pixels[shiftI + 2]; } i += 1600; } else { i -= 1600; shiftI -= 1600; for (var x = 0; x < 400; ++x) { pixels[i] = pixels[shiftI]; pixels[i + 1] = pixels[shiftI + 1]; pixels[i + 2] = pixels[shiftI + 2]; i += 4; shiftI += 4; } } } } drawBloom(pixels); } // get info const info = retrieveData(); // Draw to WebGL textures textFont("Courier New", 19); let bgcol = "rgba(10, 15, 20, 255)"; let txtcol1 = "rgba(100, 0, 0, 255)"; let txtcol2 = "rgba(0, 0, 110, 255)"; let txtcol3 = "rgba(0, 255, 0, 255)"; const scenes = [ // Scene 1: draw names (function () { let text = [ "Team Members:" ].concat(info.members); ctx.fillStyle = bgcol; ctx.fillRect(0, 0, imgRes, imgRes); for (let i = 0; i < text.length; i ++) { let t = text[i]; ctx.fillStyle = txtcol1; var offsetX = 1.4; var offsetY = 0.8 + i 19; ctx.fillText(t, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol2; offsetX = -1.4; offsetY = -1.2 + i * 19; ctx.fillText(t, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol3; ctx.fillText(t, 14, 90 + i * 19); } let pixels = ctx.getImageData(0, 0, 400, 400); return function () { let p = new Uint8ClampedArray(pixels.data); drawCRTEffect(p); gl.bindTexture(gl.TEXTURE_2D, textures[0]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 400, 400, 0, gl.RGBA, gl.UNSIGNED_BYTE, p); }; }) (), // Scene 2: draw points (function () { let text = "Points:\n\n\t" + info.points; ctx.fillStyle = bgcol; ctx.fillRect(0, 0, imgRes, imgRes); ctx.fillStyle = bgcol; ctx.fillRect(0, 0, imgRes, imgRes); ctx.fillStyle = txtcol1; var offsetX = 1.4; var offsetY = 0.8; ctx.fillText(text, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol2; offsetX = -1.4; offsetY = -1.2; ctx.fillText(text, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol3; ctx.fillText(text, 14, 90); let pixels = ctx.getImageData(0, 0, 400, 400); return function () { let p = new Uint8ClampedArray(pixels.data); drawCRTEffect(p); gl.bindTexture(gl.TEXTURE_2D, textures[1]); // gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 400, 400, 0, gl.RGBA, gl.UNSIGNED_BYTE, p); }; }) (), // Scene 3: draw creators (function () { let text = "Page created by\n" + info.creators; ctx.fillStyle = bgcol; ctx.fillRect(0, 0, imgRes, imgRes); ctx.fillStyle = bgcol; ctx.fillRect(0, 0, imgRes, imgRes); ctx.fillStyle = txtcol1; var offsetX = 1.4; var offsetY = 0.8; ctx.fillText(text, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol2; offsetX = -1.4; offsetY = -1.2; ctx.fillText(text, 14 + offsetX, 90 + offsetY); ctx.fillStyle = txtcol3; ctx.fillText(text, 14, 90); let pixels = ctx.getImageData(0, 0, 400, 400); return function () { let p = new Uint8ClampedArray(pixels.data); drawCRTEffect(p); gl.bindTexture(gl.TEXTURE_2D, textures[2]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 400, 400, 0, gl.RGBA, gl.UNSIGNED_BYTE, p); }; }) (), ]; return { textures: textures, render: function () { for (let i = 0; i < scenes.length; i ++) { scenes[i](); } } }; }) ({}); } </script> <!-- call the functions here --> <script type="application/javascript"> function main() { // Constant letiables const WIDTH = 600; const HEIGHT = 600; const program_info = retrieveData(); // Get WebGL canvas const glCanvas = document.getElementById("gl-output"); glCanvas.style.width = WIDTH + "px"; glCanvas.style.height = HEIGHT + "px"; glCanvas.width = WIDTH; glCanvas.height = HEIGHT; // Get WebGL context const gl = glCanvas.getContext("webgl2", { preserveDrawingBuffer: true }); if (!gl) throw "Your browser does not support WebGL2!"; gl.viewport(0, 0, WIDTH, HEIGHT); gl.clearColor(0.2, 0.7, 0.0, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); // Program that renders the optical depth texture const bakedOpticalDepth = (function(output) { // Create program output.program = createProgram2(gl, "optical-depth.vsh", "optical-depth.fsh"); gl.useProgram(output.program); // Get uniform and attribute locations output.uniformLocations = {}; output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create and fill position buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Create texture let textureSize = 512; gl.activeTexture(gl.TEXTURE0); output.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, output.colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer output.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output.colorTexture, 0); // Render function output.render = function() { gl.useProgram(this.program); gl.viewport(0, 0, textureSize, textureSize); gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; // Render to the framebuffer output.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindVertexArray(null); gl.useProgram(null); return output; })({}); // Program that renders the noise texture const bakedNoise = (function(output) { output.program = createProgram2(gl, "landform.vsh", "landform.fsh"); // Get uniform and attribute locations output.uniformLocations = createUniformLocations(gl, output.program, "u_seed"); output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create and fill position buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Create texture let textureSize = 1024; gl.activeTexture(gl.TEXTURE1); output.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, output.colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer output.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output.colorTexture, 0); let seed = 0; output.render = function() { gl.useProgram(this.program); gl.viewport(0, 0, textureSize, textureSize); gl.uniform1f(this.uniformLocations.u_seed, seed); seed += 0.1; gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; output.update = function() { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); this.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); }; // Render to framebuffer output.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); return output; })({}); // Program that renders the stars const bakedStars = (function(output) { output.program = createProgram2(gl, "starbox.vsh", "starbox.fsh"); // Get uniform and attribute locations output.uniformLocations = {}; output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create and fill position buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Create texture let textureSize = 1024; gl.activeTexture(gl.TEXTURE2); output.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, output.colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer output.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output.colorTexture, 0); // Render function output.render = function() { gl.useProgram(this.program); gl.viewport(0, 0, textureSize, textureSize); gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; // Render to the framebuffer output.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindVertexArray(null); gl.useProgram(null); return output; })({}); // Program that renders the voronoi noise const bakedVoronoi = (function(output) { output.program = createProgram2(gl, "voronoi.vsh", "voronoi.fsh"); // Get uniform and attribute locations output.uniformLocations = { u_time: gl.getUniformLocation(output.program, "u_time") }; output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create and fill position buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Create texture let textureSize = 1024; gl.activeTexture(gl.TEXTURE4); output.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, output.colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer output.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output.colorTexture, 0); // Render function output.render = function() { gl.useProgram(this.program); gl.viewport(0, 0, textureSize, textureSize); gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; // Render to the framebuffer output.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindVertexArray(null); gl.useProgram(null); return output; })({}); // Program that renders the clouds const bakedClouds = (function(output) { output.program = createProgram2(gl, "clouds.vsh", "clouds.fsh"); // Get uniform and attribute locations output.uniformLocations = { u_time: gl.getUniformLocation(output.program, "u_time") }; output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create and fill position buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Create texture let textureSize = 1024; gl.activeTexture(gl.TEXTURE3); output.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, output.colorTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, textureSize, textureSize, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); gl.bindTexture(gl.TEXTURE_2D, null); // Create framebuffer output.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, output.colorTexture, 0); let t = 0.0; // Render function output.render = function() { gl.useProgram(this.program); gl.uniform1f(this.uniformLocations.u_time, t); gl.viewport(0, 0, textureSize, textureSize); gl.bindFramebuffer(gl.FRAMEBUFFER, output.framebuffer); gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); gl.bindFramebuffer(gl.FRAMEBUFFER, null); t += 0.001; }; // Render to the framebuffer output.render(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.bindVertexArray(null); gl.useProgram(null); return output; })({}); // Program that renders the planet + atmosphere + stars const spaceRenderer = (function(output) { // Create program output.program = createProgram2(gl, "space.vsh", "space.fsh"); // Get uniform and attribute locations output.uniformLocations = createUniformLocations(gl, output.program, "u_camera", "u_projection", "u_optical_depth", "u_noise", "u_light", "u_stars", "u_clouds", "u_voronoi"); output.attribLocations = { a_position: gl.getAttribLocation(output.program, "a_position") }; // Create and bind vertex array output.vertexArray = gl.createVertexArray(); gl.bindVertexArray(output.vertexArray); // Enable all attributes for (let loc in output.attribLocations) gl.enableVertexAttribArray(output.attribLocations[loc]); // Create buffer output.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, output.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW); gl.vertexAttribPointer(output.attribLocations.a_position, 2, gl.FLOAT, false, 0, 0); // Set uniforms gl.useProgram(output.program); let textures = [ [bakedOpticalDepth, "u_optical_depth"], [bakedNoise, "u_noise"], [bakedStars, "u_stars"], [bakedClouds, "u_clouds"], [bakedVoronoi, "u_voronoi"] ]; for (let i = 0; i < textures.length; i++) { gl.activeTexture(gl.TEXTURE0 + i); gl.bindTexture(gl.TEXTURE_2D, textures[i][0].colorTexture); gl.uniform1i(output.uniformLocations[textures[i][1]], i); } // Render function output.render = function() { gl.viewport(0, 0, WIDTH, HEIGHT); gl.useProgram(this.program); gl.bindVertexArray(this.vertexArray); gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); }; return output; })({}); // Code that gets the input const input = (function(output) { output.mouseX = 0; output.mouseY = 0; output.movementX = 0; output.movementY = 0; output.mouseDown = false; output.mouseButton = 0; output.keys = {}; let lock = "requestPointerLock"; if (glCanvas.mozRequestPointerLock) { lock = "mozRequestPointerLock"; } if (glCanvas.webkitRequestPointerLock) { lock = "webkitRequestPointerLock"; } glCanvas.onmousedown = function(event) { output.mouseButton = event.button; output.mouseDown = true; glCanvas[lock](); }; glCanvas.onmouseup = function(event) { output.mouseDown = false; }; glCanvas.onmousemove = function(event) { output.mouseX = event.x; output.mouseY = event.y; output.movementX += event.movementX; output.movementY += event.movementY; }; document.onkeydown = function(event) { if (event.keyCode === 16) { output.keys["SHIFT"] = true; } else output.keys[event.key.toString()] = true; }; document.onkeyup = function(event) { if (event.keyCode === 16) { output.keys["SHIFT"] = !true; } else output.keys[event.key.toString()] = false; }; output.update = function() { output.movementX = 0; output.movementY = 0; }; return output; })({}); // Camera const camera = (function(output) { output.position = [0, 0, 1.5]; output.matrix = [-1, 0, 0, 0, 1, 0, 0, 0, -1]; output.setUniforms = function() { gl.useProgram(spaceRenderer.program); gl.uniform3fv(spaceRenderer.uniformLocations.u_camera, this.position); gl.uniformMatrix3fv(spaceRenderer.uniformLocations.u_projection, false, this.matrix); // Calculate 4x4 perspective matrix // TODO: add rotation // let matrix = mat4.create(); // mat4.perspective(matrix, Math.PI / 2, 1, 0.01, 100); // let rotationMatrix = [ // this.matrix[0], this.matrix[1], this.matrix[2], 0, // this.matrix[3], this.matrix[4], this.matrix[5], 0, // this.matrix[6], this.matrix[7], this.matrix[8], 0, // 0, 0, 0, 1 // ]; // mat4.mul(matrix, matrix, rotationMatrix); // mat4.translate(matrix, matrix, [-this.position[0], - this.position[1], -this.position[2]]); // gl.useProgram(spaceshipRenderer.program); // gl.uniformMatrix4fv(spaceshipRenderer.uniformLocations.u_projection, false, matrix); }; output.rotateXZ = function(theta) { let ct = Math.cos(theta), st = Math.sin(theta); let m = [ct, 0, -st, 0, 1, 0, st, 0, ct]; mat3.multiply(this.matrix, this.matrix, m); }; output.rotateYZ = function(theta) { let ct = Math.cos(theta), st = Math.sin(theta); let m = [1, 0, 0, 0, ct, -st, 0, st, ct]; mat3.multiply(this.matrix, this.matrix, m); }; function rotateAroundAxis(u, theta) { // https://en.wikipedia.org/wiki/Rotation_matrix#Rotation_matrix_from_axis_and_angle let ct = Math.cos(theta); let st = Math.sin(theta); let ict = 1 - ct; let ux = u[0]; let uy = u[1]; let uz = u[2]; let ux2 = u[0] * u[0]; let uy2 = u[1] * u[1]; let uz2 = u[2] * u[2]; let R = []; R[0] = ct + ux2 * ict; R[1] = ux * uy * ict - uz * st; R[2] = ux * uz * ict + uy * st; R[3] = uy * ux * ict + uz * st; R[4] = ct + uy2 * ict; R[5] = uy * uz * ict - ux * st; R[6] = uz * ux * ict - uy * st; R[7] = uz * uy * ict + ux * st; R[8] = ct + uz2 * ict; return R; } output.rotateYa = function(theta) { let axis = [ this.matrix[1], this.matrix[4], this.matrix[7] ]; let rot = rotateAroundAxis(axis, theta); mat3.mul(this.matrix, this.matrix, rot); }; output.rotateXa = function(theta) { let axis = [ this.matrix[0], this.matrix[3], this.matrix[6] ]; let rot = rotateAroundAxis(axis, theta); mat3.mul(this.matrix, this.matrix, rot); }; output.update = function(dt) { let angle = -dt * 0.1; let ct = Math.cos(angle); let st = Math.sin(angle); let px = this.position[0], pz = this.position[2]; //this.position[0] = px * ct - pz * st; //this.position[2] = px * st + pz * ct; // TODO: switch to rotating around own axis this.rotateYa(input.movementX * 0.01); this.rotateXa(input.movementY * 0.01); }; return output; })({}); // Program(s) that render the capsule const spaceshipRenderer = (function(output) { let program1 = createProgram2(gl, "geometry.vsh", "geometry.fsh"); gl.useProgram(program1); let l_trigs = gl.getUniformLocation(program1, "u_trigs"); let l_cam = gl.getUniformLocation(program1, "u_cam"); let trigs = [1, 0, 0, 0, 0, -1, 0, 1, 0], cam = [30, 20, 20], rot = [0, 0], initial = [0, 0], current = [0, 0], down = 0; gl.uniform3fv(l_cam, cam); let setAttrib = function(program, name, array, count, type, buffer) { let loc = gl.getAttribLocation(program, name); let buf = gl.createBuffer(); let _buffer = buffer \|\| gl.ARRAY_BUFFER; let _type = type \|\| gl.FLOAT; let _count = count \|\| 3; gl.bindBuffer(_buffer, buf); gl.bufferData(_buffer, array, gl.STATIC_DRAW); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, _count, _type, false, 0, 0); }; let parseById = function(program, ID, col) { this.vao = gl.createVertexArray(); gl.bindVertexArray(this.vao); let _positions = [0, 0, 0]; let positions = []; let colors = []; let normals = []; let index = []; let _ID = ID.trim().split(/\s+/); let i = 0; while (_ID[i] === "v") { _positions.push(_ID[i + 1], _ID[i + 3], _ID[i + 2]); i += 4; } let temp; while (_ID[i] === "f") { temp = [_ID[i + 1] * 3, _ID[i + 2] * 3, _ID[i + 3] * 3]; for (let o = 0; o < temp.length; o++) { positions.push(_positions[temp[o]], _positions[temp[o] + 1], _positions[temp[o] + 2]); let o1 = (o + 1) % 3; let o2 = (o + 2) % 3; let le = [ _positions[temp[o2]] - _positions[temp[o]], _positions[temp[o2] + 1] - _positions[temp[o] + 1], _positions[temp[o2] + 2] - _positions[temp[o] + 2], ]; let ne = [ _positions[temp[o1]] - _positions[temp[o]], _positions[temp[o1] + 1] - _positions[temp[o] + 1], _positions[temp[o1] + 2] - _positions[temp[o] + 2], ]; normals.push(le[2] * ne[1] - le[1] * ne[2]); normals.push(le[0] * ne[2] - le[2] * ne[0]); normals.push(le[1] * ne[0] - le[0] * ne[1]); colors.push(col[0], col[1], col[2]); } i += 4; } setAttrib(program, "a_position", new Float32Array(positions)); setAttrib(program, "a_color", new Float32Array(colors)); setAttrib(program, "a_normal", new Float32Array(normals)); this.il = positions.length / 3; gl.bindVertexArray(null); this.draw = function() { gl.bindVertexArray(this.vao); gl.drawArrays(gl.TRIANGLES, 0, this.il); gl.bindVertexArray(null); }; }; let objects = []; obj.push(whiteshuttle,blackshuttle,manillashuttle); let palette = [ [0.65,0.95,0.7], [1,0.95,0.85], [0.8,0.8,0.8], [0,1,0], [1,0,0], [0.4,0.4,0.4], [0,0.5,1], [0,0.3,0.05], [0.9,0.9,0.9], [1,1,0.9], [1,1,1], [0.2,0.2,0.2], [0.9,0.85,0.6], [0,0,2], [0,0,2], [0,0,2], [0,0,2], [0,0,2], ]; return { cam: cam, render: function() { if (objects.length !== obj.length) { let i = objects.length; let file = getObj(i); objects.push(new parseById(program1, file, palette[i])); } gl.useProgram(program1); if (input.keys.w) { cam[0] += camera.matrix[2]; cam[1] += camera.matrix[5]; cam[2] += camera.matrix[8]; gl.uniform3fv(l_cam, cam); } if (input.keys.s) { cam[0] -= camera.matrix[2]; cam[1] -= camera.matrix[5]; cam[2] -= camera.matrix[8]; gl.uniform3fv(l_cam, cam); } if (input.keys.a) { cam[0] -= camera.matrix[0]; cam[1] -= camera.matrix[3]; cam[2] -= camera.matrix[6]; gl.uniform3fv(l_cam, cam); } if (input.keys.d) { cam[0] += camera.matrix[0]; cam[1] += camera.matrix[3]; cam[2] += camera.matrix[6]; gl.uniform3fv(l_cam, cam); } if (input.keys[" "]) { cam[0] += camera.matrix[1]; cam[1] += camera.matrix[4]; cam[2] += camera.matrix[7]; gl.uniform3fv(l_cam, cam); } if (input.keys["SHIFT"]) { cam[0] -= camera.matrix[1]; cam[1] -= camera.matrix[4]; cam[2] -= camera.matrix[7]; gl.uniform3fv(l_cam, cam); } gl.uniformMatrix3fv(l_trigs, false, camera.matrix); //gl.uniform3fv(l_cam,camera.position); for (let i = 0; i < objects.length; i++) objects[i].draw(); } }; })({}); const screenImages = getScreenImages(gl); const screenRenderer = (function(output) { // get shader output.program = createProgram2(gl, "screens.vsh", "screens.fsh"); gl.useProgram(output.program); // Get locations let l_tc = gl.getAttribLocation(output.program, "a_texcoord"); let l_pos = gl.getAttribLocation(output.program, "a_position"); let l_cam = gl.getUniformLocation(output.program, "u_cam"); let l_trigs = gl.getUniformLocation(output.program, "u_trigs"); console.log(l_tc, l_pos, l_cam, l_trigs); let l_tex = gl.getUniformLocation(output.program, "u_texture"); // textures gl.activeTexture(gl.TEXTURE23); gl.uniform1i(l_tex, 23); function setUniforms() { gl.uniform3fv(l_cam, spaceshipRenderer.cam); gl.uniformMatrix3fv(l_trigs, false, camera.matrix); } function createQuadMesh(positions) { let texcoords = new Float32Array([ 0.0, 0.0, 1.0, 0.0, 1.0, 1.0, 0.0, 1.0 ]); let elementArray = new Uint16Array([ 0, 1, 2, 0, 2, 3 ]); let obj = {}; obj.vertexArray = gl.createVertexArray(); gl.bindVertexArray(obj.vertexArray); gl.enableVertexAttribArray(l_tc); gl.enableVertexAttribArray(l_pos); obj.texcoordBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, obj.texcoordBuffer); gl.bufferData(gl.ARRAY_BUFFER, texcoords, gl.STATIC_DRAW); gl.vertexAttribPointer(l_tc, 2, gl.FLOAT, false, 0, 0); obj.positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, obj.positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); gl.vertexAttribPointer(l_pos, 3, gl.FLOAT, false, 0, 0); obj.indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, obj.indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, elementArray, gl.STATIC_DRAW); obj.render = function() { gl.bindVertexArray(obj.vertexArray); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); }; return obj; } /* v 82.671 -22.924 41.534 v 82.799 -23.605 31.809 v 69.925 -27.369 41.678 v 70.053 -28.051 31.953 f 1 2 3 f 4 3 2 v 62.6 -39.909 34 v 67.6 -39.909 38 v 67.6 -39.909 34 v 62.6 -39.909 38 f 2 3 4 f 1 4 3 v 58.613 -34.951 53.976 v 57.424 -38.405 44.936 v 44.659 -34.01 44.936 v 45.826 -30.622 54.005 f 1 2 4 f 3 4 2 / // Multiple calls to drawArrays let quads = [ createQuadMesh([ 82.671, 41.534, -22.924, 69.925, 41.678, -27.369, 70.053, 31.953, -28.051, 82.799, 31.809, -23.605, ]), createQuadMesh([ 76.825, 54.155, -31.875, 63.543, 54.177, -34.29, 64.025, 44.831, -37.027, 77.333, 44.853, -34.753, ]), createQuadMesh([ 58.613, 53.976, -34.951, 45.826, 54.005, -30.622, 44.659, 44.936, -34.01, 57.424, 44.936, -38.405, ]), ]; output.render = function () { gl.useProgram(output.program); setUniforms(); gl.activeTexture(gl.TEXTURE23); for (let i = 0; i < 3; i++) { gl.bindTexture(gl.TEXTURE_2D, screenImages.textures[i]); quads[i].render(); } }; return output; })({}); // Sun const sun = (function(output) { output.axisOfRotation = [0, 1, 0]; output.rotation = 0; output.lightDirection = [1, 0, 0]; output.setUniforms = function() { gl.useProgram(spaceRenderer.program); gl.uniform3fv(spaceRenderer.uniformLocations.u_light, this.lightDirection); }; output.step = function(dt) { let angle = dt; let ct = Math.cos(angle), st = Math.sin(angle); let x = this.lightDirection[0], z = this.lightDirection[2]; this.lightDirection[0] = x ct - z * st; this.lightDirection[2] = x * st + z * ct; }; output.setUniforms(); return output; })({}); let then = 0; screenImages.render(); function render(now) { let dt = (now - then) * 0.001; then = now; gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); camera.setUniforms(); camera.update(dt); sun.step(dt); sun.setUniforms(); spaceRenderer.render(); spaceshipRenderer.render(); screenRenderer.render(); input.update(); requestAnimationFrame(render); } requestAnimationFrame(render); } </script> <!-- Extra script tag to make restart button appear --> <script> main(); </script> </body> </html>
Folds	78,88,89,288,291,299,300,445,448,456,457,581,584,590,591,825,828,838,839,919,922,932,933,1125,1128,1154,1155,1172,1173,1194,1195,1210,1220,1305,1307,1671,1674,2449,2452,2454
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN267IanCgw
Votes	373
Spin-Offs	22
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	xacer
Author Name	xacer
Author ID	kaid_936620259368561719366955
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1739449136651
Updated	8 months ago, 1744828599397
Source Deleted	unknown