Viewing Program

Program Data

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

Title	Raytraced Minecraft V1.1
ID	5401621268185088
Created	4 months ago, 1724008199267
Updated	4 months ago, 1724008198667
Code	<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Raytraced Minecraft V1.1</title> <style> #gl-canvas { display: none; overflow:hidden; } #canvas2{ display: none; overflow:hidden; } #blocks{ display: none; overflow:hidden; } canvas{ } { overflow:hidden; margin:0px; } </style> </head> <body> <canvas id = 'canvas' width = '600' height = '600'></canvas> <canvas id = 'gl-canvas' width = '600' height = '600'></canvas> <canvas id = 'canvas2' width = '512' height = '512'></canvas> <canvas id = 'blocks' width = '1024' height = '1024'></canvas> <img src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Linear_Texture_Atlas_Example_2.png?20240818183020" id="atlas"> <script type> / * A speed-improved perlin and simplex noise algorithms for 2D. * * Based on example code by Stefan Gustavson (stegu@itn.liu.se). * Optimisations by Peter Eastman (peastman@drizzle.stanford.edu). * Better rank ordering method by Stefan Gustavson in 2012. * Converted to Javascript by Joseph Gentle. * * Version 2012-03-09 * * This code was placed in the public domain by its original author, * Stefan Gustavson. You may use it as you see fit, but * attribution is appreciated. * / (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.x x + this.y * y; }; Grad.prototype.dot3 = function(x, y, z) { return this.x * x + this.y * y + this.z * z; }; 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 - x0 * x0 - y0 * y0; 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 - x1 * x1 - y1 * y1; if (t1 < 0) { n1 = 0; } else { t1 = t1; n1 = t1 t1 * gi1.dot2(x1, y1); } var t2 = 0.5 - x2 * x2 - y2 * y2; 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 - x0 * x0 - y0 * y0 - z0 * z0; 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 - x1 * x1 - y1 * y1 - z1 * z1; if (t1 < 0) { n1 = 0; } else { t1 = t1; n1 = t1 t1 * gi1.dot3(x1, y1, z1); } var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2; if (t2 < 0) { n2 = 0; } else { t2 = t2; n2 = t2 t2 * gi2.dot3(x2, y2, z2); } var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3; 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 t * t * t * (t * (t * 6 - 15) + 10); } function lerp(a, b, t) { return (1 - t) * a + t * b; } // 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); noise.seed(Math.random()); </script> <script id = 'vertex-shader' type = 'glsl'>#version 300 es in vec2 aPosition; out vec2 pos; void main() { pos = aPosition; gl_Position = vec4(aPosition, 0, 1); } </script> <script> </script> <script id = 'fragment-shader' type = 'glsl'>#version 300 es precision mediump sampler2D; uniform sampler2D iChannel0; uniform sampler2D iChannel1; precision mediump float; uniform vec2 u_resolution; uniform float drawx; uniform float drawy; uniform float iTime; const bool USE_BRANCHLESS_DDA = true; const int MAX_RAY_STEPS = 256; const vec3 lightPos=vec3(32.0,64.0,32.0); vec2 rotate2d(vec2 v, float a) { float sinA = sin(a); float cosA = cos(a); return vec2(v.x * cosA - v.y * sinA, v.y * cosA + v.x * sinA); } float sum(vec3 v) { return dot(v, vec3(1.0)); } float sdSphere(vec3 p, float d) { return length(p) - d; } float sdBox( vec3 p, vec3 b ) { vec3 d = abs(p) - b; return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0)); } vec3 getVoxel(vec3 c) { vec3 p = floor(c); vec3 u = floor(c)-vec3(0.5,0.0,0.5); if(max(max(u.x,u.y),u.z)>=128.0\|\|min(min(u.x,u.y),u.z)<=0.0){ return vec3(0.0,0.0,1.0); } float buf=(u.x-64.0)+(u.z)128.0+(u.y)128.0128.0; vec2 index=vec2(mod(buf,1024.0),floor(buf/1024.0)+vec2(0.5)); vec4 info=texture(iChannel1,index/1024.0)255.0; float d = info.x<25.0?-1.0:1.0; return vec3(float(d < 0.0),info.x,info.y); } float vertexAo(vec2 side, float corner) { //if (side.x == 1.0 && side.y == 1.0) return 1.0; return (side.x + side.y + max(corner, side.x * side.y)) / 3.0; } vec4 voxelAo(vec3 pos, vec3 d1, vec3 d2) { vec4 side = vec4(getVoxel(pos + d1).x, getVoxel(pos + d2).x, getVoxel(pos - d1).x, getVoxel(pos - d2).x); vec4 corner = vec4(getVoxel(pos + d1 + d2).x, getVoxel(pos - d1 + d2).x, getVoxel(pos - d1 - d2).x, getVoxel(pos + d1 - d2).x); vec4 ao; ao.x = vertexAo(side.xy, corner.x); ao.y = vertexAo(side.yz, corner.y); ao.z = vertexAo(side.zw, corner.z); ao.w = vertexAo(side.wx, corner.w); return 1.0 - ao; } float zeroToOne(float x) { return x + float(!bool(x)); } float voxelDistance(vec3 pos) { vec3 p = floor(pos); //integer coordinates pos = mod(pos, 1.0); const vec3 o = vec3(0, 1.0, -1.0); //for swizzling float faceX = min(zeroToOne(pos.x * getVoxel(p + o.zxx).x), zeroToOne((1.0 - pos.x) * getVoxel(p + o.yxx).x)); float faceY = min(zeroToOne(pos.y * getVoxel(p + o.xzx).x), zeroToOne((1.0 - pos.y) * getVoxel(p + o.xyx).x)); float faceZ = min(zeroToOne(pos.y * getVoxel(p + o.xxz).x), zeroToOne((1.0 - pos.z) * getVoxel(p + o.xxz).x)); float face = min(faceX, min(faceY, faceZ)); //float edgeX1 = return 0.0; } const vec2 iResolution = vec2(600.0,600.0); float shadow(vec3 rayPos, vec3 rayDir){ vec3 fragColor; vec3 camPos=rayPos; vec3 mapPos = vec3(floor(rayPos)); vec3 deltaDist = abs(vec3(length(rayDir)) / rayDir); vec3 rayStep = sign(rayDir); vec3 sideDist = (sign(rayDir) * (mapPos - rayPos) + (sign(rayDir) * 0.5) + 0.5) * deltaDist; vec3 mask; float hitLight=0.2; for (int i = 0; i < MAX_RAY_STEPS; i++) { if (bool(getVoxel(mapPos))) continue; mask = step(sideDist.xyz, sideDist.yzx) * step(sideDist.xyz, sideDist.zxy); sideDist += mask * deltaDist; mapPos += mask * rayStep1.0; float di=distance(floor(mapPos),floor(lightPos)); if(di<1.1){ hitLight=1.0; break; } } return hitLight; } vec4 march(inout vec3 rayPos, inout vec3 rayDir){ vec3 fragColor; vec3 camPos=rayPos; vec3 mapPos = vec3(floor(rayPos)); vec3 deltaDist = abs(vec3(length(rayDir)) / rayDir); vec3 lightColor=vec3(1.0,0.95,0.8); vec3 rayStep = sign(rayDir); vec3 back=vec3(0.0); vec3 sideDist = (sign(rayDir) (mapPos - rayPos) + (sign(rayDir) * 0.5) + 0.5) * deltaDist; float godRays=0.0; vec3 mask; float happened=0.0; for (int i = 0; i < MAX_RAY_STEPS; i++) { if (bool(getVoxel(mapPos).x)){ happened=1.0; continue; } if(mod(float(i),1.0)==0.0){ } mask = step(sideDist.xyz, sideDist.yzx) * step(sideDist.xyz, sideDist.zxy); sideDist += mask * deltaDist; mapPos += mask * rayStep; } if(happened==0.0){ back+=godRayslightColor; return vec4(back,0.0); } vec3 intersectPlane = mapPos + vec3(lessThan(rayDir, vec3(0))); vec3 endRayPos; vec2 uv; vec4 ambient; ambient = voxelAo(mapPos - rayStep mask, mask.zxy, mask.yzx); endRayPos = rayDir / sum(mask * rayDir) * sum(mask * (mapPos + vec3(lessThan(rayDir, vec3(0))) - rayPos)) + rayPos; uv = mod(vec2(dot(mask * endRayPos.yzx, vec3(1.0)), dot(mask * endRayPos.zxy, vec3(1.0))), vec2(1.0)); float interpAo = mix(mix(ambient.z, ambient.w, uv.x), mix(ambient.y, ambient.x, uv.x), uv.y); interpAo = pow(interpAo, 1.0 / 3.0); float blocc=getVoxel(mapPos).y; vec2 texUv=ceil((uv-vec2(0.0,0.0))vec2(32.0,32.01.0))/vec2(32.0,32.01.0); vec3 tex=texture(iChannel0,texUvvec2(1.0/9.0,1.0)+vec2(blocc(1.0/9.0)-0.002,0.0-0.002)).rgb; vec2 norms=-vec2(length(texture(iChannel0,texUvvec2(1.0/9.0,1.0)+vec2(blocc(1.0/9.0),0.0)).rgb)-length(texture(iChannel0,texUvvec2(1.0/9.0,1.0)+vec2(blocc(1.0/9.0)+0.03125(1.0/9.0),0.0)).rgb),length(texture(iChannel0,texUvvec2(1.0/9.0,1.0)+vec2(blocc(1.0/9.0),0.0)).rgb)-length(texture(iChannel0,texUvvec2(1.0/9.0,1.0)+vec2(blocc(1.0/9.0),0.0+0.03125)).rgb))/1.0; vec4 color=vec4(tex,0.05); color=interpAo; fragColor.rgb = pow(color.rgb, vec3(2.2)); vec3 cameraPos; vec3 cameraDir; vec3 normal; float light; float light2; if(dot(mask abs(endRayPos.yzx), vec3(1.0,0.0,0.0))>0.0){ cameraDir=normalize(endRayPos-camPos); normal=normalize(vec3(1.0,norms.x,norms.y)); light=abs(dot(cameraDir,normal)); vec3 lightTo=normalize(reflect(lightPos-endRayPos,normal)); light2=abs(dot(cameraDir,lightTo)); fragColor.rgb=light; } if(dot(mask abs(endRayPos.yzx), vec3(0.0,1.0,0.0))>0.0){ cameraDir=normalize(endRayPos-camPos); normal=normalize(vec3(norms.x,1.0,norms.y)); light=abs(dot(cameraDir,normal)); vec3 lightTo=normalize(reflect(lightPos-endRayPos,normal)); light2=abs(dot(cameraDir,lightTo)); fragColor.rgb=light; } if(dot(mask abs(endRayPos.yzx), vec3(0.0,0.0,1.0))>0.0){ cameraDir=normalize(endRayPos-camPos); normal=normalize(vec3(norms.x,norms.y,1.0)); light=abs(dot(cameraDir,normal)); vec3 lightTo=normalize(reflect(lightPos-endRayPos,normal)); light2=abs(dot(cameraDir,lightTo)); fragColor.rgb=light; } light2=light2; light2=light2; light2=light2; light2=light2; light2=light2; light2=light2; light2=light2; fragColor.rgb+=light2color.a0.6(shadow(endRayPos,-normalize(endRayPos-lightPos))-0.2); fragColor.rgb=6.0; rayDir=reflect(rayDir,normal); rayPos=(endRayPos+0.00001sign(rayDir)); fragColor.rgb+=lightColorgodRays; return vec4(fragColor.r,fragColor.g,fragColor.b,color.a); } out vec4 fragColor; void main() { vec2 fragCoord=gl_FragCoord.xy; vec2 screenPos = (fragCoord.xy / iResolution.xy) * 2.0 - 1.0; vec3 cameraDir = vec3(0.0, 0.0, 0.8); vec3 cameraPlaneU = vec3(1.0, 0.0, 0.0); vec3 cameraPlaneV = vec3(0.0, 1.0, 0.0) * iResolution.y / iResolution.x; vec3 rayDir = cameraDir + screenPos.x * cameraPlaneU + screenPos.y * cameraPlaneV; vec3 rayPos = vec3(0.0, 0.0, -12.0); rayDir.zy = rotate2d(rayDir.zy, -0.5); rayPos.xz = rotate2d(rayPos.xz, iTime); rayDir.xz = rotate2d(rayDir.xz, iTime); rayPos+=vec3(64.0,45.0,64.0); vec4 fa=march(rayPos,rayDir); fragColor.rgb=fa.rgb(fa.a<0.01?1.0:shadow(rayPos,-normalize(rayPos-lightPos))); for(int i=0;i<1;i++){ // vec4 tempCol=march(rayPos,rayDir); //fragColor.rgb=mix(fragColor.rgb,tempCol.rgb,tempCol.a); } fragColor.a=1.0; } </script> <script type = 'module'> const canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); const canvas2 = document.getElementById('canvas2'), ctx2 = canvas2.getContext('2d'); const canvas3 = document.getElementById('blocks'), ctx3 = canvas3.getContext('2d'); var mouseX=300,pmouseX=300,mouseY=0,pmouseY=0,clicked=false,key={}; window.addEventListener("mouseover", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); window.addEventListener("mousemove", event => { pmouseX = mouseX; pmouseY= mouseY mouseX = event.pageX; mouseY = event.pageY; }); function createShader(gl, type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.log(gl.getShaderInfoLog(shader)); } return shader; } function createProgram(gl, vs, fs) { const program = gl.createProgram(); gl.attachShader(program, vs); gl.attachShader(program, fs); gl.linkProgram(program); return program; } noise.seed(0.02); function fbm(x,y){ var sum=0; var mult=0.6; for(var i=0;i<5;i++){ sum+=noise.simplex2(xmult,ymult)/mult; mult=2.0; } return sum; } function clamp(num, lower, upper) { return Math.min(Math.max(num, lower), upper); } function getBlockAt(x,y,z){ var index=x+z128+y128128; return ctx3.getImageData(index%1024,Math.floor(index/1024),1,1).data[0]; } function worldGenReturn(x,y,z){ var terrainHeightValue=fbm(x/120,z/120)16; var sum=255; if(terrainHeightValue>y-32){ sum = clamp(1.0-(y-32-terrainHeightValue)/2,1.0,3.0); } return sum; } function loadChunk(x,z){ for(var x1=0;x1<8;x1++){ for(var y1=0;y1<64;y1++){ for(var z1=0;z1<8;z1++){ addBlockHere(x1+x,y1,z1+z,worldGenReturn(x1+x,y1,z1+z)); }}} if(Math.random()>0.803){ var randx=~~(Math.random()128); var randy=~~(Math.random()128); var terrain=fbm(randx/120,randy/120)16; var treeHeight=Math.random()8+8 for(var i=0;i<treeHeight;i++){ addBlockHere(randx,~~(terrain+i+33),randy,7.0); } for(var i=0;i<525;i++){ var rand1=~~(Math.random()10-5) var rand2=~~(Math.random()10-5) var rand3=~~(Math.random()10-5) if(Math.sqrt(rand1rand1+rand2rand2+rand3rand3)<Math.random()6){ addBlockHere(randx+rand1,~~(terrain+treeHeight+33)+rand2,randy+rand3,6.0); } } } } function addBlockHere(x,y,z,t){ var shadow=1; if(t<=254){ ctx3.fillStyle="rgb("+t+","+shadow+",0)" var index=x+(z128)+(y128128); var px=(index%1024); var py=Math.floor(index/1024); ctx3.fillRect(px,py,1,1); } } function sortChunks(a, b) { var px=64 var py=64 var atop=((px-a[0])(px-a[0])+(py-a[1])(py-a[1])) var btop=((px-b[0])(px-b[0])+(py-b[1])(py-b[1])) return atop - btop; } function main() { document.getElementById("atlas").onload = function(){ const glCanvas = document.getElementById('gl-canvas'), gl = glCanvas.getContext('webgl2'); const vertexSource = document.getElementById('vertex-shader').textContent, fragmentSource = document.getElementById('fragment-shader').textContent; const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource), fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource); const program = createProgram(gl, vertexShader, fragmentShader); const aPosition = gl.getAttribLocation(program, 'aPosition') const drawx = gl.getUniformLocation(program, "drawx"); const drawy = gl.getUniformLocation(program, "drawy"); const iTime = gl.getUniformLocation(program, "iTime"); const iChannel0 = gl.getUniformLocation(program,"iChannel0"); const iChannel1 = gl.getUniformLocation(program,"iChannel1"); const blocksData = gl.getUniformLocation(program,"bloccData"); const positions = new Float32Array([-1, -1, -1, 3, 3, -1]); var chunkPositions=[]; for(var x=0;x<16;x++){ for(var y=0;y<16;y++){ chunkPositions.push([x8,y8]); }} const posBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); gl.viewport(0, 0, 600, 600); gl.clearColor(0, 0, 0, 1); gl.useProgram(program); gl.enableVertexAttribArray(aPosition); canvas2.height=32; let texture0 = gl.createTexture(); let texture1 = gl.createTexture(); gl.uniform1i(iChannel1, 0) gl.uniform1i(iChannel0, 1); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture1); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); ctx3.fillStyle="rgb(255,0,0)" ctx3.fillRect(0,0,1024,1024); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas3); ctx2.imageSmoothingEnabled = false; gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0) canvas2.width=288; gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); document.getElementById("atlas").crossOrigin="Anonymous" ctx2.drawImage(document.getElementById("atlas"),0,0,288,32); ctx2.fillStyle="rgb(0,0,0,0.5)" ctx2.fillRect(0,0,32,32); ctx2.fillStyle="rgb(0,0,0,0.2)" ctx2.fillRect(32,0,32,32); ctx2.fillStyle="rgb(0,0,0,0.43)" ctx2.fillRect(32*5,0,32,32); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas2); var numChunksPerFrame=1; gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture1); var mousex=300; var mousey=300; var now; var then = performance.now(); var fps = 60; var delta; var frameCount=700; var interval = 1000 / fps; for (let i = window.requestAnimationFrame(function() {}); i > 0; i--) { window.cancelAnimationFrame(i); } function render() { window.requestAnimationFrame(render); now = performance.now(); delta = now - then; if(frameCount%20==0){ chunkPositions.sort(sortChunks); } for(var i=0;i<numChunksPerFrame;i++){ if(chunkPositions.length>0){ var loadingChunk=chunkPositions.shift(); loadChunk(loadingChunk[0],loadingChunk[1]); } } gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, canvas3); if (delta > interval) { then = now - (delta % interval); frameCount+=0.01; gl.clear(gl.COLOR_BUFFER_BIT); if(mouseX===0){ mouseX=300; } if(mouseY===0){ mouseY=300; } gl.uniform1f(drawx, -mouseX); gl.uniform1f(drawy, -mouseY); gl.uniform1f(iTime, frameCount); gl.drawArrays(gl.TRIANGLES, 0, 3); ctx.drawImage(glCanvas, 0, 0); } } render(); } } main(); </script> <script></script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgJun75fMCQw
Votes	1
Spin-Offs	0
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	false
By Child	false
Author Nick	bkirby5944
Author Name	kaid_468321686915402618794474
Author ID	kaid_468321686915402618794474
Author Profile Access	COACH

Archive Data

Added	4 months ago, 1724008225619
Updated	4 months ago, 1724008225619
Source Deleted	unknown