webgpu

九章云极AladdinEdu

WebGPU深度学习前端：基于浏览器的分布式模型推理传统深度学习模型推理严重依赖云端服务器，这种模式存在几个固有瓶颈：网络延迟导致实时应用响应缓慢，隐私泄露风险随着数据传输而增加，服务器成本随着用户规模扩大呈指数级增长。根据业界实践统计，简单的图像分类模型在往返服务器的过程中，网络通信开销平均占据总推理时间的60%以上，这在实时交互应用中是不可接受的。

BIM+GIS尝试最近研究tinybim引擎中如何集成gis 影像图。其实gis影像图的渲染都是用的矩形加贴图实现的。难度主要在计算需要加载哪些影像图。墨卡托投影的影像图是一个四叉树结构，需要根据相机计算需要加载哪些节点。也看了cesium的源码实现，它是使用的一个sse(屏幕空间误差)+地平线剔除(因为cesium的三维模式是球体)。自己做的的比较简单，主要想先实现贴图，采用了网上的经验公式

解析浏览器中JavaScript与Native交互原理：以WebGPU为例随着Web应用复杂度的提升，开发者对浏览器访问本地硬件能力的需求日益增长。然而，浏览器必须在开放性与安全性之间找到平衡——既不能放任JavaScript（JS）随意操作系统资源，又要为高性能计算、图形渲染等场景提供支持。 WebGPU 的出现正是这一矛盾的解决方案之一。作为新一代Web图形API，WebGPU允许JS以接近原生（Native）的方式操作GPU，同时严格遵循浏览器的安全模型。本文将结合WebGPU，深入探讨JS与Native交互的核心原理，揭示浏览器如何在安全的前提下实现高性能硬件访问。

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