清屏与三角形
一帧只做两件事：清屏、画一个三角形。这是 luma.gl 的最小完整流程， 也是理解设备、缓冲、模型、渲染通道四个对象的最好入口。
说明
页面加载四个 UMD 包：core、webgl、shadertools、
engine。设备用 webgl2Adapter 创建，画布交给
createCanvasContext 管理尺寸与像素比。
三角形顶点写在归一化设备坐标里，z 为 0。模型声明
triangle-list 拓扑、三个顶点与一个 float32x3 的属性布局。
渲染循环每帧开一个渲染通道，设置清屏色，调用 model.draw(pass)，
最后结束通道。
| 环节 | 调用 | 作用 |
|---|---|---|
| 建设备 | luma.createDevice | 选后端、建上下文、绑定画布 |
| 建缓冲 | device.createBuffer | 把三个顶点上传到 GPU |
| 建模型 | new Model(device, props) | 编译着色器、绑定属性与布局 |
| 开通道 | beginRenderPass | 清屏并指定绘制目标 |
| 绘制 | model.draw(pass) | 提交一次绘制 |
| 结束 | pass.end() | 关闭渲染通道 |
UMD 加载顺序
四个包的 UMD 文件都位于各自的 dist/dist.min.js，并且共享全局
luma。顺序是 core → webgl → shadertools → engine：
后一个包会读取前一个包挂到全局的导出。少加载 shadertools 时，
Model 在构造阶段会因为找不到着色器组装器而抛错。
@luma.gl/core@9/dist.min.js 这个路径不存在，正确写法是
@luma.gl/core@9.4.2/dist/dist.min.js。路径错误时页面不会报脚本错误，
只会得到一块空白画布，排查时先看网络面板。
绘制没有出现时
按顺序检查：设备是否创建成功；bufferLayout 的名字是否与着色器
in 变量一致；vertexCount 是否大于 0；
清屏色与三角形颜色是否过于接近；渲染通道是否在 draw 之后调用了
end()。示例里把设备信息与帧率直接写在工具栏上，
就是为了让这几种失败一眼可见。
先跑通三角形，再谈地图。设备、缓冲区、布局、绘制这条链路稳定之后， 把顶点换成经纬度转换后的坐标，剩下的只是数据组织问题。