Viewing Program

Program Data

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

Title	planet
ID	5891322337247232
Created	5 years ago, 1603834081431
Updated	3 years ago, 1668786998115
Code	<!DOCTYPE html> <!-- a shiny planet complete with an atmosphere, a sun, and some stars won't load? click here and type a space -> --> <html> <head> <meta charset="utf-8"> <title>planet</title> <style> body { margin: 0px; overflow: hidden; } </style> </head> <body> <script id="fragment" type="shader/fragment"> precision lowp float; uniform vec2 uScale; uniform float uTime; uniform float uAngle; // 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) ) ); } vec3 cameraPosition = 3.5 vec3(cos(uAngle), 0, sin(uAngle))+vec3(1.0,0,0); const float viewOff = -0.1; mat3 cameraMatrix = mat3( -sin(uAngle + viewOff), 0, -cos(uAngle + viewOff), 0, 1, 0, cos(uAngle + viewOff), 0, -sin(uAngle + viewOff)); const float MAXFLOAT = 65355.0; vec2 raySphere (vec3 sphereCenter, float sphereRadius, vec3 origin, vec3 ray) { vec3 offset = origin - sphereCenter; float a = 1.0; float b = 2.0 * dot(offset, ray); float c = dot(offset, offset) - sphereRadius * sphereRadius; float d = b * b - 4.0 * a * c; if (d > 0.0) { float s = sqrt(d); float dstToSphereNear = max(0.0, (-b - s) / (2.0 * a)); float dstToSphereFar = (-b + s) / (2.0 * a); if (dstToSphereFar >= 0.0) { return vec2(dstToSphereNear, dstToSphereFar - dstToSphereNear); } } return vec2(100.00, -1.0); } const float epsilon = 0.003; const vec3 dirToSun = normalize(vec3(1, 0, 1)); const vec3 planetCenter = vec3(1.0, 0.0, 0.0); const float atmosphereRadius = 1.2; const float planetRadius = 1.0; const float numInScatteringPoints = 8.0; const float densityFalloff = 1.0; const float numOpticalDepthPoints = 8.0; const float scatteringStrength = 10.0; const vec3 waveLengths = vec3(800, 530, 440); const vec3 scatterCoefs = scatteringStrength * vec3( pow(400.0 / waveLengths.x, 4.0), pow(400.0 / waveLengths.y, 4.0), pow(400.0 / waveLengths.z, 4.0) ); float densityAtPoint (vec3 p) { float heightAboveSurface = length(p - planetCenter) - planetRadius; float height01 = heightAboveSurface / (atmosphereRadius - planetRadius); float localDensity = exp(-height01 * densityFalloff) * (1.0 - height01); return localDensity; } float opticalDepth (vec3 ro, vec3 rd, float rl) { vec3 densitySamplePoint = ro.xyz; float stepSize = rl / (numOpticalDepthPoints - 1.0); float opticalDepth = 0.0; for (float i = 0.0; i < numOpticalDepthPoints; i += 1.0) { opticalDepth += densityAtPoint(densitySamplePoint) * stepSize; densitySamplePoint += rd * stepSize; } return opticalDepth; } vec3 calculateLight (vec3 ro, vec3 rd, float rl, vec3 originalColor) { vec3 inScatterPoint = ro.xyz; float stepSize = rl / (numInScatteringPoints - 1.0); vec3 inScatteredLight = vec3(0, 0, 0); float viewRayOpticalDepth = 0.0; float ii = 0.0; for (float i = 0.0; i < numInScatteringPoints; i += 1.0) { float sunRayLength = raySphere( planetCenter, atmosphereRadius, inScatterPoint, dirToSun).y; float sunRayOpticalDepth = opticalDepth( inScatterPoint, dirToSun, sunRayLength); viewRayOpticalDepth = opticalDepth( inScatterPoint, -rd, stepSize * ii); vec3 transmittance = exp( (-sunRayOpticalDepth-viewRayOpticalDepth) * scatterCoefs); float localDensity = densityAtPoint(inScatterPoint); inScatteredLight += localDensity * transmittance * scatterCoefs * stepSize; inScatterPoint += rd * stepSize; ii += 1.0; } float originalTransmittance = exp(-2.0viewRayOpticalDepth); return originalTransmittance originalColor + inScatteredLight; } vec2 c = vec2(cos(uTime), sin(uTime)) * 0.5 + 1.0; void main () { vec2 uv = (1.0 - uScale * gl_FragCoord.xy)-0.5; vec3 ray = normalize(vec3(uv, 1.0)) * cameraMatrix; vec2 dstToPlanet = raySphere(planetCenter, planetRadius, cameraPosition, ray); vec3 tint = vec3(0, 0, 0); vec3 l = vec3(0, 0, 0); if (dstToPlanet.y > 0.0) { vec3 pos = cameraPosition + ray * dstToPlanet.x; vec3 normal = normalize(pos - planetCenter); float ns = 10.0 + uTime * 0.2; float snoise_scl = 55.0; // TODO: blur noise when fresnel is high vec3 normal_edit = vec3( snoise(normal.xyz * snoise_scl + ns), snoise(normal.yzx * snoise_scl + ns), snoise(normal.zyx * snoise_scl + ns)); normal += normal_edit * 0.2; float diffuse = max(dot(normal, dirToSun), 0.0); float specular = dot(reflect(ray, normal), dirToSun); specular = pow(max(specular, 0.0), 16.0); float light = 0.7 * diffuse + 0.3 * specular; tint = vec3(0.8, 0.8, 0.8) * light; } else { float dp = dot(ray, dirToSun); float sn = snoise(ray.xyz * 50.0); if (sn > 0.8) { sn -= 0.8; tint = vec3(sn, sn, sn) * 5.0; } if (dp > 0.997) { dp -= 0.997; dp = 1000.0; tint = dp vec3(1.0, 0.8, 0.5); } } vec2 t = raySphere(planetCenter, atmosphereRadius, cameraPosition, ray); if (t.y > 0.0) { float nt = t.x, ft = min(t.y, dstToPlanet.x - t.x); vec3 posInAtmosphere = cameraPosition + ray * (nt + epsilon); tint = calculateLight(posInAtmosphere, ray, ft - epsilon * 2.0, tint); } gl_FragColor = vec4(tint, 1.0); } </script> <script type=""> var XGL; (function() { XGL = {}; var gl, canvas; var loadGL = function(c) { XGL.canvas = c; XGL.width = c.width; XGL.height = c.height; var glArgs = { preserveDrawingBuffer: true, failIfMajorPerformanceCaveat: true }; XGL.gl = XGL.canvas.getContext("webgl", glArgs); gl = XGL.gl; canvas = XGL.canvas; }; var loadShader = function(type, source) { var shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); var compileStatus = gl.getShaderParameter(shader, gl.COMPILE_STATUS); if (!compileStatus) { gl.deleteShader(shader); } return shader; }; var Shader = function(fsSource) { this.vsSource = "attribute vec2 a_position;void main() { gl_Position = vec4(a_position.xy, 0.0, 1.0); }"; this.fsSource = fsSource; this.vertexShader = loadShader(gl.VERTEX_SHADER, this.vsSource); this.fragmentShader = loadShader(gl.FRAGMENT_SHADER, this.fsSource); this.program = gl.createProgram(); gl.attachShader(this.program, this.vertexShader); gl.attachShader(this.program, this.fragmentShader); gl.linkProgram(this.program); this.uniformLocations = {}; }; Shader.prototype.setUniform = function(uniformName, type, o1, o2, o3, o4) { var loc = this.uniformLocations[uniformName]; if (type[type.length - 1] === "v") { gl["uniform" + type](loc, o1); } else if (type[0] === "1") { gl["uniform" + type](loc, o1); } else if (type[0] === "2") { gl["uniform" + type](loc, o1, o2); } else if (type[0] === "3") { gl["uniform" + type](loc, o1, o2, o3); } else { gl["uniform" + type](loc, o1, o2, o3, o4); } }; Shader.prototype.addUniformLocation = function(name, id) { this.uniformLocations[name] = gl.getUniformLocation(this.program, id); }; Shader.prototype.injectTexture2D = function(uniformName, n, textureObject) { gl.activeTexture(gl.TEXTURE0 + n); var tex = gl.createTexture(); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, textureObject.width, textureObject.height, 0, gl.RGB, gl.UNSIGNED_BYTE, textureObject.data); this.setUniform(uniformName, "1i", n); }; Shader.prototype.initialize = function() { gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight); var triBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, triBuffer); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, +1, -1, -1, +1, -1, +1, +1, -1, +1, +1]), gl.STATIC_DRAW); var positionLocation = gl.getAttribLocation(this.program, "a_position"); gl.enableVertexAttribArray(positionLocation); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); gl.useProgram(this.program); }; Shader.prototype.display = function(deltaTime) { gl.drawArrays(gl.TRIANGLES, 0, 6); }; XGL = {}; XGL.Shader = Shader; XGL.loadGL = loadGL; })(); var PersistentStorage = window.KAInfiniteLoopProtect; var canvas, gl, shaderProgram; function etxt (id) { return document.getElementById(id).text; } function initialize () { if (!('alreadyMadeCanvas' in PersistentStorage)) { PersistentStorage.alreadyMadeCanvas = true; var canvas = document.createElement('CANVAS'); PersistentStorage.canvas = canvas; } canvas = PersistentStorage.canvas; canvas.width = 600; canvas.height = 600; document.body.appendChild(canvas); XGL.loadGL(canvas); gl = XGL.gl; var fsSource = etxt("fragment"); shaderProgram = new XGL.Shader(fsSource); shaderProgram.initialize(); } function main () { initialize(); shaderProgram.addUniformLocation("time", "uTime"); shaderProgram.addUniformLocation("scale", "uScale"); shaderProgram.addUniformLocation("angle", "uAngle"); requestAnimationFrame(render); } function render (now) { shaderProgram.setUniform("time", "1f", now * 0.001); shaderProgram.setUniform("scale", "2f", 1 / 600, 1 / 600); shaderProgram.setUniform("angle", "1f", now * 0.0002); shaderProgram.display(); requestAnimationFrame(render); } main(); </script> </body> </html>
Folds	32,34,35,37,38,40,41,43,123,140,292,383
Fork	false
Key	ag5zfmtoYW4tYWNhZGVteXIXCxIKU2NyYXRjaHBhZBiAgK35hcS7Cgw
Votes	166
Spin-Offs	8
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, 1739450434374
Updated	10 months ago, 1739450434374
Source Deleted	unknown