nexu-io--open-design
wehub-resource-sync
142 行
6.3 KiB
HTML
142 行
6.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Liquid Metal — molten chrome, zero textures</title>
|
|
<!--
|
|
Self-contained WebGL2 liquid-metal shader. A domain-warped fbm height field
|
|
is shaded as a metallic surface: normals from the field drive a sweeping
|
|
specular highlight plus an iridescent thin-film palette (cosine gradient) —
|
|
molten chrome with no textures and no build step. Open Design renders this
|
|
in "powered preview" mode because it calls getContext('webgl2'); the opaque
|
|
preview sandbox cannot run the GPU stack.
|
|
-->
|
|
<style>
|
|
:root { color-scheme: dark; }
|
|
html, body { margin: 0; height: 100%; background: #07080c; overflow: hidden; font-family: 'Albert Sans', system-ui, -apple-system, sans-serif; color: #f6f8ff; }
|
|
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
|
|
.overlay { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 6vw; pointer-events: none; z-index: 2; }
|
|
.kicker { font-size: clamp(12px, 1.2vw, 15px); letter-spacing: 0.42em; text-transform: uppercase; color: #63fe13; margin: 0 0 18px; font-weight: 600; }
|
|
h1 { margin: 0; font-size: clamp(38px, 8vw, 112px); line-height: 0.92; font-weight: 800; letter-spacing: -0.03em; max-width: 13ch; text-shadow: 0 2px 40px rgba(0,0,0,0.5); }
|
|
p.sub { margin: 22px 0 0; font-size: clamp(15px, 1.6vw, 20px); max-width: 44ch; color: rgba(246,248,255,0.72); }
|
|
.badge { position: fixed; top: 6vw; right: 6vw; z-index: 2; pointer-events: none; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(246,248,255,0.55); border: 1px solid rgba(246,248,255,0.18); padding: 8px 14px; border-radius: 999px; backdrop-filter: blur(6px); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<canvas id="gl"></canvas>
|
|
<div class="badge" id="fps">GPU · WebGL2</div>
|
|
<div class="overlay">
|
|
<p class="kicker">Liquid Metal</p>
|
|
<h1>Molten chrome, zero textures.</h1>
|
|
<p class="sub">A domain-warped noise field shaded as metal — a sweeping specular highlight over an iridescent thin-film palette, all from math.</p>
|
|
</div>
|
|
<script type="text/javascript">
|
|
(() => {
|
|
const canvas = document.getElementById('gl');
|
|
const gl = canvas.getContext('webgl2', { antialias: true, alpha: false });
|
|
const fpsEl = document.getElementById('fps');
|
|
if (!gl) { fpsEl.textContent = 'WebGL2 unavailable'; return; }
|
|
|
|
const vert = `#version 300 es
|
|
in vec2 p; void main(){ gl_Position = vec4(p, 0.0, 1.0); }`;
|
|
|
|
const frag = `#version 300 es
|
|
precision highp float;
|
|
out vec4 o;
|
|
uniform vec2 res;
|
|
uniform float t;
|
|
float hash(vec2 p){ return fract(sin(dot(p, vec2(41.3, 289.1))) * 43758.5453); }
|
|
float noise(vec2 p){
|
|
vec2 i = floor(p), f = fract(p);
|
|
vec2 u = f*f*(3.0-2.0*f);
|
|
return mix(mix(hash(i), hash(i+vec2(1,0)), u.x),
|
|
mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), u.x), u.y);
|
|
}
|
|
float fbm(vec2 p){
|
|
float v = 0.0, a = 0.5;
|
|
for(int i=0;i<6;i++){ v += a*noise(p); p = p*2.02 + 3.1; a *= 0.5; }
|
|
return v;
|
|
}
|
|
// Domain-warped height field — the "molten" surface.
|
|
float height(vec2 uv){
|
|
float tt = t*0.08;
|
|
vec2 q = vec2(fbm(uv*1.5 + tt), fbm(uv*1.5 - tt + 7.3));
|
|
return fbm(uv*1.8 + 2.0*q + vec2(0.0, tt));
|
|
}
|
|
// Iridescent thin-film cosine palette.
|
|
vec3 iridescent(float x){
|
|
return 0.55 + 0.45*cos(6.2831853*(vec3(1.0,1.0,1.0)*x + vec3(0.0,0.33,0.66)));
|
|
}
|
|
void main(){
|
|
vec2 uv = (gl_FragCoord.xy - 0.5*res) / res.y;
|
|
float e = 0.0016;
|
|
float h = height(uv);
|
|
float hx = height(uv + vec2(e,0.0));
|
|
float hy = height(uv + vec2(0.0,e));
|
|
// Surface normal from the height gradient.
|
|
vec3 n = normalize(vec3((h-hx)/e, (h-hy)/e, 1.0));
|
|
vec3 ld = normalize(vec3(0.6*sin(t*0.3), 0.5, 0.9)); // moving key light
|
|
vec3 vd = vec3(0.0, 0.0, 1.0);
|
|
vec3 hlf = normalize(ld + vd);
|
|
float spec = pow(clamp(dot(n, hlf), 0.0, 1.0), 80.0); // sharp chrome highlight
|
|
float diff = clamp(dot(n, ld), 0.0, 1.0);
|
|
float fres = pow(1.0 - clamp(dot(n, vd), 0.0, 1.0), 4.0);
|
|
// Base chrome + iridescent sheen driven by the height + fresnel.
|
|
vec3 chrome = mix(vec3(0.05,0.06,0.10), vec3(0.55,0.60,0.72), diff);
|
|
vec3 irid = iridescent(h*1.4 + fres*0.6 + t*0.02);
|
|
vec3 col = chrome + irid * (fres*0.6 + 0.12);
|
|
col += vec3(1.0) * spec; // hot specular
|
|
col = mix(col, vec3(0.39,0.996,0.075), spec*0.35); // tint the hottest highlight lime
|
|
col = pow(col, vec3(0.9));
|
|
o = vec4(col, 1.0);
|
|
}`;
|
|
|
|
function compile(type, src){
|
|
const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s);
|
|
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw new Error(gl.getShaderInfoLog(s) || 'shader');
|
|
return s;
|
|
}
|
|
const prog = gl.createProgram();
|
|
gl.attachShader(prog, compile(gl.VERTEX_SHADER, vert));
|
|
gl.attachShader(prog, compile(gl.FRAGMENT_SHADER, frag));
|
|
gl.linkProgram(prog);
|
|
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) throw new Error(gl.getProgramInfoLog(prog) || 'link');
|
|
gl.useProgram(prog);
|
|
|
|
const buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW);
|
|
const loc = gl.getAttribLocation(prog, 'p');
|
|
gl.enableVertexAttribArray(loc);
|
|
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
|
|
const uRes = gl.getUniformLocation(prog, 'res');
|
|
const uT = gl.getUniformLocation(prog, 't');
|
|
|
|
function resize(){
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
const w = Math.floor(canvas.clientWidth * dpr), h = Math.floor(canvas.clientHeight * dpr);
|
|
if (w === canvas.width && h === canvas.height) return;
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
gl.viewport(0, 0, w, h);
|
|
}
|
|
window.addEventListener('resize', resize); resize();
|
|
|
|
let frames = 0, acc = 0, last = 0;
|
|
const start = (typeof performance !== 'undefined' ? performance.now() : 0);
|
|
function tick(now){
|
|
resize();
|
|
gl.uniform2f(uRes, canvas.width, canvas.height);
|
|
gl.uniform1f(uT, (now - start) / 1000);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
frames++; acc += now - last; last = now;
|
|
if (acc > 500){ fpsEl.textContent = 'GPU · WebGL2 · ' + Math.round(frames * 1000 / acc) + 'fps'; frames = 0; acc = 0; }
|
|
requestAnimationFrame(tick);
|
|
}
|
|
requestAnimationFrame(tick);
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|