WebGPU

四、WebGPU Storage Buffers 存储缓冲区

四、WebGPUStorageBuffers存储缓冲区存储缓冲区storagebuffers在许多方面uniformbuffers缓冲区相似。如果我们所做的只是在JavaScript中将UNIFORM改为STORAGE，WGSL中的var改为var，上一节的示例代码同样可以运行并达到同样的效果。实际上，还是有不同之处，不需要将变量重命名为更合适的名称。conststaticUniformBuffe
碳学长·2023-10-11 05:49

WebGPU 入门：绘制一个三角形

今天我们来入门WebGPU，来写一个图形版本的HelloWorld，即绘制一个三角形。WebGPU是什么？
前端西瓜哥·2023-10-03 12:48

2023 Google 开发者大会：Web平台新动向

目录前言一、OpeninWordPressplayground二、WebGPU三、新的核心Web指标INP四、Webview1、CustomTabs2、JavaScriptEngine五、Passkeys
不叫猫先生·2023-09-20 15:31

WebGPU学习（10）---如何利用 WebGPU 实现高性能

虽然是WebGPU，但是速度很慢！？我们将解释如何充分利用WebGPU性能。这次我们以绘制大量物体为例，根据“使用纹理”中的代码进行一些更改并绘制900个立方体。
sky.....·2023-09-17 11:17

webgl与webgpu比较

WebGPU虽然也有一个总管家一样的对象——device，类
sky.....·2023-09-11 13:10

利用现代技术打造基于浏览器的H264/H265极速播放器

webgpu的问世，让浏览器处理图形渲染，滤镜更强大，速度更快，让我们开始探索浏览器播放器的开发，先来一个序章，基于wengpu的渲染，可以实现work线程以及离屏渲染，将硬件加速拉满，你还可以基于这个基础实现进行相关滤镜的开发
superxxd·2023-09-04 05:20

WebGPU学习（8）---使用RenderBundle

RenderBundle是什么通常情况下，WebGPU每次绘制时都需要向RenderPassEncoder注册渲染命令。处理此绘图命令比WebGL内部执行的类似处理更快。
sky.....·2023-09-03 03:00

WebGPU学习（9）---使用Pipeline Overridable Constants

WebGPU和WGSL提供了一个名为“PipelineOverridableConstants”的函数，用于从JavaScript端覆盖着色器常量。
sky.....·2023-09-03 03:56

WebGPU助力客户端Crypto/ZK

1.引言前序博客：CUDA入门WebGPU+ZKP：客户端证明WebGPU入门正如PersonaeLabs团队2022年11月博客EfficientECDSA&thecaseforclient-sideproving
mutourend·2023-09-01 04:58

用WebGPU实现基于物理的渲染

推荐：用NSDT编辑器快速搭建可编程3D场景最近，我花了相当多的时间在WebGPU中使用IBL（基于图像的照明）编写PBR（基于物理的渲染）渲染器。PBR本身并没有什么新奇之处。
新缸中之脑·2023-09-01 02:01

WebGPT VS WebGPU

推荐：使用NSDT编辑器快速搭建3D应用场景随着WebGPU的引入，Web开发发生了有趣的转变，WebGPU是一种新的API，允许Web应用程序直接访问设备的图形处理单元（GPU）。
ygtu2018·2023-08-31 00:01

WebGPU加载Wavefront .OBJ模型文件

在开发布料模拟之前，我想使用WebGPU开发强大的代码基础。这就是为什么我想从Wavefront.OBJ文件加载器开始渲染3D模型。
新缸中之脑·2023-08-30 11:49

WebGPU应用开发快速入门

WebGPU是一种全新的现代API，用于在Web应用程序中访问GPU的功能。在WebGPU之前，有一种WebGL技术，它提供了WebGPU功能的子集。
·2023-08-19 22:28

WebGPU学习（7）---渲染到纹理

渲染到纹理渲染到纹理又称为离屏渲染，这次我们将在纹理上绘制一个红色三角形并将纹理显示在屏幕上。在线代码1.准备纹理和采样器首先，准备将作为渲染目标的纹理。constrenderTargetTexture=g_device.createTexture({size:[512,512,1],usage:GPUTextureUsage.RENDER_ATTACHMENT|GPUTextureUsage.T
sky.....·2023-08-08 17:30

WebGPU入门

1.引言前序博客：CUDA入门WebGPU+ZKP：客户端证明WebGPU——Draft2023.7.17由苹果、谷歌、Mozilla团队发起，当前处于草稿阶段，旨在成为W3C推荐标准。
mutourend·2023-07-29 14:50

WebGPU 编码与原理（2）：绘制立方体

一、绘制立方体2023年4月6日，谷歌宣布在Chrome用户可在113Beta版本中，启用全新的WebGPU图形API，支持硬件图形加速。
碳学长·2023-07-27 17:24

WebGPU 编码与原理（3）：一次完整代码的详细讲解

2023年4月6日，谷歌宣布在Chrome用户可在113Beta版本中，启用全新的WebGPU图形API，支持硬件图形加速。
碳学长·2023-07-27 17:24

WebGPU+ZKP：客户端证明

1.引言Geometry团队近日发布了一个bounty（1500美金）项目：GeometryBounty:WebGPUforZKProving希望借助WebGPU技术，实现在客户端的ZKP证明。
mutourend·2023-07-24 21:20

前端周刊第十期

如果外链不能访问，关注公众号前端每周看，里面有解决办法大事件WebGPU——所有的核心，没有画布——一种暴露GPU硬件功能的API，诚然，默认情况下在任何标准浏览器中都不可用。
四六十·2023-07-21 13:52

WebGPU开发简明教程【2023】

WebGPU是一种全新的现代API，用于在Web应用程序中访问GPU的功能。在WebGPU之前，有WebGL，它提供了WebGPU功能的子集。
新缸中之脑·2023-07-19 19:37

WebGPU实战3D电商

在过去的几年里，我们一直在为WebGPU编写新版本的Babylon.js引擎。随着下一代Web3D即将在Chrome102~103版本上公开WebGPU1.0，人们的兴奋情绪与日俱增。
新缸中之脑·2023-07-14 17:59

WebGPU 正交投影

在上一篇文章中，讨论了矩阵的工作原理。讨论了如何通过1个矩阵和一些神奇的矩阵数学来完成平移、旋转、缩放，甚至从像素到裁剪空间的投影。实现3D操作只需要再向前迈一小步。在之前的2D示例中，将2D点(x,y)乘以3x3矩阵。要实现3D操作，需要3D点(x,y,z)和一个4x4矩阵。以最后一个示例为例，将其更改为3D。我们将再次使用F，但这次是3D“F”。需要做的第一件事是更改顶点着色器以处理3D。这是
xuejianxinokok·2023-06-23 13:32

WebGPU 透视投影

在上一篇文章中，介绍了如何制作3D，但3D没有任何透视效果。它使用的是所谓的“正交”视图，它有其用途，但通常不是人们说“3D”时想要的。现在，需要添加透视图。究竟什么是透视？基本特征就是离得越远的东西显得越小。看看上面的例子，远处的东西被画得更小了。给定我们当前的示例，一种使距离更远的东西看起来更小的简单方法是将剪辑空间X和Y除以Z。Thinkofitthisway:Ifyouhavealinef
xuejianxinokok·2023-06-23 13:59

WebGPU 缩放变换

缩放变换与平移变换一样简单。将顶点位置乘以想要的比例。以下是之前示例中对着色器的更改。structUniforms{color:vec4f,resolution:vec2f,translation:vec2f,rotation:vec2f,scale:vec2f,};structVertex{@location(0)position:vec2f,};structVSOutput{@builtin(
xuejianxinokok·2023-06-21 07:40

WebGPU 矩阵数学

在最近的3篇文章中，介绍了如何平移、旋转和缩放顶点位置。平移、旋转和缩放都被认为是一种变换。这些变换中的每一个都需要对着色器进行修改，并且3个转换中的每一个都依赖于顺序。在之前的示例中，先缩放，然后旋转，最后平移。如果以不同的顺序应用它们，会得到不同的结果。例如，这里的缩放为2,1，旋转30度，平移为(100,0)。这里是先平移（100,0)，再旋转30度和最后缩放2,1结果完全不同。更糟糕的是，
xuejianxinokok·2023-06-21 07:08

AIGC时代下的WebGPU轻量级3D渲染引擎！

1Orillusion引擎WebGPU经过六年的时间，终于在2023年4月6日，由Chrome团队发布。5月2号，在Chrome113版本上，WebGPU被默认启动。
·2023-06-21 02:36

Orillusion正式公测开启，这份指南请收好！

Orillusion开放公测来啦~大家期待的新一代完全开源的轻量级的基于WebGPU标准的渲染引擎终于要闪亮登场啦！
·2023-06-21 02:03

谷歌 Chrome 正式发布 WebGPU！Orillusion开源倒计时！

谷歌Chrome团队正式宣布，Chrome用户可在113Beta版本中，启用全新的WebGPU图形API，支持硬件图形加速。WebGPU是一种新的网络标准和指令集，用于硬件加速图形和计算。
·2023-06-21 02:03

尝试 WebGPU 过程中掉的一些坑

需要参考,建议看WebGPUSamples:https://webgpu.github.io/webgpu-samples/samples/computeBoidsbuffer编码对齐问题uniformbuffer
·2023-06-21 02:59

webgpu

这里写目录标题什么是webgpuwebgpu当前现状webgpu未来的发展趋势什么是webgpuWebGPU是下一代Web上的图形标准。
李卓书·2023-06-18 07:47

关于webGpu的 Label 层的设计

一、现有Label设计image2021-9-26_13-58-5.png常用术语：Label：标签Panel：面板Anchor：锚点Billboard：3d中始终面向屏幕的公告牌此处的Label，本质是一个UIBinder(targetElementId,UIContent,extraProps)，希望用于创建始终面向屏幕的UI信息看板绑定UI后，UI会有两种渲染存在的形式，1.canvas内渲
Yong_bcf4·2023-06-17 10:12

webgpu之旅04

继续继续319854902319854902319854902319854902webgpu交Q流群首先准备好绘制到屏幕所需的这个descriptorifrendertargetthis.
DBBH·2023-06-17 07:55

学习笔记 | Orillusion-WebGPU小白入门（二）

（二）绘制三角形/src/basicTriangle.tsWebGPU架构&原理初始化Device：获取Adapter和Device对象在Html页面中添加Canvas画布，用CSS占满全屏canvas{width:100%;height:100%;}type="module"scr="/src/basicTriangle.ts"asyncfunctioninitwebgpu(){if(!navi
肥宅Davina·2023-06-16 13:53

学习笔记 | Orillusion-WebGPU小白入门（六）

GPU如何匹配平面坐标和图片的像素位置贴图的坐标系：与NDC坐标一样，WebGPU或者现代图形API也规范了一套贴图的坐标系，用来描述贴图的大小和位置信息。
肥宅Davina·2023-06-16 13:53

学习笔记 | Orillusion-WebGPU小白入门（一）

（一）简介&开发配置开发需求开发工具ChromeVSCodeVite开发语言JavaScriptHTML/CSSTypeScriptWGSL系统环境CMD/TerminalNode.jsnpmGit下载打开Orillusion开发模板在VSCode新建Terminal#克隆Orillusion的GitHub库到本地gitclonehttps://github.com/Orillusion/oril
肥宅Davina·2023-06-16 13:53

Orillusion次时代 WebGPU 引擎

Orillusion次时代WebGPU引擎官网:https://www.orillusion.com/教程:https://www.orillusion.com/guide/Orillusion引擎是一款完全支持
chen_227·2023-06-16 13:52

Orillusion | 第一个WebGPU中文社区

2021年，科技界发生了哪些重大的变化？随着AR/VR等技术的发展，元宇宙（Metaverse）的概念在这个灰暗的疫情时代，瞬间爆发了，它满足了人们对社交和娱乐的向往，满足了虚拟世界和现实世界的融合。《失控玩家》剧照元宇宙并不是一个具体的场景或者技术，它被广泛定义为下一代互联网的形态。这其中需要很多技术的支撑才能得以顺利发展和实现，比如区块链，人工智能，云计算，5G通信，VR/AR，人机交互技术等
Orillusion·2023-06-16 13:52

WebGPU 旋转变换

单位圆是半径为1.0的圆。下图是一个单位圆。[注释1]在上图中，当围绕圆拖动蓝色手柄时，X和Y位置会发生变化，代表该点在圆上的位置。且在顶部，Y为1，X为0。在右侧，X为1，Y为0。如果你还记得三年级的基础数学，将某个东西乘以1，它会保持不变。所以123*1=123。很基础，对吧？好吧，一个单位圆，一个半径为1.0的圆也是1的一种形式。它是一个旋转的1。所以可以用这个单位圆乘以一些东西，在某种程度
xuejianxinokok·2023-06-14 17:32

AIGC时代下的WebGPU轻量级3D渲染引擎！

1Orillusion引擎WebGPU经过六年的时间，终于在2023年4月6日，由Chrome团队发布。5月2号，在Chrome113版本上，WebGPU被默认启动。
·2023-06-14 16:43

WebGPU入门教程:您的第一个 WebGPU 应用

目录1.简介什么是WebGPU？现代API渲染计算构建内容学习内容所需条件2.进行设置获取代码使用开发者控制台！
xuejianxinokok·2023-06-13 14:49

WebGPU 是如何工作的

让我们通过JavaScript来模拟WebGPU的实现，来尝试解释GPU如何使用顶点着色器和片段着色器。这样会对对真正发生的事情有一个直观的感受。
xuejianxinokok·2023-06-13 14:19

WebGPU NDC 标准设备坐标系

看了挺长时间的WebGPU了，会开始记录一些散点的问题。今天先来讨论一个问题WebGPU的标准设备坐标（NormalizedDeviceCoordinate）是什么样的。
Webglzhang·2023-06-13 14:48

WebGPU你让我等的好辛苦啊

WebGPU的设计目标是提供与现代图形API（如Vulkan和DirectX12）类似的功能和性能，并且跨平台、可移植。它旨在解决现有Web图形API（如WebGL）的一些限制和性能瓶颈，并提供更
MFineToo·2023-06-13 14:17

学习笔记 | Orillusion-WebGPU小白入门（四）

3D矩阵变换理论介绍标准设备坐标3D空间转换为2D图形的过程模型变换矩阵计算齐次坐标Vertexshader的裁剪空间又称为齐次空间正交投影、透视投影正视图、后视图视锥从前发散、从后发散投影矩阵显示一个完整的3D图形经过的步骤以坐标为原点，建立整个图形的顶点坐标信息利用矩阵变换，将一个图形在世界空间坐标中进行坐标变换利用投影矩阵，用摄像机和视锥模拟不同视角将裁剪空间进行统一的归一化处理，抛弃NDC
肥宅Davina·2023-06-13 14:16

WebGPU 平移变换

我们将开始编写与顶点缓冲区文章中的示例类似的代码，但这次将绘制单个F而不是一堆圆，并使用索引缓冲区来保持数据更小。让我们在像素空间而不是裁剪空间中工作，就像Canvas2DAPI我们将制作一个F，将从6个三角形构建它这是F的数据functioncreateFVertices(){constvertexData=newFloat32Array([//leftcolumn0,0,//030,0,//1
xuejianxinokok·2023-06-13 14:16

WebGPU 将图像导入纹理

我们在上一篇文章中介绍了有关使用纹理的一些基础知识。在本文中，我们将介绍从图像导入纹理。在上一篇文章中，通过调用device.createTexture创建了一个纹理，然后通过调用device.queue.writeTexture将数据放入纹理中。device.queue上还有另一个名为device.queue.copyExternalImageToTexture的函数，可以将图像复制到纹理中。它
xuejianxinokok·2023-06-12 16:49

WebGPU 纹理(Textures )

在本文中，我们将介绍纹理的基础知识。在之前的文章中，我们介绍了将数据传递到着色器的主要方法，它们是inter-stagevariables,uniforms,storage-buffers,andvertex-buffers。将数据传递到着色器的最后一种主要方式是纹理。纹理通常表示二维图像。二维图像只是颜色值的二维数组，因此您可能想知道，为什么需要二维数组的纹理？可以将存储缓冲区用作二维数组。纹理
xuejianxinokok·2023-06-12 16:47

GEngine一个基于WebGPU的渲染引擎

一、废话篇：2019年时候就有写一个渲染引擎想法，一直到现在才真正意义上算给实现了当初的想法，写了好几个月了和小伙伴这才有个初版（虽然里面还有一堆bug哈，没时间改啊）。说在前面GEngine借鉴了其他渲染引擎思路与代码（毕竟要站在巨人肩膀上，别在那说你就是抄别人代码，我就抄了咋了气死你，有本事你也抄，不接受反驳），你要让我说GEngine的优势是啥？好像也没啥优势哈哈，写的稍微比较全外带纯wgs
hpugisers·2023-06-09 22:06

AIGC 时代下的 WebGPU 轻量级 3D 渲染引擎！

Orillusion引擎WebGPU经过六年的时间，终于在2023年4月6日，由Chrome团队发布。5月2号，在Chrome113版本上，WebGPU被默认启动。
·2023-06-07 12:41

WebGPU 存储缓冲区 （WebGPU Storage Buffers）

这篇文章是关于存储缓冲区的，我们从上一篇文章暂停的地方继续。存储缓冲区在许多方面类似于统一缓冲区。如果我们所做的只是将JavaScript中的UNIFORM更改为STORAGE并将WGSL中的var更改为var，那么上一页中的示例就可以正常工作。其实区别就在这里，不用重命名变量就可以有更合适的名字。conststaticUniformBuffer=device.createBuffer({labe
xuejianxinokok·2023-06-07 05:24
上一页 1 2 3 4 5 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他