Viewing Program

Program Data

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

Title	SKI (lag, read code)
ID	6151069322395648
Created	5 years ago, 1602810139732
Updated	5 years ago, 1604509825847
Code	<!DOCTYPE html> <!-- Jentacular Gent SKI IMPORTANT IF YOU WANT TO RESTART THE PROGRAM REFRESH THE WEBPAGE DO NOT PRESS THE "Reload" BUTTON BELOW THE PROGRAM if you can't play it sorry i can't help you i don't know why it's being slow because it's completely fine for me delag is automatically turned off click the button with the label "Delag" to toggle delag mode while on, delag mode reduces the resolution, removes shadows, ambient occlusion, and specular lighting, and reduces the quality of the sky --> <html> <head> <meta charset="utf-8"> <title>SKI (lag, read code)</title> <style> body { padding: 0px; margin: 0px; overflow: hidden; } canvas { position: absolute; top: -1px; left: -1px; border: 1px solid; margin: 0px; padding: 0px; } img { position: absolute; z-index: 1; } #b { z-index: 2; } </style> </head> <body> <img style="visibility: hidden;" src="https://www.khanacademy.org/computer-programming/cow-juice/4624797932929024/latest.png"> </body> <script> function id(i) { return document.getElementById(i); } function ih(i) { return id(i).innerHTML; } function create(t) { return document.createElement(t); } </script> <script> var DELAG = true; </script> <script src="https://cdn.jsdelivr.net/gh/JentGent/brekfast/WebGL/ocgl.1.0.6.js"></script> <script src="https://cdn.jsdelivr.net/jquery/3.0.0-alpha1/jquery.min.js"></script> <script id="noise.js" type="application/javascript"> (function(global){ var module = global.noise = {}; function Grad(x, y, z) { this.x = x; this.y = y; this.z = z; } Grad.prototype.dot2 = function(x, y) { return this.xx + this.yy; }; Grad.prototype.dot3 = function(x, y, z) { return this.xx + this.yy + this.zz; }; var grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0), new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1), new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)]; var p = [151,160,137,91,90,15, 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; // To remove the need for index wrapping, double the permutation table length var perm = new Array(512); var gradP = new Array(512); // This isn't a very good seeding function, but it works ok. It supports 2^16 // different seed values. Write something better if you need more seeds. module.seed = function(seed) { if(seed > 0 && seed < 1) { // Scale the seed out seed = 65536; } seed = Math.floor(seed); if(seed < 256) { seed \|= seed << 8; } for(var i = 0; i < 256; i++) { var v; if (i & 1) { v = p[i] ^ (seed & 255); } else { v = p[i] ^ ((seed>>8) & 255); } perm[i] = perm[i + 256] = v; gradP[i] = gradP[i + 256] = grad3[v % 12]; } }; module.seed(0); /* for(var i=0; i<256; i++) { perm[i] = perm[i + 256] = p[i]; gradP[i] = gradP[i + 256] = grad3[perm[i] % 12]; }/ // Skewing and unskewing factors for 2, 3, and 4 dimensions var F2 = 0.5(Math.sqrt(3)-1); var G2 = (3-Math.sqrt(3))/6; var F3 = 1/3; var G3 = 1/6; // 2D simplex noise module.simplex2 = function(xin, yin) { var n0, n1, n2; // Noise contributions from the three corners // Skew the input space to determine which simplex cell we're in var s = (xin+yin)F2; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var t = (i+j)G2; var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. var y0 = yin-j+t; // For the 2D case, the simplex shape is an equilateral triangle. // Determine which simplex we are in. var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords if(x0>y0) { // lower triangle, XY order: (0,0)->(1,0)->(1,1) i1=1; j1=0; } else { // upper triangle, YX order: (0,0)->(0,1)->(1,1) i1=0; j1=1; } // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where // c = (3-sqrt(3))/6 var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords var y1 = y0 - j1 + G2; var x2 = x0 - 1 + 2 * G2; // Offsets for last corner in (x,y) unskewed coords var y2 = y0 - 1 + 2 * G2; // Work out the hashed gradient indices of the three simplex corners i &= 255; j &= 255; var gi0 = gradP[i+perm[j]]; var gi1 = gradP[i+i1+perm[j+j1]]; var gi2 = gradP[i+1+perm[j+1]]; // Calculate the contribution from the three corners var t0 = 0.5 - x0x0-y0y0; if(t0<0) { n0 = 0; } else { t0 = t0; n0 = t0 t0 * gi0.dot2(x0, y0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.5 - x1x1-y1y1; if(t1<0) { n1 = 0; } else { t1 = t1; n1 = t1 t1 * gi1.dot2(x1, y1); } var t2 = 0.5 - x2x2-y2y2; if(t2<0) { n2 = 0; } else { t2 = t2; n2 = t2 t2 * gi2.dot2(x2, y2); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 70 * (n0 + n1 + n2); }; // 3D simplex noise module.simplex3 = function(xin, yin, zin) { var n0, n1, n2, n3; // Noise contributions from the four corners // Skew the input space to determine which simplex cell we're in var s = (xin+yin+zin)F3; // Hairy factor for 2D var i = Math.floor(xin+s); var j = Math.floor(yin+s); var k = Math.floor(zin+s); var t = (i+j+k)G3; var x0 = xin-i+t; // The x,y distances from the cell origin, unskewed. var y0 = yin-j+t; var z0 = zin-k+t; // For the 3D case, the simplex shape is a slightly irregular tetrahedron. // Determine which simplex we are in. var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords if(x0 >= y0) { if(y0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=1; k2=0; } else if(x0 >= z0) { i1=1; j1=0; k1=0; i2=1; j2=0; k2=1; } else { i1=0; j1=0; k1=1; i2=1; j2=0; k2=1; } } else { if(y0 < z0) { i1=0; j1=0; k1=1; i2=0; j2=1; k2=1; } else if(x0 < z0) { i1=0; j1=1; k1=0; i2=0; j2=1; k2=1; } else { i1=0; j1=1; k1=0; i2=1; j2=1; k2=0; } } // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where // c = 1/6. var x1 = x0 - i1 + G3; // Offsets for second corner var y1 = y0 - j1 + G3; var z1 = z0 - k1 + G3; var x2 = x0 - i2 + 2 * G3; // Offsets for third corner var y2 = y0 - j2 + 2 * G3; var z2 = z0 - k2 + 2 * G3; var x3 = x0 - 1 + 3 * G3; // Offsets for fourth corner var y3 = y0 - 1 + 3 * G3; var z3 = z0 - 1 + 3 * G3; // Work out the hashed gradient indices of the four simplex corners i &= 255; j &= 255; k &= 255; var gi0 = gradP[i+ perm[j+ perm[k ]]]; var gi1 = gradP[i+i1+perm[j+j1+perm[k+k1]]]; var gi2 = gradP[i+i2+perm[j+j2+perm[k+k2]]]; var gi3 = gradP[i+ 1+perm[j+ 1+perm[k+ 1]]]; // Calculate the contribution from the four corners var t0 = 0.6 - x0x0 - y0y0 - z0z0; if(t0<0) { n0 = 0; } else { t0 = t0; n0 = t0 * t0 * gi0.dot3(x0, y0, z0); // (x,y) of grad3 used for 2D gradient } var t1 = 0.6 - x1x1 - y1y1 - z1z1; if(t1<0) { n1 = 0; } else { t1 = t1; n1 = t1 * t1 * gi1.dot3(x1, y1, z1); } var t2 = 0.6 - x2x2 - y2y2 - z2z2; if(t2<0) { n2 = 0; } else { t2 = t2; n2 = t2 * t2 * gi2.dot3(x2, y2, z2); } var t3 = 0.6 - x3x3 - y3y3 - z3z3; if(t3<0) { n3 = 0; } else { t3 = t3; n3 = t3 * t3 * gi3.dot3(x3, y3, z3); } // Add contributions from each corner to get the final noise value. // The result is scaled to return values in the interval [-1,1]. return 32 * (n0 + n1 + n2 + n3); }; // ##### Perlin noise stuff function fade(t) { return ttt(t(t6-15)+10); } function lerp(a, b, t) { return (1-t)a + tb; } // 2D Perlin Noise module.perlin2 = function(x, y) { // Find unit grid cell containing point var X = Math.floor(x), Y = Math.floor(y); // Get relative xy coordinates of point within that cell x = x - X; y = y - Y; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; // Calculate noise contributions from each of the four corners var n00 = gradP[X+perm[Y]].dot2(x, y); var n01 = gradP[X+perm[Y+1]].dot2(x, y-1); var n10 = gradP[X+1+perm[Y]].dot2(x-1, y); var n11 = gradP[X+1+perm[Y+1]].dot2(x-1, y-1); // Compute the fade curve value for x var u = fade(x); // Interpolate the four results return lerp( lerp(n00, n10, u), lerp(n01, n11, u), fade(y)); }; // 3D Perlin Noise module.perlin3 = function(x, y, z) { // Find unit grid cell containing point var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z); // Get relative xyz coordinates of point within that cell x = x - X; y = y - Y; z = z - Z; // Wrap the integer cells at 255 (smaller integer period can be introduced here) X = X & 255; Y = Y & 255; Z = Z & 255; // Calculate noise contributions from each of the eight corners var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z); var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1); var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z); var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1); var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z); var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1); var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z); var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1); // Compute the fade curve value for x, y, z var u = fade(x); var v = fade(y); var w = fade(z); // Interpolate return lerp( lerp( lerp(n000, n100, u), lerp(n001, n101, u), w), lerp( lerp(n010, n110, u), lerp(n011, n111, u), w), v); }; })(this); </script> <!--stolen from https://github.com/josephg/noisejs/blob/master/perlin.js--> <script id="normals.vsh" type="vertex-shader"> precision highp float; attribute vec3 vertPos; attribute vec3 vertCol; attribute vec3 vertNor; attribute vec3 faceNor; varying vec3 pos; varying vec3 col; varying vec3 norm; varying float zPos; uniform float FOV; uniform float yaw; uniform float pitch; uniform vec3 cam; uniform float time; const float far = 500.; const float near = 1.; vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 vPos = vertPos; vec3 vert = vPos - cam; if(dot(vert, faceNor) >= 0.) { return; } vert = yRotate(yaw, vert); vert = xRotate(pitch, vert); pos = vPos; col = vertCol; norm = vertNor; float z = vert.z * FOV; float zLine = (vert.z - near) / (far - near); zPos = zLine; gl_Position = vec4(vert.xy, zLine, 1. * z); } </script> <!--normals.vsh--> <script id="normals.fsh" type="fragment-shader"> precision highp float; varying vec3 pos; varying vec3 col; varying vec3 norm; varying float zPos; uniform sampler2D texture; uniform vec3 cam; uniform vec3 sun; uniform sampler2D shadowMap; uniform vec3 shadowCam; uniform float shadowYaw; uniform float shadowPitch; uniform float yaw; uniform float pitch; uniform vec3 shadowDimensions; float map(float a, float b, float c, float d, float e) { return d + (a - b) / (c - b) * (e - d); } vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { if(zPos < 0. \|\| zPos > 1.) { discard; } vec3 nor = normalize(norm); float shade = dot(nor, -sun); gl_FragColor = vec4(nor.x / 2. + 0.5, nor.y / 2. + 0.5, nor.z / 2. + 0.5, (length(pos - cam) - 1.) / (500. - 1.)); } </script> <!--normals.fsh--> <script id="color.vsh" type="vertex-shader"> precision highp float; attribute vec3 vertPos; attribute vec3 vertCol; attribute vec3 vertNor; attribute vec3 faceNor; attribute float vertSpec; varying vec3 pos; varying vec3 col; varying vec3 norm; varying float spec; uniform float FOV; uniform float yaw; uniform float pitch; uniform vec3 cam; uniform float time; const float far = 1000.; const float near = 500.; vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 vPos = vertPos; vec3 vert = vPos - cam; if(dot(vert, faceNor) >= 0.) { return; } vert = yRotate(yaw, vert); vert = xRotate(pitch, vert); pos = vPos; col = vertCol; norm = vertNor; spec = vertSpec; float z = vert.z * FOV; float zLine = (vert.z - near) / (far - near); gl_Position = vec4(vert.xy, zLine, 1. * z); } </script> <!--color.vsh--> <script id="color.fsh" type="fragment-shader"> precision highp float; varying vec3 pos; varying vec3 col; varying vec3 norm; varying float spec; uniform vec3 cam; uniform vec3 sun; uniform vec2 res; uniform sampler2D shadowMap; uniform sampler2D normalMap; uniform sampler2D skyTexture; uniform vec3 shadowCam; uniform float shadowYaw; uniform float shadowPitch; uniform float yaw; uniform float pitch; uniform vec3 shadowDimensions; uniform vec4 ambient; uniform float FOV; const float fog_min = 0.; const float fog_max = 400.; float map(float a, float b, float c, float d, float e) { return d + (a - b) / (c - b) * (e - d); } vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 nor = normalize(norm); if(length(pos - cam) < fog_max) { float shade = clamp(dot(nor, -sun), 0., 1.); bool inShadow = false; vec3 shadowCoords = xRotate(shadowPitch, yRotate(shadowYaw, pos - shadowCam)); vec2 imgCoords = vec2(map(shadowCoords.x, -shadowDimensions.x / 2., shadowDimensions.x / 2., 0., 1.), map(shadowCoords.y, -shadowDimensions.y / 2., shadowDimensions.y / 2., 0., 1.)); vec4 s = texture2D(shadowMap, imgCoords); if(s.a >= 1. && shadowCoords.z / shadowDimensions.z > s.r + 0.005) { if(shade <= 0.5 \|\| imgCoords.x < 0. \|\| imgCoords.x > 1. \|\| imgCoords.y < 0. \|\| imgCoords.y > 1.) { } else { shade = 0.5; } inShadow = true; } float ambientOcclusion = 1.; vec4 n = texture2D(normalMap, gl_FragCoord.xy / res); if(n.a != 0.) { ambientOcclusion = 0.; float ambientOcclusionIterations = 0.; for(float i = 0.; i < 3.14159265358979323 * 2.; i += 0.2) { for(float r = 0.002; r < 0.03; r += 0.002) { vec4 b = texture2D(normalMap, gl_FragCoord.xy / res + vec2(cos(i) * r / n.a, sin(i) * r / n.a)); if(b.a == 0.) { continue; } if(abs(b.a - n.a) > 0.02) { continue; } float d = clamp(dot(b.xyz * 2. - vec3(1), n.xyz * 2. - vec3(1)), 0., 1.); ambientOcclusion += map(d, 0., 1., 0.0, 1.); ambientOcclusionIterations += 1.; } } if(ambientOcclusionIterations == 0.) { ambientOcclusionIterations = 1.; ambientOcclusion = 1.; } ambientOcclusion /= ambientOcclusionIterations; } float specular = 0.; vec3 incidenceRay = normalize(vec3((gl_FragCoord.xy / res * 2. - vec2(1)) * FOV, 1)); incidenceRay = yRotate(-yaw, xRotate(-pitch, incidenceRay)); vec3 reflectionRay = incidenceRay - nor * dot(incidenceRay, nor) * 2.; specular = clamp(pow(clamp(dot(reflectionRay, -sun), 0., 1.), spec), 0., 1.); shade = max(shade, ambient.w); vec3 color = col; vec3 final = ((color * shade) + ambient.rgb * (1. - shade) * ambient.w) * ambientOcclusion; vec4 sky = texture2D(skyTexture, gl_FragCoord.xy / res); float fog = clamp(map(length(pos - cam), fog_min, fog_max, 0., 1.), 0., 1.); gl_FragColor = vec4(((1. - specular) * final + specular) * (1. - fog) + sky.xyz * fog, 1); } } </script> <!--color.fsh--> <script id="color-delag.vsh" type="vertex-shader"> precision highp float; attribute vec3 vertPos; attribute vec3 vertCol; attribute vec3 vertNor; attribute vec3 faceNor; varying vec3 pos; varying vec3 col; varying vec3 norm; uniform float FOV; uniform float yaw; uniform float pitch; uniform vec3 cam; uniform float time; const float far = 1000.; const float near = 500.; vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 vPos = vertPos; vec3 vert = vPos - cam; if(dot(vert, faceNor) >= 0.) { return; } vert = yRotate(yaw, vert); vert = xRotate(pitch, vert); pos = vPos; col = vertCol; norm = vertNor; float z = vert.z * FOV; float zLine = (vert.z - near) / (far - near); gl_Position = vec4(vert.xy, zLine, 1. * z); } </script> <!--color-delag.vsh--> <script id="color-delag.fsh" type="fragment-shader"> precision highp float; varying vec3 pos; varying vec3 col; varying vec3 norm; uniform vec3 cam; uniform vec3 sun; uniform vec2 res; uniform sampler2D skyDelagTexture; uniform float yaw; uniform float pitch; uniform vec4 ambient; uniform float FOV; const float fog_min = 0.; const float fog_max = 400.; float map(float a, float b, float c, float d, float e) { return d + (a - b) / (c - b) * (e - d); } vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 nor = normalize(norm); if(length(pos - cam) < fog_max) { float shade = clamp(dot(nor, -sun), 0., 1.); shade = max(shade, ambient.w); vec3 color = col; vec3 final = (color * shade) + ambient.rgb * (1. - shade) * ambient.w; vec4 sky = texture2D(skyDelagTexture, gl_FragCoord.xy / res); float fog = clamp(map(length(pos - cam), fog_min, fog_max, 0., 1.), 0., 1.); gl_FragColor = vec4(final * (1. - fog) + sky.xyz * fog, 1); } } </script> <!--color-delag.fsh--> <script id="shadows.vsh" type="vertex-shader"> precision highp float; attribute vec3 vertPos; attribute vec3 vertCol; attribute vec3 vertNor; varying vec3 pos; varying vec3 col; varying vec3 nor; uniform float time; uniform vec3 shadowCam; uniform float shadowYaw; uniform float shadowPitch; uniform vec3 shadowDimensions; uniform vec2 res; float map(float a, float b, float c, float d, float e) { return d + (a - b) / (c - b) * (e - d); } vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 vert = vertPos - shadowCam; vert = yRotate(shadowYaw, vert); vert = xRotate(shadowPitch, vert); pos = vert; col = vertCol; nor = vertNor; float zLine = (vert.z - 0.) / (shadowDimensions.z - 0.); gl_Position = vec4(map(vert.x, -shadowDimensions.x / 2., shadowDimensions.x / 2., -1., 1.), map(vert.y, -shadowDimensions.y / 2., shadowDimensions.x / 2., -1., 1.), zLine, 1); } </script> <!--shadows.vsh--> <script id="shadows.fsh" type="fragment-shader"> precision highp float; varying vec3 pos; varying vec3 col; varying vec3 nor; uniform sampler2D texture; uniform vec3 cam; uniform vec3 sun; uniform vec3 shadowCam; uniform float time; uniform float shadowYaw; uniform float shadowPitch; uniform vec3 shadowDimensions; float map(float a, float b, float c, float d, float e) { return d + (a - b) / (c - b) * (e - d); } void main() { if(pos.z <= 0.) { discard; } gl_FragColor = vec4(pos.z / shadowDimensions.z, 0, 0, 1); } </script> <!--shadows.fsh--> <script id="sky.vsh" type="vertex-shader"> precision highp float; attribute vec2 vertPos; void main() { gl_Position = vec4(vertPos.xy, 0, 1); } </script> <!--sky.vsh--> <script id="sky.fsh" type="fragment-shader"> #ifdef GL_ES precision mediump float; #endif uniform float time; uniform vec2 res; uniform vec3 sun; uniform vec3 cam; uniform float yaw; uniform float pitch; uniform float FOV; float map(float v, float v1, float v2, float v3, float v4) { return v3 + (v - v1) / (v2 - v1) * (v4 - v3); } vec3 xRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x, pos.y * c - pos.z * s, pos.z * c + pos.y * s); } vec3 yRotate(float theta, vec3 pos) { float s = sin(theta); float c = cos(theta); return vec3(pos.x * c + pos.z * s, pos.y, pos.z * c - pos.x * s); } void main() { vec3 dir = vec3(map(gl_FragCoord.x, 0., res.x, -FOV, FOV), map(gl_FragCoord.y, 0., res.y, -FOV, FOV), 1.); dir = normalize(dir); dir = xRotate(-pitch, dir); dir = yRotate(-yaw, dir); gl_FragColor = vec4(vec3(map(clamp(dir.y, -0.3, 0.8), -0.3, 0.8, 0.9, 0.8)), 1); if(dot(dir, -sun) > 0.995) { gl_FragColor = vec4(1); } } </script> <!--sky.fsh--> <script id="sky-delag.vsh" type="vertex-shader"> precision highp float; attribute vec2 vertPos; void main() { gl_Position = vec4(vertPos.xy, 0, 1); } </script> <!--sky-delag.vsh--> <script id="sky-delag.fsh" type="fragment-shader"> #ifdef GL_ES precision mediump float; #endif void main() { gl_FragColor = vec4(0.85, 0.85, 0.85, 1); } </script> <!--sky-delag.fsh--> <script id="vector.js" type="application/javascript"> function vec(x, y, z) { this.x = x \|\| 0; this.y = !y && y !== 0 ? x : y; this.z = !z && z !== 0 ? x : z; } vec.prototype.ineg = function() { this.x = -1; this.y = -1; this.z = -1; return this; } vec.prototype.neg = function() { return new vec(-this.x, -this.y, -this.z); } vec.prototype.iadd = function(v2) { if(1 v2 === v2) { this.x += v2; this.y += v2; this.z += v2; return; } this.x += v2.x; this.y += v2.y; this.z += v2.z; return this; } vec.prototype.add = function(v2) { if(1 * v2 === v2) { return new vec(this.x + v2, this.y + v2, this.z + v2); } return new vec(this.x + v2.x, this.y + v2.y, this.z + v2.z); } vec.prototype.isub = function(v2) { if(1 * v2 === v2) { this.x -= v2; this.y -= v2; this.z -= v2; return; } this.x -= v2.x; this.y -= v2.y; this.z -= v2.z; return this; } vec.prototype.sub = function(v2) { if(1 * v2 === v2) { return new vec(this.x - v2, this.y - v2, this.z - v2); } return new vec(this.x - v2.x, this.y - v2.y, this.z - v2.z); } vec.prototype.idiv = function(v2) { if(1 * v2 === v2) { this.x /= v2; this.y /= v2; this.z /= v2; return; } this.x /= v2.x; this.y /= v2.y; this.z /= v2.z; return this; } vec.prototype.div = function(v2) { if(1 * v2 === v2) { return new vec(this.x / v2, this.y / v2, this.z / v2); } return new vec(this.x / v2.x, this.y / v2.y, this.z / v2.z); } vec.prototype.imult = function(v2) { if(1 * v2 === v2) { this.x = v2; this.y = v2; this.z = v2; return; } this.x = v2.x; this.y = v2.y; this.z = v2.z; return this; } vec.prototype.mult = function(v2) { if(1 * v2 === v2) { return new vec(this.x * v2, this.y * v2, this.z * v2); } return new vec(this.x * v2.x, this.y * v2.y, this.z * v2.z); } vec.prototype.dot = function(v2) { return this.x * v2.x + this.y * v2.y + this.z * v2.z; } vec.prototype.cross = function(v2) { return new vec(this.y * v2.z - this.z * v2.y, this.z * v2.x - this.x * v2.z, this.x * v2.y - this.y * v2.x); } vec.prototype.mag = function() { return Math.sqrt(this.x * this.x + this.y * this.y + this.z * this.z); } vec.prototype.inormalize = function() { this.idiv(this.mag()); return this; } vec.prototype.normalize = function() { return this.div(this.mag()); } </script> <!--vector.js--> <script id="math.js" type="application/javascript"> function map(a, b, c, d, e) { return d + (e - d) * (a - b) / (c - b); } function ccCol(x, y, z, w, h, d, x2, y2, z2, w2, h2, d2) { x -= w / 2; y -= h / 2; z -= d / 2; x2 -= w2 / 2; y2 -= h2 / 2; z2 -= d2 / 2; return x > x2 - w && y > y2 - h && z > z2 - d && x < x2 + w2 && y < y2 + h2 && z < z2 + d2; } function constrain(a, b, c) { return Math.max(Math.min(a, c), b); } var fract = function(a) { return a % 1; }; function hash(x, y, z) { x = x \|\| 0; y = y \|\| 0; z = z \|\| 0; return fract(Math.sin(x * 12.91898 + y * 78.212033 + z * 42.20125039) * 43758.545453123); } function smoothstep(x, a, b) { var t = constrain((x - a) / (b - a), 0, 1); return t * t * (3 - 2 * t); } function hermite(a, x1, x2, x3, x4) { var b = smoothstep(a, x1, x2); return x4 * b + x3 * (1 - b); } var vNoise = (function() { var v3 = function(x, y, z) { return { x: x, y: y, z: z, value: hash(x, y, z) }; }; return function(x, y, z) { x = x \|\| 0; y = y \|\| 0; z = z \|\| 0; var fx = Math.floor(x); var cx = Math.ceil(x); var fy = Math.floor(y); var cy = Math.ceil(y); var fz = Math.floor(z); var cz = Math.ceil(z); var ftl = v3(fx, fy, fz); var ftr = v3(cx, fy, fz); var fbl = v3(fx, cy, fz); var fbr = v3(cx, cy, fz); var btl = v3(fx, fy, cz); var btr = v3(cx, fy, cz); var bbl = v3(fx, cy, cz); var bbr = v3(cx, cy, cz); return hermite(x, fx, cx - 0.0001, hermite(y, fy, cy - 0.0001, hermite(z, fz, cz - 0.0001, ftl.value, btl.value), hermite(z, fz, cz - 0.0001, fbl.value, bbl.value)), hermite(y, fy, cy - 0.0001, hermite(z, fz, cz - 0.0001, ftr.value, btr.value), hermite(z, fz, cz - 0.0001, fbr.value, bbr.value)) ); }; })(); </script> <!--math.js--> <script type="application/javascript"> function yRotate(theta, p) { var x = p.x, y = p.y, z = p.z; var s = Math.sin(theta * D2R); var c = Math.cos(theta * D2R); return v(x * c + z * s, y, z * c - x * s); } function xRotate(theta, p) { var x = p.x, y = p.y, z = p.z; var s = Math.sin(theta * D2R); var c = Math.cos(theta * D2R); return v(x, y * c - z * s, z * c + y * s); } function zRotate(theta, p) { var x = p.x, y = p.y, z = p.z; var s = Math.sin(theta * D2R); var c = Math.cos(theta * D2R); return v(x * c - y * s, y * c + x * s, z); } </script> <!--rotate.js--> <script type="application/javascript"> function v(x, y, z) { return new vec(x, y, z); } // Setup var oc = OCGL; var c = create("canvas"); c.width = 300; c.height = 300; oc.applyGL(c); var gl = oc.gl; var can = create("canvas"); can.width = 600; can.height = 600; can.setAttribute("id", "display"); can.setAttribute("oncontextmenu", "return false"); var ctx = can.getContext("2d"); document.body.appendChild(can); var frameCount = 0; gl.viewport(0, 0, c.width, c.height); // Constants var D2R = Math.PI/180; var FPS = 60; var CLIP_START = 0.1; var PI = 3.14159265358979323; var METER = 50; var WALK = 4.317; var SPRINT = 5.612; // Globals var tris = [], vertices = [], indices = []; var cam = v(0, 0, -200), yaw = 0, pitch = 0, shake = 0; var shadow = { x: -200, y: 200, z: 200, yaw: 0 + 180, pitch: -50, width: 700, height: 700, depth: 600, xRes: 700, yRes: 700 }; var sun = v(-1, 0, 0); sun = zRotate(-shadow.pitch, sun); sun = yRotate(-shadow.yaw + 90, sun); var FOV = 1; var scene = "intro"; // Triangle function threePointNormal(v1, v2, v3, neg) { var n = v2.sub(v1).cross(v3.sub(v2)); return neg ? n.ineg() : n; } function tri(v1, v2, v3, fn, n, n2, n3, c1, c2, c3, spec) { if(!c2) { return tri(v1, v2, v3, fn, fn, fn, fn, n, n2, n3, c1); } tris.push({ v1: v1, v2: v2, v3: v3, get normal() { return (fn === -1 ? threePointNormal(this.v1, this.v2, this.v3, true) : (fn \|\| threePointNormal(this.v1, this.v2, this.v3))); }, get normal1() { return (n === -1 ? threePointNormal(this.v1, this.v2, this.v3, true) : (n \|\| threePointNormal(this.v1, this.v2, this.v3))); }, get normal2() { return (n2 === -1 ? threePointNormal(this.v1, this.v2, this.v3, true) : (n2 \|\| threePointNormal(this.v1, this.v2, this.v3))); }, get normal3() { return (n3 === -1 ? threePointNormal(this.v1, this.v2, this.v3, true) : (n3 \|\| threePointNormal(this.v1, this.v2, this.v3))); }, c1: c1, c2: c2, c3: c3, spec: spec }); } function glVert(p, c, n, fn, spec) { indices.push(vertices.length / 13); vertices.push(p.x, p.y, p.z); vertices.push(c.x, c.y, c.z); vertices.push(n.x, n.y, n.z); vertices.push(fn.x, fn.y, fn.z); vertices.push(spec); }; function glTri(v1, v2, v3, n, n2, n3, fn, c1, c2, c3, spec) { glVert(v1, c1, n, fn, spec); glVert(v2, c2, n2, fn, spec); glVert(v3, c3, n3, fn, spec); }; function dispTri(t, c, ortho) { glTri(t.v1, t.v2, t.v3, t.normal1, t.normal2, t.normal3, t.normal, t.c1, t.c2, t.c3, t.spec); } function random(a, b) { if(!b && b !== 0) { return Math.random() * a; } return Math.min(a, b) + Math.random() * (Math.max(a, b) - Math.min(a, b)); } // Cylinder function cylinder(x, y, z, r, h, R, G, B, s, q) { q = q \|\| 10; var inc = Math.PI * 2 / q; for(var i = 0; i < Math.PI * 2; i += inc) { var c0 = Math.cos(i - inc) * r, s0 = Math.sin(i - inc) * r; var c1 = Math.cos(i) * r, s1 = Math.sin(i) * r; var c2 = Math.cos(i + inc) * r, s2 = Math.sin(i + inc) * r; var c3 = Math.cos(i + inc * 2) * r, s3 = Math.sin(i + inc * 2) * r; var o1 = v(x + c0, y + h / 2, z + s0), o2 = v(x + c0, y - h / 2, z + s0), p1 = v(x + c1, y + h / 2, z + s1), p2 = v(x + c1, y - h / 2, z + s1), q1 = v(x + c2, y + h / 2, z + s2), q2 = v(x + c2, y - h / 2, z + s2), r1 = v(x + c3, y + h / 2, z + s3), r2 = v(x + c3, y - h / 2, z + s3); var n1 = threePointNormal(p1, q1, q2).add(threePointNormal(o1, p1, p2)), n2 = threePointNormal(p1, q1, q2).add(threePointNormal(q1, r1, r2)); tri( p1, q1, q2, 0, n1, n2, n2, v(R, G, B), v(R, G, B), v(R, G, B), s ); tri( p1, p2, q2, -1, n1, n1, n2, v(R, G, B), v(R, G, B), v(R, G, B), s ); tri( p1, q1, v(x, y + h / 2, z), v(0, 1, 0), v(R, G, B), v(R, G, B), v(R, G, B), s ); tri( p2, q2, v(x, y - h / 2, z), v(0, -1, 0), v(1, 1, 0), v(1, 1, 0), v(1, 1, 0), s ); } } // Ellipsoid function getVertex(vs, ex, ey, ez, w, h, d, x, y, z) { var D = Math.hypot(x, y, z); x /= D; y /= D; z /= D; x = w / 2; y = h / 2; z = d / 2; x += ex; y += ey; z += ez; var p = vs.indexOf(x + "," + y + "," + z); if(p < 0) { p = vs.length; vs.push(x + "," + y + "," + z); } return p; } function genVertex(vs, p) { var bruh = vs[p].split(","); return v(bruh[0], bruh[1], bruh[2]); } function ellipsoid(x, y, z, w, h, d, R, G, B, s, q) { var vs = []; var fs = []; for(var i = -q / 2; i < q / 2; i += 1) { for(var j = -q / 2; j < q / 2; j += 1) { var p1 = getVertex(vs, x, y, z, w, h, d, i, j, -q / 2); var p2 = getVertex(vs, x, y, z, w, h, d, i + 1, j, -q / 2); var p3 = getVertex(vs, x, y, z, w, h, d, i + 1, j + 1, -q / 2); var p4 = getVertex(vs, x, y, z, w, h, d, i, j + 1, -q / 2); fs.push([p1, p3, p2]); fs.push([p1, p4, p3]); var p1 = getVertex(vs, x, y, z, w, h, d, i, j, q / 2); var p2 = getVertex(vs, x, y, z, w, h, d, i + 1, j, q / 2); var p3 = getVertex(vs, x, y, z, w, h, d, i + 1, j + 1, q / 2); var p4 = getVertex(vs, x, y, z, w, h, d, i, j + 1, q / 2); fs.push([p1, p2, p3]); fs.push([p1, p3, p4]); } } for(var i = -q / 2; i < q / 2; i += 1) { for(var j = -q / 2; j < q / 2; j += 1) { var p1 = getVertex(vs, x, y, z, w, h, d, -q / 2, j, i); var p2 = getVertex(vs, x, y, z, w, h, d, -q / 2, j, i + 1); var p3 = getVertex(vs, x, y, z, w, h, d, -q / 2, j + 1, i + 1); var p4 = getVertex(vs, x, y, z, w, h, d, -q / 2, j + 1, i); fs.push([p1, p2, p3]); fs.push([p1, p3, p4]); var p1 = getVertex(vs, x, y, z, w, h, d, q / 2, j, i); var p2 = getVertex(vs, x, y, z, w, h, d, q / 2, j, i + 1); var p3 = getVertex(vs, x, y, z, w, h, d, q / 2, j + 1, i + 1); var p4 = getVertex(vs, x, y, z, w, h, d, q / 2, j + 1, i); fs.push([p1, p3, p2]); fs.push([p1, p4, p3]); } } for(var i = -q / 2; i < q / 2; i += 1) { for(var j = -q / 2; j < q / 2; j += 1) { var p1 = getVertex(vs, x, y, z, w, h, d, j, -q / 2, i); var p2 = getVertex(vs, x, y, z, w, h, d, j, -q / 2, i + 1); var p3 = getVertex(vs, x, y, z, w, h, d, j + 1, -q / 2, i + 1); var p4 = getVertex(vs, x, y, z, w, h, d, j + 1, -q / 2, i); fs.push([p1, p3, p2]); fs.push([p1, p4, p3]); var p1 = getVertex(vs, x, y, z, w, h, d, j, q / 2, i); var p2 = getVertex(vs, x, y, z, w, h, d, j, q / 2, i + 1); var p3 = getVertex(vs, x, y, z, w, h, d, j + 1, q / 2, i + 1); var p4 = getVertex(vs, x, y, z, w, h, d, j + 1, q / 2, i); fs.push([p1, p2, p3]); fs.push([p1, p3, p4]); } } for(var i = 0; i < fs.length; i += 1) { var f1 = fs[i]; var v1 = genVertex(vs, f1[0]), v2 = genVertex(vs, f1[1]), v3 = genVertex(vs, f1[2]); var n1 = threePointNormal(v1, v2, v3), n2 = threePointNormal(v1, v2, v3), n3 = threePointNormal(v1, v2, v3); for(var j = 0; j < fs.length; j += 1) { var f2 = fs[j]; if(j === i) { continue; } if(f1[0] === f2[0] \|\| f1[0] === f2[1] \|\| f1[0] === f2[2]) { n1.iadd(threePointNormal(genVertex(vs, f2[0]), genVertex(vs, f2[1]), genVertex(vs, f2[2]))); } if(f1[1] === f2[0] \|\| f1[1] === f2[1] \|\| f1[1] === f2[2]) { n2.iadd(threePointNormal(genVertex(vs, f2[0]), genVertex(vs, f2[1]), genVertex(vs, f2[2]))); } if(f1[2] === f2[0] \|\| f1[2] === f2[1] \|\| f1[2] === f2[2]) { n3.iadd(threePointNormal(genVertex(vs, f2[0]), genVertex(vs, f2[1]), genVertex(vs, f2[2]))); } } tri( v1, v2, v3, 0, n1, n2, n3, v(R, G, B), v(R, G, B), v(R, G, B), s ) } } // Tree function tree(x, y, z, h) { var originalTris = tris.length; cylinder(x, y + h / 1.5 / 2 - 20, z, 10, h / 1.5, 0.52156862745, 0.3862745098, 0.21764705882, 8, 3); var inc = Math.PI 2 / (DELAG ? 6 : 6); var rad = 20; var green = v(0, 1, 0), white = v(1); for(var i = 0; i < Math.PI * 2; i += inc) { var o = v(x + Math.cos(i - inc) * rad, y + h / 3, z + Math.sin(i - inc) * rad), p = v(x + Math.cos(i) * rad, y + h / 3, z + Math.sin(i) * rad), q = v(x + Math.cos(i + inc) * rad, y + h / 3, z + Math.sin(i + inc) * rad), r = v(x + Math.cos(i + inc * 2) * rad, y + h / 3, z + Math.sin(i + inc * 2) * rad), s = v(x, y + h, z); var n0 = threePointNormal(o, p, s, true), n1 = threePointNormal(p, q, s, true), n2 = threePointNormal(q, r, s, true); tri( p, q, s, -1, n0.add(n1), n1.add(n2), v(0, 1, 0), h > 100 ? green : white, h > 100 ? green : white, h > 100 ? green : white, 100 ); tri( p, q, v(x, y + h / 3, z), v(0, -1, 0), h > 100 ? green : white, h > 100 ? green : white, h > 100 ? green : white, 100 ); } } // Stone function stone(x, y, z, s) { ellipsoid(x, y, z, s, s * 5/6, s, 0.4, 0.4, 0.4, 20, 2); } // Generate terrain position var terrain = (function() { var scale = 0.003, seed = random(1000), slope = -0.7; return function(x, z) { return v(x, noise.simplex3(x * scale, z * scale, seed) * 70 + z * slope, z); }; })(); // Trees var trees = []; function Tree(x, y, z, h) { trees.push({ x: x, y: y, z: z, height: h, initTris: function() { tree(x, y, z, h); } }); } // Stones var stones = []; function Stone(x, y, z, s) { stones.push({ x: x, y: y, z: z, size: s, initTris: function() { stone(x, y, z, s); } }); } // Player var player = { x: 0, y: 0, z: 0, height: 50, xVel: 0, yVel: 0, zVel: 0, score: 0, high: 0, scene: "menu", inputs: function() { if((keys[" "]) && this.onFloor) { this.yVel += 5; } if(keys.a \|\| keys.arrowleft) { this.xVel -= 0.2; } if(keys.d \|\| keys.arrowright) { this.xVel += 0.2; } }, col: function(xVel, yVel, zVel) { var t = terrain(this.x, this.z); var dw = 0.0001; if(this.y < t.y + this.height) { this.y = t.y + this.height; this.yVel = 0; this.onFloor = true; this.yVel += (t.y - terrain(this.x - this.xVel, this.z - this.zVel).y); this.xVel += (t.y - terrain(this.x + dw, this.z).y) / dw / 5; this.zVel += (t.y - terrain(this.x, this.z + dw).y) / dw / 10; } for(var i = 0; i < trees.length; i += 1) { var t = trees[i]; if(this.y > t.y + t.height) { continue; } if((t.x - this.x) * (t.x - this.x) + (t.z - this.z) * (t.z - this.z) > 20 * 20) { continue; } this.dead = frameCount; this.yVel = Math.abs(this.yVel) / 3; shake = 10; return; } for(var i = 0; i < stones.length; i += 1) { var t = stones[i]; if((this.x - t.x) * (this.x - t.x) + (this.z - t.z) * (this.z - t.z) + (this.y - t.y) * (this.y - t.y) / 1.5 / 1.5 > (t.size / 2 + 10) * (t.size / 2 + 10)) { continue; } this.dead = frameCount; this.yVel = Math.abs(this.yVel) / 3; shake = 10; return; } }, update: function() { this.xVel = 0.99; this.zVel = 0.99; if(this.scene === "game") { this.inputs(); } this.x += this.xVel; this.zVel = Math.max(this.zVel, 5); this.score += this.zVel; this.z += this.zVel; this.yVel -= 0.2; yaw += (-Math.atan2(this.xVel, this.zVel) / D2R - yaw) * 0.1; pitch += (Math.min(Math.atan2(this.yVel, Math.hypot(this.xVel, this.zVel)) / D2R, 11) - pitch) * 0.1; this.y += this.yVel; this.onFloor = false; this.col(0, this.yVel); }, display: function() { if(true) { if(this.scene === "game") { if(!this.dead) { this.update(); } else { this.x += this.xVel = 0.98; this.y += this.yVel = 0.98; this.z += this.zVel = 0.98; pitch += (-90 - pitch) 0.05; if(clicked) { player.dead = 0; player.y = terrain(player.x, player.z).y; player.xVel = player.yVel = player.zVel = 0; pitch = 0; yaw = 0; player.scene = "menu"; } } } else if(this.scene === "menu") { this.update(); this.dead = 0; shake = 0; this.score = 0; ctx.font = "40px Trebuchet MS"; if(mouseX < 10 + 40 + 10 + ctx.measureText("Delag").width + 10 && mouseY > can.height - 10 - 40 - 10) { if(pressed) { DELAG = !DELAG; } } else if(pressed) { this.score = 0; frameCount = 0; this.scene = "game"; } } } else { if(mouseIsPressed) { yaw -= (mouseX - pmouseX); pitch -= (mouseY - pmouseY); } var spd = 2; if(keys.a) { this.x -= Math.cos(yaw * D2R) * spd; this.z -= Math.sin(yaw * D2R) * spd; } if(keys.d) { this.x += Math.cos(yaw * D2R) * spd; this.z += Math.sin(yaw * D2R) * spd; } if(keys.w) { this.x += Math.cos(yaw * D2R + PI / 2) * spd; this.z += Math.sin(yaw * D2R + PI / 2) * spd; } if(keys.s) { this.x -= Math.cos(yaw * D2R + PI / 2) * spd; this.z -= Math.sin(yaw * D2R + PI / 2) * spd; } if(keys[" "]) { this.y += spd; } if(keys.c) { this.y -= spd; } } cam.x = this.x; cam.y = this.y; cam.z = this.z; } }; // Mouse var mouseIsPressed = false, mouseX = 0, mouseY = 0, pmouseX = 0, pmouseY = 0, clicked = false, pressed = false; can.onmousedown = function(e) { if(scene === "game") { mouseIsPressed = true; pressed = true; } } can.onmouseup = function(e) { if(scene === "game") { mouseIsPressed = false; clicked = true; } } can.onmousemove = function(e) { mouseX = e.clientX; mouseY = e.clientY; } // Keys var keys = {}; document.onkeydown = function(e) { keys[e.key.toLowerCase()] = true; } document.onkeyup = function(e) { keys[e.key.toLowerCase()] = false; } // Terrain generation var chunks = []; var chunkSize = 3; var tileSize = 80 / 1.2; function chunk(x, z) { for(var i = (x) * tileSize; i < (x + chunkSize) * tileSize; i += tileSize) { for(var j = (z) * tileSize; j < (z + chunkSize) * tileSize; j += tileSize) { var v1 = terrain(i, j), // mid-top mid-left v2 = terrain(i + tileSize, j), // mid-top mid-right v3 = terrain(i + tileSize, j + tileSize), // mid-bottom mid-right v4 = terrain(i, j + tileSize), // mid-bottom mid-left a = terrain(i - tileSize, j - tileSize), // top left b = terrain(i, j - tileSize), // top mid-left c = terrain(i + tileSize, j - tileSize), // top mid-right d = terrain(i + tileSize * 2, j - tileSize), // top right e = terrain(i + tileSize * 2, j), // mid-top right f = terrain(i + tileSize * 2, j + tileSize), // mid-bottom right g = terrain(i + tileSize * 2, j + tileSize * 2),// bottom right h = terrain(i + tileSize, j + tileSize * 2), // bottom mid-right k = terrain(i, j + tileSize * 2), // bottom mid-left l = terrain(i - tileSize, j + tileSize * 2), // bottom left m = terrain(i - tileSize, j + tileSize), // mid-bottom left n = terrain(i - tileSize, j); // mid-top left var midMidNormal1 = threePointNormal(v1, v2, v3, true), midMidNormal2 = threePointNormal(v1, v4, v3), topLeftNormal1 = threePointNormal(a, b, v1, true), topLeftNormal2 = threePointNormal(a, n, v1), topMidNormal1 = threePointNormal(b, c, v2, true), topMidNormal2 = threePointNormal(b, v1, v2), topRightNormal1 = threePointNormal(c, d, e, true), topRightNormal2 = threePointNormal(c, v2, e), midRightNormal1 = threePointNormal(v2, e, f, true), midRightNormal2 = threePointNormal(v2, v3, f), botRightNormal1 = threePointNormal(v3, f, g, true), botRightNormal2 = threePointNormal(v3, h, g), botMidNormal1 = threePointNormal(v4, v3, h, true), botMidNormal2 = threePointNormal(v4, k, h), botLeftNormal1 = threePointNormal(m, v4, k, true), botLeftNormal2 = threePointNormal(m, l, k), midLeftNormal1 = threePointNormal(n, v1, v4, true), midLeftNormal2 = threePointNormal(n, m, v4); var v1Normal = topLeftNormal1.add(topLeftNormal2).add(topMidNormal1).add(topMidNormal1).add(midMidNormal1).add(midMidNormal2).add(midLeftNormal1).add(midLeftNormal2), v2Normal = topMidNormal1.add(topMidNormal2).add(topRightNormal1).add(topRightNormal2).add(midRightNormal1).add(midRightNormal2).add(midMidNormal1).add(midMidNormal2), v3Normal = midMidNormal1.add(midMidNormal2).add(midRightNormal1).add(midRightNormal2).add(botRightNormal1).add(botRightNormal2).add(botMidNormal1).add(botMidNormal2), v4Normal = midLeftNormal1.add(midLeftNormal2).add(midMidNormal1).add(midMidNormal2).add(botMidNormal1).add(botMidNormal2).add(botLeftNormal1).add(botLeftNormal2); tri( v1, v2, v3, midMidNormal1, v1Normal, v2Normal, v3Normal, v(1), v(1), v(1), 50 ); tri( v1, v4, v3, midMidNormal2, v1Normal, v4Normal, v3Normal, v(1), v(1), v(1), 50 ); } } if(noise.simplex3(x, z, 0) < 0.25) { x = x * tileSize + chunkSize / 2 * tileSize + noise.simplex3(x, z, 25) * chunkSize / 2 * tileSize; z = z * tileSize + chunkSize / 2 * tileSize + noise.simplex3(x, z, 50) * chunkSize / 2 * tileSize; if(noise.simplex3(x * 10, z * 10, 0) < 0.2) { Tree(x, terrain(x, z).y, z, noise.simplex3(x, z, 0) * 50 + 100); } else { Stone(x, terrain(x, z).y, z, noise.simplex3(x, z, 0) * 25 + 75); } } } var terrainGen = function(x, z) { if(chunks.indexOf(x + "," + z) > -1) { return; } chunks.push(x + "," + z); tris.length = trees.length = stones.length = 0; for(var i = -2; i < 3; i += 1) { for(var j = -2; j < 3; j += 1) { chunk(x + i * chunkSize, z + j * chunkSize); } } for(var i = 0; i < trees.length; i += 1) { trees[i].initTris(); } for(var i = 0; i < stones.length; i += 1) { stones[i].initTris(); } vertices.length = indices.length = 0; for(var i = 0; i < tris.length; i += 1) { dispTri(tris[i], cam, false); } }; // Game Logic function update() { shadow.yaw += 0.01; sun = yRotate(-0.01, sun); shadow.x = cam.x - sun.x * shadow.depth / 2; shadow.y = cam.y - sun.y * shadow.depth / 2; shadow.z = cam.z - sun.z * shadow.depth / 2; var xChunk = Math.floor((player.x / chunkSize / tileSize)) * chunkSize, zChunk = Math.floor((player.z / chunkSize / tileSize)) * chunkSize; terrainGen(xChunk, zChunk); for(var i = chunks.length - 1; i >= 0; i -= 1) { var ch = chunks[i].split(","); if(ch[0] <= xChunk && ch[0] >= xChunk && ch[1] <= zChunk && ch[1] >= zChunk) { continue; } chunks.splice(i, 1); } player.display(); pmouseX = mouseX; pmouseY = mouseY; clicked = pressed = false; shake = 0.94; if(Math.abs(shake) < 0.1) { shake = 0; } } // UI var fader = 0, milkImage = document.getElementsByTagName("img")[0]; function drawUI() { if(fader > 150) { scene = "game"; } if(scene === "intro") { ctx.fillStyle = "rgba(0, 0, 0, 1)"; ctx.fillRect(0, 0, can.width, can.height); ctx.fillStyle = "white"; ctx.font = "30px Trebuchet MS"; ctx.textAlign = "center"; ctx.textBaseline = "bottom"; ctx.fillText("J e n t a c u l a r G e n t", can.width / 2, can.height / 2 + milkImage.height / 2 + 40 - 50 / (1 + fader / 10)); ctx.fillStyle = "black"; ctx.fillRect(0, can.height / 2 + milkImage.height / 2 - 50, can.width, 50); ctx.drawImage(milkImage, can.width / 2 - milkImage.width / 2, can.height / 2 - milkImage.height / 2 - 40 + 40 / (1 + fader / 10)); clicked = pressed = mouseIsPressed = false; } else if(scene === "game") { if(player.scene === "menu") { ctx.font = "150px Trebuchet MS"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("S K I", can.width / 2, can.height / 3); ctx.font = "40px Trebuchet MS"; ctx.fillText("A D to steer", can.width / 2, can.height 3 / 5); ctx.fillText("spacebar to jump", can.width / 2, can.height * 3 / 5 + 50); ctx.fillText("click to start", can.width / 2, can.height * 3 / 5 + 50 + 70); ctx.font = "50px Trebuchet MS"; ctx.textAlign = "left"; ctx.textBaseline = "top"; ctx.fillText("high " + (player.high \| 0), 10, 10); ctx.fillStyle = "black"; ctx.fillRect(10, can.height - 10 - 40, 40, 40); if(DELAG) { ctx.fillStyle = "white"; ctx.fillRect(10 + 10, can.height - 10 - 40 + 10, 40 - 10 * 2, 40 - 10 * 2); } ctx.fillStyle = "white"; ctx.textAlign = "left"; ctx.textBaseline = "middle"; ctx.font = "40px Trebuchet MS"; ctx.fillText("Delag", 10 + 40 + 10, can.height - 10 - 40 / 2); c.width += ((DELAG ? 200 : 300) - c.width) * 0.1; c.height += ((DELAG ? 200 : 300) - c.height) * 0.1; } if(player.scene === "game") { if(player.dead) { player.high = Math.max(player.score, player.high); var anim = frameCount - player.dead; ctx.fillStyle = "rgba(255, 0, 0, " + (1 / (anim / 10 + 1)) + ")"; ctx.fillRect(0, 0, can.width, can.height); ctx.font = "100px Trebuchet MS"; ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText("C R A S H", can.width / 2, can.height / 3 + can.height / (anim / 4 + 1)); ctx.font = "50px Trebuchet MS"; ctx.fillText("score " + (player.score \| 0), can.width / 2, can.height / 2 + can.height / (anim / 6 + 1)); ctx.fillText("high " + (player.high \| 0), can.width / 2, can.height / 2 + can.height / (anim / 6 + 1) + 50); ctx.font = "40px Trebuchet MS"; ctx.fillText("click", can.width / 2, can.height * 2 / 3 + can.height / (anim / 8 + 1) + 50); c.width += (20 - c.width) * 0.05; c.height += (20 - c.height) * 0.05; } else { ctx.font = "50px Trebuchet MS"; ctx.textAlign = "left"; ctx.textBaseline = "bottom"; ctx.fillStyle = "white"; ctx.fillText(player.score \| 0, 0, can.height + 50 / (frameCount / 10 + 1)); c.width += ((DELAG ? 200 : 300) - c.width) * 0.1; c.height += ((DELAG ? 200 : 300) - c.height) * 0.1; } } } fader += 1; if(Math.abs(fader - 150) < 25) { ctx.fillStyle = "rgba(0, 0, 0, " + map(Math.abs(fader - 150), 0, 25, 1, 0) + ")"; ctx.fillRect(0, 0, can.width, can.height); } } </script> <!--logic.js--> <script type="application/javascript"> // Programs var sky = new oc.Program(ih("sky.vsh"), ih("sky.fsh")); var skyDelag = new oc.Program(ih("sky-delag.vsh"), ih("sky-delag.fsh")); var color = new oc.Program(ih("color.vsh"), ih("color.fsh")); var colorDelag = new oc.Program(ih("color-delag.vsh"), ih("color-delag.fsh")); var shadowMap = new oc.Program(ih("shadows.vsh"), ih("shadows.fsh")); var normalMap = new oc.Program(ih("normals.vsh"), ih("normals.fsh")); var shadowFramebuffer = gl.createFramebuffer(); var shadowDepthBuffer = gl.createRenderbuffer(); var shadowTexture = color.injectTexture("shadowMap", 1, shadow.width, shadow.height, null, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.LINEAR, gl.LINEAR); var normalFramebuffer = gl.createFramebuffer(); var normalDepthBuffer = gl.createRenderbuffer(); var normalTexture = color.injectTexture("normalMap", 2, c.width, c.height, null, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.LINEAR, gl.LINEAR); var skyFramebuffer = gl.createFramebuffer(); var skyTexture = color.injectTexture("skyTexture", 3, c.width, c.height, null, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.LINEAR, gl.LINEAR); var skyDelagFramebuffer = gl.createFramebuffer(); var skyDelagTexture = colorDelag.injectTexture("skyDelagTexture", 4, c.width, c.height, null, gl.CLAMP_TO_EDGE, gl.CLAMP_TO_EDGE, gl.LINEAR, gl.LINEAR); oc.universalUniform("shadowDimensions", "3fv", [shadow.width, shadow.height, shadow.depth]); oc.universalUniform("ambient", "4fv", [0.8, 0.9, 1, 0.2]); // Draw function draw() { ctx.clearRect(0, 0, 600, 600); var view = xRotate(pitch, yRotate(yaw, v(0, 0, 1))); oc.universalUniform("res", "2fv", [c.width, c.height]); oc.universalUniform("delag", "1i", DELAG ? 1 : 0); oc.universalUniform("yaw", "1fv", [yaw * D2R + random(-shake, shake) * D2R]); oc.universalUniform("pitch", "1fv", [pitch * D2R + random(-shake, shake) * D2R]); oc.universalUniform("time", "1fv", [frameCount]); oc.universalUniform("cam", "3fv", [cam.x, cam.y, cam.z]); oc.universalUniform("sun", "3fv", [sun.x, sun.y, sun.z]); oc.universalUniform("FOV", "1fv", [FOV]); oc.universalUniform("shadowCam", "3fv", [shadow.x, shadow.y, shadow.z]); oc.universalUniform("shadowYaw", "1fv", [shadow.yaw * D2R]); oc.universalUniform("shadowPitch", "1fv", [shadow.pitch * D2R]); var bpe = new Float32Array(0).BYTES_PER_ELEMENT; if(!DELAG) { oc.use(sky); gl.viewport(0, 0, c.width, c.height); oc.depthTest(false); oc.clearDepth(); oc.clearColor(); gl.activeTexture(gl.TEXTURE0 + 3); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, c.width, c.height, 0, gl.RGBA, gl.UNSIGNED_SHORT_4_4_4_4, null); gl.bindFramebuffer(gl.FRAMEBUFFER, skyFramebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, skyTexture, 0); sky.fullscreen(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); sky.fullscreen(); ctx.drawImage(c, 0, 0, 600, 600); gl.viewport(0, 0, shadow.xRes, shadow.yRes); oc.use(shadowMap); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); oc.setupBuffer(oc.ARRAY_BUFFER, new Float32Array(vertices), oc.STATIC_DRAW); oc.setupBuffer(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), oc.STATIC_DRAW); shadowMap.setAttribute("vertPos", 3, oc.FLOAT, false, 13 * bpe, 0); shadowMap.setAttribute("vertCol", 3, oc.FLOAT, false, 13 * bpe, 3 * bpe); shadowMap.setAttribute("vertNor", 3, oc.FLOAT, false, 13 * bpe, 6 * bpe); shadowMap.setAttribute("faceNor", 3, oc.FLOAT, false, 13 * bpe, 9 * bpe); shadowMap.setAttribute("vertSpec", 1, oc.FLOAT, false, 13 * bpe, 12 * bpe); gl.activeTexture(gl.TEXTURE0 + 1); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, shadow.xRes, shadow.yRes, 0, gl.RGBA, gl.UNSIGNED_SHORT_4_4_4_4, null); gl.bindFramebuffer(gl.FRAMEBUFFER, shadowFramebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, shadowTexture, 0); gl.bindRenderbuffer(gl.RENDERBUFFER, shadowDepthBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, shadow.xRes, shadow.yRes); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, shadowDepthBuffer); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); ctx.drawImage(c, 0, 0, 600, 600); gl.viewport(0, 0, c.width, c.height); oc.use(normalMap); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); normalMap.setAttribute("vertPos", 3, oc.FLOAT, false, 13 * bpe, 0); normalMap.setAttribute("vertCol", 3, oc.FLOAT, false, 13 * bpe, 3 * bpe); normalMap.setAttribute("vertNor", 3, oc.FLOAT, false, 13 * bpe, 6 * bpe); normalMap.setAttribute("faceNor", 3, oc.FLOAT, false, 13 * bpe, 9 * bpe); normalMap.setAttribute("vertSpec", 1, oc.FLOAT, false, 13 * bpe, 12 * bpe); gl.activeTexture(gl.TEXTURE0 + 2); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, c.width, c.height, 0, gl.RGBA, gl.UNSIGNED_SHORT_4_4_4_4, null); gl.viewport(0, 0, c.width, c.height); gl.bindFramebuffer(gl.FRAMEBUFFER, normalFramebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, normalTexture, 0); gl.bindRenderbuffer(gl.RENDERBUFFER, normalDepthBuffer); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, c.width, c.height); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, normalDepthBuffer); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); ctx.drawImage(c, 0, 0, 600, 600); oc.use(color); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); color.setAttribute("vertPos", 3, oc.FLOAT, false, 13 * bpe, 0); color.setAttribute("vertCol", 3, oc.FLOAT, false, 13 * bpe, 3 * bpe); color.setAttribute("vertNor", 3, oc.FLOAT, false, 13 * bpe, 6 * bpe); color.setAttribute("faceNor", 3, oc.FLOAT, false, 13 * bpe, 9 * bpe); color.setAttribute("vertSpec", 1, oc.FLOAT, false, 13 * bpe, 12 * bpe); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } else { oc.use(skyDelag); gl.viewport(0, 0, c.width, c.height); oc.depthTest(false); oc.clearDepth(); oc.clearColor(); gl.activeTexture(gl.TEXTURE0 + 4); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, c.width, c.height, 0, gl.RGBA, gl.UNSIGNED_SHORT_4_4_4_4, null); gl.bindFramebuffer(gl.FRAMEBUFFER, skyFramebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, skyDelagTexture, 0); skyDelag.fullscreen(); gl.bindFramebuffer(gl.FRAMEBUFFER, null); skyDelag.fullscreen(); ctx.drawImage(c, 0, 0, 600, 600); oc.use(colorDelag); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); oc.setupBuffer(oc.ARRAY_BUFFER, new Float32Array(vertices), oc.STATIC_DRAW); oc.setupBuffer(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), oc.STATIC_DRAW); colorDelag.setAttribute("vertPos", 3, oc.FLOAT, false, 13 * bpe, 0); colorDelag.setAttribute("vertCol", 3, oc.FLOAT, false, 13 * bpe, 3 * bpe); colorDelag.setAttribute("vertNor", 3, oc.FLOAT, false, 13 * bpe, 6 * bpe); colorDelag.setAttribute("faceNor", 3, oc.FLOAT, false, 13 * bpe, 9 * bpe); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } ctx.drawImage(c, 0, 0, 600, 600); } </script> <!--render.js--> <script id="run.js" type="application/javascript"> window.performance = window.performance \|\| {}; performance.now = (function() { return performance.now \|\| performance.mozNow \|\| performance.msNow \|\| performance.oNow \|\| performance.webkitNow \|\| Date.now; })(); var pm = performance.now(), frameRate = performance.now() - pm; function logicLoop() { setTimeout(logicLoop, 1000 / FPS); frameRate = 1000 / (performance.now() - pm); pm = performance.now(); update(); frameCount += 1; } logicLoop(); function run() { requestAnimationFrame(run); draw(); drawUI(); } run(); draw(); </script> <!--run.js--> </html>
Folds	62,357,358,407,408,450,451,501,502,601,602,649,650,696,697,740,741,767,768,776,777,816,817,825,826,834,836,939,940,1010,1011,1030,1031,1792,1793,1948,1949,1975
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgM3v1sv2Cgw
Votes	201
Spin-Offs	9
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	JentGent
Author Name	JentacularGent
Author ID	kaid_1111444645373975142506044
Author Profile Access	COACH

Archive Data

Added	10 months ago, 1739454036341
Updated	10 months ago, 1739454044443
Source Deleted	unknown