Generative artist, sharing my journey in visual experiments.
bnbshader x raymarch templatePlaying with matcap studioRaymarching & MatCaps materials :)Layers of noiseDeep in the AbyssNoise SDF testsWireframed boxesIcosahedron & lightsraymarch x bnbShaderExploding FractalPolyhedrons & lasersSliced torusFolding spaceΞLasers & tori fractalFlipping boxesFolding spaceFolding spaceLasers & tori fractalGyroid sphereGyroid columnfBlob & metaballsFolding spacefolding space 2bnbshader x raymarch templatebnbshader x raymarch templateUntitledbnbshader x raymarch template
bnbshader x raymarch template
sh = () => raymarch({
antiAliasing: 2,
eye: `vec3(25, 0, 25)`,
background: `vec3(0, 33, 33)/255.`,
distMax: 40,
sceneSDF: `
#define PI ${Math.PI}
#define TAU ${Math.PI * 2}
${iqSDF.sdRoundedCylinder()}
${iqSDF.opSmoothUnion()}
${iqSDF.sdBox()}
${glslSnippets.rotate3D()}
${motionToolkit.easeInOutCubic()}
float glow = 0.;
vec3 glowColor = vec3(0);
vec2 sceneSDF(vec3 p) {
vec3 pp = p;
// p.z += cos(u_time * TAU) * 10.;
p *= rotate3D((easeInOutCubic(u_time) + .5) * TAU, vec3(1, 1, 0));
//p=abs(p);
//p=abs(p)-1.;
//p=abs(abs(p)-1.)-1.;
// p=abs(abs(p)-2.)-1.;
//p=abs(abs(abs(p)-2.)-1.)-1.;
//p=abs(abs(abs(p)-2.)-2.)-1.;
//p=abs(abs(abs(abs(p)-2.)-2.)-1.)-1.;
vec3 q=abs(abs(abs(abs(p)-2.)-2.)-2.)-1.;
float r = 2. - length(p)/3.;
vec3 dim = vec3(.4, .2, 2.);
mat3 rot = rotate3D(easeInOutCubic(u_time) * TAU, vec3(1, 1, 0));
float d = sdRoundedCylinder(q * rot, dim.x, dim.y, dim.z);
d = opSmoothUnion(d, sdRoundedCylinder(q.xzy * rot, dim.x, dim.y, dim.z), 1.);
d = opSmoothUnion(d, sdRoundedCylinder(q.yxz * rot, dim.x, dim.y, dim.z), 1.);
float dd = sdRoundedCylinder((abs(abs(p)-2.)-1.) * rot, .8, .4, 25.);
dd = opSmoothUnion(dd, sdRoundedCylinder((abs(abs(p.xzy)-2.)-1.) * rot, .8, .4, 25.), 1.);
dd = opSmoothUnion(dd, sdRoundedCylinder((abs(abs(p.yxz)-2.)-1.) * rot, .8, .4, 25.), 1.);
glowColor = d < dd ? vec2(.2, 1.).yxy : vec2(.2, 1.).yxx;
glow += 0.001 / (0.001 + min(d, dd) * min(d, dd)) / (float(AA * AA) * 4.);
d = opSmoothUnion(d, dd, 1.);
d = opSmoothUnion(d, sdBox((pp - vec3(0, 0, 4)) * rotate3D(PI/4., vec3(0, 1, 0)), vec3(50, 50, 1)), 10.);
return vec2(d, 150.);
}`,
computeColor: `
vec3 computeColor(vec3 ro, vec3 rd, vec3 pos, float d, float m) {
vec3 nor = calcNormal(pos);
vec3 ref = reflect(rd, nor); // reflected ray
// material
vec3 col = 0.45 + 0.35 * sin(vec3(0.05, 0.08, 0.10) * (m - 1.0));
if(m == 1.) {
// gray checkerboard floor material
float f = mod( floor(5.0*pos.z) + floor(5.0*pos.x), 2.0);
col = 0.3 + 0.1*f*vec3(1.0);
}
// lighting
float occ = calcAO(pos, nor); // ambient occlusion
vec3 lig = normalize(vec3(-0.4, 0.7, -0.6)); // sunlight
float amb = clamp(0.5 + 0.5 * nor.y, 0.0, 1.0); // ambient light
float dif = clamp(dot(nor, lig), 0.0, 1.0); // diffuse reflection from sunlight
// backlight
float bac = clamp(dot(nor, normalize(vec3(-lig.x, 0.0, -lig.z))), 0.0, 1.0) * clamp(1.0 - pos.y, 0.0, 1.0);
float dom = smoothstep(-0.1, 0.1, ref.y); // dome light
float fre = pow(clamp(1.0 + dot(nor, rd), 0.0, 1.0), 2.0); // fresnel
float spe = pow(clamp(dot(ref, lig), 0.0, 1.0), 16.0); // specular reflection
dif *= softshadow(pos, lig, 0.02, 2.5);
dom *= softshadow(pos, ref, 0.02, 2.5);
vec3 lin = vec3(0.0);
lin += 1.30 * dif * vec3(1.00, 0.80, 0.55);
lin += 2.00 * spe * vec3(1.00, 0.90, 0.70) * dif;
lin += 0.40 * amb * vec3(0.40, 0.60, 1.00) * occ;
lin += 0.50 * dom * vec3(0.40, 0.60, 1.00) * occ;
lin += 0.50 * bac * vec3(0.25, 0.25, 0.25) * occ;
lin += 0.25 * fre * vec3(1.00, 1.00, 1.00) * occ;
col = col * lin;
// mix in fog?
//col = mix(col, vec3(0.8, 0.9, 1.0), 1.0 - exp(-0.0002 * d * d * d));
col = mix( col, vec3(22./255.), 1.0 - exp(-0.00005 * d * d * d));
// gamma
col = pow(col, vec3(0.4545));
return col;
}`,
effect: `
vec3 effect(vec3 c) {
c += glow * glowColor;
return c;
}
`,
logShader: true
})
iqSDF.sdRoundedCylinder()
iqSDF
motionToolkit
glslSnippets
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
