Viewing Program

Program Data

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

Title	Raytraced Black Hole
ID	5726435348004864
Created	3 years ago, 1628192300093
Updated	2 years ago, 1650389743643
Code	<!DOCTYPE html> <!-- Made on 8/05/21 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Raytraced Black Hole</title> <style> * { overflow: visible; } </style> </head> <body style="margin: 0; overflow: hidden"> <!-- Vertex shader --> <script type="text/glsl" id="standard.vsh"> #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> <!-- Fragment shader --> <script type="text/glsl" id="standard.fsh"> #version 300 es precision highp float; in vec2 v_position; uniform vec3 u_camera; uniform mat4 u_view; uniform float u_time; uniform vec2 u_resolution; uniform sampler2D u_disk; out vec4 o_color; #define ANTI_ALIASING 0 #define RING_MIN 1.0 #define RING_MAX 4.0 // Noise // https://github.com/ashima/webgl-noise/blob/master/src/noise3D.glsl vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; } vec4 permute(vec4 x) { return mod289(((x34.0)+1.0)x); } vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; } float snoise(vec3 v) { const vec2 C = vec2(1.0/6.0, 1.0/3.0) ; const vec4 D = vec4(0.0, 0.5, 1.0, 2.0); // First corner vec3 i = floor(v + dot(v, C.yyy) ); vec3 x0 = v - i + dot(i, C.xxx) ; // Other corners vec3 g = step(x0.yzx, x0.xyz); vec3 l = 1.0 - g; vec3 i1 = min( g.xyz, l.zxy ); vec3 i2 = max( g.xyz, l.zxy ); vec3 x1 = x0 - i1 + C.xxx; vec3 x2 = x0 - i2 + C.yyy; vec3 x3 = x0 - D.yyy; // Permutations i = mod289(i); vec4 p = permute( permute( permute( i.z + vec4(0.0, i1.z, i2.z, 1.0 )) + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) + i.x + vec4(0.0, i1.x, i2.x, 1.0 )); // Gradients: 7x7 points over a square, mapped onto an octahedron. // The ring size 1717 = 289 is close to a multiple of 49 (496 = 294) float n_ = 0.142857142857; // 1.0/7.0 vec3 ns = n_ * D.wyz - D.xzx; vec4 j = p - 49.0 * floor(p * ns.z * ns.z); // mod(p,77) vec4 x_ = floor(j ns.z); vec4 y_ = floor(j - 7.0 * x_ ); // mod(j,N) vec4 x = x_ ns.x + ns.yyyy; vec4 y = y_ ns.x + ns.yyyy; vec4 h = 1.0 - abs(x) - abs(y); vec4 b0 = vec4( x.xy, y.xy ); vec4 b1 = vec4( x.zw, y.zw ); vec4 s0 = floor(b0)2.0 + 1.0; vec4 s1 = floor(b1)2.0 + 1.0; vec4 sh = -step(h, vec4(0.0)); vec4 a0 = b0.xzyw + s0.xzywsh.xxyy ; vec4 a1 = b1.xzyw + s1.xzywsh.zzww ; vec3 p0 = vec3(a0.xy,h.x); vec3 p1 = vec3(a0.zw,h.y); vec3 p2 = vec3(a1.xy,h.z); vec3 p3 = vec3(a1.zw,h.w); //Normalise gradients vec4 norm = taylorInvSqrt(vec4(dot(p0,p0), dot(p1,p1), dot(p2, p2), dot(p3,p3))); p0 = norm.x; p1 = norm.y; p2 = norm.z; p3 = norm.w; // Mix final noise value vec4 m = max(0.5 - vec4(dot(x0,x0), dot(x1,x1), dot(x2,x2), dot(x3,x3)), 0.0); m = m * m; return 105.0 * dot( mm, vec4( dot(p0,x0), dot(p1,x1), dot(p2,x2), dot(p3,x3) ) ); } // Raymarch variables const int MAX_STEPS = 500; const float EPSILON = 0.0001; float ringDE (vec3 p, float ir, float or) { vec3 c = p; float m = length(p); m = clamp(m, ir, or); c = m / max(length(c), 0.0001); c.z = 0.0; return length(p - c) * 0.99; } float ringDE2 (vec3 p) { vec3 c = p; // Constrain to plane c.z = 0.0; // Constrain circle float l = length(c.xy); l = clamp(l, RING_MIN, RING_MAX); c.xy = l * normalize(c.xy); return length(p - c) - 0.0001; } float DE (vec3 p) { float d = length(p) - 0.5; d = min(d, ringDE2(p)); return d; } vec4 trace (vec2 uv) { vec3 p = u_camera; vec3 v = vec3(uv * 2.0 - 1.0, 0.8); v.xy = u_resolution.xy / u_resolution.xx; v = normalize(mat3(u_view) v); vec3 initialV = v; float m = 0.0; vec4 diskColor = vec4(0, 0, 0, 0.0); for (int i = 0; i < MAX_STEPS; i ++) { // Get length float d = DE(p); // Integrate for (int j = 0; j < 5; j ++) { float dt = d / 5.0 / length(v); vec3 a = -1.5 * p * pow(length(p), -6.0); p += v * dt; v += a * dt; } //p += v * d; // Determine if it's close enough if (d < EPSILON) { // Hit black hole if (length(p) <= 0.55) { m = 0.0; break; } else { // Hit disk float l = length(p.xy); float k = (l - RING_MIN) / (RING_MAX - RING_MIN); float a = -atan(p.y, p.x) / 3.1415926 * 0.5 + 0.5; //a += u_time vec4 c = texture(u_disk, vec2(a, k)); // velocity of disk, in units/second vec3 velocityVector = vec3(p.y, -p.x, 0); // Comparison of velocity to the ray direction float shiftAmount = dot(velocityVector, normalize(v)); shiftAmount = (shiftAmount > 0.0 ? 1.0 : -1.0) * (1.0 - exp(-abs(shiftAmount) * 0.1)); shiftAmount = clamp(shiftAmount, -1.0, 1.0); // c.rgb = vec3(velocityVector / RING_MAX * 0.5 + 0.5); // shift red by subtracting green // effect is that gets more red float multiplier = 4.0; if (shiftAmount > 0.0) { c.g = clamp(1.0 - shiftAmount multiplier * 0.5, 0.0, 1.0); c.b = clamp(1.0 - shiftAmount multiplier, 0.0, 1.0); } // shift blue by adding blue :bigbrain: // effect is that it gets more white if (shiftAmount < 0.0) { c.r = clamp(1.0 + shiftAmount multiplier * 0.5, 0.0, 1.0); c.g = clamp(1.0 + shiftAmount multiplier * 0.25, 0.0, 1.0); //c.b += (1.0 - c.b) * shiftAmount; } //float transparency = 1.0; // if (diskColor.a > 100.0) break; float transparency = clamp(length(c.rg), 0.0, 1.0); diskColor.rgb += c.rgb * exp(-max(diskColor.a, 0.0)); //diskColor.rgb = vec2(a, k).xxy; diskColor.a += transparency; // Keep moving p.z += 2.0 * EPSILON * (v.z > 0.0 ? 1.0 : -1.0); } } if (d > 125.0) { m = 1.0; break; } } // skybox color v = normalize(v); float sn = snoise(v * 50.0); vec3 skyboxColor = vec3((sn - min(sn, 0.8)) * 5.0); vec3 endColor = (m * skyboxColor) * clamp(exp(-diskColor.a), 0.0, 1.0) + diskColor.rgb; endColor = clamp(endColor, 0.0, 1.0); return vec4(endColor, 1); } void main () { vec2 uv = v_position; vec4 a = trace(uv); #if ANTI_ALIASING == 1 vec2 uv2 = v_position + vec2(0.5, 0.5) / u_resolution.xy; vec2 uv3 = v_position - vec2(0.5, 0.5) / u_resolution.xy; vec2 uv4 = v_position + vec2(0.5, -0.5) / u_resolution.xy; vec2 uv5 = v_position - vec2(0.5, -0.5) / u_resolution.xy; vec4 b = trace(uv2); vec4 c = trace(uv3); vec4 d = trace(uv4); vec4 e = trace(uv5); o_color = a * 0.5 + (b + c + d + e) * 0.125; #else o_color = a; #endif } </script> <!-- Javascript --> <script type="module"> // Import vec3 module import * as vec3 from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/gl-matrix/vec3.js"; // Import vec4 module import * as vec4 from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/gl-matrix/vec4.js"; // Import mat3 module import * as mat3 from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/gl-matrix/mat3.js"; // Import mat4 module import * as mat4 from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/gl-matrix/mat4.js"; // Import mesh module import { StandardMesh } from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/x3d.js"; // Import WebGL wrapper modules import { DisplayContext, Renderer } from "https://cdn.jsdelivr.net/gh/ccaven/xacer3d/src/xgl.js"; // Initialize display context const displayContext = new DisplayContext({ preserveDrawingBuffer: true, failIfMajorPerformanceCaveat: true, alpha: false }); // Initialize renderer object const renderer = new Renderer(displayContext, { vertex: document.getElementById("standard.vsh").text.trim(), fragment: document.getElementById("standard.fsh").text.trim(), }); // Create the mesh object // The mesh is just a rectangle that covers the scree const mesh = new StandardMesh(displayContext, [{ name: "position", size: 2 }, ]); // Set the vertex positions and triangles of the mesh mesh.data.position = [-1, -1, -1, 1, 1, 1, 1, -1]; mesh.data.triangles = [0, 2, 1, 3, 2, 0]; // Send the resolution to the GPU const resolution = [displayContext.width, displayContext.height]; renderer.setUniform("u_resolution", resolution); // Delta time const dt = 1 / 60; // Create the camera variable const camera = vec3.create(); camera[0] = 0; camera[1] = 10; camera[2] = 0.5; const view = mat4.create(); // Send the mesh data to the GPU mesh.setBuffers(); mesh.setAttibPointers(renderer); /** @type {HTMLCanvasElement} / const diskCanvas = document.createElement("CANVAS"); /* @type {WebGL2RenderingContext} / let gl = displayContext.gl; /* @type {CanvasRenderingContext2D} / let diskCanvasCtx; let diskRects = []; let diskTexture = gl.createTexture(); function initializeDiskCanvas() { diskCanvas.width = 1500; diskCanvas.height = 1000; diskCanvasCtx = diskCanvas.getContext("2d"); let c1 = { r: 255, g: 255, b: 255 }; let c2 = { r: 255, g: 200, b: 255, }; let l = (k) => { return { r: c1.r + (c2.r - c1.r) k, g: c1.g + (c2.g - c1.g) * k, b: c1.b + (c2.b - c1.b) * k }; }; for (let i = 0; i < 400; i++) { diskRects[i] = { x: Math.random() * diskCanvas.width, y: Math.max(Math.min(Math.random(), 0.8), 0.2) * diskCanvas.height, width: Math.random() * 50 + 300, height: 20, color: l(Math.random()) }; diskRects[i].speed = 30 * (1 - (diskRects[i].y - 0.2) / diskCanvas.height); } //document.body.prepend(diskCanvas); } function updateDiskCanvas() { let ctx = diskCanvasCtx; // Draw rects ctx.fillStyle = "#000000"; ctx.fillRect(0, 0, diskCanvas.width, diskCanvas.height); for (let diskRect of diskRects) { // Update speed diskRect.x += diskRect.speed; if (diskRect.x > diskCanvas.width) { diskRect.x = 0; } // Draw ctx.fillStyle = `rgba(${diskRect.color.r}, ${diskRect.color.g}, ${diskRect.color.b}, 255)`; // Main let w = Math.min(diskRect.width, diskCanvas.width - diskRect.x); ctx.fillRect(diskRect.x, diskRect.y, w, diskRect.height); // Check for x-wrap if (diskRect.x + diskRect.width > diskCanvas.width) { w = diskRect.x + diskRect.width - diskCanvas.width; ctx.fillRect(0, diskRect.y, w, diskRect.height); } } } function updateDiskCanvas2() { let ctx = diskCanvasCtx; let im = new ImageData(diskCanvas.width, diskCanvas.height); const npi = Math.PI; const wings = 5; const freq = 20; const radius = 3.5; const pi2 = npi * 2; const xfac = pi2 * wings; function ripple(x, y) { const nx = x * xfac; const ny = y * freq; const tr = Math.cos(nx + ny * ny * 0.1); return tr; } function amp(x, y) { return Math.sin(y * y * radius) * 255; } for (let x = 0; x < diskCanvas.width; x++) { for (let y = 0; y < diskCanvas.height; y++) { let l = x + y * diskCanvas.width << 2; let nx = x / diskCanvas.width; let ny = y / diskCanvas.height; const col = (ripple(nx, ny) * 0.5 + 0.5) * amp(nx, ny) \| 0; im[l] = 255; im[l + 1] = col * 255; im[l + 2] = col * 255; im[l + 3] = 255; } } ctx.putImageData(im, 0, 0); } initializeDiskCanvas(); const blurCanvas = (() => { /** @type {HTMLCanvasElement[]} / const canvii = []; /* @type {CanvasRenderingContext2D[]} / const ctxii = []; const iters = 6; let width = diskCanvas.width + 100; let height = diskCanvas.height; for (let i = 0; i < iters; i++) { canvii[i] = document.createElement("CANVAS"); canvii[i].width = width; canvii[i].height = height; width /= 2; height /= 2; ctxii[i] = canvii[i].getContext("2d"); } return function() { // clear all for (let i = 0; i < iters; i++) { ctxii[i].clearRect(0, 0, canvii[i].width, canvii[i].height); } ctxii[0].clearRect(0, 0, canvii[0].width, canvii[0].height); // initial draw // Main ctxii[0].drawImage(diskCanvas, 50, 0); // First edge ctxii[0].drawImage(diskCanvas, 0, 0, 50, diskCanvas.height, diskCanvas.width + 50, 0, 50, diskCanvas.height); // Second edge ctxii[0].drawImage(diskCanvas, diskCanvas.width - 50, 0, 50, diskCanvas.height, 0, 0, 50, diskCanvas.height); // downscale for (let i = 1; i < iters; i++) { ctxii[i].drawImage(canvii[i - 1], 0, 0, canvii[i].width, canvii[i].height); } // upscale for (let i = iters - 1; i >= 1; i--) { ctxii[i - 1].drawImage(canvii[i], 0, 0, canvii[i - 1].width, canvii[i - 1].height); } // draw back on diskCanvasCtx.drawImage(canvii[0], 50, 0, canvii[0].width - 100, diskCanvas.height, 0, 0, diskCanvas.width, diskCanvas.height); } })(); const keys = {}; document.onkeydown = function(e) { keys[e.key.toString()] = true; console.log(e.toString()); }; document.onkeyup = function(e) { keys[e.key.toString()] = false; }; let pitch = 0.1; let yaw = 0; document.onmousemove = function(e) { pitch += 0.1 e.movementY * dt; yaw += 0.1 * e.movementX * dt; }; document.onmousedown = function(e) { gl.canvas.requestPointerLock(); }; // Animation loop function render(now) { // Send the time to the GPU renderer.setUniform("u_time", now * 0.001); mat4.fromRotation(view, Math.PI / 2, [1, 0, 0]); mat4.rotate(view, view, yaw, [0, 1, 0]); mat4.rotate(view, view, pitch, [1, 0, 0]); camera[0] = Math.cos(yaw + Math.PI / 2) * Math.sin(-pitch + Math.PI / 2); camera[1] = Math.sin(yaw + Math.PI / 2) * Math.sin(-pitch + Math.PI / 2); camera[2] = Math.cos(-pitch + Math.PI / 2); camera[0] = 5; camera[1] = 5; camera[2] *= 5; // Send the camera info to the GPU renderer.setUniform("u_camera", camera); renderer.setUniform("u_view", view); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, diskTexture); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); updateDiskCanvas(); blurCanvas(); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, diskCanvas); gl.uniform1i( gl.getUniformLocation(renderer.program, "u_disk"), 0); // Draw the mesh with the renderer mesh.render(renderer); // Call another animation frame requestAnimationFrame(render); } // Call the first animation frame requestAnimationFrame(render); </script> </body> </html>
Folds
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgP2FmoWWCgw
Votes	113
Spin-Offs	8
Type	WEBPAGE
Width	400
Height	600
User Flagged	false
Origin Scratchpad	null
Hidden From Hotlist	false
Restricted Posting	true
By Child	false
Author Nick	xacer
Author Name	xacer
Author ID	kaid_936620259368561719366955
Author Profile Access	PUBLIC

Archive Data

Added	10 months ago, 1709835010179
Updated	10 months ago, 1709835010179
Source Deleted	unknown