webgpu

WebGPU、WebGL 和 OpenGL/Vulkan对比分析WebGPU、WebGL 和 OpenGL/Vulkan 都是用于图形渲染和计算的图形API，但它们的设计理念、功能和适用场景有所不同。以下是它们的总结和对比分析：

在浏览器里就可以运行的本地AI模型 - 一键去除图片背景AI浏览器的功能越来越强大, 从Chrome 113 开始, 谷歌把WebGPU引入到了浏览器中, 通过WebGPU的API, 可以直接访问本机电脑的GPU资源. 既然GPU资源可以在浏览器里运行, 给AI模型推理等带来了便利, 使得一些AI模型可以直接在浏览器里运行.

在浏览器上使用transformers.js运行（WebGPU）RMBG-1.4进行抠图（背景移除）下载onnx模型文件: https://huggingface.co/briaai/RMBG-1.4/tree/main/onnx, 有3个onnx模型文件：

贝格前端工场

作为web3D的核心，webGL会被webGPU取代吗？这不webGL技术还没有吃透，webGPU技术就来了，还说要取代webGPU，搞的很多初入web3D领域的小伙伴都很迷茫，到底该学啥呢。千汇数据工场借助本文，粗浅的对两个技术扫盲下，权当抛砖引玉。

BabylonJS 6.0文档 Deep Dive 摄像机（六）：遮罩层和多相机纹理LayerMask是分配给每个网格（Mesh）和摄像机（Camera）的一个数。它用于位（bit）级别用来指示灯光和摄影机是否应照射或显示网格物体。默认值为0x0FFFFFFF，处于此值的情况下，网格会被任何备用灯光和相机照亮和显示。为了确定相机是否看到网格物体，执行一个逐位AND运算，并将结果与零进行比较：

轻量封装WebGPU渲染系统示例＜53＞- 多盏灯灯光照在地面的效果WebGPU实时渲染实现模拟多盏灯的灯光照在地面的效果灯光效果。当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MultiLightsTest.ts

轻量封装WebGPU渲染系统示例＜50＞- Json数据描述材质等3D渲染场景信息本示例中的3d渲染场景由Json数据来描述。包含3个主要部分:1. Json描述渲染器的基本信息。2. Json描述渲染场景的环境信息,包括全局的灯光、阴影、雾等。

轻量封装WebGPU渲染系统示例＜44＞- 材质组装流水线(MaterialPipeline)之灯光和阴影(源码)目标: 数据化，模块化，自动化备注: 从这个节点开始整体设计往系统规范的方向靠拢。之前的都算作是若干准备。所以会和之前的版本实现有些差异。

轻量封装WebGPU渲染系统示例＜46＞- 材质组装管线(MaterialPipeline)灯光、阴影、雾以及多Pass(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MaterialPipelineMultiPasses.ts

轻量封装WebGPU渲染系统示例＜45＞- 材质组装流水线(MaterialPipeline)灯光、阴影、雾(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/MaterialPipelineFog.ts

轻量封装WebGPU渲染系统示例＜39＞- emissive和arm纹理支持(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/DynamicShaderBuilding2.ts

轻量封装WebGPU渲染系统示例＜40＞- 多层材质的Mask混合(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/MaskTextureEffect.ts

轻量封装WebGPU渲染系统示例＜35＞- HDR环境数据应用到PBR渲染材质当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BasePbrMaterialTest.ts

轻量封装WebGPU渲染系统示例＜36＞- 广告板(Billboard)(WGSL源码)原理不再赘述，请见wgsl shader实现。当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/BillboardEntityTest.ts

轻量封装WebGPU渲染系统示例＜33＞- 单精度浮点纹理(源码)在WebGPU中创建纹理使用纹理很方便，只是js中只有Float32Array而默认不支持Float16Array，所以略微费点事。不过网上的大神多的是，摇摇小手就能获得解决方案。

轻量封装WebGPU渲染系统示例＜28＞- MRT纹理(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/MRT.ts

轻量封装WebGPU渲染系统示例＜27＞- 浮点RTT纹理(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/FloatRTT.ts

轻量封装WebGPU渲染系统示例＜24＞- Rendering Pass Graph基本用法(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/PassNodeGraphTest.ts

轻量封装WebGPU渲染系统示例＜17＞- 使用GPU Compute之元胞自动机(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/GameOfLifeTest.ts

轻量封装WebGPU渲染系统示例＜16＞- 使用GPU Compute计算(源码)当前示例源码github地址:https://github.com/vilyLei/voxwebgpu/blob/feature/rendering/src/voxgpu/sample/ComputeEntityTest.ts