Viewing Program

Program Data

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

Title	3D Physics Engine
ID	6206630929055744
Created	5 years ago, 1607892953212
Updated	5 years ago, 1607998582588
Code	<!DOCTYPE html> <!-- Jentacular Gent 3D Physics Engine WASD and spacebar and shift to move Click and drag to look around Press R to randomly generate a different scene Press 1 to toggle delag mode (With delag mode on, there are no shadows, specular reflections, or ambient occlusion) Wow! It was surprisingly easy to port my 2D physics engine to a 3D one. I simply had to add another dimension to the position, velocity, and acceleration. For the rotation, I added two extra dimensions for the two extra axes you can rotate about. I'm not sure if that's really accurate or not, since in reality there is an infinite number of directions a rotation axis can have. The same jittering and jiggling that was present in the 2D engine is still present here, I don't know how to fix that. Here's the 2D engine in case you haven't seen it: https://www.khanacademy.org/computer-programming/guys-i-did-a-collide/5987945576611840 I got the collision detection function from https://gamedev.stackexchange.com/questions/44500/how-many-and-which-axes-to-use-for-3d-obb-collision-with-sat --> <html oncontextmenu="return false;"> <script> function id(i) { return document.getElementById(i); } function ih(i) { return id(i).innerHTML; } function create(t) { return document.createElement(t); } </script> <head> <meta charset="utf-8"> <title>3D Physics Engine</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> </body> <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="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 = 1000.; 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> <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> <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> <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 vec3 shadowCam; uniform float shadowYaw; uniform float shadowPitch; uniform float yaw; uniform float pitch; uniform vec3 shadowDimensions; uniform vec4 ambient; uniform float FOV; uniform float fog_min; uniform float fog_max; 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.); 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.)); if(shade > ambient.w) { // vec4 s = texture2D(shadowMap, imgCoords); // if(s.a >= 1. && shadowCoords.z / shadowDimensions.z > s.r + 0.005) { // if(shade > ambient.w && imgCoords.x > 0. && imgCoords.x < 1. && imgCoords.y > 0. && imgCoords.y < 1.) { // shade = ambient.w; // } // } float shadow = 0.; float shadowIterations = 0.; for(float i = 0.; i < 3.14159265358979323 * 2.; i += 0.3) { for(float r = 0.002; r < 0.01; r += 0.002) { float cs = cos(i) * r, ss = sin(i) * r; vec4 S = texture2D(shadowMap, imgCoords + vec2(cs, ss)); if(S.a >= 1. && shadowCoords.z / shadowDimensions.z > S.r + 0.005) { if(imgCoords.x + cs < 0. \|\| imgCoords.x + cs > 1. \|\| imgCoords.y + ss < 0. \|\| imgCoords.y + ss > 1.) { shadow += 1.; } else { shadow += ambient.w; } } else { shadow += 1.; } shadowIterations += 1.; } } shadow /= shadowIterations; shade = min(shade, shadow); } 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.5) { for(float r = 0.001; r < 0.01; 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.5, 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.; if(shade > ambient.w) { specular = clamp(pow(clamp(dot(reflectionRay, -sun), 0., 1.), spec), 0., 1.) * map(shade, ambient.w, 1., 0., 1.); } shade = max(shade, ambient.w); vec3 color = col; vec3 final = (color * shade + ambient.rgb * (1. - shade) * ambient.w) * ambientOcclusion; float fog = clamp(map(length(pos - cam), fog_min, fog_max, 0., 1.), 0., 1.); gl_FragColor = vec4(((1. - specular) * final + specular) * (1. - fog), 1); } } </script> <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> <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 float yaw; uniform float pitch; uniform vec4 ambient; uniform float FOV; uniform float fog_min; uniform float fog_max; 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; float fog = clamp(map(length(pos - cam), fog_min, fog_max, 0., 1.), 0., 1.); gl_FragColor = vec4(final * (1. - fog), 1); } } </script> <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> <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> <script src="https://cdn.jsdelivr.net/gh/JentGent/3D-Engine@latest/vector.js"></script> <script src="https://cdn.jsdelivr.net/gh/JentGent/3D-Engine@latest/math.js"></script> <script src="https://cdn.jsdelivr.net/gh/JentGent/3D-Engine@latest/rotate.js"></script> <script src="https://cdn.jsdelivr.net/gh/JentGent/3D-Engine@latest/setup.js"></script> <script id="physics-engine" type="application/javascript"> // Constants var SLOP = 0.1, SLOP_PERCENT = 0.6, PENETRATION_ERROR = 1, PENETRATION_NORMAL_ERROR = 0.01; function sq(a) { return a * a; } // Default value function dv(a, b) { return (a === undefined) ? b : a; } // SAT in 3D (stolen from https://gamedev.stackexchange.com/questions/44500/how-many-and-which-axes-to-use-for-3d-obb-collision-with-sat) function SAT(b1, b2, n, wow) { if(n.x === n.y && n.y === n.z && n.z === 0) { return false; } var min1 = Infinity, max1 = -Infinity, min2 = Infinity, max2 = -Infinity; for(var i = 0; i < b1.verts.length; i += 1) { var d1 = b1.verts[i].add(b1.position).dot(n); min1 = Math.min(min1, d1); max1 = Math.max(max1, d1); var d2 = b2.verts[i].add(b2.position).dot(n); min2 = Math.min(min2, d2); max2 = Math.max(max2, d2); } return Math.max(max1, max2) - Math.min(min1, min2) >= max1 - min1 + max2 - min2; } function boxBox(b1, b2) { if(SAT(b1, b2, b1.right)) { return false; } if(SAT(b1, b2, b1.up, true)) { return false; } if(SAT(b1, b2, b1.forward)) { return false; } if(SAT(b1, b2, b2.right)) { return false; } if(SAT(b1, b2, b2.up)) { return false; } if(SAT(b1, b2, b2.forward)) { return false; } if(SAT(b1, b2, b1.right.cross(b2.right))) { return false; } if(SAT(b1, b2, b1.right.cross(b2.up))) { return false; } if(SAT(b1, b2, b1.right.cross(b2.forward))) { return false; } if(SAT(b1, b2, b1.up.cross(b2.right))) { return false; } if(SAT(b1, b2, b1.up.cross(b2.up))) { return false; } if(SAT(b1, b2, b1.up.cross(b2.forward))) { return false; } if(SAT(b1, b2, b1.forward.cross(b2.right))) { return false; } if(SAT(b1, b2, b1.forward.cross(b2.up))) { return false; } if(SAT(b1, b2, b1.forward.cross(b2.forward))) { return false; } return true; } // Support points function projectOntoPlane(v1, normal, p) { return p.add(normal.mult(v1.sub(p).dot(normal))); } function findSupport(v1, normal, b) { var maxDepth = -Infinity, supported = []; for(var i = 0; i < b.verts.length; i += 1) { var p = b.verts[i].add(b.position); var projected = projectOntoPlane(v1, normal, p); var sqDist = sq(projected.x - p.x) + sq(projected.y - p.y) + sq(projected.z - p.z); if(p.sub(projected).dot(normal) > 0) { continue; } if(Math.abs(sqDist - maxDepth) < PENETRATION_ERROR) { maxDepth = Math.max(sqDist, maxDepth); supported.push(projected); continue; } if(sqDist < maxDepth) { continue; } maxDepth = sqDist; supported = []; supported.push(projected); } var sx = 0, sy = 0, sz = 0; for(var i = 0; i < supported.length; i += 1) { sx += supported[i].x; sy += supported[i].y; sz += supported[i].z; } sx /= supported.length; sy /= supported.length; sz /= supported.length; return [maxDepth, v(sx, sy, sz)]; } function leastPenetration(b1, b2) { var maxDepth = Infinity, contactPoint, normal; for(var i = 0; i < 6; i += 1) { var facePos, faceNor; switch(i) { case 0: facePos = b2.position.add(b2.right.mult(b2.size.x / 2)); faceNor = b2.right; break; case 1: facePos = b2.position.add(b2.up.mult(b2.size.y / 2)); faceNor = b2.up; break; case 2: facePos = b2.position.add(b2.forward.mult(b2.size.z / 2)); faceNor = b2.forward; break; case 3: facePos = b2.position.add(b2.right.mult(-b2.size.x / 2)); faceNor = b2.right.neg(); break; case 4: facePos = b2.position.add(b2.up.mult(-b2.size.y / 2)); faceNor = b2.up.neg(); break; case 5: facePos = b2.position.add(b2.forward.mult(-b2.size.z / 2)); faceNor = b2.forward.neg(); break; } var support = findSupport(facePos, faceNor, b1); if(Math.abs(support[0] - maxDepth) < PENETRATION_ERROR && faceNor.dot(normal) > 1 - PENETRATION_NORMAL_ERROR) { if(!(contactPoint instanceof Array)) { contactPoint = []; normal = []; } maxDepth = Math.max(support[0], maxDepth); contactPoint.push(support[1]); normal = faceNor; continue; } if(support[0] > maxDepth) { continue; } maxDepth = support[0]; contactPoint = support[1]; normal = faceNor; } if(contactPoint instanceof Array) { var cp = v(0, 0, 0); for(var i = 0; i < contactPoint.length; i += 1) { cp.iadd(contactPoint[i]); } contactPoint = cp.idiv(i); } return [normal, maxDepth, contactPoint]; } // Box function Box(p) { this.position = p.position \|\| v(0, 0, 0); this.mass = dv(p.mass, 1); this.inertia = dv(p.inertia, 1000); this.linAcc = v(0, 0, 0); this.linVel = p.linVel \|\| v(0, 0, 0); this.angAcc = v(0, 0, 0); this.angVel = dv(p.angVel, v(0, 0, 0)); this.elasticity = dv(p.elasticity, 0.4); this.staticFriction = dv(p.staticFriction, 0.1); this.dynamicFriction = dv(p.dynamicFriction, 0.1); this.size = dv(p.size, v(100, 100, 100)); this.verts = [ v(-this.size.x / 2, -this.size.y / 2, -this.size.z / 2), v(this.size.x / 2, -this.size.y / 2, -this.size.z / 2), v(-this.size.x / 2, this.size.y / 2, -this.size.z / 2), v(this.size.x / 2, this.size.y / 2, -this.size.z / 2), v(-this.size.x / 2, -this.size.y / 2, this.size.z / 2), v(this.size.x / 2, -this.size.y / 2, this.size.z / 2), v(-this.size.x / 2, this.size.y / 2, this.size.z / 2), v(this.size.x / 2, this.size.y / 2, this.size.z / 2) ]; this.right = v(1, 0, 0); this.up = v(0, 1, 0); this.forward = v(0, 0, 1); this.boundingSphere = 0; for(var i = 0; i < this.verts.length; i += 1) { var s = this.verts[i]; var d = sq(s[0]) + sq(s[1]) + sq(s[2]); if(d < this.boundingSphere) { continue; } this.boundingSphere = d; } this.boundingSphere = Math.sqrt(this.boundingSphere); }; Box.prototype.checkCollision = function(body) { if(body instanceof Box) { if(Math.hypot(this.position.x - body.position.x, this.position.y - body.position.y, this.position.z - body.position.z) > this.boundingSphere + body.boundingSphere) { return false; } return boxBox(this, body); } }; Box.prototype.getCollisionData = function(body) { if(body instanceof Box) { var maxDepth, contactPoint, normal; var data1 = leastPenetration(this, body); var data2 = leastPenetration(body, this); // if(Math.abs(data2[1] - data1[1]) < PENETRATION_ERROR && data1[0].neg().dot(data2[0]) > 1 - PENETRATION_NORMAL_ERROR) { // normal = data2[0]; // maxDepth = Math.max(data2[1], data1[1]); // contactPoint = data2[2].add(data1[2]).div(2); // if(frameCount < 10) { // console.log(contactPoint, data2[2], data1[2]); // } // } // else { if(data2[1] < data1[1]) { normal = data2[0]; maxDepth = data2[1]; contactPoint = data2[2]; } else { normal = data1[0].neg(); maxDepth = data1[1]; contactPoint = data1[2]; } // } maxDepth = Math.sqrt(maxDepth); return [normal, maxDepth, contactPoint]; } }; Box.prototype.display = function() { var face = this.position.add(this.right.mult(this.size.x / 2)); tri( face.sub(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), this.right, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), this.right, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); var face = this.position.sub(this.right.mult(this.size.x / 2)); tri( face.sub(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), this.right.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.up.mult(this.size.y / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.up.mult(this.size.y / 2)), this.right.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); var face = this.position.add(this.up.mult(this.size.y / 2)); tri( face.sub(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), this.up, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), this.up, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); var face = this.position.sub(this.up.mult(this.size.y / 2)); tri( face.sub(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), this.up.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), face.add(this.forward.mult(this.size.z / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.forward.mult(this.size.z / 2)).sub(this.right.mult(this.size.x / 2)), this.up.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); var face = this.position.add(this.forward.mult(this.size.z / 2)); tri( face.sub(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.add(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), this.forward, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), face.add(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), this.forward, v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); var face = this.position.sub(this.forward.mult(this.size.z / 2)); tri( face.sub(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.add(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), this.forward.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); tri( face.add(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), face.add(this.up.mult(this.size.y / 2)).add(this.right.mult(this.size.x / 2)), face.sub(this.up.mult(this.size.y / 2)).sub(this.right.mult(this.size.x / 2)), this.forward.neg(), v(1, 1, 1), v(1, 1, 1), v(1, 1, 1), 100 ); }; // World var world = { gravity: v(0, -0.2, 0), rotationFriction: 0.95, rigids: [], statics: [], globalForce: function(v1, v2) { for(var i = 0; i < this.rigids.length; i += 1) { var b = this.rigids[i]; b.linAcc.iadd(v1); if(v2) { b.angAcc.iadd(v2); } } }, runPhysics: function() { for(var i = 0; i < this.rigids.length; i += 1) { var b = this.rigids[i]; b.linVel.iadd(this.gravity); b.linVel.iadd(b.linAcc.idiv(b.mass)); b.position.iadd(b.linVel); b.linAcc.x = b.linAcc.y = b.linAcc.z = 0; b.angVel.iadd(b.angAcc.idiv(b.inertia)) b.angAcc.x = b.angAcc.y = b.angAcc.z = 0; for(var j = 0; j < b.verts.length; j += 1) { b.verts[j] = xRotate(b.angVel.x / D2R, b.verts[j]); b.verts[j] = yRotate(b.angVel.y / D2R, b.verts[j]); b.verts[j] = zRotate(b.angVel.z / D2R, b.verts[j]); } b.right = xRotate(b.angVel.x / D2R, b.right); b.right = yRotate(b.angVel.y / D2R, b.right); b.right = zRotate(b.angVel.z / D2R, b.right); b.up = xRotate(b.angVel.x / D2R, b.up); b.up = yRotate(b.angVel.y / D2R, b.up); b.up = zRotate(b.angVel.z / D2R, b.up); b.forward = xRotate(b.angVel.x / D2R, b.forward); b.forward = yRotate(b.angVel.y / D2R, b.forward); b.forward = zRotate(b.angVel.z / D2R, b.forward); b.angVel.imult(this.rotationFriction); } for(var i = 0; i < this.rigids.length; i += 1) { var b = this.rigids[i]; for(var j = 0; j < this.rigids.length; j += 1) { if(j === i) { continue; } var b2 = this.rigids[j]; if(!b.checkCollision(b2)) { continue; } var collisionData = b.getCollisionData(b2); var normal = collisionData[0], depth = collisionData[1], contactPoint = collisionData[2]; var contactVector1 = contactPoint.sub(b.position), contactVector2 = contactPoint.sub(b2.position); var velDiff = b2.linVel.add(b2.angVel.cross(contactVector2)).sub(b.linVel.add(b.angVel.cross(contactVector1))); var steepness = -normal.dot(velDiff); var elasticity = Math.min(b.elasticity, b2.elasticity) + 1; var impulseForce = elasticity * steepness / ( 1 / b.mass + 1 / b2.mass + sq(contactVector1.cross(normal).mag()) / b.inertia + sq(contactVector2.cross(normal).mag()) / b2.inertia ); var impulse = normal.mult(impulseForce); b.linVel.isub(impulse.mult(1 / b.mass)); b2.linVel.iadd(impulse.mult(1 / b2.mass)); var resolution = normal.mult(Math.max(depth - SLOP, 0) / (1 / b.mass + 1 / b2.mass) * SLOP_PERCENT); b.position.isub(resolution.imult(1 / b.mass)); b2.position.iadd(resolution.imult(1 / b2.mass)); var friction = velDiff.sub(normal.mult(velDiff.dot(normal))); if(friction.mag() > 0.01) { friction.inormalize(); var frictionForce = -velDiff.dot(friction) / ( 1 / b.mass + 1 / b2.mass + sq(contactVector1.cross(friction).mag()) / b.inertia + sq(contactVector2.cross(friction).mag()) / b2.inertia ); var u = Math.hypot(b.staticFriction, b2.staticFriction); if(Math.abs(frictionForce) < impulseForce * u) { friction.imult(frictionForce * u); } else { friction.imult(-impulseForce * Math.hypot(b.dynamicFriction, b2.dynamicFriction)); } b.linVel.isub(friction.mult(1 / b.mass)); b2.linVel.iadd(friction.mult(1 / b2.mass)); } b.angVel.isub(contactVector1.cross(impulse.mult(1 / b.mass)).idiv(b.inertia)); b2.angVel.iadd(contactVector2.cross(impulse.mult(1 / b2.mass)).idiv(b2.inertia)); } // Do the same thing but for static bodies for(var j = 0; j < this.statics.length; j += 1) { var b2 = this.statics[j]; if(!b.checkCollision(b2)) { continue; } var collisionData = b.getCollisionData(b2); var normal = collisionData[0], depth = collisionData[1], contactPoint = collisionData[2]; var contactVector1 = contactPoint.sub(b.position), contactVector2 = contactPoint.sub(b2.position); var velDiff = b.linVel.add(b.angVel.cross(contactVector1)).neg(); var steepness = -normal.dot(velDiff); var elasticity = Math.min(b.elasticity, b2.elasticity) + 1; var impulseForce = elasticity * steepness / ( 1 / b.mass + sq(contactVector1.cross(normal).mag()) / b.inertia ); var impulse = normal.mult(impulseForce); b.linVel.isub(impulse.mult(1 / b.mass)); var resolution = normal.mult(Math.max(depth - SLOP, 0) / (1 / b.mass) * SLOP_PERCENT); b.position.isub(resolution.imult(1 / b.mass)); var friction = velDiff.sub(normal.mult(velDiff.dot(normal))); if(friction.mag() > 0.01) { friction.inormalize(); var frictionForce = -velDiff.dot(friction) / ( 1 / b.mass + sq(contactVector1.cross(friction).mag()) / b.inertia ); var u = Math.hypot(b.staticFriction, b2.staticFriction); if(Math.abs(frictionForce) < impulseForce * u) { friction.imult(frictionForce * u); } else { friction.imult(-impulseForce * Math.hypot(b.dynamicFriction, b2.dynamicFriction)); } b.linVel.isub(friction.mult(1 / b.mass)); } b.angVel.isub(contactVector1.cross(impulse.mult(1 / b.mass)).idiv(b.inertia)) } } } }; </script> <script id="logic.js" type="application/javascript"> function random(a, b) { return a === undefined ? Math.random() : (b === undefined ? Math.random() * a : Math.min(a, b) + Math.random() * (Math.max(a, b) - Math.min(a, b))); } // Mouse var mouseIsPressed = false, mouseX = 0, mouseY = 0, pmouseX = 0, pmouseY = 0, clicked = false, pressed = false; can.onmousedown = function(e) { mouseIsPressed = true; pressed = true; } can.onmouseup = function(e) { 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; if(e.key.toLowerCase() === "1") { DELAG = !DELAG; } } document.onkeyup = function(e) { keys[e.key.toLowerCase()] = false; } // Game Logic tris.length = 0; for(var i = 0; i < 101 * 6 * 2; i += 1) { tri(v(0, 0, 0), v(0, 0, 0), v(0, 0, 0), v(0, 0, -1), v(1, 0, 0), v(0, 1, 0), v(0, 0, 1), 100); } vertices.length = indices.length = 0; for(var i = 0; i < tris.length; i += 1) { dispTri(tris[i], cam, false); } cam.x = -250; cam.y = 100; cam.z = -250; yaw = -45; pitch = -10; function update() { if(world.statics.length === 0) { for(var i = 0; i < 48; i += 1) { world.rigids.push(new Box({ position: v(random(-200, 200), random(250), random(-200, 200)), size: v(random(30, 60), random(30, 60), random(30, 60)), linVel: v(random(-1, 1), random(-1, 1), random(-1, 1)) })); } // for(var i = -2; i < 2; i += 1) { // for(var j = -2; j < 2; j += 1) { // for(var k = -2; k < 2; k += 1) { // world.rigids.push(new Box({ position: v(i * 55, j * 55, k * 55), size: v(50, 50, 50) })); // } // } // } world.statics.push(new Box({ position: v(0, 0, 0), size: v(100, 10, 100) })); world.statics.push(new Box({ position: v(0, -100, 0), size: v(5000, 10, 5000) })); } shadow.yaw += 0.5; sun = yRotate(-0.5, 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; world.runPhysics(); tris.length = 0; for(var i = 0; i < world.statics.length; i += 1) { world.statics[i].display(); } for(var i = 0; i < world.rigids.length; i += 1) { world.rigids[i].display(); } vertices.length = indices.length = 0; for(var i = 0; i < tris.length; i += 1) { dispTri(tris[i], cam, false); } if(mouseIsPressed) { yaw -= (mouseX - pmouseX); pitch -= (mouseY - pmouseY); } pitch = constrain(pitch, -90, 90); if(keys.a) { cam.x -= Math.cos(yaw * D2R); cam.z -= Math.sin(yaw * D2R); } if(keys.d) { cam.x += Math.cos(yaw * D2R); cam.z += Math.sin(yaw * D2R); } if(keys.w) { cam.x += Math.sin(-yaw * D2R); cam.z += Math.cos(-yaw * D2R); } if(keys.s) { cam.x -= Math.sin(-yaw * D2R); cam.z -= Math.cos(-yaw * D2R); } if(keys.shift) { cam.y -= 1; } if(keys[" "]) { cam.y += 1; } if(keys.r) { world.rigids.length = world.statics.length = 0; for(var i = 0; i < 48; i += 1) { world.rigids.push(new Box({ position: v(random(-200, 200), random(250), random(-200, 200)), size: v(random(30, 60), random(30, 60), random(30, 60)), linVel: v(random(-1, 1), random(-1, 1), random(-1, 1)) })); } // for(var i = 0; i < 4; i += 1) { // for(var j = 0; j < 4; j += 1) { // for(var k = 0; k < 4; k += 1) { // world.rigids.push(new Box({ position: v(i * 55, j * 55, k * 55), size: v(50, 50, 50) })); // } // } // } world.statics.push(new Box({ position: v(0, 0, 0), size: v(100, 10, 100) })); world.statics.push(new Box({ position: v(0, -100, 0), size: v(5000, 10, 5000) })); } pmouseX = mouseX; pmouseY = mouseY; } // UI function drawUI() { } </script> <script id="render.js" type="application/javascript"> // Programs 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")); oc.universalUniform("shadowDimensions", "3fv", [shadow.width, shadow.height, shadow.depth]); oc.universalUniform("ambient", "4fv", [0.8, 0.9, 1, 0.2]); // Set up buffers and textures for programs that render to textures 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); // Set up vertex buffers and attributes var bpe = new Float32Array(0).BYTES_PER_ELEMENT; oc.setupBuffer(oc.ARRAY_BUFFER, new Float32Array(vertices), oc.STATIC_DRAW); oc.setupBuffer(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), oc.STATIC_DRAW); 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); 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); 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); 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); // Draw var done = false; function draw() { ctx.clearRect(0, 0, 600, 600); ctx.fillStyle = "rgb(0, 200, 255)"; ctx.fillRect(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]); oc.universalUniform("pitch", "1fv", [pitch * 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]); oc.universalUniform("fog_min", "1fv", [900]); oc.universalUniform("fog_max", "1fv", [1000]); gl.bufferSubData(gl.ARRAY_BUFFER, 0, new Float32Array(vertices)); // gl.bufferSubData(gl.ELEMENT_ARRAY_BUFFER, 0, new Uint16Array(indices)); if(DELAG) { oc.use(colorDelag); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } else { gl.viewport(0, 0, shadow.xRes, shadow.yRes); oc.use(shadowMap); oc.depthTest(true); oc.clearDepth(); oc.clearColor(); 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(); 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(); oc.renderElements(indices.length); gl.bindFramebuffer(gl.FRAMEBUFFER, null); } ctx.drawImage(c, 0, 0, 600, 600); done = true; } </script> <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; } setTimeout(logicLoop, 1000 / FPS); function run() { requestAnimationFrame(run); draw(); drawUI(); } // run(); requestAnimationFrame(run); </script> <!--run.js--> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJ3-3ZyDCww
Votes	232
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, 1739454870871
Updated	10 months ago, 1739454878912
Source Deleted	unknown