(function(){ var cfg = { bg: "#0e0e11", pts: [{"x":0.5069437317165427,"y":0,"r":0.8,"a":0.1,"c":"#04ff00","d":1,"rgb":0.0020235655975217527,"s":0.7,"rt":0.96}], speed: 0.9, flow: 0.1, noise: 0.03, hard: 1.5, gamma: 0.9288781644174398, pulse: 0.5, spin: 0, distort: 0.9, globalDistort: true, mouse: 1, mouseActive: true, rgb: 0, globalRGB: true, blendMode: 1, grainSize: 0.5, banding: 0, bloom: 0, bloomThreshold: 0, vignette: 0, vignetteSoft: 0.2, contrast: 1, saturation: 1, temperature: 0, noiseDetail: 1 }; function hex(h){ var i=parseInt(h.slice(1),16); return [(i>>16)&255,(i>>8)&255,i&255].map(function(x){return x/255}) } function createGradient(cvs, cfg) { var gl = cvs.getContext("webgl2", {alpha: false}); var isGL2 = !!gl; if (!gl) gl = cvs.getContext("webgl", {alpha: false}); if (!gl) return; var pp = null; cvs.addEventListener("webglcontextlost", function(e){ e.preventDefault(); gl = null; pp = null; }); var vsSrc = isGL2 ? "#version 300 es\nin vec2 position;out vec2 v_uv;void main(){v_uv=position*0.5+0.5;gl_Position=vec4(position,0.0,1.0);}" : "attribute vec2 position;varying vec2 v_uv;void main(){v_uv=position*0.5+0.5;gl_Position=vec4(position,0.0,1.0);}"; var fsSrc = isGL2 ? "#version 300 es\nprecision highp float; uniform float u_time;uniform vec2 u_res;uniform vec3 u_bg;uniform float u_hard; uniform float u_flow;uniform float u_pulse_amp;uniform float u_spin;uniform float u_banding; uniform float u_gamma;uniform float u_global_rgb;uniform float u_global_distort; uniform vec2 u_mouse;uniform float u_mouse_force; uniform int u_blend_mode;uniform vec4 u_pts[8];uniform vec3 u_cols[8]; uniform vec3 u_pt_params[8];uniform float u_pt_rot[8]; uniform bool u_use_global_distort;uniform bool u_use_global_rgb; uniform int u_count;uniform int u_noise_detail; in vec2 v_uv;out vec4 fragColor; vec3 mod289v(vec3 x){return x-floor(x*(1.0/289.0))*289.0;} vec4 mod289v(vec4 x){return x-floor(x*(1.0/289.0))*289.0;} vec4 permute(vec4 x){return mod289v(((x*34.0)+10.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); vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx); 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; i=mod289v(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)); float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx; vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_); 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.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.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); 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; vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m; return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3))); } float fbm(vec3 p){float v=0.0,a=0.5;for(int i=0;i<5;i++){if(i>=u_noise_detail)break;v+=a*snoise(p);p*=2.0;a*=0.5;}return v;} float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);} vec3 getLayer(vec2 uv,float chOff){ float asp=u_res.x/u_res.y;uv.x*=asp;vec2 ctr=vec2(0.5*asp,0.5); float s=sin(u_spin*u_time),c=cos(u_spin*u_time);mat2 rot=mat2(c,-s,s,c);uv-=ctr;uv*=rot;uv+=ctr; if(length(u_mouse)>0.0&&u_mouse_force!=0.0){vec2 m=u_mouse;m.x*=asp;float md=distance(uv,m);uv+=(uv-m)*(0.1*u_mouse_force/(md+0.05));} vec3 accCol=vec3(0.0);float accW=0.0; for(int i=0;i<8;i++){if(i0.0){float n=u_noise_detail>1?fbm(vec3(lUV*3.0,u_time*0.2)):snoise(vec3(lUV*3.0,u_time*0.2));lUV+=n*dS*0.3;} vec2 pos=pt.xy;pos.x*=asp;float sa=sin(ang),ca=cos(ang);mat2 pR=mat2(ca,sa,-sa,ca); vec2 dV=lUV-pos;dV=pR*dV;dV.y/=(1.0-str*0.9); float pulse=sin(u_time*(1.0+float(i)*0.2))*u_pulse_amp;float d=length(dV);float r=pt.z+pulse; float w=max(0.0,1.0-d/(r+0.01));w=pow(w,u_hard); if(u_banding>0.5){w=floor(w*u_banding)/u_banding;}w*=pt.w; if(u_blend_mode==1){accCol+=col*w;}else{accCol+=col*w;accW+=w;} }} if(u_blend_mode==1)return u_bg+accCol; if(accW>0.001)return mix(u_bg,accCol/accW,clamp(accW,0.0,1.0));return u_bg; } void main(){ vec2 uv=gl_FragCoord.xy/u_res; float r=getLayer(uv,-1.0).r;float g=getLayer(uv,0.0).g;float b=getLayer(uv,1.0).b; vec3 col=pow(vec3(r,g,b),vec3(1.0/u_gamma)); fragColor=vec4(col,1.0); }" : "precision mediump float; uniform float u_time; uniform vec2 u_res; uniform vec3 u_bg; uniform float u_noise; uniform float u_grain_size; uniform float u_hard; uniform float u_flow; uniform float u_pulse_amp; uniform float u_spin; uniform float u_banding; uniform float u_gamma; uniform float u_global_rgb; uniform float u_global_distort; uniform vec2 u_mouse; uniform float u_mouse_force; uniform int u_blend_mode; uniform vec4 u_pts[8]; uniform vec3 u_cols[8]; uniform vec3 u_pt_params[8]; uniform float u_pt_rot[8]; uniform bool u_use_global_distort; uniform bool u_use_global_rgb; uniform int u_count; varying vec2 v_uv; float rand(vec2 n) { return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453); } float noise(vec2 p){ vec2 ip = floor(p); vec2 u = fract(p); u = u*u*(3.0-2.0*u); float res = mix(mix(rand(ip), rand(ip+vec2(1.0,0.0)), u.x), mix(rand(ip+vec2(0.0,1.0)), rand(ip+vec2(1.0,1.0)), u.x), u.y); return res*res; } vec3 getLayer(vec2 uv, float channelOffset) { float aspect=u_res.x/u_res.y; uv.x*=aspect; vec2 center=vec2(0.5*aspect,0.5); float s=sin(u_spin*u_time),c=cos(u_spin*u_time); mat2 rot=mat2(c,-s,s,c); uv-=center; uv*=rot; uv+=center; if(length(u_mouse)>0.0 && u_mouse_force!=0.0){ vec2 m=u_mouse; m.x*=aspect; float md=distance(uv,m); uv+=(uv-m)*(0.1*u_mouse_force/(md+0.05)); } vec3 accCol=vec3(0.0); float accW=0.0; for(int i=0;i<8;i++){ if(i 0.0) { float n = noise(localUV * 3.0 + u_time * 0.2); localUV += (n - 0.5) * dStr * 0.3; } vec2 pos=pt.xy; pos.x*=aspect; float sa=sin(angle), ca=cos(angle); mat2 ptRot = mat2(ca, sa, -sa, ca); vec2 dVec = localUV - pos; dVec = ptRot * dVec; dVec.y /= (1.0 - stretch * 0.9); float pulse=sin(u_time*(1.0+float(i)*0.2))*u_pulse_amp; float d=length(dVec); float r=pt.z+pulse; float w=max(0.0,1.0-d/(r+0.01)); w=pow(w,u_hard); if (u_banding > 0.5) { w = floor(w * u_banding) / u_banding; } w*=pt.w; if (u_blend_mode == 1) { accCol += col * w; } else { accCol += col * w; accW += w; } }} if (u_blend_mode == 1) return u_bg + accCol; else { if(accW>0.001) return mix(u_bg, accCol/accW, clamp(accW,0.0,1.0)); return u_bg; } } void main(){ vec2 uv = gl_FragCoord.xy / u_res; float vig = 1.0 - smoothstep(0.5, 1.5, length(uv - 0.5)); float r = getLayer(uv, -1.0).r; float g = getLayer(uv, 0.0).g; float b = getLayer(uv, 1.0).b; vec3 final = vec3(r,g,b); final = pow(final, vec3(1.0/u_gamma)); final *= vig; float grainVal = (rand(v_uv * (u_res/u_grain_size) + u_time) - 0.5) * u_noise; gl_FragColor=vec4(final+grainVal,1.0); }"; var prog = gl.createProgram(); var cs = function(type, src) { var x=gl.createShader(type); gl.shaderSource(x,src); gl.compileShader(x); if(!gl.getShaderParameter(x,gl.COMPILE_STATUS)){gl.deleteShader(x);return null;} return x; }; var vs=cs(gl.VERTEX_SHADER,vsSrc), fs=cs(gl.FRAGMENT_SHADER,fsSrc); if(!vs||!fs) return; gl.attachShader(prog,vs); gl.attachShader(prog,fs); gl.linkProgram(prog); if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return; var buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW); gl.useProgram(prog); var u = {}; var uNames = ["u_time","u_res","u_bg","u_noise","u_grain_size","u_hard","u_flow","u_pulse_amp","u_spin","u_banding","u_mouse","u_mouse_force","u_gamma","u_global_distort","u_global_rgb","u_use_global_distort","u_use_global_rgb","u_blend_mode","u_pts","u_cols","u_pt_params","u_pt_rot","u_count"]; if (isGL2) uNames.push("u_noise_detail"); uNames.forEach(function(n){ u[n]=gl.getUniformLocation(prog,n); }); var posLoc = gl.getAttribLocation(prog,"position"); function mkFBO(w,h,useF){ var fb=gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER,fb); var tx=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,tx); var fmt=useF?gl.RGBA16F:gl.RGBA8; var tp=useF?gl.HALF_FLOAT:gl.UNSIGNED_BYTE; gl.texImage2D(gl.TEXTURE_2D,0,fmt,w,h,0,gl.RGBA,tp,null); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MAG_FILTER,gl.LINEAR); 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.framebufferTexture2D(gl.FRAMEBUFFER,gl.COLOR_ATTACHMENT0,gl.TEXTURE_2D,tx,0); gl.bindFramebuffer(gl.FRAMEBUFFER,null); return {fb:fb,tex:tx,w:w,h:h}; } function mkPProg(fSrc){ var p2=gl.createProgram(); var v2=cs(gl.VERTEX_SHADER,"#version 300 es\nin vec2 position;out vec2 v_uv;void main(){v_uv=position*0.5+0.5;gl_Position=vec4(position,0.0,1.0);}"); var f2=cs(gl.FRAGMENT_SHADER,fSrc); if(!v2||!f2)return null; gl.attachShader(p2,v2); gl.attachShader(p2,f2); gl.linkProgram(p2); if(!gl.getProgramParameter(p2,gl.LINK_STATUS))return null; return p2; } function drawQ(p2){ var loc=gl.getAttribLocation(p2,"position"); gl.enableVertexAttribArray(loc); gl.bindBuffer(gl.ARRAY_BUFFER,buf); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0); gl.drawArrays(gl.TRIANGLES,0,6); } if(isGL2){ gl.getExtension('EXT_color_buffer_float'); gl.getExtension('EXT_color_buffer_half_float'); var iw=cvs.clientWidth||800, ih=cvs.clientHeight||600; var hw=Math.max(1,iw>>1), hh=Math.max(1,ih>>1); pp={sceneFBO:mkFBO(iw,ih,true), halfA:mkFBO(hw,hh,true), halfB:mkFBO(hw,hh,true)}; pp.brightProg=mkPProg("#version 300 es\nprecision highp float; uniform sampler2D u_tex;uniform float u_threshold;in vec2 v_uv;out vec4 fragColor; void main(){vec3 c=texture(u_tex,v_uv).rgb;float br=dot(c,vec3(0.2126,0.7152,0.0722));fragColor=vec4(c*clamp((br-u_threshold)/(1.0-u_threshold+0.001),0.0,1.0),1.0);}"); pp.blurProg=mkPProg("#version 300 es\nprecision highp float; uniform sampler2D u_tex;uniform vec2 u_dir;in vec2 v_uv;out vec4 fragColor; void main(){vec3 c=vec3(0.0);float w[5]=float[](0.227027,0.1945946,0.1216216,0.054054,0.016216);c+=texture(u_tex,v_uv).rgb*w[0];for(int i=1;i<5;i++){vec2 o=u_dir*float(i)*2.0;c+=texture(u_tex,v_uv+o).rgb*w[i];c+=texture(u_tex,v_uv-o).rgb*w[i];}fragColor=vec4(c,1.0);}"); pp.compositeProg=mkPProg("#version 300 es\nprecision highp float; uniform sampler2D u_scene;uniform sampler2D u_bloom_tex; uniform float u_bloom_intensity;uniform float u_vignette;uniform float u_vignette_soft; uniform float u_contrast;uniform float u_saturation;uniform float u_temperature; uniform float u_noise_amount;uniform float u_grain_size;uniform float u_time;uniform vec2 u_res; in vec2 v_uv;out vec4 fragColor; float rand(vec2 n){return fract(sin(dot(n,vec2(12.9898,4.1414)))*43758.5453);} void main(){ vec3 sc=texture(u_scene,v_uv).rgb;vec3 bl=texture(u_bloom_tex,v_uv).rgb; vec3 c=sc+bl*u_bloom_intensity; float d=length(v_uv-0.5);float vig=1.0-smoothstep(u_vignette_soft*0.5,1.5,d);c*=mix(1.0,vig,u_vignette); c=(c-0.5)*u_contrast+0.5; float lm=dot(c,vec3(0.2126,0.7152,0.0722));c=mix(vec3(lm),c,u_saturation); c.r+=u_temperature*0.1;c.b-=u_temperature*0.1; c+=((rand(v_uv*(u_res/u_grain_size)+u_time)-0.5)*u_noise_amount); fragColor=vec4(clamp(c,0.0,1.0),1.0); }"); if(pp.brightProg&&pp.blurProg&&pp.compositeProg){ pp.bL={u_tex:gl.getUniformLocation(pp.brightProg,"u_tex"),u_threshold:gl.getUniformLocation(pp.brightProg,"u_threshold")}; pp.blL={u_tex:gl.getUniformLocation(pp.blurProg,"u_tex"),u_dir:gl.getUniformLocation(pp.blurProg,"u_dir")}; var cp=pp.compositeProg; pp.cL={}; ["u_scene","u_bloom_tex","u_bloom_intensity","u_vignette","u_vignette_soft","u_contrast","u_saturation","u_temperature","u_noise_amount","u_grain_size","u_time","u_res"].forEach(function(n){pp.cL[n]=gl.getUniformLocation(cp,n);}); var eT=gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D,eT); gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA8,1,1,0,gl.RGBA,gl.UNSIGNED_BYTE,new Uint8Array([0,0,0,255])); pp.emptyTex=eT; } else { pp=null; } } var prevW=0, prevH=0; var t=0, m={x:-1,y:-1}; if(cfg.mouseActive){ window.addEventListener("mousemove", function(e){ var r=cvs.getBoundingClientRect(); if(r.width&&r.height){ m.x=(e.clientX-r.left)/r.width; m.y=1.0-(e.clientY-r.top)/r.height; } }); } var isRunning = true; if ('IntersectionObserver' in window) { new IntersectionObserver(function(entries) { entries.forEach(function(entry) { if (entry.isIntersecting) { if (!isRunning) { isRunning = true; f(); } } else { isRunning = false; } }); }).observe(cvs); } function f(){ if (!isRunning || !gl) return; t += 0.01 * cfg.speed; var w=cvs.clientWidth||cvs.parentNode.clientWidth, h=cvs.clientHeight||cvs.parentNode.clientHeight; if(cvs.width!==w||cvs.height!==h){ cvs.width=w; cvs.height=h; gl.viewport(0,0,w,h); if(pp){ var d=function(o){gl.deleteTexture(o.tex);gl.deleteFramebuffer(o.fb);}; d(pp.sceneFBO);d(pp.halfA);d(pp.halfB); pp.sceneFBO=mkFBO(w,h,true); var hw2=Math.max(1,w>>1),hh2=Math.max(1,h>>1); pp.halfA=mkFBO(hw2,hh2,true); pp.halfB=mkFBO(hw2,hh2,true); } } if(pp){ gl.bindFramebuffer(gl.FRAMEBUFFER,pp.sceneFBO.fb); gl.viewport(0,0,pp.sceneFBO.w,pp.sceneFBO.h); } gl.useProgram(prog); gl.enableVertexAttribArray(posLoc); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0); gl.uniform1f(u.u_time, t); gl.uniform2f(u.u_res, w, h); gl.uniform1f(u.u_noise, pp ? 0.0 : cfg.noise); gl.uniform1f(u.u_grain_size, cfg.grainSize); gl.uniform1f(u.u_hard, cfg.hard); gl.uniform1f(u.u_flow, cfg.flow); gl.uniform1f(u.u_pulse_amp, cfg.pulse); gl.uniform1f(u.u_spin, cfg.spin); gl.uniform1f(u.u_banding, cfg.banding||0.0); gl.uniform1f(u.u_global_distort, cfg.distort); gl.uniform1i(u.u_use_global_distort, cfg.globalDistort?1:0); gl.uniform1f(u.u_global_rgb, cfg.rgb); gl.uniform1i(u.u_use_global_rgb, cfg.globalRGB?1:0); gl.uniform1i(u.u_blend_mode, cfg.blendMode); gl.uniform1f(u.u_mouse_force, cfg.mouseActive ? cfg.mouse : 0.0); gl.uniform2f(u.u_mouse, m.x, m.y); gl.uniform1f(u.u_gamma, cfg.gamma); if(isGL2 && u.u_noise_detail!==null) gl.uniform1i(u.u_noise_detail, cfg.noiseDetail||1); var bg = hex(cfg.bg); gl.uniform3f(u.u_bg, bg[0],bg[1],bg[2]); var fP=[], fC=[], fPar=[], fRot=[]; cfg.pts.forEach(function(pt,i){ var mx = Math.sin(t*0.5+i)*0.1 + Math.sin(t*0.2)*cfg.flow; var my = Math.cos(t*0.3+i)*0.1; fP.push(pt.x+mx, 1.0-(pt.y+my), pt.r, pt.a); var c = hex(pt.c); fC.push(c[0],c[1],c[2]); fPar.push(pt.d||0.0, pt.rgb||0.0, pt.s||0.0); fRot.push(pt.rt||0.0); }); for(var i=cfg.pts.length;i<8;i++){fP.push(0,0,0,0);fC.push(0,0,0);fPar.push(0,0,0);fRot.push(0);} gl.uniform4fv(u.u_pts, new Float32Array(fP)); gl.uniform3fv(u.u_cols, new Float32Array(fC)); gl.uniform3fv(u.u_pt_params, new Float32Array(fPar)); gl.uniform1fv(u.u_pt_rot, new Float32Array(fRot)); gl.uniform1i(u.u_count, cfg.pts.length); gl.drawArrays(gl.TRIANGLES, 0, 6); if(pp){ var hasB=cfg.bloom>0; if(hasB){ gl.bindFramebuffer(gl.FRAMEBUFFER,pp.halfA.fb); gl.viewport(0,0,pp.halfA.w,pp.halfA.h); gl.useProgram(pp.brightProg); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,pp.sceneFBO.tex); gl.uniform1i(pp.bL.u_tex,0); gl.uniform1f(pp.bL.u_threshold,cfg.bloomThreshold); drawQ(pp.brightProg); gl.bindFramebuffer(gl.FRAMEBUFFER,pp.halfB.fb); gl.viewport(0,0,pp.halfB.w,pp.halfB.h); gl.useProgram(pp.blurProg); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,pp.halfA.tex); gl.uniform1i(pp.blL.u_tex,0); gl.uniform2f(pp.blL.u_dir,1.0/pp.halfB.w,0.0); drawQ(pp.blurProg); gl.bindFramebuffer(gl.FRAMEBUFFER,pp.halfA.fb); gl.viewport(0,0,pp.halfA.w,pp.halfA.h); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,pp.halfB.tex); gl.uniform1i(pp.blL.u_tex,0); gl.uniform2f(pp.blL.u_dir,0.0,1.0/pp.halfA.h); drawQ(pp.blurProg); } gl.bindFramebuffer(gl.FRAMEBUFFER,null); gl.viewport(0,0,w,h); gl.useProgram(pp.compositeProg); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D,pp.sceneFBO.tex); gl.uniform1i(pp.cL.u_scene,0); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D,hasB?pp.halfA.tex:pp.emptyTex); gl.uniform1i(pp.cL.u_bloom_tex,1); gl.uniform1f(pp.cL.u_bloom_intensity,cfg.bloom); gl.uniform1f(pp.cL.u_vignette,cfg.vignette); gl.uniform1f(pp.cL.u_vignette_soft,cfg.vignetteSoft); gl.uniform1f(pp.cL.u_contrast,cfg.contrast); gl.uniform1f(pp.cL.u_saturation,cfg.saturation); gl.uniform1f(pp.cL.u_temperature,cfg.temperature); gl.uniform1f(pp.cL.u_noise_amount,cfg.noise); gl.uniform1f(pp.cL.u_grain_size,cfg.grainSize||1.0); gl.uniform1f(pp.cL.u_time,t); gl.uniform2f(pp.cL.u_res,w,h); drawQ(pp.compositeProg); } requestAnimationFrame(f); } f(); } function dbmInject() { var targets = document.querySelectorAll('.dbm-gradient > div'); if(targets.length === 0) targets = document.querySelectorAll('.dbm-gradient'); targets.forEach(function(el) { if(el.dataset.dbmGradient) return; el.dataset.dbmGradient = 'true'; el.style.setProperty('background-color', 'transparent', 'important'); el.style.position = 'relative'; el.style.overflow = 'hidden'; var container = document.createElement('div'); container.style.cssText = 'width:100%;height:100%;position:absolute;top:0;left:0;z-index:0;'; var cvs = document.createElement('canvas'); cvs.style.cssText = 'width:100%;height:100%;display:block;'; container.appendChild(cvs); el.insertBefore(container, el.firstChild); createGradient(cvs, cfg); }); } if (typeof t_onReady === 'function') { t_onReady(function() { setTimeout(dbmInject, 500); }); } else { document.addEventListener('DOMContentLoaded', function(){ setTimeout(dbmInject, 500); }); } })();