在学习webgpu并渲染图像时发生create graphics pipeline state failed with E_INVALIDARG (0x80070057)错误,图像无法成功渲染。

html代码:

const pipeline = device.createRenderPipeline({
// 管线布局配置
layout: 'auto',
// 顶点着色器配置
vertex: {//顶点相关配置
module: device.createShaderModule({code: vertex}),
entryPoint: "main",
buffers: [// 顶点所有的缓冲区模块设置
{//其中一个顶点缓冲区设置
arrayStride: 3*4,//一个顶点数据占用的字节长度,该缓冲区一个顶点包含xyz三个分量,每个数字是4字节浮点数,3*4字节长度
attributes: [{// 顶点缓冲区属性
shaderLocation: 0,//GPU显存上顶点缓冲区标记存储位置
format: "float32x3",//格式:loat32x3表示一个顶点数据包含3个32位浮点数
offset: 0//arrayStride表示每组顶点数据间隔字节数,offset表示读取改组的偏差字节数,没特殊需要一般设置0
}]
}
]
},
// 片元着色器配置
fragment: {
module: device.createShaderModule({code: fragment}),
entryPoint: "main",
targets: [{
format: format
}],
},
// 绘制图元配置
primitive: {
topology: "triangle-list",//三角形绘制顶点数据
}
});

wgsl代码:

//顶点着色器代码
const vertex = /*wgsl*/`
@vertex
fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32>{
// var pos2 = vec4<f32>(pos,1.0);//pos转齐次坐标
// pos2.x -= 0.2;//所有的顶点x坐标偏移0.2
// return pos2;//返回顶点数据,渲染管线下个环节使用
return vec4<f32>(pos,1.0);
}
`;

  

问题:经过一系列测试发现一个不理解的错误。当管线shaderLocation: 0 ;顶点着色器@location(0)不能正常显示,会出现create graphics pipeline state failed with E_INVALIDARG (0x80070057)错误。但当我将这两个值修改为1,图像正常渲染。令人费解!有懂得大神指教一下

webgpu学习问题,遇到了create graphics pipeline state failed错误的更多相关文章

  1. Vulkan SDK 之 Graphics Pipeline

    A graphics pipeline consists of shader stages, a pipeline layout, a render pass, and fixed-function ...

  2. WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研

    大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的 ...

  3. WebGPU学习(三):MSAA

    大家好,本文学习MSAA以及在WebGPU中的实现. 上一篇博文 WebGPU学习(二): 学习"绘制一个三角形"示例 下一篇博文 WebGPU学习(四):Alpha To Cov ...

  4. WebGPU学习(六):学习“rotatingCube”示例

    大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研 ...

  5. WebGPU学习(十一):学习两个优化:“reuse render command buffer”和“dynamic uniform buffer offset”

    大家好,本文介绍了"reuse render command buffer"和"dynamic uniform buffer offset"这两个优化,以及Ch ...

  6. A trip through the Graphics Pipeline 2011_01

    It’s been awhile since I posted something here, and I figured I might use this spot to explain some ...

  7. WebGPU学习(一): 开篇

    介绍 大家好,本系列从0开始学习WebGPU API,并给出相关的demo. WebGPU介绍 WebGPU相当于DX12/Vulkan,能让程序员更灵活地操作GPU,从而大幅提升性能. 为什么要学习 ...

  8. WebGPU学习(二): 学习“绘制一个三角形”示例

    大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 准备Sample代码 克隆webgl-samplers Github Repo到本地. ( ...

  9. WebGPU学习(四):Alpha To Coverage

    大家好,本文学习与MSAA相关的Alpha To Coverage以及在WebGPU中的实现. 上一篇博文 WebGPU学习(三):MSAA 学习Alpha To Coverage 前置知识 WebG ...

  10. WebGPU学习(七):学习“twoCubes”和“instancedCube”示例

    大家好,本文学习Chrome->webgpu-samplers->twoCubes和instancedCube示例. 这两个示例都与"rotatingCube"示例差不 ...

随机推荐

  1. redmine部署,踩坑而过

    背景:部门想用个工具来做项目执行进度的管理,为了保证数据私有并且不想花钱,选了redmine. 环境:阿里云服务器,windows server R2企业版 软件版本构成: 官方版本说明http:// ...

  2. uniapp使用EventBus实现页面间数据传递

    前情 最近在做小程序项目,选用是当前比较火的uniapp技术栈,经常会遇到页面间消息传递的需求. 为什么要这么做? uniapp页面间数据通信方式有很多:通过url传参,状态管理库vuex/pinia ...

  3. node 使用 pm2-logrotate 分割pm2日志 && 停止 pm2-logroatate

    使用pm2-logrotate 解决pm2日志体积过大,进行分割 什么是pm2-logrotate? pm2-logrotate 是一个pm2的插件,可以对pm2日志进行管理,所以它的运行需要依靠pm ...

  4. 基于 MediatR 和 FluentValidation 的 CQRS 验证管线

    基于 MediatR 和 FluentValidation 的 CQRS 验证管线 CQRS Validation Pipeline with MediatR and FluentValidation ...

  5. 【C#】【平时作业】习题-5-类的基础知识

    一.概念题 1. 举例说明什么是类,什么是对象,并说明类与对象的关系? 类:具有相同特性(数据元素)和行为(功能)的对象的抽象就是类. 对象:对象是人们要进行研究的任何事物,它不仅能表示具体的事物,还 ...

  6. 【MyBatis】学习笔记04:配置文件模板

    [Mybatis]学习笔记01:连接数据库,实现增删改 [Mybatis]学习笔记02:实现简单的查 [MyBatis]学习笔记03:配置文件进一步解读(非常重要) 目录 IDEA配置模板的地方 核心 ...

  7. 使用Spring提供的BeanUtils.copyProperties()方法报错:Could not copy property 'xxx' from source to target

    使用Spring提供的BeanUtils.copyProperties()方法报错:Could not copy property 'xxx' from source to target; neste ...

  8. Qt/C++编写视频监控系统80-远程回放视频流

    一.前言 远程回放NVR或者服务器上的视频文件,一般有三种方式,第一种是调用厂家的SDK,这个功能最全,但是缺点明显就是每个厂家的设备都有自己的SDK,只兼容自家的设备,如果你的软件需要接入多个厂家的 ...

  9. 即时通讯技术文集(第16期):IM架构设计技术精选(第一部分) [共17篇]

    为了更好地分类阅读总计1000多篇精编文章,我将在每周三推送新的一期技术文集,本次是第16 期. [- 1 -] 浅谈IM系统的架构设计 [链接] http://www.52im.net/thread ...

  10. Uniapp仿ChatGPT Stream流式输出(非Websocket)

    前言 最近写一个chagpt小程序,流式输出可以使用websocket也可以使用stream来实现,这里就不折腾websocket的了,我发现uniapp实现流式输出的方式挺多的,主要是有些小程序还不 ...