@oldguy 请问orillusion引擎库是怎么安装的呢？npm install @orillusion/core --save这个步骤一直安装失败。

结合规范来看，个人理解为：

• 宿主本地=主机集成内存；
• 列表设备本地=独立显卡内存；

最近在看vulkan资料，看到宿主本地和设备本地的概念，搜了下相关资料，宿主本地就是你的主机，但设备本地没有太多资料解释，能否解释下宿主和设备之间如何区分呢？

For my platform:
CPU: Intel i5 7200U
Mem: 8gb
GPU: Intel UHD 620
OS: Win10
Chrome: 100.0.4896.60（正式版本） （64 位）

Chrome
WebGL 20~ 70ms
writeBuffer 120~130 ms
mapAsync/unmap 70~90 ms

截图：

我的平台运行WebGL绘制速度不稳定，也可能是我的电脑配置低影响的，不过通过对比，WebGPU确实比GL慢许多，兴许底层优化不够好么? 看来WebGPU的性能值得优化提升！

@shuangliu

@寻风觅迹 如果我用c++调Dawn，是不是要比直接用WebGPU的性能要好呢？

@shuangliu 感谢解答

看源码介绍：

翻译出来是：

Dawn，一个WebGPU实现

Dawn(以前是NXT)是一个正在开发中的开源和跨平台的WebGPU标准实现。
它公开了一个几乎一对一映射到WebGPU IDL的C/ c++ API，并且可以作为更大系统(如Web浏览器)的一部分进行管理。

没有太搞懂概念，也看O的视频教程，说WebGPUAPI传递到Dwan，那为什么不直接用Dwan，实现对GPU的抽象实行渲染计算，还要再高一层去做WebGPU呢？

@shuangliu 感谢回复，了解了

@admin

1.请问出现No adapter found，是什么原因呢？
2.如果浏览器不支持webgpu应该是Not support WebGPU吧，使用的edge最新版，还是说必须要用Chrome才可以？
3.是否可以在vite.config.js配置中修改，使得Edge正常运行么？

可否通俗易懂解释下资源绑定的意思？它在流程中起什么作用呢？

@shuangliu 明白了，感谢您的回复

@shuangliu 还有个问题请教，就是怎么理解计算buffer的偏移量呢？0、4、8这是怎么得出的呢？

@shuangliu 非常感谢解答

我好像明白了，0，1是建立着色器和GPU缓冲区的一种方式代号，把缓冲区里面的顶点数据和颜色数据引用到着色器里面，联系的方式是buffers里的shaderLocation：0 和着色器里的[[location(0)]],因为我在main文件中创建顶点和颜色数据；
因此在最后的渲染管道中，我需要读取顶点数据和颜色数据的GPUBuffers时，同样也需要进行插槽(通俗讲：一个属性代指一个有序数字)的指向，确保缓冲区内的数据于着色器保持同步进行渲染。

把顶点坐标和颜色数据放在缓冲区写，是因为main.ts是typescript写成的，有代码提示，相比文本的着色器，调试起来更方便。

请问，这里进行绑定渲染通道，0，1这里的插槽怎么理解，代表什么呢？

规范只说明是format最小倍数？这个成员定义有何意义，为实现什么呢？

当前WGSL去掉了const声明常量，用var声明变量、let声明常量。

export const Shaders = () => {
    const vertex = `
        struct Output {
            [[builtin(position)]] Position : vec4<f32>;
            [[location(0)]] vColor : vec4<f32>;
        };
        [[stage(vertex)]]
        fn main([[builtin(vertex_index)]] VertexIndex: u32) -> Output {
            var pos = array<vec2<f32>, 3>(
                vec2<f32>(0.0, 0.5),
                vec2<f32>(-0.5, -0.5),
                vec2<f32>(0.5, -0.5)
            );
    
            var color = array<vec3<f32>, 3>(
                vec3<f32>(1.0, 0.0, 0.0),
                vec3<f32>(0.0, 1.0, 0.0),
                vec3<f32>(0.0, 0.0, 1.0)
            );
            var output: Output;
            output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
            output.vColor = vec4<f32>(color[VertexIndex], 1.0);
            return output;
        }
    `;

    const fragment = `
        [[stage(fragment)]]
        fn main([[location(0)]] vColor: vec4<f32>) -> [[location(0)]] vec4<f32> {
            return vColor;
        }
    `;
    return {vertex, fragment};
}

export const Shaders1 = () => {
    const vertex = `
        let pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
            vec2<f32>(0.0, 0.5),
            vec2<f32>(-0.5, -0.5),
            vec2<f32>(0.5, -0.5)
        );
        let color : array<vec3<f32>, 3> = array<vec3<f32>, 3>(
            vec3<f32>(1.0, 0.0, 0.0),
            vec3<f32>(0.0, 1.0, 0.0),
            vec3<f32>(0.0, 0.0, 1.0)
        );
        struct Output {
            [[builtin(position)]] Position : vec4<f32>;
            [[location(0)]] vColor : vec4<f32>;
        };
        [[stage(vertex)]]
        fn main([[builtin(vertex_index)]] VertexIndex: u32) -> Output {
            var output: Output;
            output.Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
            output.vColor = vec4<f32>(color[VertexIndex], 1.0);
            return output;
        }
    `;

    const fragment = `
        [[stage(fragment)]]
        fn main([[location(0)]] vColor: vec4<f32>) -> [[location(0)]] vec4<f32> {
            return vColor;
        }
    `;
    return {vertex, fragment};
}


export const ShadersOld = () => {
    const vertex = `
        const pos : array<vec2<f32>, 3> = array<vec2<f32>, 3>(
            vec2<f32>(0.0, 0.5),
            vec2<f32>(-0.5, -0.5),
            vec2<f32>(0.5, -0.5)
        );
        const color : array<vec3<f32>, 3> = array<vec3<f32>, 3>(
            vec3<f32>(1.0, 0.0, 0.0),
            vec3<f32>(0.0, 1.0, 0.0),
            vec3<f32>(0.0, 0.0, 1.0)
        );
        [[builtin(position)]] var<out> Position : vec4<f32>;
        [[builtin(vertex_idx)]] var<in> VertexIndex : i32;
        [[location(0)]] var<out> vColor : vec4<f32>;
        [[stage(vertex)]]
        fn main() -> void {
            Position = vec4<f32>(pos[VertexIndex], 0.0, 1.0);
            vColor = vec4<f32>(color[VertexIndex], 1.0);
            return;
        }
    `;

    const fragment = `
        [[location(0)]] var<in> vColor : vec4<f32>;
        [[location(0)]] var<out> fragColor : vec4<f32>;
        [[stage(fragment)]]
        fn main() -> void {
            fragColor = vColor;
            return;
        }
    `;
    return {vertex, fragment};
}