阶段 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。
javascriptconst 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 },
);- usage 先声明 COPY_DST 允许上传,TEXTURE_BINDING 允许着色器采样。
- rgba8unorm 每个 texel 四个 8 位通道,着色器读取时归一化为 0–1。
- View 才能绑定 BindGroup 中通常放 texture.createView(),而不是 GPUTexture 本体。
上传后,片元着色器用 UV 坐标采样 View,并由 Sampler 决定最终过滤颜色。
OPTIONAL · 按需查阅完整术语表与概念边界遇到陌生术语时再展开,不打断主线实验。
展开⌄
纹理GPUTexture有尺寸、格式、mip、数组层、采样数和 usage 的结构化 GPU 图像资源。纹理GPUTextureView从 GPUTexture 选择具体 mip、层、维度和格式的着色器/附件视图。纹理Texture Format规定 texel 通道、位宽、数值解释和可用操作,如 rgba8unorm、depth24plus。纹理GPUTextureUsage纹理创建时声明的用途,如 TEXTURE_BINDING、STORAGE_BINDING、RENDER_ATTACHMENT、COPY_SRC/DST。纹理采样textureSample片元着色器中用纹理、采样器和 UV 读取过滤后的纹理值。纹理采样UV Coordinates通常以 0–1 表示纹理二维坐标,可通过寻址模式处理范围外坐标。数据上传writeTextureGPUQueue 的便捷纹理上传方法,把 CPU 字节按行布局复制到具有 COPY_DST usage 的 GPUTexture。纹理TexelTexture Element(纹理元素)是纹理网格中的一个存储单元;它可能保存颜色、深度或其他格式化数据,不必与屏幕像素一一对应。纹理Texture Descriptor创建 GPUTexture 时使用的配置对象,集中声明尺寸、格式、mip 层数、采样数和允许用途。
LIVE EXPERIMENT · 先获得反馈
边改边运行
浏览器加载后会激活代码编辑器、独立运行环境与实时输出。
本课挑战
生成一张程序化径向渐变纹理并上传。
回到原理,解释刚才发生了什么
先用结果建立反馈,再按运行流程、核心原理和知识关系逐层深入。
CORE IDEA
核心讲解
纹理与缓冲区不同
纹理按像素格式和块组织,硬件可以高效采样、过滤和缓存。usage 必须提前声明 COPY_DST 与 TEXTURE_BINDING。
View 选择可见范围
一个 GPUTexture 可创建不同 mip、层、维度或格式视图,资源本体和使用视图因此分离。
OPTIONAL · 迁移时查阅WebGPU 与 WebGL2 对照主线实验完成后,再用完整映射处理跨平台或跨 API 迁移。
展开⌄
像素上传目标相同;WebGPU 把格式、usage、视图和复制布局拆成独立描述。
WebGL
绑定 TEXTURE_2D 后由 texImage2D/texSubImage2D 定义并上传像素。
WebGPU
先创建带 COPY_DST/TEXTURE_BINDING usage 的 GPUTexture,再 writeTexture 并创建 View。
先列出纹理在整帧中的所有读写用途,再组合 WebGPU usage;遗漏用途不能事后补上。