Viewing Program

Program Data

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

Title	Fractal, but better
ID	6450215606239232
Created	4 years ago, 1620914529152
Updated	4 years ago, 1620914821346
Code	<!DOCTYPE html> <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>Fractal, but better</title> </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 vec2 u_resolution; uniform float u_time; uniform vec4 u_offset; out vec4 o_color; // Raymarch variables const int MAX_STEPS = 200; const float EPSILON = 0.01; const vec3 lightDir = normalize(vec3(2, -2, 1)); // Signed Distance struct struct SignedDistance { float t; vec3 color; }; // Julia variables const int MAX_ITERS = 10; const float POWER = 2.0; // Inverse stereographic projection vec4 inverseProjection (vec3 p) { const float k = 2.0; float n = dot(p, p) + 1.0; return vec4(k * p, n - 2.0) / n; } // Complex natural log operator vec2 cLn (vec2 z) { return vec2(0.5 * log(dot(z, z)), atan(z.y / z.x)); } // Complex exponentiation operator vec2 cExp (vec2 z) { const float pi = 3.1415926; return exp(z.x) * vec2(cos(pi * z.y), sin(pi * z.y)); } // Complex power operator vec2 cPower (vec2 z, float p) { //return cExp(p * cLn(z)); vec2 e = z; for (float i = 1.; i < p; i += 1.0) { e = vec2(e.x * z.x - e.y * z.y, e.x * z.y + e.y * z.x); } return e; } SignedDistance SDF (vec3 pos) { vec4 p4 = inverseProjection(pos) + u_offset; vec2 p = p4.xy; vec2 c = p4.zw; float dp = 0.0; float ld = 1000.0; int iter = 0; for (iter = 0; iter < MAX_ITERS; iter ++) { dp = pow(length(p), POWER - 1.0) * POWER * dp + 1.0; p = cPower(p, POWER) + c; ld = min(ld, dot(p, p)); if (dot(p, p) > 1024.0) break; } ld = sqrt(ld) * 5.0; float r = length(p); float d = 0.5 * r * log(r) / abs(dp); d = min(d, abs(4.0 + pos.z)); return SignedDistance(d, vec3(1, 1, 1)); } vec3 getNormal (vec3 p) { const float h = 0.0001; // replace by an appropriate value const vec2 k = vec2(1,-1); return normalize( k.xyy * SDF( p + k.xyyh ).t + k.yyx SDF( p + k.yyxh ).t + k.yxy SDF( p + k.yxyh ).t + k.xxx SDF( p + k.xxxh ).t ); } struct Ray { vec3 origin; vec3 direction; }; struct RaymarchHit { float t; vec3 hit; vec3 normal; vec3 color; int steps; }; RaymarchHit raymarch (Ray ray) { float t = 0.0; vec3 hit = ray.origin; vec3 normal = vec3(0.0); vec3 col = vec3(0.0); int steps = 0; for (int iter = 0; iter < MAX_STEPS; iter ++) { SignedDistance distInfo = SDF(hit); hit += distInfo.t ray.direction; if (distInfo.t > 100.0) { col = vec3(0, 0, 0); normal = vec3(0, 0, 0); break; } if (distInfo.t < EPSILON) { col = distInfo.color; normal = getNormal(hit); steps = iter; break; } } return RaymarchHit(t, hit, normal, col, steps); } void main () { vec3 origin = u_camera; vec3 direction = vec3(v_position * 2.0 - 1.0, 0.8); direction.xy = u_resolution.xy / u_resolution.xx; direction = mat3(u_view) normalize(direction); Ray ray = Ray(origin, direction); RaymarchHit hitInfo = raymarch(ray); float diffuse = max(-dot(direction, hitInfo.normal), 0.0); float occlusion = 1.0 - float(hitInfo.steps) / float(MAX_STEPS); const vec3 lightPos = vec3(0, 5, 10); o_color = vec4(hitInfo.color * diffuse * occlusion, 1.0); } </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); // Create the camera variable const camera = vec3.create(); camera[2] = 0; camera[1] = 3; const view = mat4.create(); mat4.fromRotation(view, 3.14 / 2, [1, 0, 0]); const offset = vec4.create(); offset[0] = 0; offset[1] = 0; offset[2] = 0; offset[3] = 0.3; // Send the mesh data to the GPU mesh.setBuffers(); mesh.setAttibPointers(renderer); // Animation loop function render (now) { // Send the time to the GPU renderer.setUniform("u_time", now * 0.001); const ang = now * 0.0001; camera[1] = Math.cos(ang) * 6; camera[0] = Math.sin(ang) * 6; mat4.fromRotation(view, 3.14 / 2, [1, 0, 0]); mat4.rotate(view, view, -ang, [0, 1, 0]); // Send the camera info to the GPU renderer.setUniform("u_camera", camera); renderer.setUniform("u_view", view); renderer.setUniform("u_offset", offset); // 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	11,19
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgL3P_c26Cww
Votes	222
Spin-Offs	6
Type	WEBPAGE
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	10 months ago, 1739458014052
Updated	10 months ago, 1739458021372
Source Deleted	unknown