220 lines
5.7 KiB
HTML
220 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CodePen - Blob study</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<canvas id="webgl" width="500" height="1758"></canvas>
|
|
|
|
<script id="vertexShader" type="x-shader/x-vertex">
|
|
attribute vec4 a_position;
|
|
|
|
uniform mat4 u_modelViewMatrix;
|
|
uniform mat4 u_projectionMatrix;
|
|
|
|
void main() {
|
|
gl_Position = a_position;
|
|
}
|
|
</script>
|
|
<script id="fragmentShader" type="x-shader/x-fragment">
|
|
precision highp float;
|
|
precision highp int;
|
|
|
|
uniform vec2 u_resolution;
|
|
uniform vec2 u_mouse;
|
|
uniform float u_time;
|
|
uniform sampler2D u_noise;
|
|
|
|
// movement variables
|
|
vec3 movement = vec3(.0);
|
|
|
|
uniform int u_maxIterations;
|
|
uniform float u_stopThreshold;
|
|
uniform float u_stepScale;
|
|
uniform float u_eps;
|
|
uniform int u_octaves;
|
|
uniform vec3 u_clipBGColour;
|
|
uniform vec3 u_blobColour;
|
|
uniform vec3 u_light_position;
|
|
uniform vec3 u_lightColour;
|
|
uniform float u_lightStrength;
|
|
uniform float u_sceneWeight;
|
|
uniform float u_internalStep;
|
|
|
|
const int maxIterations = 1024;
|
|
|
|
const vec3 light1_position = vec3(0, 1., -1.);
|
|
const vec3 light1_colour = vec3(.5, .8, 1.85);
|
|
|
|
const int octaves = 3;
|
|
const int max_octaves = 16;
|
|
|
|
struct Surface {
|
|
int object_id;
|
|
float distance;
|
|
vec3 position;
|
|
vec3 colour;
|
|
float ambient;
|
|
float spec;
|
|
};
|
|
|
|
float bumps(in vec3 p, float phase, float size, vec3 frequency) {
|
|
return size * sin(p.x * frequency.x + phase) * cos(p.y * frequency.y + phase) * cos(p.z * frequency.z + phase);
|
|
}
|
|
|
|
float fractalBumps(in vec3 p, float phase, float size, vec3 frequency, float multiplier) {
|
|
// const float octaves = 2.;
|
|
float _bumps = 0.;
|
|
for(int i = 1; i < max_octaves; i++) {
|
|
if(i > u_octaves) break;
|
|
float f = float(i);
|
|
_bumps += bumps(p, phase + f * 10., size * multiplier * 1./f, frequency * f);
|
|
}
|
|
|
|
return _bumps;
|
|
}
|
|
|
|
// This function describes the world in distances from any given 3 dimensional point in space
|
|
float world(in vec3 position, inout int object_id) {
|
|
vec3 pos = floor(position * .5);
|
|
object_id = int(floor(pos.x + pos.y + pos.z));
|
|
// position = mod(position, 1.) - .5;
|
|
float gradient = max(0., (position.y + .3));
|
|
float bumps = fractalBumps(position, u_time * 2., .5 * gradient, vec3(10. + sin(u_time) * 5.), 2.8);
|
|
|
|
float world = length(position) - .4 + bumps * .15;
|
|
|
|
// world = max(world, -position.y);
|
|
|
|
return world;
|
|
}
|
|
float world(in vec3 position) {
|
|
int dummy = 0;
|
|
return world(position, dummy);
|
|
}
|
|
|
|
vec3 getNormal(vec3 p, float eps) {
|
|
vec3 n;
|
|
n.y = world(p);
|
|
n.x = world(vec3(p.x+eps,p.y,p.z)) - n.y;
|
|
n.z = world(vec3(p.x,p.y,p.z+eps)) - n.y;
|
|
n.y = eps;
|
|
return normalize(n);
|
|
}
|
|
|
|
Surface getSurface(int object_id, float rayDepth, vec3 sp) {
|
|
return Surface(
|
|
object_id,
|
|
rayDepth,
|
|
sp,
|
|
vec3(1.),
|
|
.5,
|
|
200.);
|
|
}
|
|
|
|
// The raymarch loop
|
|
Surface rayMarch(vec3 ro, vec3 rd, float start, float end, inout vec3 col) {
|
|
float sceneDist = 1e4;
|
|
float rayDepth = start;
|
|
int object_id = 0;
|
|
|
|
// Light position
|
|
vec3 lp = ro + vec3(2, 2, -5.);
|
|
|
|
bool hit = false;
|
|
|
|
float energy = u_lightStrength*2.;
|
|
bool inside = false;
|
|
|
|
for(int i = 0; i < maxIterations; i++) {
|
|
if(i > u_maxIterations) break;
|
|
if(energy <= 0.) break;
|
|
vec3 r = ro + rd * rayDepth;
|
|
sceneDist = world(r, object_id);
|
|
|
|
// if(inside == true && sceneDist > 0.) {
|
|
// rayDepth -= sceneDist;
|
|
// rayDepth += .01;
|
|
// sceneDist = world(r, object_id);
|
|
// }
|
|
|
|
vec3 normal = normalize(r);
|
|
vec3 ld = lp - r;
|
|
float len = length( ld );
|
|
ld = normalize(ld);
|
|
float lightAtten = min( 1.0 / ( 0.15*len ), 1.0 );
|
|
float diffuse = max(0., dot(normal, ld))+.2;
|
|
|
|
float weighting = length(r);
|
|
|
|
energy -= .1;
|
|
|
|
col += clamp((1./abs(sceneDist)*u_sceneWeight)*weighting*(diffuse*.0005*u_blobColour)*(u_lightColour*energy*lightAtten), 0.0, 1.);
|
|
|
|
if(sceneDist < u_stopThreshold) {
|
|
// if(inside == false) {
|
|
// vec3 n = getNormal(r, .01);
|
|
// rd = normalize(refract(rd, n, 1.01));
|
|
// }
|
|
inside = true;
|
|
// vec3 r = ro + (rd+u_internalStep) * rayDepth;
|
|
// sceneDist = world(r, object_id);
|
|
// if(sceneDist>0.) {
|
|
// rayDepth += u_internalStep*.1;
|
|
// } else {
|
|
rayDepth += u_internalStep;
|
|
// }
|
|
} else {
|
|
inside = false;
|
|
rayDepth += sceneDist * u_stepScale;
|
|
}
|
|
|
|
if(rayDepth > end) {
|
|
break;
|
|
}
|
|
}
|
|
|
|
col = sqrt(col);
|
|
|
|
return getSurface(object_id, rayDepth, ro + rd * rayDepth);
|
|
}
|
|
|
|
void main() {
|
|
vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
|
|
|
|
// Camera and look-at
|
|
vec3 cam = vec3(cos(u_mouse.x * 5.)*3.,u_mouse.y * 3.,sin(u_mouse.x * 5.)*3.);
|
|
vec3 lookAt = vec3(0,0,0);
|
|
|
|
// Unit vectors
|
|
vec3 forward = normalize(lookAt - cam);
|
|
vec3 right = normalize(vec3(forward.z, 0., -forward.x));
|
|
vec3 up = normalize(cross(forward, right));
|
|
|
|
// FOV
|
|
float FOV = .4;
|
|
|
|
// Ray origin and ray direction
|
|
vec3 ro = cam;
|
|
vec3 rd = normalize(forward + FOV * uv.x * right + FOV * uv.y * up);
|
|
|
|
// Ray marching
|
|
const float clipNear = 0.;
|
|
const float clipFar = 32.;
|
|
vec3 col = u_clipBGColour;
|
|
Surface objectSurface = rayMarch(ro, rd, clipNear, clipFar, col);
|
|
|
|
gl_FragColor = vec4(col, 1.);
|
|
}
|
|
|
|
</script>
|
|
<!-- partial -->
|
|
<script type="module" src="./script.js"></script>
|
|
|
|
</body>
|
|
</html>
|