w3c的doc国内可能不容易打开，可以参看Orillusion的官方翻译
https://www.orillusion.com/zh/wgsl.html#var-and-let

offset 用来标识 attributes 的偏移量，你的另一个帖子中
https://forum.orillusion.com/topic/28/关于setvertexbuffer-插槽的理解
用 setVertexBuffer(index, vertexBufer) 根据不同的 index 可以在vertex shader 中设置不同的 location 插槽，这是一种做法，调用多次 setVertexBuffer 设置不同插槽

除了设置不同的index，我们还可以通过一次 setVertexBuffer 直接把所有顶点相关信息一次性提交，效率更高，比如一般常规来说，我们的geometry信息会包含 position、normal或color、uv三种信息，那么可以直接设置一个大的buffer：

const cubeVertexArray = new Float32Array([
  // float4 position, float4 color, float2 uv,
  1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
  -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
  -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
  ...... // 省略篇幅
  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
  1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
]);

那么在pipeline创建时可以通过 offset 指定buffer的偏移量用来标识不同的插槽属性:

const renderPipeline = this.device.createRenderPipeline({
    vertex: {
        module:  vertexShader,
        entryPoint: 'main',
        buffers: [{
            arrayStride: 10 * 4, // 标明每 10 个值一组数据
            attributes: [
                {
                    // position
                    shaderLocation: 0, // 插槽index
                    offset: 0, // 偏移量 0
                    format: 'float32x4',  // 标明4个 float32 position
                },
                {
                    // color
                    shaderLocation: 1, // 插槽index
                    offset: 4 * 4, // 偏移量 4
                    format: 'float32x4', // 标明 4 个 float32 color
                },
                {
                    // uv
                    shaderLocation: 2, // 插槽index
                    offset: 8 * 4, // 偏移量 8
                    format: 'float32x2',  // 标明 2 个 float32 uv
                }
            ],
        }]
    },
    ....  // 省略
})

那么只需设置一次vertexbuffer

const verticesBuffer = device.createBuffer({
    size: cubeVertexArray.byteLength,
    usage: GPUBufferUsage.VERTEX,
    mappedAtCreation: true,
});
new Float32Array(verticesBuffer.getMappedRange()).set(cubeVertexArray);
  verticesBuffer.unmap();

... // 省略

passEncoder.setVertexBuffer(0, verticesBuffer);

在shader中，就可以通过offset调用不同的location：

[[stage(vertex)]]
fn main([[location(0)]] position : vec4<f32>,
        [[location(1)]] color : vec4<f32>,
        [[location(2)]] uv : vec2<f32>,
) -> VertexOutput {
        ... // 省略
}

这种做法效率更高一些，做高性能的 webgpu 程序要尽可能减少不必要的command次数 和 gpu 数据交换次数，所以：

1. 减少setVertexBuffer 的次数，把所有相关信息一次提交，要比多次设置index快很多
2. 在数据层面，创建一个gpubuffer，要比创建多个零散的gpubuffer效率高很多，减少cpu与gpu的交换数据次数，也减少了GPU在内部命中内存的速度，这个的提升也很重要。

1. 用来标明是拷贝的来源还是目标，copy_dst 就是可以做为 copy 的目标，比如用 copyExternalImageToTexture 把 image
   拷贝给 texture。相应的，copy_src 就是可以作为 copy 来源，也就是可以被拷贝，比如用 copyTexureToTexture，t1 copy to t2，那t1需要有 copy_src，t2要有 copy_dst

2. 因为纹理贴图支持多维度的贴图，除了普通的 2d 贴图，webgpu 还支持 1d, cube, 3d, 2d-array, 3d-array 等类型，那么就对应的depthOrArrayLayer 标明深度参数或者 Array 的layer数量，比如cube对应的 depthOrArrayLayer 就必须是6，其他比如 2d-array 根据贴图数量设置

3. rgba/bgra 只是 rgb 的排列方式不同而已，对应着小端对齐/大端对齐，并没有特殊的不同，我不确定 samplecount 为4，既开启了 MSAA 时，一定要用bgra8unorm吗？
   如果是，可能因为目前 webgpu 默认的 MSAA 需要硬件/系统驱动支持，所以必须要用 perfered format 才可以。
   目前大部分设备的色彩空间格式默认是 bgra 排列，起码我手上的 几个 windows, mac 和 ios 都是，所以开启默认的 MSAA 时，必须用 bgra8unorm。
   至于为什么默认是 bgra，因为 bgra 排列更符合cpu/gpu的内存排列方式，读取不需要额外的转换操作，可以直接使用底层驱动API去操作
   实践上，一般推荐调用context.getPreferredFormat() 得到系统默认的格式，可以避免一些不必要的问题，理论上性能也更好一些

A simple data performance test between WebGL.bufferSubData and WebGPU.writeBuffer, try to simulate 1million transform matrix submit to GPU:

For my platform:
CPU: Intel i7 8700k
Mem: 16gb
GPU: Intel UHD 630
OS: Mac os 12.01
Chrome: 100.0.4862.3
Firefox: 99.0a1

for > 500k, take 1000k for heavy test

It is obviously that writeBuffer on Chrome is not ready for big dataset, basically 5-10x times slower than bufferSubData. Where mapAsync slightly faster than writeBuffer

But for <150k, writeBuffer is faster

For small dataset, the mapAsync is slower …

When it comes to real application, WebGPU could get up to 20x slower then WebGL in Chrome, the device queue will be blocked while writing multi textrure/matrix/index/vertex ..

In our contrast test:
https://contrast.orillusion.com

Event though Orillusion gets much better overall FPS than Three instance draw, Orillusion actually takes 10x longer time than Three.js in sending data to gpu. When it comes to 300k boxes, Orillusion takes over 50-70ms on writeBuffer where Three only takes 3-4ms on bufferSubData.

This performance issue has been discussed for a long time, e.g. https://bugs.chromium.org/p/chromium/issues/detail?id=1266727&q=writeBuffer&can=2
But it is still not addressed up to Chrome Canary v101

For now, the best practice in Chrome, try mapAsync if you are working on very big dataset, but may not get much helpful in real application. Use writeBuffer for simple relatively small data is always a good choice. But overall, they are not fast as WebGL so far

By the way, in our real practice, mapAsync may not a good choice for heavy rendering interactive Application.
The async callback/promise can be delayed from 4ms up to 20ms, such as mouse/keyboard/ajax/networking events, or other mapAsync jobs.

If you are working on a computing job, the delay is acceptable. But for real-time rendering, it can trigger a wired fps sometime, unstable frame change, hard to control from JS side. mapAsync vs writeBuffer is like relatively fast but unstable fps vs relatively slow but stable fps.

Welcome anyone try the test, and post your result.

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并不需要重新创建，可以复用

这个跟 WGSL 无关，任何一种shader 语言都没有自带 Math.random() 这种API，都需要开发者实现基本的伪随机算法，网上公开的算法和例子很多，比如

https://zhuanlan.zhihu.com/p/390862782
https://gamedev.stackexchange.com/questions/32681/random-number-hlsl

基本上利用 fract/sin/cos 处理 position/uv/ 就可以实现基本的伪随机

@wenhao0807 这个是根据你自己的vertex设置安排的

const cubeVertexArray = new Float32Array([
  // float4 position, float4 color, float2 uv,
  1, -1, 1, 1,   1, 0, 1, 1,  1, 1,
  -1, -1, 1, 1,  0, 0, 1, 1,  0, 1,
  -1, -1, -1, 1, 0, 0, 0, 1,  0, 0,
  ...... // 省略篇幅
  1, 1, -1, 1,   1, 1, 0, 1,  1, 0,
  1, -1, -1, 1,  1, 0, 0, 1,  1, 1,
  -1, 1, -1, 1,  0, 1, 0, 1,  0, 0,
]);

这个例子中，一行10个数字，你可以安排排列方式，1-4 是position, 5-8 是 color或者一般设置normal，9-10是uv值，相应的就是 pipeline 中的 offset。
一般来说，对于普通object/mesh，我们一般用8个值做顶点buffer，3个 position, 3个normal, 2个uv:

buffers: [
    {
        arrayStride: 8 * 4,
        attributes: [
            {
                // position
                shaderLocation: 0,
                offset: 0,
                format: 'float32x3',
            },
            {
                // normal
                shaderLocation: 1,
                offset: 3 * 4,
                format: 'float32x3',
            },
            {
                // uv
                shaderLocation: 2,
                offset: 6 * 4,
                format: 'float32x2',
            }
        ],
    }
]

其他信息，比如transform,color,light,material等参数会用 uniform/storage buffer进行传递。当然你可以自行安排，比如对于lines/points，就不需要normal或者uv，那vertexbuffer中就会设置color

新加了 bundle 的 sample:
https://orillusion.github.io/orillusion-webgpu-samples/#cubesRenderBundle

@支阿怪 目前引擎库还没有公开，所以无法直接安装，我们正在做内测，稍后会进行公开测试

@lightgm 目前还没有2d相关封装，后续会扩充相关生态

@jocay 大概率是浏览器版本问题，可以尝试升级到最新版chrome

@jocay 是 orillusion github 上的 webgpu sample吗？

这种bug问题，请提供尽量完整的信息，比如代码，浏览器版本等，最好直接在github里提issue

如果代码没问题，一般是浏览器版本问题，webgpu还处于不稳定的开发中，会有某些版本出现这种gpu丢失的问题

Orillusion 目前仍然在内测中，相应的 @orillusion/core 和 unpkg 链接无法直接访问，我们正在积极准备文档，稍后开放

目前 @orillusion/core 还在内测中，正在完善文档教程，无法直接使用 npm 安装，请再等待一段时间，即将跟大家见面

新加了 bundle 的 sample:
https://orillusion.github.io/orillusion-webgpu-samples/#cubesRenderBundle

大致上需要2个部分

1. WebGPU 没有 Point 的概念了，需要用户自己实现 point_size 等表现形式, 最简单的就是使用一个 4/6个点的矩形来做一个 2d 平面，那么大小和形状都可以自定义调节， 当然贴图也可以自定义，这就是 2d 精灵图 本质了

2. 精灵图的一个重要特点，是始终朝向摄像机，这就需要用户自己实现每一帧计算精灵图的transform，使它朝向摄像机/屏幕。比如 在 three.js 里，也是 js 配合 glsl 实现的这个功能，可以去看three.js 的相关代码。
   webgpu 里一样，需要每一帧对 精灵图的 matrix 进行计算，使它始终朝向 camera，无论是在js里计算，还是wgsl cs计算都可以，webgpu更灵活一些

@stayreal1994

1. 这个问题，可以去 tf.js github 的 issue 里提

2. 据我们所知，tf.js 正在进行基于 webgpu 的 backend 的开发，因为 webgpu 完全异步的架构，基本上是重构了整个 tf.js，大概率会有很多 API 或 用法上的区别，所以肯定不是简单 setBackEnd('webgpu') 就可以解决的，最好等他们发布官方版本后再尝试

另外，确实 WebGPU API 本身变化很大，好多功能还没有支持，像 timestamp-query 我不确定 chrome 是否加入了，目前应该是没有支持，即使加了参数也不行

@jellyl823 是 Canary 的发布 bug，出现过好几次，Chrome 新版本发布时 忘了改 WebGPU 的版本 flag，导致 106 版本无法使用 WebGPU

1. 一般 Chrome 会在几天内修复该问题，可以保持更新
2. 可以先暂时启用 M105 的 flag，可以手动开启 webgpu，等106修复后再关闭正常使用