Clear Triangle

<!--
  说明：luma.gl 最小的 WebGL 程序，一帧只做清屏与一次三角形绘制
  核心逻辑：createDevice 建设备 → AnimationLoop 驱动 → Model.draw 发起绘制
  依赖：@luma.gl/core 9.4.2、@luma.gl/webgl 9.4.2、@luma.gl/shadertools 9.4.2、@luma.gl/engine 9.4.2 · jsDelivr CDN（UMD）
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta name="robots" content="noindex,follow">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>清屏与三角形</title>
<style>
  html,body{height:100%;margin:0;background:#0d1117}
  body{display:flex;flex-direction:column;overflow:hidden;
       font:13px/1.6 -apple-system,"Segoe UI","PingFang SC",sans-serif;color:#e6e8ec}
  .bar{flex:0 0 auto;padding:8px 12px;background:#161b22;border-bottom:1px solid #252c36;
       display:flex;gap:10px;align-items:center;font-size:12px;color:#8b93a1;flex-wrap:wrap}
  .bar b{color:#58a6ff;font-weight:600}
  .bar button{font:inherit;font-size:12px;padding:4px 10px;border-radius:5px;cursor:pointer;
       border:1px solid #303845;background:#1d2531;color:#c8d2e0}
  .bar button:hover{background:#253040}
  .bar .sp{flex:1 1 auto}
  #cv{flex:1 1 auto;min-height:0;width:100%;display:block}
  #err{position:absolute;left:0;right:0;top:40px;padding:16px;color:#ff9d85;
       font:12px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;display:none}
  .wrap{position:relative;flex:1 1 auto;min-height:0;display:flex}
</style>
</head>
<body>
<div class="bar">
  <span>设备 <b id="dev">—</b></span>
  <span>帧 <b id="fps">—</b></span>
  <button id="pause">暂停</button>
  <button id="clear">换清屏色</button>
  <span class="sp"></span>
  <span>三角形顶点直接写在缓冲区里</span>
</div>
<div class="wrap">
  <canvas id="cv"></canvas>
  <div id="err"></div>
</div>

<script src="https://cdn.jsdelivr.net/npm/@luma.gl/core@9.4.2/dist/dist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@luma.gl/webgl@9.4.2/dist/dist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@luma.gl/shadertools@9.4.2/dist/dist.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@luma.gl/engine@9.4.2/dist/dist.min.js"></script>
<script>
(function () {
  'use strict';

  var cv = document.getElementById('cv');
  var errBox = document.getElementById('err');

  function fail(msg) {
    errBox.style.display = 'block';
    errBox.textContent = '运行失败：' + msg;
  }

  /* v9 的 UMD 包把 core 与 engine 分别打包，两个都要加载；
     全局对象 luma 上才有 Model 与 AnimationLoop。 */
  if (!window.luma || !luma.luma || !luma.Model || !luma.AnimationLoop) {
    fail('luma.gl 未加载成功，请检查能否访问 cdn.jsdelivr.net');
    return;
  }

  var palettes = [
    [0.05, 0.07, 0.10, 1],
    [0.10, 0.06, 0.12, 1],
    [0.04, 0.10, 0.09, 1]
  ];
  var paletteIndex = 0;
  var running = true;
  var frames = 0;
  var lastReport = performance.now();

  var device;
  var model;
  var loop;

  luma.luma.createDevice({
    type: 'webgl',
    /* v9 按需注册适配器，UMD 下从 webgl 包取 webgl2Adapter */
    adapters: [luma.webgl2Adapter],
    createCanvasContext: {
      canvas: cv,
      useDevicePixels: Math.min(window.devicePixelRatio, 2),
      autoResize: true
    }
  }).then(function (dev) {
    device = dev;
    document.getElementById('dev').textContent =
      device.info.type + ' / ' + device.info.gpu;

    /* 三个顶点的位置，归一化设备坐标，z 固定为 0 */
    var positions = device.createBuffer(new Float32Array([
      -0.55, -0.45, 0,
       0.55, -0.45, 0,
       0.00,  0.55, 0
    ]));

    model = new luma.Model(device, {
      id: 'flat-triangle',
      topology: 'triangle-list',
      vertexCount: 3,
      attributes: { positions: positions },
      /* v9 要求显式声明缓冲区内存布局：一个 vec3 属性 */
      bufferLayout: [
        { name: 'positions', stepMode: 'vertex', format: 'float32x3' }
      ],
      vs: [
        '#version 300 es',
        'in vec3 positions;',
        'void main() {',
        '  gl_Position = vec4(positions, 1.0);',
        '}'
      ].join('\n'),
      fs: [
        '#version 300 es',
        'precision highp float;',
        'out vec4 fragColor;',
        'void main() {',
        '  fragColor = vec4(0.35, 0.80, 0.62, 1.0);',
        '}'
      ].join('\n')
    });

    loop = new luma.AnimationLoop({
      device: device,
      onRender: function (props) {
        if (!running) return;
        var pass = props.device.beginRenderPass({
          clearColor: palettes[paletteIndex]
        });
        model.draw(pass);
        pass.end();

        frames += 1;
        var now = performance.now();
        if (now - lastReport > 500) {
          var fps = Math.round(frames * 1000 / (now - lastReport));
          document.getElementById('fps').textContent = fps + ' fps';
          frames = 0;
          lastReport = now;
        }
      },
      onError: function (e) { fail(e.message); }
    });

    return loop.start();
  }).catch(function (e) {
    fail(e && e.message ? e.message : String(e));
  });

  document.getElementById('pause').addEventListener('click', function () {
    running = !running;
    this.textContent = running ? '暂停' : '继续';
  });

  document.getElementById('clear').addEventListener('click', function () {
    paletteIndex = (paletteIndex + 1) % palettes.length;
    if (loop) loop.setNeedsRedraw('palette');
    if (!running) {
      running = true;
      document.getElementById('pause').textContent = '暂停';
    }
  });
})();
</script>
</body>
</html>