529 lines
15 KiB
JavaScript
529 lines
15 KiB
JavaScript
const pauseBtn = document.getElementById("pause-btn");
|
|
const resetBtn = document.getElementById("reset-btn");
|
|
const statsEl = document.getElementById("stats");
|
|
const globalFpsEl = document.getElementById("global-fps");
|
|
const shaderCountEl = document.getElementById("shader-count");
|
|
const gridEl = document.getElementById("preview-grid");
|
|
const detailViewEl = document.getElementById("detail-view");
|
|
const detailTitleEl = document.getElementById("detail-title");
|
|
const detailFpsEl = document.getElementById("detail-fps");
|
|
const detailCanvas = document.getElementById("detail-canvas");
|
|
const backBtn = document.getElementById("back-btn");
|
|
|
|
const vertexShaderSource = `#version 300 es
|
|
precision highp float;
|
|
layout(location = 0) in vec2 aPosition;
|
|
void main() {
|
|
gl_Position = vec4(aPosition, 0.0, 1.0);
|
|
}`;
|
|
|
|
const presetShaders = [
|
|
{
|
|
name: "Alien Core (Ported)",
|
|
code: `vec3 paletteAC(float d) {
|
|
return mix(vec3(0.2, 0.7, 0.9), vec3(1.0, 0.0, 1.0), d);
|
|
}
|
|
|
|
vec2 rotateAC(vec2 p, float a) {
|
|
float c = cos(a);
|
|
float s = sin(a);
|
|
return mat2(c, -s, s, c) * p;
|
|
}
|
|
|
|
float mapAC(vec3 p) {
|
|
for (int i = 0; i < 8; i++) {
|
|
float t = iTime * 0.2;
|
|
p.xz = rotateAC(p.xz, t);
|
|
p.xy = rotateAC(p.xy, t * 1.89);
|
|
p.xz = abs(p.xz) - 0.5;
|
|
}
|
|
return dot(sign(p), p) / 5.0;
|
|
}
|
|
|
|
vec4 raymarchAC(vec3 ro, vec3 rd) {
|
|
float t = 0.0;
|
|
vec3 col = vec3(0.0);
|
|
float d = 0.0;
|
|
for (int i = 0; i < 64; i++) {
|
|
vec3 p = ro + rd * t;
|
|
d = mapAC(p) * 0.5;
|
|
if (d < 0.02 || d > 100.0) break;
|
|
col += paletteAC(length(p) * 0.1) / (400.0 * d);
|
|
t += d;
|
|
}
|
|
float alpha = 1.0 / (max(d, 0.0001) * 100.0);
|
|
return vec4(col, alpha);
|
|
}
|
|
|
|
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.x;
|
|
vec3 ro = vec3(0.0, 0.0, -50.0);
|
|
ro.xz = rotateAC(ro.xz, iTime);
|
|
|
|
vec3 cf = normalize(-ro);
|
|
vec3 cs = normalize(cross(cf, vec3(0.0, 1.0, 0.0)));
|
|
vec3 cu = normalize(cross(cf, cs));
|
|
vec3 uuv = ro + cf * 3.0 + uv.x * cs + uv.y * cu;
|
|
vec3 rd = normalize(uuv - ro);
|
|
|
|
fragColor = raymarchAC(ro, rd);
|
|
}`,
|
|
},
|
|
{
|
|
name: "Neon Flow",
|
|
code: `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
|
|
float t = iTime * 0.7;
|
|
float n = sin(uv.x * 7.0 + t) + cos(uv.y * 11.0 - t * 1.2);
|
|
float glow = 0.015 / (abs(uv.y + 0.2 * sin(uv.x * 5.0 + t)) + 0.005);
|
|
vec3 col = vec3(0.02, 0.05, 0.12) + vec3(0.1, 0.5, 0.9) * (0.5 + 0.5 * n);
|
|
col += vec3(0.9, 0.2, 1.0) * glow;
|
|
fragColor = vec4(col, 1.0);
|
|
}`,
|
|
},
|
|
{
|
|
name: "Plasma Warp",
|
|
code: `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = fragCoord / iResolution.xy;
|
|
float t = iTime * 0.9;
|
|
float p = sin((uv.x + t) * 10.0) + sin((uv.y - t) * 12.0);
|
|
p += sin((uv.x + uv.y + t * 0.7) * 18.0);
|
|
vec3 col = 0.5 + 0.5 * cos(vec3(0.2, 1.3, 2.4) + p + t);
|
|
fragColor = vec4(col, 1.0);
|
|
}`,
|
|
},
|
|
{
|
|
name: "Tunnel Pulse",
|
|
code: `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
|
|
float t = iTime;
|
|
float a = atan(uv.y, uv.x);
|
|
float r = length(uv);
|
|
float rings = sin(18.0 * r - t * 6.0);
|
|
float rays = sin(a * 12.0 + t * 3.0);
|
|
vec3 col = vec3(0.05, 0.03, 0.08);
|
|
col += vec3(0.2, 0.7, 1.0) * smoothstep(0.98, 1.0, rings);
|
|
col += vec3(1.0, 0.3, 0.6) * smoothstep(0.95, 1.0, rays) * (1.0 - r);
|
|
fragColor = vec4(col, 1.0);
|
|
}`,
|
|
},
|
|
{
|
|
name: "Grid Energy",
|
|
code: `float hash21(vec2 p) {
|
|
p = fract(p * vec2(123.34, 456.21));
|
|
p += dot(p, p + 45.32);
|
|
return fract(p.x * p.y);
|
|
}
|
|
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
|
|
vec2 p = uv * 5.0;
|
|
vec2 gv = fract(p) - 0.5;
|
|
vec2 id = floor(p);
|
|
float rnd = hash21(id);
|
|
float line = min(abs(gv.x), abs(gv.y));
|
|
float spark = 0.01 / (line + 0.004);
|
|
spark *= 0.5 + 0.5 * sin(iTime * 4.0 + rnd * 20.0);
|
|
vec3 col = vec3(0.03, 0.05, 0.08) + spark * vec3(0.3, 1.0, 0.9);
|
|
fragColor = vec4(col, 1.0);
|
|
}`,
|
|
},
|
|
{
|
|
name: "Smoke Bands",
|
|
code: `void mainImage(out vec4 fragColor, in vec2 fragCoord) {
|
|
vec2 uv = (fragCoord - 0.5 * iResolution.xy) / iResolution.y;
|
|
float t = iTime * 0.35;
|
|
float w = sin(uv.x * 8.0 + t) + sin(uv.x * 14.0 - t * 1.4);
|
|
float m = smoothstep(0.2, -0.3, abs(uv.y + 0.2 * w));
|
|
vec3 col = mix(vec3(0.02, 0.02, 0.03), vec3(0.4, 0.5, 0.9), m);
|
|
fragColor = vec4(col, 1.0);
|
|
}`,
|
|
},
|
|
];
|
|
|
|
function buildFragmentShader(userCode) {
|
|
return `#version 300 es
|
|
precision highp float;
|
|
out vec4 outColor;
|
|
uniform vec3 iResolution;
|
|
uniform float iTime;
|
|
uniform float iTimeDelta;
|
|
uniform int iFrame;
|
|
uniform vec4 iMouse;
|
|
${userCode}
|
|
void main() {
|
|
mainImage(outColor, gl_FragCoord.xy);
|
|
}`;
|
|
}
|
|
|
|
function createQuad(gl) {
|
|
const quad = new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]);
|
|
const vao = gl.createVertexArray();
|
|
const vbo = gl.createBuffer();
|
|
gl.bindVertexArray(vao);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
|
|
gl.bufferData(gl.ARRAY_BUFFER, quad, gl.STATIC_DRAW);
|
|
gl.enableVertexAttribArray(0);
|
|
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
|
|
gl.bindVertexArray(null);
|
|
return { vao, vbo };
|
|
}
|
|
|
|
function compileProgram(gl, fragmentShaderSource) {
|
|
function compile(type, source) {
|
|
const shader = gl.createShader(type);
|
|
gl.shaderSource(shader, source);
|
|
gl.compileShader(shader);
|
|
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
|
|
const info = gl.getShaderInfoLog(shader);
|
|
gl.deleteShader(shader);
|
|
throw new Error(info || "unknown compile error");
|
|
}
|
|
return shader;
|
|
}
|
|
|
|
const vs = compile(gl.VERTEX_SHADER, vertexShaderSource);
|
|
const fs = compile(gl.FRAGMENT_SHADER, fragmentShaderSource);
|
|
const program = gl.createProgram();
|
|
gl.attachShader(program, vs);
|
|
gl.attachShader(program, fs);
|
|
gl.linkProgram(program);
|
|
gl.deleteShader(vs);
|
|
gl.deleteShader(fs);
|
|
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
|
|
const info = gl.getProgramInfoLog(program);
|
|
gl.deleteProgram(program);
|
|
throw new Error(info || "unknown link error");
|
|
}
|
|
return program;
|
|
}
|
|
|
|
const previews = [];
|
|
let paused = false;
|
|
let elapsed = 0;
|
|
let frame = 0;
|
|
let lastTs = performance.now();
|
|
let fpsCounter = 0;
|
|
let fps = 0;
|
|
let lastSec = 0;
|
|
let detailFpsCounter = 0;
|
|
let detailFps = 0;
|
|
let detailLastSec = 0;
|
|
let detailRuntime = null;
|
|
|
|
function createPreviewCard(name, code) {
|
|
const views = Math.floor(3000 + Math.random() * 22000);
|
|
const likes = Math.floor(40 + Math.random() * 700);
|
|
const author = ["glkt", "aciekick", "iq", "shane", "bers", "felixfaire"][
|
|
Math.floor(Math.random() * 6)
|
|
];
|
|
const card = document.createElement("article");
|
|
card.className = "card";
|
|
card.innerHTML = `
|
|
<div class="card-head">
|
|
<strong>${name}</strong>
|
|
<div style="display:flex; gap:6px;">
|
|
<button type="button" class="pause-local-btn">暂停</button>
|
|
<button type="button" class="remove-btn">删除</button>
|
|
</div>
|
|
</div>
|
|
<canvas></canvas>
|
|
<div class="card-meta">
|
|
<span>by ${author}</span>
|
|
<span>views ${views} | likes ${likes}</span>
|
|
</div>
|
|
<div class="card-head error"></div>
|
|
`;
|
|
|
|
const canvas = card.querySelector("canvas");
|
|
const errorEl = card.querySelector(".error");
|
|
const pauseLocalBtn = card.querySelector(".pause-local-btn");
|
|
const removeBtn = card.querySelector(".remove-btn");
|
|
const gl = canvas.getContext("webgl2", { antialias: false, alpha: false });
|
|
if (!gl) {
|
|
errorEl.textContent = "当前浏览器不支持 WebGL2";
|
|
return;
|
|
}
|
|
|
|
const fragment = buildFragmentShader(code);
|
|
let program;
|
|
try {
|
|
program = compileProgram(gl, fragment);
|
|
} catch (err) {
|
|
errorEl.textContent = `编译失败:\n${String(err.message || err)}`;
|
|
return;
|
|
}
|
|
|
|
const { vao } = createQuad(gl);
|
|
const uniforms = {
|
|
iResolution: gl.getUniformLocation(program, "iResolution"),
|
|
iTime: gl.getUniformLocation(program, "iTime"),
|
|
iTimeDelta: gl.getUniformLocation(program, "iTimeDelta"),
|
|
iFrame: gl.getUniformLocation(program, "iFrame"),
|
|
iMouse: gl.getUniformLocation(program, "iMouse"),
|
|
};
|
|
|
|
const state = {
|
|
name,
|
|
code,
|
|
card,
|
|
canvas,
|
|
gl,
|
|
program,
|
|
vao,
|
|
uniforms,
|
|
mouse: { x: 0, y: 0, downX: 0, downY: 0, down: false },
|
|
isPlaying: true,
|
|
localTime: 0,
|
|
localFrame: 0,
|
|
lastTick: performance.now(),
|
|
removed: false,
|
|
};
|
|
|
|
function resizeCanvas() {
|
|
const rect = canvas.getBoundingClientRect();
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
const w = Math.max(1, Math.floor(rect.width * dpr));
|
|
const h = Math.max(1, Math.floor(rect.height * dpr));
|
|
if (canvas.width !== w || canvas.height !== h) {
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
gl.viewport(0, 0, w, h);
|
|
}
|
|
}
|
|
|
|
resizeCanvas();
|
|
|
|
canvas.addEventListener("mousemove", (event) => {
|
|
const rect = canvas.getBoundingClientRect();
|
|
state.mouse.x = ((event.clientX - rect.left) / rect.width) * canvas.width;
|
|
state.mouse.y = ((rect.bottom - event.clientY) / rect.height) * canvas.height;
|
|
});
|
|
|
|
canvas.addEventListener("mousedown", () => {
|
|
state.mouse.down = true;
|
|
state.mouse.downX = state.mouse.x;
|
|
state.mouse.downY = state.mouse.y;
|
|
});
|
|
|
|
window.addEventListener("mouseup", () => {
|
|
state.mouse.down = false;
|
|
});
|
|
|
|
removeBtn.addEventListener("click", () => {
|
|
state.removed = true;
|
|
card.remove();
|
|
const idx = previews.indexOf(state);
|
|
if (idx >= 0) previews.splice(idx, 1);
|
|
syncStats();
|
|
});
|
|
|
|
pauseLocalBtn.addEventListener("click", () => {
|
|
state.isPlaying = !state.isPlaying;
|
|
state.lastTick = performance.now();
|
|
pauseLocalBtn.textContent = state.isPlaying ? "暂停" : "继续";
|
|
});
|
|
|
|
canvas.addEventListener("click", () => {
|
|
openDetail(state);
|
|
});
|
|
|
|
gridEl.appendChild(card);
|
|
previews.push(state);
|
|
syncStats();
|
|
}
|
|
|
|
function closeDetail() {
|
|
detailViewEl.classList.remove("active");
|
|
detailViewEl.setAttribute("aria-hidden", "true");
|
|
if (!detailRuntime) return;
|
|
const { gl, program, vao, vbo } = detailRuntime;
|
|
gl.deleteProgram(program);
|
|
gl.deleteVertexArray(vao);
|
|
gl.deleteBuffer(vbo);
|
|
detailRuntime = null;
|
|
}
|
|
|
|
function openDetail(previewState) {
|
|
closeDetail();
|
|
const gl = detailCanvas.getContext("webgl2", { antialias: false, alpha: false });
|
|
if (!gl) {
|
|
statsEl.textContent = "无法打开详情：当前浏览器不支持 WebGL2。";
|
|
return;
|
|
}
|
|
|
|
let program;
|
|
try {
|
|
program = compileProgram(gl, buildFragmentShader(previewState.code));
|
|
} catch (err) {
|
|
statsEl.textContent = `详情编译失败: ${String(err.message || err)}`;
|
|
return;
|
|
}
|
|
|
|
const { vao, vbo } = createQuad(gl);
|
|
const uniforms = {
|
|
iResolution: gl.getUniformLocation(program, "iResolution"),
|
|
iTime: gl.getUniformLocation(program, "iTime"),
|
|
iTimeDelta: gl.getUniformLocation(program, "iTimeDelta"),
|
|
iFrame: gl.getUniformLocation(program, "iFrame"),
|
|
iMouse: gl.getUniformLocation(program, "iMouse"),
|
|
};
|
|
|
|
detailRuntime = {
|
|
gl,
|
|
program,
|
|
vao,
|
|
vbo,
|
|
uniforms,
|
|
mouse: { x: 0, y: 0, downX: 0, downY: 0, down: false },
|
|
};
|
|
|
|
detailTitleEl.textContent = previewState.name;
|
|
detailViewEl.classList.add("active");
|
|
detailViewEl.setAttribute("aria-hidden", "false");
|
|
}
|
|
|
|
function renderAll(ts) {
|
|
const dt = Math.min((ts - lastTs) / 1000, 0.05);
|
|
lastTs = ts;
|
|
if (!paused) {
|
|
elapsed += dt;
|
|
frame += 1;
|
|
}
|
|
|
|
if (Math.floor(elapsed) !== lastSec) {
|
|
lastSec = Math.floor(elapsed);
|
|
fps = fpsCounter;
|
|
fpsCounter = 0;
|
|
globalFpsEl.textContent = `FPS: ${fps}`;
|
|
} else {
|
|
fpsCounter += 1;
|
|
}
|
|
|
|
for (const preview of previews) {
|
|
if (preview.removed) continue;
|
|
const { gl, canvas, program, vao, uniforms, mouse } = preview;
|
|
const now = performance.now();
|
|
const localDt = Math.min((now - preview.lastTick) / 1000, 0.05);
|
|
preview.lastTick = now;
|
|
if (preview.isPlaying && !paused) {
|
|
preview.localTime += localDt;
|
|
preview.localFrame += 1;
|
|
}
|
|
const rect = canvas.getBoundingClientRect();
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
const w = Math.max(1, Math.floor(rect.width * dpr));
|
|
const h = Math.max(1, Math.floor(rect.height * dpr));
|
|
if (canvas.width !== w || canvas.height !== h) {
|
|
canvas.width = w;
|
|
canvas.height = h;
|
|
gl.viewport(0, 0, w, h);
|
|
}
|
|
|
|
gl.useProgram(program);
|
|
gl.uniform3f(uniforms.iResolution, canvas.width, canvas.height, 1);
|
|
gl.uniform1f(uniforms.iTime, preview.localTime);
|
|
gl.uniform1f(uniforms.iTimeDelta, preview.isPlaying && !paused ? localDt : 0);
|
|
gl.uniform1i(uniforms.iFrame, preview.localFrame);
|
|
gl.uniform4f(
|
|
uniforms.iMouse,
|
|
mouse.x,
|
|
mouse.y,
|
|
mouse.down ? mouse.downX : -mouse.downX,
|
|
mouse.down ? mouse.downY : -mouse.downY
|
|
);
|
|
gl.bindVertexArray(vao);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
gl.bindVertexArray(null);
|
|
}
|
|
|
|
if (detailRuntime) {
|
|
const { gl, program, vao, uniforms, mouse } = detailRuntime;
|
|
const dpr = Math.min(window.devicePixelRatio || 1, 2);
|
|
const w = Math.max(1, Math.floor(detailCanvas.clientWidth * dpr));
|
|
const h = Math.max(1, Math.floor(detailCanvas.clientHeight * dpr));
|
|
if (detailCanvas.width !== w || detailCanvas.height !== h) {
|
|
detailCanvas.width = w;
|
|
detailCanvas.height = h;
|
|
gl.viewport(0, 0, w, h);
|
|
}
|
|
|
|
gl.useProgram(program);
|
|
gl.uniform3f(uniforms.iResolution, detailCanvas.width, detailCanvas.height, 1);
|
|
gl.uniform1f(uniforms.iTime, elapsed);
|
|
gl.uniform1f(uniforms.iTimeDelta, dt);
|
|
gl.uniform1i(uniforms.iFrame, frame);
|
|
gl.uniform4f(
|
|
uniforms.iMouse,
|
|
mouse.x,
|
|
mouse.y,
|
|
mouse.down ? mouse.downX : -mouse.downX,
|
|
mouse.down ? mouse.downY : -mouse.downY
|
|
);
|
|
gl.bindVertexArray(vao);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 6);
|
|
gl.bindVertexArray(null);
|
|
|
|
if (Math.floor(elapsed) !== detailLastSec) {
|
|
detailLastSec = Math.floor(elapsed);
|
|
detailFps = detailFpsCounter;
|
|
detailFpsCounter = 0;
|
|
detailFpsEl.textContent = `FPS: ${detailFps}`;
|
|
} else {
|
|
detailFpsCounter += 1;
|
|
}
|
|
}
|
|
|
|
requestAnimationFrame(renderAll);
|
|
}
|
|
|
|
function syncStats() {
|
|
statsEl.textContent = `预览数量: ${previews.length} | 全局时间: ${elapsed.toFixed(2)}s | 状态: ${
|
|
paused ? "已暂停" : "运行中"
|
|
}`;
|
|
if (shaderCountEl) {
|
|
shaderCountEl.textContent = `${previews.length} shaders`;
|
|
}
|
|
}
|
|
|
|
pauseBtn.addEventListener("click", () => {
|
|
paused = !paused;
|
|
pauseBtn.textContent = paused ? "全局继续" : "全局暂停";
|
|
syncStats();
|
|
});
|
|
resetBtn.addEventListener("click", () => {
|
|
elapsed = 0;
|
|
frame = 0;
|
|
fpsCounter = 0;
|
|
lastSec = 0;
|
|
detailLastSec = 0;
|
|
detailFpsCounter = 0;
|
|
syncStats();
|
|
});
|
|
|
|
backBtn.addEventListener("click", closeDetail);
|
|
|
|
detailCanvas.addEventListener("mousemove", (event) => {
|
|
if (!detailRuntime) return;
|
|
const rect = detailCanvas.getBoundingClientRect();
|
|
detailRuntime.mouse.x = ((event.clientX - rect.left) / rect.width) * detailCanvas.width;
|
|
detailRuntime.mouse.y = ((rect.bottom - event.clientY) / rect.height) * detailCanvas.height;
|
|
});
|
|
|
|
detailCanvas.addEventListener("mousedown", () => {
|
|
if (!detailRuntime) return;
|
|
detailRuntime.mouse.down = true;
|
|
detailRuntime.mouse.downX = detailRuntime.mouse.x;
|
|
detailRuntime.mouse.downY = detailRuntime.mouse.y;
|
|
});
|
|
|
|
window.addEventListener("mouseup", () => {
|
|
if (!detailRuntime) return;
|
|
detailRuntime.mouse.down = false;
|
|
});
|
|
|
|
for (const preset of presetShaders) {
|
|
createPreviewCard(preset.name, preset.code);
|
|
}
|
|
syncStats();
|
|
requestAnimationFrame(renderAll);
|