WebGPU 补充篇之 Uniform

已于 2022-02-09 16:01:17 修改
阅读量324 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 漫谈 WebGPU 文章标签： javascript webgl webgpu
于 2021-09-12 04:51:31 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cRGBc/article/details/120246172
本文详细介绍了WebGPU中Uniform资源的创建和管理，包括常量数组、纹理和采样器。阐述了绑定组的作用、创建及布局对象的使用，讲解了如何在着色器代码中获取绑定组资源，涉及UBO、采样器和纹理的获取方法。

参考自

WebGPU 8. Resource Binding（资源绑定）
WGSL 5.1. Module Scope Variables（全局对象）
WGSL 9.3.2. Resource interface（资源接口）

文章目录

WebGPU 中的 Uniform

接口预览：

  • GPUBindGroup
  • GPUBindGroupLayout
  • GPUBuffer
  • GPUBufferUsage
  • GPUSampler
  • GPUTexture

WebGPU 中，uniform 资源的传递是通过 UBO 完成的，会用到 GPUBindGroup、GPUBindGroupLaayout 来管理一组绑在一块的资源，正如 GPUBindGroup 的描述一样所说：

A GPUBindGroup defines a set of resources to be bound together in a group and how the resources are used in shader stages.

GPUBindGroup 管理了一组绑在一块的资源，并决定了在着色器阶段如何使用。

这里所谓的资源，有如下几种：

  • 普通常量数字、类型数组
  • 纹理
  • 采样器

1 如何创建 Uniform 资源

① 普通常量数字/类型数组


                

                
                
        

    


  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                  
                    
                    超级会员免费看
                  
                

            
            
            
        


    



                



	

		

			

				
					
WebGPU 着色器语言 WGSL 介绍及与 GLSL 的对比

				
			

			

				

					weixin_44938311的博客
				

				

					11-08
					
					2735
					
				

			

		

		

			
				
WGSL 的目标不是要与 GLSL 兼容，它是对现代着色器语言的全新重新设计。
2020 年 4 月 27 日，WGSL 标准有了第一次提交。自此开始，wgpu 和 dawn 都摆脱了对 shaderc 之类复杂繁重的着色器转译工具的依赖。wgpu 里使用的 WGSL 转译工具叫 naga, kvark 有一篇博客（Shader translation benchmark）对比了 naga 相比于其它转译工具的性能优化，总体来说，有 10 倍以上的性能优势。

			
		

	



                

            
              



	

		

			

				
					
WebGL 与 WebGPU比对[4] - Uniform

				
			

			

				

					weixin_45566993的博客
				

				

					02-19
					
					1125
					
				

			

		

		

			
				
Python微信订餐小程序课程视频
https://edu.youkuaiyun.com/course/detail/36074
Python实战量化交易理财系统
https://edu.youkuaiyun.com/course/detail/35475
目录* 1. WebGL 1.0 Uniform
+ 1.1. 用 WebGLUniformLocation 寻址
+ 1.2. 矩阵赋值用 uniformMatrix[234]fv
+ 1.3. 标量与向量用 uniform[1234][fi][v]
+ 1.4. 传递纹理


			
		

	



              


  
              

                


	

		

			

				
					
3. WebGPU Uniforms

				
			

			

				

					xuejianxinokok的专栏
				

				

					05-24
					
					263
					
				

			

		

		

			
				
在我们上面的示例中，每次绘制时都会更新比例scale，然后我们 writeBuffer 将该对象的 uniformValues 上传到相应的统一缓冲区。到目前为止，我们在着色器中使用的所有数据都是硬编码的（顶点着色器中的三角形顶点位置，以及片段着色器中的颜色）。现在，在我们提交命令缓冲区之前的某个时间，我们需要设置 uniformValues 的其他值，然后将这些值复制到 GPU 上的缓冲区。我们还没有在我们的缓冲区中设置，因为我们希望它考虑画布的外观，并且在渲染时间之前我们不会知道画布的外观。

			
		

	





	

		

			

				
					
WebGL着色器——数组

				
			

			

				

					u014291990的博客
				

				

					11-22
					
					2917
					
				

			

		

		

			
				
数组
本文是WebGL电子书的2.16节内容。
WebGL着色器和javascript语言、C语言一样 可以声明数组类型变量，不过WebGL着色器的数据仅仅支持一维数组，不支持多维数组。
声明语法结构
数组元素的数据类型 数组变量名[数组元素个数]

// 声明一个数组变量fArr，数组变量fArr有100个元素，元素的数据类型是浮点数
float arr[100];
// 声明一个长度20的三维...

			
		

	



		

			
		



	

		

			

				
					
WGSL 内存和内存视图

				
			

			

				

					fatcat123的博客
				

				

					02-03
					
					1170
					
				

			

		

		

			
				
WGSL内存和内存视图。

			
		

	





	

		

			

				
					
WebGPU学习（4）---使用 UniformBuffer

				
			

			

				

					
				

				

					02-26
					
					779
					
				

			

		

		

			
				
以上，使用UniformBuffer的绘制就完成了。虽然这个立方体看起来很奇怪。。。这是因为我们还没有在绘图时启用深度测试。下次我们将启用深度测试以确保正确绘制立方体。

			
		

	





	

		

			

				
					
NumPy库学习之uniform函数

				
			

			

				

					qq_46396470的博客
				

				

					09-20
					
					1497
					
				

			

		

		

			
				
是 NumPy 库中的一个函数，用于生成在指定范围内均匀分布的随机数。这个函数可以生成单个随机数，也可以生成随机数数组。它在模拟、统计分析和机器学习等领域中非常有用，尤其是在需要随机抽样或初始化参数时。

			
		

	





	

		

			

				
					
从WebGL迁移到WebGPU

				
			

			

				

					ms44的专栏
				

				

					09-22
					
					1367
					
				

			

		

		

			
				
迁移到即将推出的 WebGPU 不仅仅意味着切换图形 API。这也是迈向 Web 图形未来的一步。但如果做好准备并理解，迁移将会更加顺利 — 本文将帮助您做好准备。/wp:image在本文中，我们将讨论 WebGL 和即将推出的 WebGPU 之间的区别，并阐述如何为项目迁移做好准备。

			
		

	





	

		

			

				
					
WebGL入门教程第1篇——六色立方

					
热门推荐

				
			

			

				

					
				

				

					04-15
					
					2万+
					
				

			

		

		

			
				
介绍了WebGL的基础知识，并实战绘制立方体

			
		

	





	

		

			

				
					
WebGl-7.通过uniform传值

				
			

			

				

					qq_25064691的博客
				

				

					09-11
					
					910
					
				

			

		

		

			
				
向顶点着色器中传递数据是通过 attribute，向片元着色器中传递数据就需要使用 uniform声明变量，uniform变量传递的数据是一致的不变的数据例如所有的颜色应用的都是这个变量但是所有点的位置是不一样的，而 attribute传递的数据是变化的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Comp.

			
		

	





	

		

			

				
					
06 WebGL 着色器编程语言GLSL ES的数组

				
			

			

				

					现在学习也不晚
				

				

					05-31
					
					4778
					
				

			

		

		

			
				
GLSL ES支持数组类型。与JavaScript中的数组不同的是，GLSL ES只支持一维数组，而且数组对象不支持pop()和push()等操作，创建数组时也不需要使用new运算符。声明数组很简单，值需要在变量名后加上中括号（[]）和数组的长度。比如：
    float floatArray[4];//声明含有4个浮点数元素的数组
    vec4 vec4Array[2];//声明含有2个

			
		

	





	

		

			

				
					
 WebGL2系列之实例数组(Instanced Arrays)

				
			

			

				

					weixin_33921089的博客
				

				

					11-17
					
					412
					
				

			

		

		

			
				
实例化数组
实例化是一种只调用一次渲染函数却能绘制出很多物体的技术，它节省渲染一个物体时从CPU到GPU的通信时间。实例数组是这样的一个对象，使用它，可以把原来的的uniform变量转换成attribute变量，而且这个attribute变量对应的缓冲区可以被多个对象使用；这样在绘制的时候，可以减少webgl的调用次数。
背景
假设这样的...

			
		

	





	

		

			

				
					
09 WebGL通过uniform变量修改点的颜色

				
			

			

				

					现在学习也不晚
				

				

					05-04
					
					5373
					
				

			

		

		

			
				
上一节通过点击绘制点，这一节接着上一节来修改颜色，到这一节关于点的就写完了。案例查看地址：点击这里&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport"
          content="width=device-widt

			
		

	





	

		

			

				
					
前端在移动端中的页面切换

				
			

			

				

					2509_93939582的博客
				

				

					11-28
					
					487
					
				

			

		

		

			
				
记得加硬件加速，用transform和opacity属性，别动不动改布局属性（比如width或height），那样容易引发重排重绘，卡成幻灯片。不过，SPA也不是万能药，它初次加载可能慢点，得靠代码分割和懒加载来优化——比如把不常用的模块拆开，等用户需要时再加载，这样既省资源又提速。还有，别忘了图片和视频的懒加载：页面切换时，先加载核心内容，图片等可视区域再加载，这样首屏能秒开。另外，内存管理也得注意，SPA容易内存泄漏，切换页面时记得清理事件监听器和定时器，不然用久了手机会变卡。

			
		

	





	

		

			

				
					
Electron 与 OpenHarmony 的实战入门：手把手打造一个安全的简易记事本应用

				
			

			

				

					已掌握java全栈，简单的java项目逻辑。目前正在学习鸿蒙开发，有兴趣的小伙伴可以一起学习！！！
				

				

					11-27
					
					915
					
				

			

		

		

			
				
这个“简易记事本”虽只有几十行代码，却完整体现了 现代桌面应用的安全架构思想。它不仅是 Electron 的最佳入门实践，更是通往 OpenHarmony 全场景开发的桥梁。

			
		

	





	

		

			

				
					
Rust在Web中的前端框架

				
			

			

				

					2509_93947499的博客
				

				

					11-26
					
					366
					
				

			

		

		

			
				
Yew用了虚拟DOM来优化渲染，组件状态管理也简单，举个例子，你写个计数器组件，代码结构清晰，还能用Rust的强类型系统避免运行时错误。Seed不用虚拟DOM，直接操作DOM，性能可能更好，但代码写起来得小心点，别把浏览器搞崩了。想想看，用户点个按钮，背后可能触发一堆异步操作，要是用JavaScript，一不小心就内存泄漏或者变量污染，调试起来头大。另外，Rust的性能接近C++，编译成WASM后，在浏览器里执行效率高，能处理复杂计算或者图形渲染，比如游戏或者数据可视化应用，加载速度嗖嗖的。

			
		

	





	

		

			

				
					
vue3 md文件预览和下载

				
			

			

				

					zzzz121380的博客
				

				

					11-26
					
					405
					
				

			

		

		

			
				
本文介绍了两种在Vue3中预览Markdown文件的方法：使用md-editor-v3插件和@kangc/v-md-editor@next插件，并提供了MD内容下载为MD和PDF文件的实现方案。md-editor-v3方法简单易用，@kangc/v-md-editor支持更多主题选项。MD文件下载可通过Blob对象或downloadjs实现，PDF转换则利用html2pdf.js库将预览内容转为PDF。文章还指出markdown-it插件在表格样式上的不足，不推荐使用。两种方法都提供了完整的代码示例，包括依

			
		

	





	

		

			

				
					
js考古之seajs.use、layui.use是啥 以及来源？

					
最新发布

				
			

			

				

					weixin_52236586的博客
				

				

					11-29
					
					417
					
				

			

		

		

			
				
Seajs是先行者，在浏览器原生不支持模块化的黑暗年代，发明了 seajs.use 来实现按需加载。Layui是实用主义者，它借用了这种模块化思想，用 layui.use 把 UI 组件管理得井井有条，成为了 jQuery 时代的绝唱。是终结者，它作为官方标准，吸收了前辈们的经验，配合现代打包工具，提供了最强悍的性能和开发体验。当你下次再看到 seajs.use 或 layui.use 时，请对它们保持敬意。因为正是这些“老古董”，为今天现代前端的摩天大楼，铺下了第一块基石。

			
		

	





	

		

			

				
					
前端路由管理

				
			

			

				

					2509_93941777的博客
				

				

					11-28
					
					382
					
				

			

		

		

			
				
这种机制在单页应用（SPA）中特别常见，比如Vue.js或React项目里，用户点击链接时，URL会变，但页面不会整体刷新。这样一来，应用可以更流畅，减少等待时间。记得有一次，我在一个电商项目里用Vue Router做商品详情页的路由，通过动态路由参数传递商品ID，配合axios异步加载数据，页面切换又快又顺。通过动态import()语法，可以把路由组件拆分成独立的chunk，用户访问时才加载，大大提升首屏速度。还有404页面的处理，最好设置一个通配符路由，捕获所有未匹配的路径，避免用户看到空白页。

			
		

	





	

		

			

				
					
jQuery插件Uniform：简化并美化Web表单

				
			

			

				

					
				

			

		

		

			
				
### jQuery.Uniform知识点详解  #### 什么是jQuery.Uniform？  jQuery.Uniform是一个基于jQuery的JavaScript插件，旨在提供一种简单而有效的方式来美化HTML表单。使用这个插件可以轻松地给表单元素添加一致的外观和...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值