1.首先并不需要每个texture对应一个pipeline，可以在同一pipeline中使用不同的BindGroup，每个group对应不同的texture binding. e.g.
let sampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear', }); let texture1 = device.createTexture({ ... }); let texture2 = device.createTexture({ ... }); const group1 = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: texture1.createView(), } ] }); const group2 = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: texture2.createView(), } ] });然后在 rendering loop 中通过 setBindGroup 切换 group1 和 group 2 即可。
2.如果一组 textures 是同样的大小和格式，可以直接使用 texture_2d_array 去存储多个 image，这样即使一个group内，也可以在shader中通过切换array的index，来直接切换 texutre.
对于动态的 video texuture， 我们可以直接使用 importExternalTexture 进行引入，随着video播放，texture 会自动更新
const video = document.createElement('video'); video.loop = true; video.autoplay = true; video.muted = true; video.src = '...'; await video.play(); const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: sampler, }, { binding: 2, resource: device.importExternalTexture({ source: video, }) } ] });3.对于更新静态的 texutre，可以根据目标 image/texture 的类型进行 copy 更新，目前 webgpu 提供多个copy command，我们一般最主要会用到的：copyExternalImageToTexture ，可以更新外部image到gpu texture:
let texture = device.createTexture({ ... }); const img1 = document.createElement('img'); img1.src = '....'; await img1.decode(); const image1 = await createImageBitmap(img1); device.queue.copyExternalImageToTexture( { source: image1 }, { texture: texture }, [image1.width, image1.height] ); ... ...js // 更新texture的image const img2 = document.createElement('img'); img2.src = '....'; await img2.decode(); const image2 = await createImageBitmap(img2); device.queue.copyExternalImageToTexture( { source: image2 }, { texture: texture }, [image2.width, image2.height] );另外，也可以用 commandEncoder 执行 copyTextureToTexture 进行两个 gpu texutre 之间的copy 更新
// e.g. 创建两个texture，texture1 用于显示，tempTexture用于接收外部图片，图片loading 后进行 copy 更新 let texture1 = device.createTexture({ ... }); ... let tempTexture = device.createTexture({ ... }); let newImage = await loadImage() // 异步加载图片 device.queue.copyExternalImageToTexture( { source: newImage }, { texture: tempTexture }, [newImage.width, newImage.height] ); const commandEncoder = device.createCommandEncoder(); commandEncoder.copyTextureToTexture( { texture: tempTexture }, { texture: texture1 } ); device.queue.submit([commandEncoder.finish()]);其他的更新texture API 使用方法，可以参阅 https://www.orillusion.com/webgpu.html#image-copies
4.对于 sampler，目前 webgpu 没有直接更新 sampler 的API，只能创建新的 sampler，并使用新的group进行渲染，e.g.
let linearSampler = device.createSampler({ magFilter: 'linear', minFilter: 'linear', }); const group = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: linearSampler, }, { binding: 2, resource: texture } ] }); let nearestSampler = device.createSampler({ magFilter: 'nearest', minFilter: 'nearest', }); const newGroup = device.createBindGroup({ layout: pipeline.getBindGroupLayout(0), entries: [ { binding: 1, resource: nearestSampler, }, { binding: 2, resource: texture } ] });group中其他的resource并不需要重新创建，可以复用
