webgpu的中的顶点插值
- 正常情况下,顶点着色器都是返回一个四维向量,如果要画一个三角形,呢么就是pos就是我们传入的三个顶点坐标,返回值就是将这些坐标转换成四维向量返回
| |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> @builtin(position) vec4<f32> { |
| return vec4<f32>(pos,1.0); |
| } |
-
插值的意思,就是GPU会根据你的传入的三个点的坐标,在之内在生成其他的点,你可以理解一个大的三角形是有许许多多小的三角形组成的,所以自动会生出其他的点
-
这个时候顶点着色器就不能返回一个四维向量了,就必须定义一个结构体返回.
结构体的第一个成员就是原来的那个四维向量,也就是我们输入的坐标,转换后的四维坐标.
第二个成员就是自动生成的三维向量,也就是gpu根据你传入的两个点,然后生成的中间点的坐标.
| struct Out{ |
| @builtin(position) position:vec4<f32>, |
| |
| @location(0) vPosition:vec3<f32>, |
| } |
| |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> Out { |
| var out:Out; |
| out.position = vec4<f32>(pos,1.0); |
| out.vPosition = pos; |
| return out; |
| } |
- 然后在片元着色器中绑定变量就是可以使用.
需要注意的是,这个插值的值是基于webgpu 3d 标准设备坐标系的.
即x和y的返回是-1到1,z的返回是0到1.

| |
| |
| @fragment |
| fn main(@location(0) vPosition:vec3<f32>) -> @location(0) vec4<f32> { |
| |
| if(vPosition.x<0.5){ |
| return vec4<f32>(1.0, 0.0, 0.0, 1.0); |
| }else{ |
| return vec4<f32>(0.0, 1.0, 0.0, 1.0); |
| } |
| } |
webgpu中不要考虑模型矩阵对顶点插值的影响
- 一开始我我也是怀疑这个模型既然对需要对原坐标产生影响,
呢么我也需要对其插值坐标产生影响,才能够消除影响,
实际上不需要这样,模型矩形的变换,直接作用于原坐标就行了,
插值的坐标会自动的收到影响,
原因么,可能插值的坐标采用的相对的坐标.
| |
| const vertexShader = ` |
| struct Out{ |
| @builtin(position) position:vec4<f32>, |
| @location(0) vPosition:vec3<f32>, |
| } |
| @vertex |
| fn main(@location(0) pos: vec3<f32>) -> Out { |
| var out:Out; |
| |
| var T = mat4x4<f32>(1.0,0.0,0.0,0.0, 0.0,1.0,0.0,0.0, 0.0,0.0,1.0,0.0, -0.5,-0.5,0.0,1.0); |
| |
| |
| out.position = T * vec4<f32>(pos,1.0); |
| |
| |
| |
| out.vPosition = pos; |
| |
| return out; |
| } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战