194 lines
4.5 KiB
HTML
194 lines
4.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Genuary 2022 | Day 8 </title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<canvas id="canvas" width="600" height="600"></canvas>
|
|
<!-- VertexShader code here -->
|
|
<script id="vertexShader" type="x-shader/x-vertex">#version 300 es
|
|
precision highp float;
|
|
in vec4 position;
|
|
void main() {
|
|
gl_Position = vec4( position );
|
|
}
|
|
</script>
|
|
<!-- FragmentShader code here -->
|
|
<script id="fragmentShader" type="x-shader/x-fragment">#version 300 es
|
|
precision highp float;
|
|
out vec4 fragColor;
|
|
// basic uniforms
|
|
uniform vec4 u_mouse;
|
|
uniform vec2 u_resolution;
|
|
uniform float u_time;
|
|
uniform float u_hash;
|
|
|
|
// code here
|
|
#define R u_resolution
|
|
#define T u_time
|
|
#define M u_mouse
|
|
|
|
#define PI 3.14159265358
|
|
#define PI2 6.28318530718
|
|
#define MAX_DIST 100.
|
|
|
|
mat2 rot(float a) { return mat2(cos(a),sin(a),-sin(a),cos(a)); }
|
|
float hash21(vec2 a) { return fract(sin(dot(a,vec2(21.23,41.232)))* 43758.5453);}
|
|
|
|
vec3 hit=vec3(0);vec3 hitPoint=vec3(0);
|
|
mat2 rx,ry,turn;
|
|
float ghsh,shsh,time=0.;
|
|
|
|
vec2 map (in vec3 p) {
|
|
vec2 res = vec2(1e5,0.);
|
|
p.xz*=turn;
|
|
vec2 id = vec2(1.);
|
|
|
|
p.x+=1.65*sin(p.y*.25+(12.25+T*1.25));
|
|
|
|
vec3 q = p;
|
|
float hsh = hash21(id+3.);
|
|
|
|
float ph = (1.85+hsh)+.65*sin(p.y*.25+(12.25*hsh+T*1.75));
|
|
float theata = atan(q.z, q.x)*2.;
|
|
|
|
vec2 tv = vec2(
|
|
mod(q.y - theata/PI, 2.0)-1.0,
|
|
length(q.xz)-ph
|
|
);
|
|
|
|
float d = length(tv)-.3;
|
|
//d = max(abs(d)-.1,-d);
|
|
|
|
if(d<res.x) {
|
|
res = vec2(d,2.);
|
|
hitPoint=q;
|
|
ghsh=hsh;
|
|
}
|
|
|
|
res.x*=.7;
|
|
return res;
|
|
}
|
|
|
|
//Tetrahedron technique
|
|
//https://www.iquilezles.org/www/articles/normalsSDF/normalsSDF.htm
|
|
vec3 normal(vec3 p, float t, float mindist)
|
|
{
|
|
float e = mindist*t;
|
|
vec2 h = vec2(1.0,-1.0)*0.5773;
|
|
return normalize( h.xyy*map( p + h.xyy*e ).x +
|
|
h.yyx*map( p + h.yyx*e ).x +
|
|
h.yxy*map( p + h.yxy*e ).x +
|
|
h.xxx*map( p + h.xxx*e ).x );
|
|
}
|
|
|
|
//@iq https://iquilezles.org/www/articles/palettes/palettes.htm
|
|
vec3 hue(float t){
|
|
vec3 c = vec3(.95, .7, .8),d = vec3(0.749,0.251,0.400);
|
|
return .65 + .45*cos( PI2*t*(c+d) );
|
|
}
|
|
|
|
vec3 clr;
|
|
vec3 shade(vec3 p, vec3 rd, float d, float m, inout vec3 n)
|
|
{
|
|
n = normal(p,d,1.);
|
|
vec3 lpos = vec3(.1,9,7);
|
|
vec3 l = normalize(lpos-p);
|
|
|
|
float diff = clamp(dot(n,l),0.,1.);
|
|
float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 5.5);
|
|
fresnel = mix(.01, .7, fresnel);
|
|
clr = hue(shsh+(hitPoint.y*.1));
|
|
vec3 h = mix(clr*.15,vec3(.5),fresnel);//clr;//glintz(clr, hitPoint*.1, n, rd, l);
|
|
|
|
return h;
|
|
}
|
|
|
|
vec3 renderAll( in vec2 F )
|
|
{
|
|
time = T*.25;
|
|
turn = rot(T*25.*PI/180.);
|
|
vec3 C=vec3(.0);
|
|
vec2 uv = (2.*F.xy-R.xy)/max(R.x,R.y);
|
|
|
|
vec3 ro = vec3(0,0,5.25),
|
|
rd = normalize(vec3(uv,-.7));
|
|
//orthographic camera
|
|
float zoom = 5.;
|
|
//vec3 ro = vec3(uv*zoom,-zoom-10.);
|
|
//vec3 rd = vec3(0,0,1.);
|
|
|
|
rx = rot(.2);
|
|
ry = rot(-.2);
|
|
|
|
ro.yz *= rx;
|
|
rd.yz *= rx;
|
|
ro.xz *= ry;
|
|
rd.xz *= ry;
|
|
|
|
vec3 p = ro + rd * .1;
|
|
float atten = .725;
|
|
float k = 1.;
|
|
float o = 1.;
|
|
float b = 4.;
|
|
// loop inspired/adapted from @blackle's
|
|
// marcher https://www.shadertoy.com/view/flsGDH
|
|
for(int i=0;i<128;i++)
|
|
{
|
|
vec2 ray = map(p);
|
|
vec3 n=vec3(0);
|
|
|
|
float d = ray.x;
|
|
float m = ray.y;
|
|
|
|
p += rd * d *k;
|
|
|
|
if (d*d < 1e-6) {
|
|
o*=1e-2;
|
|
shsh=ghsh;
|
|
hit=hitPoint;
|
|
C+=shade(p,rd,d,ray.y,n)*atten;
|
|
if(b<1.)break;
|
|
|
|
atten *= .75;
|
|
p += rd*.075;
|
|
k = sign(map(p).x);
|
|
|
|
float fresnel = pow(clamp(1.+dot(rd, n), 0., 1.), 9.);
|
|
fresnel = mix(.01, .9, fresnel);
|
|
|
|
vec3 rr = vec3(0);
|
|
|
|
rr = refract(rd,n,.45);
|
|
rd=mix(rr,rd,.9-fresnel);
|
|
b--;
|
|
}
|
|
if(distance(p,rd)>50.) { break; }
|
|
}
|
|
// Output to screen
|
|
return mix(C,vec3(.9,0.7,0.),o);
|
|
}
|
|
|
|
void main(){
|
|
vec2 F =gl_FragCoord.xy;
|
|
vec3 C = renderAll(F);
|
|
C +=renderAll(F+vec2(.2,.2));
|
|
C +=renderAll(F-vec2(.2,.2));
|
|
C /= 3.;
|
|
|
|
C = pow(C, vec3(.4545));
|
|
|
|
fragColor = vec4(C,1.0);
|
|
}
|
|
|
|
</script>
|
|
<!-- partial -->
|
|
<script src='https://jhancock532.github.io/twgl.min.js'></script><script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|