// Copyright © 2022 IWBTShyGuy // Attribution 4.0 International (CC BY 4.0) #extension GL_OES_standard_derivatives : enable precision highp float; uniform float time; uniform vec2 resolution; uniform sampler2D channel0; #define iResolution resolution // If defined, activate anti-aliasing, level: 2 or 3 #define AA 2 /******************** 3D ToolKit ********************/ const float PI = 3.141592653; struct Camera { vec3 position; vec3 direction; vec3 up_direction; // not require dot(direction, up_direction) == 0 float fov; float aspect; // x / y }; struct Ray { vec3 origin; vec3 direction; }; // perspective camera ray, uv = fragCoord / iResolution.xy // cf: https://qiita.com/aa_debdeb/items/301dfc54788f1219b554 Ray cameraRay(in Camera camera, in vec2 uv) { uv = uv * 2.0 - 1.0; float h = tan(camera.fov * 0.5); float w = h * camera.aspect; vec3 right = normalize(cross(camera.direction, camera.up_direction)); vec3 up = normalize(cross(right, camera.direction)); vec3 direction = normalize(right * w * uv.x + up * h * uv.y + camera.direction); Ray ray; ray.origin = camera.position; ray.direction = direction; return ray; } #define rotate3D(axis, angle) mat3(\ axis[0] * axis[0] * (1.0 - cos(angle)) + cos(angle),\ axis[0] * axis[1] * (1.0 - cos(angle)) + axis[2] * sin(angle),\ axis[0] * axis[2] * (1.0 - cos(angle)) - axis[1] * sin(angle),\ axis[0] * axis[1] * (1.0 - cos(angle)) - axis[2] * sin(angle),\ axis[1] * axis[1] * (1.0 - cos(angle)) + cos(angle),\ axis[1] * axis[2] * (1.0 - cos(angle)) + axis[0] * sin(angle),\ axis[0] * axis[2] * (1.0 - cos(angle)) + axis[1] * sin(angle),\ axis[1] * axis[2] * (1.0 - cos(angle)) - axis[0] * sin(angle),\ axis[2] * axis[2] * (1.0 - cos(angle)) + cos(angle)\ ) float microfacet(vec3 normal, vec3 cameraDir, vec3 lightDir, float metal, float roughness) { vec3 middle = normalize(cameraDir + lightDir); float dotCN = clamp(-dot(cameraDir, normal), 0.0, 1.0); float dotLN = clamp(-dot(lightDir, normal), 0.0, 1.0); float dotNM = clamp(-dot(normal, middle), 0.0, 1.0); float dotCM = clamp(dot(cameraDir, middle), 0.0, 1.0); float alpha = roughness * roughness; // diffuse BRDF float diffuse = 1.0 - metal; // microfacet distribution float alpha2 = alpha * alpha; float tmp = 1.0 - dotNM * dotNM * (1.0 - alpha2); float distribution = alpha2 / (tmp * tmp); // schlick approxy & geometric decay float alp = alpha * 0.5; float sal = dotLN / (dotLN * (1.0 - alp) + alp); float sac = dotCN / (dotCN * (1.0 - alp) + alp); float decay = sal * sac; // fresnel float c = 1.0 - dotCM; c = c * c * c * c * c; float fresnel = metal + (1.0 - metal) * c; // specular BRDF tmp = 4.0 * dotCN * dotLN; float specular = distribution * decay / tmp * fresnel; if (tmp < 0.0001) specular = 0.0; return (diffuse + specular) * dotLN; } /******************** Hash & Noise ********************/ // Hash without Sine https://www.shadertoy.com/view/4djSRW vec3 hash(vec3 p3) { p3 = fract(p3 * vec3(.1031, .1030, .0973)); p3 += dot(p3, p3.yxz+33.33); return fract((p3.xxy + p3.yxx)*p3.zyx); } vec3 noise(vec3 x) { vec3 s = floor(x), t = fract(x); vec2 e = vec2(0, 1); return mix( mix( mix(hash(s + e.xxx), hash(s + e.yxx), t.x), mix(hash(s + e.xyx), hash(s + e.yyx), t.x), t.y ), mix( mix(hash(s + e.xxy), hash(s + e.yxy), t.x), mix(hash(s + e.xyy), hash(s + e.yyy), t.x), t.y ), t.z ); } /******************** SDFs ********************/ const int LENGTH_CLICK = 7; #define DEF_CLICK(FUNC, a0, a1, a2, a3, a4, a5, a6)\ int FUNC(int idx) {\ if (idx == 0) return a0;\ else if (idx == 1) return a1;\ else if (idx == 2) return a2;\ else if (idx == 3) return a3;\ else if (idx == 4) return a4;\ else if (idx == 5) return a5;\ else return a6;\ } DEF_CLICK(CLICK, 67, 108, 105, 99, 107, 32, 127) DEF_CLICK(CLICK_STAR, 67, 108, 105, 99, 107, 32, 28) const int LENGTH_YOUR_LOVE = 16; #define DEF_YOUR_LOVE(FUNC, a0, a1, a2, a3, a4, a5, a6, a7, a8, a9, a10, a11, a12, a13, a14, a15)\ int FUNC(int idx) {\ if (idx == 0) return a0;\ else if (idx == 1) return a1;\ else if (idx == 2) return a2;\ else if (idx == 3) return a3;\ else if (idx == 4) return a4;\ else if (idx == 5) return a5;\ else if (idx == 6) return a6;\ else if (idx == 7) return a7;\ else if (idx == 8) return a8;\ else if (idx == 9) return a9;\ else if (idx == 10) return a10;\ else if (idx == 11) return a11;\ else if (idx == 12) return a12;\ else if (idx == 13) return a13;\ else if (idx == 14) return a14;\ else return a15;\ } DEF_YOUR_LOVE(I_want_your_Love, 73, 32, 119, 97, 110, 116, 32, 121, 111, 117, 114, 32, 76, 111, 118, 101) DEF_YOUR_LOVE(I_want_your_Fav, 73, 32, 119, 97, 110, 116, 32, 121, 111, 117, 114, 32, 70, 97, 118, 32) float dot2(in vec2 a) { return dot(a,a); } // https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm float sdHeart( in vec2 p ) { p.x = abs(p.x); return p.y + p.x > 1.0 ? sqrt(dot2(p-vec2(0.25,0.75))) - sqrt(2.0)/4.0 : sqrt(min(dot2(p-vec2(0.00,1.00)), dot2(p-0.5*max(p.x+p.y,0.0)))) * sign(p.x-p.y); } // https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm float sdStar5(in vec2 p, in float r, in float rf) { const vec2 k1 = vec2(0.809016994375, -0.587785252292); const vec2 k2 = vec2(-k1.x,k1.y); p.x = abs(p.x); p -= 2.0*max(dot(k1,p),0.0)*k1; p -= 2.0*max(dot(k2,p),0.0)*k2; p.x = abs(p.x); p.y -= r; vec2 ba = rf*vec2(-k1.y,k1.x) - vec2(0,1); float h = clamp( dot(p,ba)/dot(ba,ba), 0.0, r ); return length(p-ba*h) * sign(p.y*ba.x-p.x*ba.y); } float sdLetter(in vec2 uv, in int idx) { if (idx == 127) return sdHeart(vec2(uv.x * 2. - 1., uv.y * 2. - .5)) / 2.0; uv = (clamp(uv, 0., 1.) + vec2(idx - idx / 16 * 16, 15 - idx / 16)) / 16.; return texture2D(channel0, uv).w - .5; } float ratioDeform(in float t) { return clamp(0.5 + sin(t * 2.0 * PI), 0.0, 1.0); } float sdDeformed(in vec2 p, in float t) { return mix(sdStar5(p, 0.7, 0.4), sdHeart(p + vec2(0, 0.5)), ratioDeform(t)); } float sdDeformed3D(in vec3 p, in float t) { return length(vec2(max(sdDeformed(p.xy, t), 0.0), max(abs(p.z) - 0.05, 0.0))); } float sdRing(in vec3 p, in float r, in float h) { return length(vec2(length(p.zx) - r, max(abs(p.y) - h, 0.0))); } const mat3 CENTER_OBJECT_ROT = rotate3D(normalize(vec3(1, 1, 0)), 0.45); const mat3 LETTER_RING1_ROT = rotate3D(normalize(vec3(-0.5, 1, -1)), 0.45); const vec3 LETTER_RING1_DISP = vec3(-0.04, 0, 0); const mat3 LETTER_RING2_ROT = rotate3D(normalize(vec3(-0.5, 1, 1)), 0.45); float sdCenterObject(in vec3 p, in float t) { return sdDeformed3D(CENTER_OBJECT_ROT * p, t) - 0.05; } float sdLetterRing1(in vec3 p) { return sdRing(LETTER_RING1_ROT * (p + LETTER_RING1_DISP), 0.85, 0.05) - 0.01; } float sdLetterRing2(in vec3 p) { return sdRing(LETTER_RING2_ROT * p, 1.0, 0.05) - 0.01; } float sdStarHeartScene(in vec3 p, in float t) { return min(min(sdCenterObject(p, t), sdLetterRing1(p)), sdLetterRing2(p)); } vec3 normalStarHeartScene(in vec3 p, in float t) { const vec2 e = vec2(1.0e-4, 0); return normalize(vec3( sdStarHeartScene(p + e.xyy, t) - sdStarHeartScene(p - e.xyy, t), sdStarHeartScene(p + e.yxy, t) - sdStarHeartScene(p - e.yxy, t), sdStarHeartScene(p + e.yyx, t) - sdStarHeartScene(p - e.yyx, t) )); } int getObjectIDStarHeart(in vec3 p, in float t) { return sdLetterRing1(p) < 1.0e-3 ? 1 : sdLetterRing2(p) < 1.0e-3 ? 2 : 0; } vec2 uvObject1StarHeart(in vec3 p, in float t) { p = LETTER_RING1_ROT * (p + LETTER_RING1_DISP); vec2 uv = normalize(p.zx); return vec2( fract((acos(uv.x) * sign(uv.y) / PI + 1.0) / 2.0 + t * 0.01), (p.y + 0.05) / 0.1 ); } vec2 uvObject2StarHeart(in vec3 p, in float t) { p = LETTER_RING2_ROT * p; vec2 uv = normalize(p.zx); return vec2( fract((acos(uv.x) * sign(uv.y) / PI + 1.0) / 2.0 + t * 0.01), (p.y + 0.05) / 0.1 ); } vec3 colorCenterObject(in vec3 p, in vec3 dir, in float t) { vec3 normal = normalStarHeartScene(p, t); float c = microfacet(normal, dir, dir, 0.5, 0.5); return vec3((c + 0.1) / 1.1, (1.0 - ratioDeform(t)) * c, 0); } vec3 colorObject1(in vec3 p, in vec3 dir, in float t) { vec3 normal = normalStarHeartScene(p, t); vec2 uv = uvObject1StarHeart(p, t); int tapeWidth = int(0.85 * 2.0 * PI / 0.1 / 0.75) - 1; uv.x *= float(tapeWidth); int idx = int(floor(uv.x)); idx = idx - idx / (tapeWidth / 7) * (tapeWidth / 7); uv.x = fract(uv.x) * 0.72 + 0.14; float c = 0.0, c0 = smoothstep(0.49, 0.51, abs(uv.y - 0.5)); if (idx < LENGTH_CLICK) { c = mix( sdLetter(uv, CLICK_STAR(idx)), sdLetter(uv, CLICK(idx)), ratioDeform(t) ); c = clamp(1.0e-4 / (1.0e-8 + c * c) - 0.02, 0.0, 1.0); } vec3 col = vec3(microfacet(normal, dir, dir, .3, .8)) * 0.075; col = col * (1.0 - c) + vec3(c * c * c, c, c * c); col = col * (1.0 - c0) + c0 * vec3(1,0,0) * microfacet(normal, dir, dir, .1, .9); return clamp(col, 0.0, 1.0); } vec3 colorObject2(in vec3 p, in vec3 dir, in float t) { vec3 normal = normalStarHeartScene(p, t); vec2 uv = uvObject2StarHeart(p, -t); int tapeWidth = int(2.0 * PI / 0.1 * 2.0) - 6; uv.x *= float(tapeWidth); int idx = int(floor(uv.x)); idx = idx - idx / (tapeWidth / 7) * (tapeWidth / 7); uv.x = fract(uv.x) * 0.54 + 0.23; float c = 0.0, c0 = smoothstep(0.49, 0.51, abs(uv.y - 0.5)); if (idx < LENGTH_YOUR_LOVE) { float w = dot(normal, dir); w = (1.0 + w) * 15.0 / iResolution.x; int fav_idx = I_want_your_Fav(idx), love_idx = I_want_your_Love(idx); float c1 = mix( sdLetter(uv, fav_idx), sdLetter(uv, love_idx), ratioDeform(t) ); c = clamp(1.0e-4 / (c1 * c1) - 0.02, 0.0, 1.0); // I tried a few different patterns of AA, but this looks the most effective. // If you have a better method, please let me know. c1 = mix( sdLetter(uv + vec2(w, w), fav_idx), sdLetter(uv + vec2(w, w), love_idx), ratioDeform(t) ); c += clamp(1.0e-4 / (c1 * c1) - 0.02, 0.0, 1.0); c1 = mix( sdLetter(uv + vec2(-w, w), fav_idx), sdLetter(uv + vec2(-w, w), love_idx), ratioDeform(t) ); c += clamp(1.0e-4 / (c1 * c1) - 0.02, 0.0, 1.0); c1 = mix( sdLetter(uv + vec2(w, -w), fav_idx), sdLetter(uv + vec2(w, -w), love_idx), ratioDeform(t) ); c += clamp(1.0e-4 / (c1 * c1) - 0.02, 0.0, 1.0); c1 = mix( sdLetter(uv + vec2(-w, -w), fav_idx), sdLetter(uv + vec2(-w, -w), love_idx), ratioDeform(t) ); c += clamp(1.0e-4 / (c1 * c1) - 0.02, 0.0, 1.0); c /= 5.0; } vec3 col = vec3(microfacet(normal, dir, dir, .3, .8)) * 0.075; col = col * (1.0 - c) + vec3(c * c * c, c, c * c); col = col * (1.0 - c0) + c0 * vec3(1,0,0) * microfacet(normal, dir, dir, .1, .9); return clamp(col, 0.0, 1.0); } const vec3 BACK_GROUND = pow(vec3(0, 5, 10) / 255.0, vec3(2.2)); const float STAR_INTERVAL = 1.0 / 15.0; float cellStar(in vec2 uv, in vec2 nbr, in float t) { vec2 xy = uv + nbr; vec3 rand = noise(vec3(floor(xy), 1)); if (rand.z < 0.3) return 0.0; vec2 disp = (2.0 * rand.xy - 1.0) * 0.6; vec2 r = fract(xy) + uv - xy - disp - 0.5; float c = length(r) * STAR_INTERVAL; c = clamp(5.0e-4 / c, 0.0, 1.0); float a = noise(vec3(floor(xy), t * 30.0 * noise(vec3(1, floor(xy))).x)).x; return c * c * mix(0.1, 1.0, a); } float star(in vec2 uv, in float t) { uv.x += t * 0.01; uv /= STAR_INTERVAL; float c = 0.0; for (int k = 0; k < 9; k++) c += cellStar(uv, vec2(k / 3, k - (k / 3) * 3) - 1., t); return clamp(c, 0.0, 1.0); } void starHeartSceneWithA(out vec4 fragColor, in vec2 U, in float t) { vec2 r = iResolution.xy; Camera camera = Camera( vec3(0,0,2), vec3(0,0,-1), vec3(0,1,0), PI / 4.0, r.x / r.y ); Ray ray = cameraRay(camera, U/r); float dist0, dist = 0.0; vec3 p, ro = ray.origin, rd = ray.direction; for (int i = 0; i < 255; i++) { dist0 = sdStarHeartScene(p = ro + dist * rd, t); if (dist0 < 1.0e-4 || (dist += dist0) > 12.0) break; } vec3 col = vec3(0); if (dist < 12.0) { int id = getObjectIDStarHeart(p, t); if (id == 0) { col = colorCenterObject(p, rd, t); } else if (id == 1) { col = colorObject1(p, rd, t); } else { col = colorObject2(p, rd, t); } } else { float c = star(U/r.y, t); col = BACK_GROUND * (1.0 - c) + c; } fragColor = vec4(col, dist); } void starHeartScene(out vec4 O, in vec2 U, in float t) { starHeartSceneWithA(O, U, t); // smart anti-aliasing // reference: https://shadertoyunofficial.wordpress.com/2021/03/09/advanced-tricks/ // If defined, visualize anti-aliased pixels. //#define VISUALIZE_AA #ifdef AA if (fwidth(length(O.xyz)) > 0.1 && O.w < 12.0) { vec4 o; #if (AA == 2) for (int k = 0; k < 4; k++) { starHeartSceneWithA(o,U + (vec2(k - (k / 2) * 2, k / 2) - 0.5) / 1.5, t); O += o; } O /= 5.0; #elif (AA == 3) for (int k = 0; k < 9; k += k == 3 ? 2 : 1 ) { starHeartSceneWithA(o, U + vec2(k - (k / 3) * 3 - 1, k / 3 - 1) / 3.0, t); O += o; } O /= 9.0; #endif #ifdef VISUALIZE_AA O = vec4(1); } else { O = vec4(0,0,0,1); #endif } #endif O.xyz = pow(O.xyz, vec3(.4545)); O.w = 1.0; } void main() { starHeartScene(gl_FragColor, gl_FragCoord.xy, time); }