Visual LabINTERACTIVE LEARNING
阶段 3 · 3D基础18 分钟

纹理上传:从像素数组到 GPUTexture

TextureDescriptor、writeTexture 与 UV

生成棋盘格像素,上传到二维纹理,并在片元着色器中采样显示。

LEARNING GOALS

先明确本课目标

1

创建 2D 纹理

2

使用 queue.writeTexture

3

理解 UV 与纹理视图

MENTAL MODEL · 再建立心智模型

纹理是有维度、格式、mip 层和 usage 的结构化 GPU 内存;TextureView 才是着色器看到的具体视图。

MINIMAL EXAMPLE

一张 CPU 图片如何变成着色器可读取的颜色?

GPUTexture 保存 texel;GPUTextureView 指定从哪些 mip/层观察它;GPUSampler 定义坐标越界和过滤规则。WGSL 的 textureSample 同时需要 View 与 Sampler。

最小例子javascript
const texture = device.createTexture({
  size: [width, height],
  format: 'rgba8unorm',
  usage: GPUTextureUsage.TEXTURE_BINDING |
         GPUTextureUsage.COPY_DST,
});

device.queue.writeTexture(
  { texture }, pixels,
  { bytesPerRow: width * 4 },
  { width, height },
);
  1. usage 先声明 COPY_DST 允许上传,TEXTURE_BINDING 允许着色器采样。
  2. rgba8unorm 每个 texel 四个 8 位通道,着色器读取时归一化为 0–1。
  3. View 才能绑定 BindGroup 中通常放 texture.createView(),而不是 GPUTexture 本体。

上传后,片元着色器用 UV 坐标采样 View,并由 Sampler 决定最终过滤颜色。

本课概念
OPTIONAL · 按需查阅完整术语表与概念边界

遇到陌生术语时再展开,不打断主线实验。

展开⌄
LIVE EXPERIMENT · 先获得反馈

边改边运行

浏览器加载后会激活代码编辑器、独立运行环境与实时输出。

本课挑战

生成一张程序化径向渐变纹理并上传。

DEEP DIVE · 实验之后

回到原理,解释刚才发生了什么

先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。

CORE IDEA

核心讲解

01

纹理与缓冲区不同

纹理按像素格式和块组织,硬件可以高效采样、过滤和缓存。usage 必须提前声明 COPY_DST 与 TEXTURE_BINDING。

02

View 选择可见范围

一个 GPUTexture 可创建不同 mip、层、维度或格式视图,资源本体和使用视图因此分离。

OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照

主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。

展开⌄
API COMPARISON

像素上传目标相同;WebGPU 把格式、usage、视图和复制布局拆成独立描述。

WebGL

绑定 TEXTURE_2D 后由 texImage2D/texSubImage2D 定义并上传像素。

WebGPU

先创建带 COPY_DST/TEXTURE_BINDING usage 的 GPUTexture,再 writeTexture 并创建 View。

先列出纹理在整帧中的所有读写用途,再组合 WebGPU usage;遗漏用途不能事后补上。