Viewing Program

Program Data

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

Title	don't fall
ID	6412818720440320
Created	Unknown
Updated	2 years ago, 1673911492479
Code	<!DOCTYPE html> <!-- entry for clash of code round 2 W A S D to move get to end as fast as possible don't fall --> <html> <head> <!-- HTML stuff --> <meta charset="utf-8"> <title>don't fall</title> <!-- Styles --> <style> body { overflow: hidden; background-color: gray; margin: 0px; } canvas { position: absolute; top: 0px; left: 0px; width: 100vw; height: 100vh; } #fallback { margin: 0px; padding: 0px; position: absolute; background-color: rgb(200, 200, 200); width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; } #inner-fallback { width: 90vw; background-color: white; padding: 1em; border-radius: 10px; text-align: center; font-family: "Trebuchet MS"; font-size: 20px; } #gl-canvas { display: none; } </style> </head> <body> <!-- Fallback div --> <div id="fallback"> <div id="inner-fallback"> Oh no! Your browser does not support WebGL2! Please enable WebGL2 on your browser. </div> </div> <!-- Canvases --> <canvas id="gl-canvas"></canvas> <canvas id="ui-canvas"></canvas> <!-- Blur 5x5 shader --> <script id="blur5x5.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position, 0, 1); v_position = a_position * 0.5 + 0.5; } </script> <script id="blur5x5.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform sampler2D u_texture; uniform sampler2D u_depth; uniform vec2 u_resolution; out vec4 o_color; void main () { vec3 c = vec3(0, 0, 0); float depth = texture(u_depth, v_position).r; int spread = int(10.0); for (int dx = -spread; dx <= spread; dx ++) { vec2 uv = v_position + vec2(dx, 0.0) / (u_resolution); c += texture(u_texture, uv).rgb; } for (int dy = -spread; dy <= spread; dy ++) { vec2 uv = v_position + vec2(0.0, dy) / (u_resolution); c += texture(u_texture, uv).rgb; } c /= 4.0 * float(spread) + 1.0; c = 2.; o_color = vec4(c, 1); } </script> <!-- Brightness filter --> <script id="brightness-filter.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position, 0, 1); v_position = a_position 0.5 + 0.5; } </script> <script id="brightness-filter.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform sampler2D u_texture; uniform sampler2D u_depth; out vec4 o_color; void main () { vec3 c = texture(u_texture, v_position).rgb; /* float d = texture(u_depth, v_position).r; float zNear = 0.1; float zFar = 100.0; float normalized = (2.0 * zNear) / (zFar + zNear - d * (zFar - zNear)); / if (dot(c, c) < 0.8) o_color = vec4(0, 0, 0, 1); else o_color = vec4(c 0.8, 1); //o_color = vec4(vec3(normalized), 1); } </script> <!-- Bloom shader --> <script id="combine.vsh" type="text/glsl"> #version 300 es in vec2 a_position; out vec2 v_position; void main () { gl_Position = vec4(a_position, 0, 1); v_position = a_position * 0.5 + 0.5; } </script> <script id="combine.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform sampler2D u_original; uniform sampler2D u_blurred; out vec4 o_color; void main () { o_color = texture(u_blurred, v_position) + texture(u_original, v_position); } </script> <!-- Geometry shader --> <script id="geometry.vsh" type="text/glsl"> #version 300 es in vec4 a_position; in vec3 a_normal; in vec2 a_texcoord; uniform mat4 u_model; uniform mat4 u_projection; out vec3 v_normal; out vec2 v_texcoord; void main () { gl_Position = u_projection * u_model * a_position; v_normal = mat3(u_model) * a_normal; v_texcoord = a_texcoord; } </script> <script id="geometry.fsh" type="text/glsl"> #version 300 es precision highp float; in vec3 v_normal; in vec2 v_texcoord; uniform vec3 u_color; out vec4 o_color; void main () { vec2 r = abs(v_texcoord - 0.5) * 2.0; float m = max(r.x, r.y); vec3 c = m > 0.9 ? u_color : vec3(0.1, 0.1, 0.1); o_color = vec4(c, 1); } </script> <!-- Skybox shader --> <script id="skybox.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; } </script> <script id="skybox.fsh" type="text/glsl"> #version 300 es precision highp float; in vec2 v_position; uniform mat4 u_projection; out vec4 o_color; vec2 rayBox (vec3 c1, vec3 c2, vec3 ro, vec3 rd) { vec3 t0 = (c1 - ro) / rd; vec3 t1 = (c2 - ro) / rd; vec3 tmin = min(t0, t1); vec3 tmax = max(t0, t1); float dstA = max(max(tmin.x, tmin.y), tmin.z); float dstB = min(tmax.x, min(tmax.y, tmax.z)); float dstToBox = max(0.0, dstA); float dstInsideBox = max(0.0, dstB - dstToBox); return vec2(dstToBox, dstInsideBox); } const vec3 c1 = vec3(-100, -50, -100); const vec3 c2 = vec3(100, -20, 100); void main () { vec3 origin = vec3(0, 0, 0); vec3 ray = normalize(inverse(mat3(u_projection)) * vec3(v_position.xy, 1.0)).xyz; ray.y = -abs(ray.y); // vec2 t = rayBox(c1, c2, origin, ray); float c = max(t.y0.01, 0.0); if (t.y < 0.001) c = 0.0; c = c; c = c; c = c; c = c * 0.8 + 0.2; o_color = vec4(vec3(c), 1); } </script> <!-- External scripts --> <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js"></script> <!-- WebGL utils --> <script type="application/javascript"> 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); } function createProgram (gl, vs, fs) { const vsSource = document.getElementById(vs).text.trim(); const fsSource = document.getElementById(fs).text.trim(); const vShader = createShader(gl, gl.VERTEX_SHADER, vsSource); const fShader = createShader(gl, gl.FRAGMENT_SHADER, fsSource); const program = gl.createProgram(); gl.attachShader(program, vShader); gl.attachShader(program, fShader); gl.linkProgram(program); return program; } </script> <!-- Main script --> <script type="application/javascript"> function main () { let scene = "menu"; const width = window.innerWidth; const height = window.innerHeight; const aspect = width / height; const glCanvas = document.getElementById("gl-canvas", { preserveDrawingBuffer: true }); const uiCanvas = document.getElementById("ui-canvas"); glCanvas.width = width; glCanvas.height = height; uiCanvas.width = width; uiCanvas.height = height; const fallback = document.getElementById("fallback"); function showFallback () { glCanvas.style.display = "none"; uiCanvas.style.display = "none"; fallback.style.display = "flex"; } const gl = glCanvas.getContext("webgl2"); if (!gl) { showFallback(); return; } gl.viewport(0, 0, width, height); gl.clearColor(0.2, 0.2, 0.2, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.enable(gl.CULL_FACE); gl.cullFace(gl.BACK); const ctx = uiCanvas.getContext("2d"); 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 (uiCanvas.mozRequestPointerLock) { lock = "mozRequestPointerLock"; } if (uiCanvas.webkitRequestPointerLock) { lock = "webkitRequestPointerLock"; } uiCanvas.onmousedown = function(event) { output.mouseButton = event.button; output.mouseDown = true; if (scene === "game") { uiCanvas[lock](); } }; uiCanvas.onmouseup = function(event) { output.mouseDown = false; }; uiCanvas.onmousemove = function(event) { output.mouseX = event.x; output.mouseY = event.y; output.movementX += event.movementX; output.movementY += event.movementY; }; document.onkeydown = function(event) { event.preventDefault(); if (event.keyCode === 16) { output.keys["SHIFT"] = true; } else if (event.keyCode == 37) { output.keys["LEFT"] = true; } else if (event.keyCode == 38) { output.keys["UP"] = true; } else if (event.keyCode == 39) { output.keys["RIGHT"] = true; } else if (event.keyCode == 40) { output.keys["DOWN"] = true; } else output.keys[event.key.toString()] = true; }; document.onkeyup = function(event) { if (event.keyCode === 16) { output.keys["SHIFT"] = !true; } else if (event.keyCode == 37) { output.keys["LEFT"] = !true; } else if (event.keyCode == 38) { output.keys["UP"] = !true; } else if (event.keyCode == 39) { output.keys["RIGHT"] = !true; } else if (event.keyCode == 40) { output.keys["DOWN"] = !true; } else output.keys[event.key.toString()] = false; }; output.lockMouse = function () { uiCanvas[lock](); }; output.update = function() { output.movementX = 0; output.movementY = 0; }; return output; })({}); const Renderer = (function () { function scrapeIn (source, out) { source.split("\n").forEach(line => { let words = line.trim().replace(";", "").split(" "); if (words[0] === "in") { let name = words[2]; out.locations[name] = gl.getAttribLocation(out.program, name); out.types[name] = words[1]; } }); } function scrapeUniform (source, out) { source.split("\n").forEach(line => { let words = line.trim().replace(";", "").split(" "); if (words[0] === "uniform") { let name = words[2]; out.locations[name] = gl.getUniformLocation(out.program, name); out.types[name] = words[1]; } }); } const typeToKeyword = { float: "1f", vec2: "2f", vec3: "3f", vec4: "4f", int: "1i", ivec2: "2i", ivec3: "3i", ivec4: "4i", mat2: "Matrix2f", mat3: "Matrix3f", mat4: "Matrix4f", sampler2D: "1i" }; return class { constructor (name) { this.program = createProgram(gl, name + ".vsh", name + ".fsh"); this.locations = {}; this.types = {}; let vsSource = document.getElementById(name + ".vsh").text.trim(); let fsSource = document.getElementById(name + ".fsh").text.trim(); scrapeIn(vsSource, this); scrapeUniform(vsSource, this); scrapeUniform(fsSource, this); } setUniform (name, ...values) { let type = this.types[name]; let loc = this.locations[name]; gl.useProgram(this.program); if (values.length > 1) gl["uniform" + typeToKeyword[type]](loc, ...values); else if (typeof values[0] === "number") { gl["uniform" + typeToKeyword[type]](loc, ...values); } else { let b = typeToKeyword[type]; if (type[0] === "m") gl["uniform" + typeToKeyword[type] + "v"](loc, false, values[0]); else gl["uniform" + typeToKeyword[type] + "v"](loc, values[0]); } } }; }) (); const Mesh = (function () { const cubePositions = [ 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 1, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1, 1, 0, 1, 0, ]; const cubeTexcoords = [ 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1 ]; const cubeNormals = [ 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, -1, 0, 0, ]; const cubeTris = [ 0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7, 8, 9, 10, 8, 10, 11, 12, 13, 14, 12, 14, 15, 16, 17, 18, 16, 18, 19, 20, 21, 22, 20, 22, 23, ]; return class { constructor (...buffers) { this.vertexArray = gl.createVertexArray(); this.buffers = {}; this.sizes = {}; this.data = {}; for (let i = 0; i < buffers.length; i += 2) { let name = buffers[i]; let size = buffers[i+1]; this.buffers[name] = gl.createBuffer(); this.sizes[name] = size; this.data[name] = null; } this.triangleBuffer = gl.createBuffer(); } setData (name, data) { this.data[name] = data; } setBuffers (mode=gl.STATIC_DRAW) { gl.bindVertexArray(this.vertexArray); for (let name in this.buffers) { gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[name]); gl.bufferData(gl.ARRAY_BUFFER, this.data[name], mode); } gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.triangleBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, this.data.triangles, mode); } setAttribPointers (renderer) { gl.bindVertexArray(this.vertexArray); gl.useProgram(renderer.program); for (let name in this.buffers) { let attribName = "a_" + name; let attribLoc = renderer.locations[attribName]; gl.enableVertexAttribArray(attribLoc); gl.bindBuffer(gl.ARRAY_BUFFER, this.buffers[name]); gl.vertexAttribPointer(attribLoc, this.sizes[name], gl.FLOAT, false, 0, 0); } } render (renderer) { gl.bindVertexArray(this.vertexArray); gl.useProgram(renderer.program); gl.drawElements(gl.TRIANGLES, this.data.triangles.length, gl.UNSIGNED_SHORT, 0); } static setRectangle (mesh, dimensions) { const positions = new Float32Array(cubePositions); for (let i = 0; i < positions.length; i ++) { positions[i] -= 0.5; positions[i] = dimensions[i % 3]; } const texcoords = new Float32Array(cubeTexcoords); const normals = new Float32Array(cubeNormals); const tris = new Uint16Array(cubeTris); mesh.setData("position", positions); mesh.setData("texcoord", texcoords); mesh.setData("normal", normals); mesh.setData("triangles", tris); mesh.setBuffers(); } }; }) (); const PixelRenderer = (function () { const screenPositions = [-1, -1, 1, -1, 1, 1, -1, 1]; const screenTris = [0, 1, 2, 0, 2, 3]; return class extends Renderer { constructor (name) { super(...arguments); this.mesh = new Mesh("position", 2); this.mesh.setData("position", new Float32Array(screenPositions)); this.mesh.setData("triangles", new Uint16Array(screenTris)); this.mesh.setBuffers(); this.mesh.setAttribPointers(this); } render () { this.mesh.render(this); } }; }) (); const RenderTexture = (function () { return class { constructor (width, height, useDepthBuffer=false) { this.width = width; this.height = height; this.colorTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.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, this.width, this.height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); if (useDepthBuffer) { this.depthTexture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, this.depthTexture); 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.DEPTH_COMPONENT24, this.width, this.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_INT, null); } this.framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, this.colorTexture, 0); if (useDepthBuffer) { gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.TEXTURE_2D, this.depthTexture, 0); } } setRenderTarget () { gl.bindFramebuffer(gl.FRAMEBUFFER, this.framebuffer); } }; }) (); const geometryRenderer = new Renderer("geometry"); const AABB = (function () { return class { constructor (obj) { this.minX = Infinity; this.maxX = -Infinity; this.minY = Infinity; this.maxY = -Infinity; this.minZ = Infinity; this.maxZ = -Infinity; this.parent = obj; } generate () { let model = this.parent.model; let verts = this.parent.mesh.data.position; for (let i = 0; i < verts.length; i += 3) { let p = vec4.fromValues(...verts.slice(i, i + 3), 1); vec4.transformMat4(p, p, model); this.minX = Math.min(this.minX, p[0]); this.maxX = Math.max(this.maxX, p[0]); this.minY = Math.min(this.minY, p[1]); this.maxY = Math.max(this.maxY, p[1]); this.minZ = Math.min(this.minZ, p[2]); this.maxZ = Math.max(this.maxZ, p[2]); } } generateForPlayer () { this.minX = this.parent.position[0] - this.parent.radius; this.maxX = this.parent.position[0] + this.parent.radius; this.minY = this.parent.position[1] - this.parent.radius; this.maxY = this.parent.position[1] + this.parent.radius; this.minZ = this.parent.position[2] - this.parent.radius; this.maxZ = this.parent.position[2] + this.parent.radius; } static compare (a, b) { let x = a.maxX > b.minX && b.maxX > a.minX; let y = a.maxY > b.minY && b.maxY > a.minY; let z = a.maxZ > b.minZ && b.maxZ > a.minZ; return x && y && z; } }; }) (); const player = (function (output) { output.position = [0, -5, 0]; output.velocity = [0, 0, 0]; output.grounded = true; output.radius = 1.0; output.mass = 1.0; output.pitch = 0.5; output.yaw = 0.0; output.FOV = Math.PI / 2; output.zNear = 0.1; output.zFar = 100.0; output.projectionMatrix = mat4.create(); output.AABB = new AABB(output); output.buildProjectionMatrix = function () { mat4.perspective(this.projectionMatrix, this.FOV, aspect, this.zNear, this.zFar); mat4.rotate(this.projectionMatrix, this.projectionMatrix, this.pitch, [1, 0, 0]); mat4.rotate(this.projectionMatrix, this.projectionMatrix, this.yaw, [0, 1, 0]); mat4.translate(this.projectionMatrix, this.projectionMatrix, [-this.position[0], -this.position[1], -this.position[2]]); }; function constrain (x, a, b) { return x < a ? a : x > b ? b : x; } output.controls = function (dt) { let movementSpeed = 0.5 60 * dt; let dx = Math.sin(this.yaw); let dz = -Math.cos(this.yaw); if (input.keys.w \|\| input.keys.UP) { this.velocity[0] += dx * movementSpeed; this.velocity[2] += dz * movementSpeed; } if (input.keys.a \|\| input.keys.LEFT) { this.velocity[0] += dz * movementSpeed; this.velocity[2] -= dx * movementSpeed; } if (input.keys.s \|\| input.keys.DOWN) { this.velocity[0] -= dx * movementSpeed; this.velocity[2] -= dz * movementSpeed; } if (input.keys.d \|\| input.keys.RIGHT) { this.velocity[0] -= dz * movementSpeed; this.velocity[2] += dx * movementSpeed; } if (input.keys[" "] && this.grounded) { this.velocity[1] += 10; this.grounded = false; } this.pitch += input.movementY * dt; this.pitch = constrain(this.pitch, -Math.PI / 2, Math.PI / 2); this.yaw += input.movementX * dt; this.velocity[1] -= 18 * dt; if (this.grounded) { var fx = -this.velocity[0] * 0.05; var fy = -this.velocity[1] * 0.05; var fz = -this.velocity[2] * 0.05; this.velocity[0] += fx * dt * 60; this.velocity[1] += fy * dt * 60; this.velocity[2] += fz * dt * 60; } // cap speed let vm = vec3.sqrLen(this.velocity); let speed = 15.0; if (vm > speed * speed) { vm = speed / Math.sqrt(vm); this.velocity[0] = vm; this.velocity[1] = vm; this.velocity[2] = vm; } }; output.updatePosition = function (dt) { this.position[0] += this.velocity[0] dt; this.position[1] += this.velocity[1] * dt; this.position[2] += this.velocity[2] * dt; }; output.setUniforms = function () { this.buildProjectionMatrix(); geometryRenderer.setUniform("u_projection", this.projectionMatrix); }; return output; }) ({}); const MeshCollider = (function () { function crossAndNormalize (d0x, d0y, d0z, d1x, d1y, d1z) { let cx = d0y * d1z - d0z * d1y; let cy = d0z * d1x - d0x * d1z; let cz = d0x * d1y - d0y * d1x; let cm = 1 / Math.sqrt(cx * cx + cy * cy + cz * cz); return [cx / cm, cy / cm, cz / cm]; } function projectToPlane(lx, ly, lz, nx, ny, nz) { let d = lx * nx + ly * ny + lz * nz; return [lx - d * nx, ly - d * ny, lz - d * nz]; } function clamp01 (x) { return x < 0 ? 0 : x > 1 ? 1 : x; } function snapToTriangle(u, v) { let d = Math.max((u + v - 1.0) / 2.0, 0.0); return [ clamp01(u - d), clamp01(v - d) ]; } function closestPointOnTriangle (p, v0, v1, v2) { let [v0x, v0y, v0z] = v0; let [v1x, v1y, v1z] = v1; let [v2x, v2y, v2z] = v2; let [d0x, d0y, d0z] = [v1x - v0x, v1y - v0y, v1z - v0z]; let [d1x, d1y, d1z] = [v2x - v0x, v2y - v0y, v2z - v0z]; let [nx, ny, nz] = crossAndNormalize(d0z, d0y, d0z, d1x, d1y, d1z); let [lx, ly, lz] = [p[0] - v0x, p[1] - v0y, p[2] = v0z]; let [px, py, pz] = projectToPlane(lx, ly, lz, nx, ny, nz); let u = px * d0x + py * d0y + pz * d0z; let v = px * d1x + py * d1y + pz * d1z; [u, v] = snapToTriangle(u, v); let [cx, cy, cz] = [ v0x + d0x * u + d1x * v, v0y + d0y * u + d1y * v, v0z + d0z * u + d1z * v ]; return [cx, cy, cz]; } return class { constructor (mesh) { this.mesh = mesh; } getClosestPoint (p) { let [cx, cy, cz] = [null, null, null]; let cd2 = Infinity; let tris = this.mesh.data.triangles; let verts = this.mesh.data.position; for (let i = 0; i < tris.length; i += 3) { let [i0, i1, i2] = tris.slice(i, i + 3); let [x, y, z] = closestPointOnTriangle(p, verts.slice(i0 * 3, i0 * 3 + 3), verts.slice(i1 * 3, i1 * 3 + 3), verts.slice(i2 * 3, i2 * 3 + 3) ); let [dx, dy, dz] = [x - p[0], y - p[1], z - p[2]]; let d2 = dx * dx + dy * dy + dz * dz; if (d2 < cd2) { cd2 = d2; [cx, cy, cz] = [x, y, z]; } } if (!cx && !cy && !cz) { console.error("All null at getClosestPoint"); } return [cx, cy, cz]; } }; }) (); const Platform = (function () { function constrain (x, a, b) { return x < a ? a : x > b ? b : x; } return class { constructor (position, size=vec3.create(), rotation, elastic=false, color=[0.1, 0.4, 1.0], friction=0.9) { this.position = position; this.rotation = rotation; this.size = size; this.elastic = elastic; this.friction = friction; this.color = color; this.mesh = new Mesh("position", 3, "normal", 3, "texcoord", 2); Mesh.setRectangle(this.mesh, this.size); this.mesh.setAttribPointers(geometryRenderer); this.collider = new MeshCollider(this.mesh); this.AABB = new AABB(this); this.model = mat4.create(); this.inverseModel = mat4.create(); this.constructModelMatrix(); } constructModelMatrix () { mat4.fromRotationTranslation(this.model, this.rotation, this.position); let inverseRotation = quat.create(); quat.invert(inverseRotation, this.rotation); mat4.fromQuat(this.inverseModel, inverseRotation); /mat4.translate(this.inverseModel, this.inverseModel, [ -this.position[0], -this.position[1], -this.position[2] ]);/ } render () { geometryRenderer.setUniform("u_model", this.model); geometryRenderer.setUniform("u_color", this.color); this.mesh.render(geometryRenderer); } collideWithPlayer () { // local position let localPosition = vec4.fromValues( player.position[0] - this.position[0], player.position[1] - this.position[1], player.position[2] - this.position[2], 0.0 ); vec4.transformMat4(localPosition, localPosition, this.inverseModel); localPosition[0] = constrain(localPosition[0], -this.size[0] / 2, this.size[0] / 2); localPosition[1] = constrain(localPosition[1], -this.size[1] / 2, this.size[1] / 2); localPosition[2] = constrain(localPosition[2], -this.size[2] / 2, this.size[2] / 2); localPosition[3] = 1; vec4.transformMat4(localPosition, localPosition, this.model); // Get closest point let closestPoint = vec3.fromValues(...localPosition); // Calculate collision let [dx, dy, dz] = [ player.position[0] - closestPoint[0], player.position[1] - closestPoint[1], player.position[2] - closestPoint[2] ]; let dm = dx * dx + dy * dy + dz * dz; if (dm < player.radius * player.radius) { dm = Math.sqrt(dm); player.position[0] += dx * (player.radius - dm) / dm; player.position[1] += dy * (player.radius - dm) / dm; player.position[2] += dz * (player.radius - dm) / dm; dx /= dm; dy /= dm; dz /= dm; let t = (dx * player.velocity[0] + dy * player.velocity[1] + dz * player.velocity[2]) * (this.elastic + 1); player.velocity[0] -= t * dx; player.velocity[1] -= t * dy; player.velocity[2] -= t * dz; if (dy > 0.8) { player.grounded = true; } } } }; }) (); /* const physics = (function (output) { output.objects = []; output.add = function (obj) { this.objects.push(obj); } output.tick = function (dt) { // Find closest point let [cx, cy, cz] = [null, null, null]; let cd2 = Infinity; let ci = Infinity; player.AABB.generateForPlayer(); const n = this.objects.length; for (let i = 0; i < n; i ++) { const obj = this.objects[i]; if (!AABB.compare(obj.AABB, player.AABB)) continue; let [x, y, z] = obj.collider.getClosestPoint(player.position); let [dx, dy, dz] = [x - player.position[0], y - player.position[1], z - player.position[2]]; let d2 = dx * dx + dy * dy + dz * dz; if (d2 < cd2) { [cx, cy, cz] = [x, y, z]; cd2 = d2; ci = i; } } if (cd2 < player.radius * player.radius) { console.log(cx, cy, cz); // Run physics let dx = player.position[0] - cx; let dy = player.position[1] - cy; let dz = player.position[2] - cz; let d2 = dx * dx + dy * dy + dz * dz; let obj = this.objects[ci]; if (d2 < player.radius * player.radius) { d2 = Math.sqrt(d2); // Correct position player.position[0] += dx * (player.radius - d2) / d2; player.position[1] += dy * (player.radius - d2) / d2; player.position[2] += dz * (player.radius - d2) / d2; // Correct velocity [dx, dy, dz] = [dx / d2, dy / d2, dz / d2]; let t = dx * player.velocity[0] + dy * player.velocity[1] + dz * player.velocity[2]; t = (obj.elastic + 1); player.velocity[0] += dx t; player.velocity[1] += dy * t; player.velocity[2] += dz * t; // Calculate friction let Ff = obj.friction * t; let vm = Ff / vec3.sqrLen(player.velocity); player.velocity[0] -= player.velocity[0] * vm; player.velocity[1] -= player.velocity[1] * vm; player.velocity[2] -= player.velocity[2] * vm; } } }; return output; }) ({}); / const ui = (function (output) { output.timer = 0.0; output.speed = 0.0; output.gameUI = function () { }; return output; }) ({}); const postprocessing = (function (output) { output.filterShader = new PixelRenderer("brightness-filter"); output.blurShader = new PixelRenderer("blur5x5"); output.combineShader = new PixelRenderer("combine"); output.filterShader.setUniform("u_texture", 15); output.filterShader.setUniform("u_depth", 14); output.blurShader.setUniform("u_texture", 15); output.combineShader.setUniform("u_blurred", 15); output.combineShader.setUniform("u_original", 14); output.blurShader.setUniform("u_depth", 14); output.blurShader.setUniform("u_resolution", width, height); output.sceneBuffer = new RenderTexture(width, height, true); output.filterBuffer = new RenderTexture(width, height); output.blurBufferA = new RenderTexture(width, height); output.blurBufferB = new RenderTexture(width, height); output.resultBuffer = new RenderTexture(width, height); output.render = function (dt) { this.sceneBuffer.setRenderTarget(); drawScene(dt); gl.activeTexture(gl.TEXTURE14); gl.bindTexture(gl.TEXTURE_2D, this.sceneBuffer.depthTexture); gl.activeTexture(gl.TEXTURE15); gl.bindTexture(gl.TEXTURE_2D, this.sceneBuffer.colorTexture); this.filterBuffer.setRenderTarget(); this.filterShader.render(); gl.activeTexture(gl.TEXTURE15); gl.bindTexture(gl.TEXTURE_2D, this.filterBuffer.colorTexture); this.blurBufferA.setRenderTarget(); this.blurShader.render(); gl.bindTexture(gl.TEXTURE_2D, this.blurBufferA.colorTexture); this.blurBufferB.setRenderTarget(); this.blurShader.render(); gl.bindTexture(gl.TEXTURE_2D, this.blurBufferB.colorTexture); gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.activeTexture(gl.TEXTURE14); gl.bindTexture(gl.TEXTURE_2D, this.sceneBuffer.colorTexture); this.combineShader.render(); }; return output; }) ({}); const skybox = (function (output) { output = new PixelRenderer("skybox"); return output; }) ({}); const platforms = (function () { let arr = []; arr.add = function () { let obj = new Platform(...arguments); this.push(obj); // physics.add(obj); }; function axisAngle (axis, angle) { let ct = Math.cos(angle); let st = Math.sin(angle); return [ct, st axis[0], st * axis[1], st * axis[2]]; } let xa = [1, 0, 0]; let ya = [0, 1, 0]; let za = [0, 0, 1]; let ec = [1.0, 0.5, 1.0]; const levels = [ // Checkerboard [ [[-2.5, -10, 2.5], [5, 1, 5], [1, 0, 0, 0]], [[2.5, -10, -2.5], [5, 1, 5], [1, 0, 0, 0]] ], // Ramp [ [[0, -10, 2.5], [5, 1, 5], [1, 0, 0, 0]], [[0, -10, 0], [5, 1, 4], axisAngle(za, -Math.PI / 16)], ], // Thin [ [[0, -10, 0], [1, 1, 10], [1, 0, 0, 0]] ], // T [ [[0, -10, 0], [3, 1, 10], [1, 0, 0, 0]], [[0, -10, 0], [3, 10, 1], [1, 0, 0, 0]] ], // H [ [[0, -10, 0], [1, 5, 10], [1, 0, 0, 0]], [[5, -10, 0], [1, 10, 1], [1, 0, 0, 0]], [[-5, -10, 0], [1, 10, 1], [1, 0, 0, 0]] ], [ [[0, -10.01, 0], [10, 1, 1], axisAngle(ya, Math.PI / 8)], [[0, -10, 0], [10, 1, 1], axisAngle(ya, -Math.PI / 8)], ], [ [[5, -10, 0], [1, 1, 10], [1, 0, 0, 0]], [[-5, -10, 0], [1, 1, 10], [1, 0, 0, 0]], ], [ [[0, -10, 1], [2, 1, 8], [1, 0, 0, 0]], [[0, -10, -6], [2, 1, 2], axisAngle(za, -0.2), true, ec], ], [ [[5, -10, 0], [1, 10, 10], axisAngle(xa, -Math.PI / 8), true, ec], [[-5, -10, 0], [1, 10, 10], axisAngle(xa, Math.PI / 8), true, ec], [[0, -10, -5], [10, 1, 8], axisAngle(za, -Math.PI / 16)] ], ]; arr.generateLevel = function (n=20) { this.length = 0; this.add([0, -10, 0], [10, 1, 10], [1, 0, 0, 0], false, [0, 1, 0]); for (let i = 1; i < n; i ++) { let toAdd = Math.random() * levels.length \| 0; let level = levels[toAdd]; for (let j = 0; j < level.length; j ++) { let args = [...level[j]].map(e => { if (e.length) return [...e]; return e; }); args[0][2] -= i * 15; this.add(...args); } } this.add([0, -10, -n * 15], [10, 1, 10], [1, 0, 0, 0], false, [0, 1, 0]); } return arr; }) (); const game = (function (output) { output.timer = 0.0; output.finished = false; output.startRun = function () { this.timer = 0.0; this.finished = false; platforms.generateLevel(); player.position = [0, -5, 0]; player.velocity = [0, 0, 0]; player.pitch = 0.0; player.yaw = 0.0; } output.run = function (dt) { // Limit delta time. // This fixed the bug where if you scroll down // or change tab and come back, you jump // super high dt = Math.min(dt, 1 / 5); output.timer += dt; gl.bindFramebuffer(gl.FRAMEBUFFER, null); platforms.forEach(e => e.constructModelMatrix()); player.grounded = false; platforms.forEach(e => e.collideWithPlayer()); player.controls(dt); player.updatePosition(dt); postprocessing.render(dt); ctx.clearRect(0, 0, width, height); ctx.drawImage(glCanvas, 0, 0); ctx.fillStyle = "#FFFFFF"; ctx.textAlign = "left"; ctx.font = "20px Arial Black"; ctx.fillText(output.timer.toFixed(2) + "s", 40, height - 40); let ps = Math.hypot(...player.velocity); ctx.fillText(ps.toFixed(2) + " m/s", 40, height - 20); let percent = (-player.position[2] / (15 * 20)); ctx.fillStyle = "#000000"; ctx.fillRect(width / 2 - 100, height - 40, 200, 20); ctx.fillStyle = "#FFFFFF"; ctx.fillRect(width / 2 - 100, height - 40, 200 * percent, 20); if (player.position[1] < -50) { output.startRun(); } if (player.position[2] < -15 * 19.5 && player.position[1] > -15) { scene = "finish"; finishScreen.startFinish(); } } return output; }) ({}); const finishScreen = (function (output) { let tx = 0, ty = -10, tz = -15 * 20; output.t = 0; output.startFinish = function () { this.t = 0; document.exitPointerLock(); }; output.run = function (dt) { player.position[0] -= (player.position[0] - tx) / 10; player.position[1] -= (player.position[1] - ty) / 10; player.position[2] -= (player.position[2] - tz) / 10; player.pitch += (0.2 - player.pitch) / 10; player.yaw += (Math.PI * 3 - player.yaw) / 50; let t = Math.min(output.t, 1.0); let s = t * t * (3 - 2 * t); ty = s * 10 - 10; postprocessing.render(dt); ctx.drawImage(glCanvas, 0, 0); ctx.textAlign = "center"; ctx.fillStyle = "#000000"; let d = 2; ctx.fillText("Run Finished", width / 2 - d, height + 100 - (100 + height / 2) * s - d); ctx.fillText("Time: " + game.timer.toFixed(2) + "s", width / 2 - d, height + 150 - (100 + height / 2) * s - d); ctx.fillText("Run Finished", width / 2 - d, height + 100 - (100 + height / 2) * s + d); ctx.fillText("Time: " + game.timer.toFixed(2) + "s", width / 2 - d, height + 150 - (100 + height / 2) * s + d); ctx.fillText("Run Finished", width / 2 + d, height + 100 - (100 + height / 2) * s - d); ctx.fillText("Time: " + game.timer.toFixed(2) + "s", width / 2 + d, height + 150 - (100 + height / 2) * s - d); ctx.fillText("Run Finished", width / 2 + d, height + 100 - (100 + height / 2) * s + d); ctx.fillText("Time: " + game.timer.toFixed(2) + "s", width / 2 + d, height + 150 - (100 + height / 2) * s + d); ctx.fillStyle = "#FFFFFF"; ctx.fillText("Run Finished", width / 2, height + 100 - (100 + height / 2) * s); ctx.fillText("Time: " + game.timer.toFixed(2) + "s", width / 2, height + 150 - (100 + height / 2) * s); output.t += dt; }; return output; }) ({}); function drawScene (dt) { gl.clear(gl.COLOR_BUFFER_BIT \| gl.DEPTH_BUFFER_BIT); player.setUniforms(); platforms.forEach(e => e.render()); skybox.setUniform("u_projection", player.projectionMatrix); skybox.render(); input.update(); } function menu (dt) { postprocessing.render(dt); ctx.clearRect(0, 0, width, height); ctx.drawImage(glCanvas, 0, 0); ctx.fillStyle = "#FFFFFF11"; ctx.fillRect(width / 2 - 200, height / 2 - 65, 400, 100); ctx.textAlign = "center"; ctx.font = "50px Arial Black"; ctx.fillStyle = "#11bbFF"; let b = 2; ctx.fillText("Start Run", width / 2 - b, height / 2 - b); ctx.fillText("Start Run", width / 2 - b, height / 2 + b); ctx.fillText("Start Run", width / 2 + b, height / 2 - b); ctx.fillText("Start Run", width / 2 + b, height / 2 + b); ctx.fillStyle = "#FFFFFF"; ctx.fillText("Start Run", width / 2, height / 2); if (Math.abs(input.mouseX - width / 2) < 200 && Math.abs(input.mouseY - height / 2 + 5) < 50 && input.mouseDown) { scene = "game"; ctx.clearRect(0, 0, width, height); input.lockMouse(); game.startRun(); } } let scenes = { game: game.run, menu: menu, finish: finishScreen.run }; platforms.generateLevel(); let then = null; function render (now) { if (!then) then = now; let dt = (now - then) * 0.001; then = now; scenes[scene](dt); parent.raf = requestAnimationFrame(render); } if (parent.raf) cancelAnimationFrame(parent.raf); parent.raf = requestAnimationFrame(render); } </script> <!-- Lets light this candle --> <script> main(); </script> </body> </html>
Folds	16,63,68,72,79,87,88,113,147,156,157,167,170,190,191,212,215,223,224,268,274,306
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgN2uy42yCww
Votes	1613
Spin-Offs	1690
Type
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	1 years ago, 1707881073152
Updated	7 months ago, 1744839051969
Source Deleted	unknown