js实现本地打开Shader文件在线运行渲染动画代码-html代码-BFW代码库

js实现本地打开Shader文件在线运行渲染动画代码

代码语言：html

所属分类：其他

代码描述：js实现本地打开Shader文件在线运行渲染动画代码，拖拽 GLSL 文件到此处，或点击下方按钮打开，支持 .frag / .glsl / .fs / .vert 格式

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shader Viewer</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&family=Space+Grotesk:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0a0a0f;
      --fg: #e8e6e3;
      --muted: #6b6880;
      --accent: #00ffc8;
      --accent-dim: rgba(0,255,200,0.15);
      --card: rgba(14,14,22,0.85);
      --border: rgba(255,255,255,0.08);
      --danger: #ff4f6e;
    }

    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html, body {
      width: 100%; height: 100%;
      overflow: hidden;
      background: var(--bg);
      font-family: 'Space Grotesk', sans-serif;
      color: var(--fg);
    }

    canvas#shader-canvas {
      display: block;
      width: 100%; height: 100%;
      position: fixed; top: 0; left: 0;
      z-index: 0;
    }

    /* ========== 顶部工具栏 ========== */
    .toolbar {
      position: fixed; top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex; align-items: center; gap: 12px;
      padding: 10px 20px;
      background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      transition: opacity 0.4s;
    }
    .toolbar.auto-hide { opacity: 0; pointer-events: none; }
    .toolbar:hover, .toolbar.force-show { opacity: 1; pointer-events: auto; }

    .toolbar .logo {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 600; font-size: 15px;
      color: var(--accent);
      letter-spacing: -0.5px;
      white-space: nowrap;
      text-shadow: 0 0 20px rgba(0,255,200,0.3);
    }

    .toolbar .divider {
      width: 1px; height: 20px;
      background: var(--border);
      flex-shrink: 0;
    }

    .btn {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 7px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--card);
      color: var(--fg);
      font-family: 'Space Grotesk', sans-serif;
 .........完整代码请登录后点击上方下载按钮下载查看