一句话概览：luma.gl 是 deck.gl 底层的 WebGL 与 WebGPU 框架，封装了设备、缓冲、纹理、着色器与渲染管线。它不提供现成图表，而是让你用较少的样板代码自己组织绘制流程，适合需要自定义着色器的可视化场景。
教程13 篇
AnimationLoop 与时间驱动
循环负责三件事：等设备就绪、按帧调用渲染回调、停止时释放资源。 它不能替应用管理 GPU 资源，只能在正确的时机把时间与尺寸…
02画布、尺寸与设备像素比
画布有两套尺寸：CSS 尺寸决定它在页面里占多大，绘制缓冲尺寸决定真正画多少像素。 两者之比就是设备像素比。luma.gl…
03社区精选资源
luma.gl 的资料基本集中在官方仓库与文档站，第三方教程很少，且大多停留在 8.x 的 gl 上下文写法。 这一页按"先…
04调试与性能
GPU 出错时最常见的表现是「什么都没有」：没有异常、没有日志、画面全黑。 luma.gl 提供了几组开关把这类问题暴露出来…
05Device 与渲染管线
luma.gl 9 把所有 GPU 资源收到一个设备对象下，绘制不再是「用 program 画」， 而是「编译着色器、组装管…
06几何与缓冲布局
顶点数据进入 GPU 之前要经过三层：类型化数组、缓冲、布局声明。 v9 把 CPU 几何与 GPU 缓冲彻底分开，Geom…
07用离屏渲染做通用计算
WebGL2 没有计算着色器，通用的 GPU 计算只能借渲染管线完成： 把数据放进纹理，用全屏三角形逐像素算，结果再写进另一…
08luma.gl 与 deck.gl 的关系
deck.gl 画出的每一个图层，最终都落到 luma.gl 的缓冲区、着色器与绘制调用上。 理解这一层，才能判断什么时候该…
09用 luma.gl 直接写一个 WebGL 程序
不经过 deck.gl，只用 luma.gl 画一个三角形。流程是：创建设备、写缓冲区、 组装模型、开渲染通道、绘制。每一步…
10渲染通道与离屏
通道决定这一批绘制画到哪里。画到画布是最常见的情况， 画到帧缓冲则开启离屏渲染，它是后期处理、拾取与多通道合成的共同基础。
11着色器与模块化
着色器在 v9 里先编译成独立的 Shader 对象，再交给管线。 模块化不是继承，而是把一段 GLSL 与注入点打包成普通…
12纹理与采样器
纹理是 GPU 上的像素容器，采样器是读取这些像素的规则。 v9 把两者拆成独立资源：采样器可以挂在纹理上作为默认值， 也可…
13WebGL2 与 WebGPU 的差异
luma.gl 9 把两个后端收在同一套接口下，但差异不会消失，只会被推迟到运行期。 适配器、着色器语言、管线的可变性、附件…
API 文档25 个
使用示例8 个
缓冲区数据更新
二百个顶点连成一条波浪线，每帧重算纵坐标并整体写入缓冲区。 这是动态数据最基本的形态：几何不变，位置在变。
查看示例
清屏与三角形
一帧只做两件事：清屏、画一个三角形。这是 luma.gl 的最小完整流程， 也是理解设备、缓冲、模型、渲染通道四个对…
查看示例
彩色三角形
三个顶点各给一种颜色，三个角分别是红、黄、蓝，中间由 GPU 自动插值成渐变。 这一步是顶点属性、varying 与…
查看示例
深度测试
三块重叠的四边形按「近 → 中 → 远」的顺序绘制。深度测试打开时近的压住远的； 关掉之后，遮挡关系立刻退化成绘制顺…
查看示例
绘制矩形
矩形由两个三角形拼成，但只需要四个顶点：一条索引缓冲让 0 与 2 号顶点被两个三角形共用。 这是索引绘制最小的完整…
查看示例
多实例渲染
一个方块被四百个实例复用。顶点属性只上传一次，每个实例读自己的偏移与颜色， 绘制调用仍然只有一次。
查看示例
离屏渲染
两趟渲染：第一趟画进 256×256 的帧缓冲，第二趟把该帧缓冲的颜色附件当纹理采样到屏幕。 这是后期处理、拾取与多…
查看示例
纹理贴图
像素由 JS 生成，写进一张 64×64 的纹理，再作为 sampler2D 绑定给模型。 UV 取 0–2，寻址模…
查看示例