体验WebGPU

已于 2022-04-07 15:49:19 修改
阅读量1.9k 收藏 1
点赞数 2
分类专栏： webGpu
于 2022-04-07 15:48:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41496591/article/details/124018615
版权

WebGPU ThreeJS BabylonJS 图形渲染 Chrome Canary
关键词由CSDN通过智能技术生成

目前Chrome正式版没有开启WebGPU，
我们需要下载金丝雀版本：
https://www.google.com/chrome/canary/

然后输入 chrome://flags/，找到 #enable-unsafe-webgpu 并打开

目前three.js和babylon等主流Web库都已支持WebGPU，可以查看一下Demo:

ThreeJS: https://threejs.org/examples/?q=webgpu#webgpu_compute

BabylonJS: https://playground.babylonjs.com/ 右上角选择 webgpu

学习实例：https://austin-eng.com/webgpu-samples/samples/helloTriangle

文章搜集：https://github.com/mikbry/awesome-webgpu

蔡徐鲲
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
WebGPU新手入门(一): 零基础创建第一个WebGPU项目
Orillusion的博客
03-08 3838
快来制作你的第一个WebGPU图形吧！
了不起的Chrome浏览器（6）：Chrome 94开始WebGPU试用，Web的图像渲染及机器学能力更强了
Fundebug博客
09-28 1956
9月21日正式发布的Chrome 94，带来了哪些有意思的新特性呢？ 背景 十多年来，Web技术突飞猛进，其中Chrome功不可没，了解Chrome可以帮助我们理解前端行业的发展趋势。 因此，我将以《了不起的Chrome浏览器》为题，对Chrome的每一个版本的重要特性进行详细解读，同时分享一些自己的一些思考： 了不起的Chrome浏览器（1）：Chrome 89开启Web应用的物联网时代 了不起的Chrome浏览器（2）：Chrome 90将默认使用HTTPS，Web更安全了 了不起的Chrome浏览器
THREE.WebGPURenderer：实验Three.js WebGPU渲染器
02-01
然后我可能会停止更新此项目，而改为为Three.js官方做出贡献。 三.WebGPU渲染器 实验Three.js WebGPU渲染器 / 通过Chrome Canary上的chrome：// flags打开＃enable-unsafe-webgpu进行演示。 链接
three.js加载webGPU的实例走起来
08-01
1. three.js当前版本对WebGPU支持 2. 开始跟我一起分析、解决问题。 3. 具体看一下官方示例。 4. 首先，下载chrome 金丝雀版本 并且打开chrome://flags/，搜索webgpu，启用unsafewebgpu选项。 5. 去github下载最新代码。直接查找webgpu功能页面。右键浏览。使用chrome金丝雀浏览器打开。
three.js官方案例webgpu_reflection.html学习记录
hemiaoyuan1989的专栏
07-12 1811
默认值是THREE.ClampToEdgeWrapping，即纹理边缘将被推到外部边缘的纹素。请注意：纹理中图像的平铺，仅有当图像大小（以像素为单位）为2的幂（2、4、8、16、32、64、128、256、512、1024、2048、……宽度、高度无需相等，但每个维度的长度必须都是2的幂。使用RepeatWrapping，纹理将简单地重复到无穷大 使用MirroredRepeatWrapping， 纹理将重复到无穷大，在每次重复时。如果在材质已使用纹理后更改了颜色空间类型， 您需要将。
WebGPU实战3D电商
新缸中之脑
07-12 865
在过去的几年里，我们一直在为 WebGPU 编写新版本的 Babylon.js 引擎。随着下一代 Web 3D 即将在Chrome 102~103版本上公开WebGPU 1.0 ，人们的兴奋情绪与日俱增。在这篇博文中，我将快速概述这个新的 Babylon.js WebGPU 引擎，并将研究它可以为 Web 上的 3D 商务体验带来的一些性能改进。推荐：用快速搭建可编程3D场景。
threejs使用webgpu加载glb模型，小车模型沿路径运行
weixin_61434483的博客
05-17 453
浏览器需要开启硬件加速通道。
谷歌浏览器安装包，支持webGPU
05-26
在安装这个支持WebGPU的谷歌浏览器版本时，用户将能体验到更快的网页加载速度，更生动的图形效果，以及可能的新的Web应用类型。例如，实时3D建模工具、虚拟现实内容、高级数据可视化和AI驱动的网页服务都可能受益于...
:smiling_face_with_sunglasses:围绕WebGPU生态系统的令人敬畏的事物列表。- mikbry / awesome-webgpu
01-27
随着WebGPU生态系统的不断发展和完善，我们可以期待更多创新的Web应用出现，改变我们对网页交互和体验的认知。 总的来说，WebGPU为Web开发者开启了一个新的领域，带来了更强大的图形和计算能力，使得Web应用可以更...
完全在你的浏览器里用WebGPU和像Vicuna这样的LLM聊天，安全、私密，没有服务器。由web llm提供支持.zip
03-02
WebGPU和LLM（可能指的是Logical Language Model）是现代Web开发中的两个重要概念，它们结合在一起，为用户提供了一种全新的、安全且私密的在线聊天体验。在这个场景中，我们看到的是一个基于JavaScript的实现，它...
threejs性能优化与GPU优化.md
10-19
threejs性能优化与GPU优化
Threejs中的WebGPU实践（1-1）
08-19 1144
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123对于一直关注 Three.js 的最新发展的人来说，经常会发现陷入了的未知领域，因为直到现在也没有一些官方的思维导图。事实上，虽然 Three.js 的 WebGPURenderer 能够满足大多数项目要求，但在技术上仍处于未完成的状态，许多其他功能仍处于不断改进、重新开发的过程中。
Threejs中的WebGPU实践（1-2）
最新发布
08-19 756
更多精彩内容尽在 dt.sim3d.cn ，关注公众号【sky的数孪技术】，技术交流、源码下载请添加VX：digital_twin123此处接上文：Threejs中的WebGPU实践（1-1）
欢迎来到WebGPU的世界
lusing的专栏
04-11 5349
欢迎来到WebGPU的世界 WebGPU是一门神奇的技术，在浏览器支持率0%，标准还没有定稿的情况下，就已经被Three.js和Babylon.js等主流3D和游戏框架支持了。而且被Tensorflow.js用来加速手机端的深度学习，比起WebGL能带来20～30倍的显著提升。 在主流框架中WebGPU的例子 在Three.js中使用WebGPU 使用Three.js的封装，我们可以直接生成WebGPU的调用。 我们照猫画虎引入WebGPU相关的库： import * as THREE from
OpenGL，webGL，webGPU，three,js，来，把这些概念扫荡一下。
2401_82881178的博客
04-17 1545
其实标题中的概念都是和web3D相关的，咱们平时浏览的网页基本都是二维的，一些数字孪生或者网页3D游戏，都是三维形式，或多或少和上面的概念有点关联。
WebGPU快速入门教程
u014291990的博客
06-15 3503
webgpu快如入门，绘制第一个三角形函数，无需配置，html文件复制代码就可以打开查看效果
webGL、webGPU、封装、渲染引擎 three.js、游戏引擎，定位是游戏开发，在前面的渲染引擎基础上，还提供了骨骼动画、物理引擎、AI、GUI 等功能，以及可视化编辑器来设计关卡，支撑大型游戏
weixin_35597398的博客
08-04 3323
https://zhuanlan.zhihu.com/p/162878354
模型矩阵(three.js、webgl、webgpu)
u014291990的博客
12-28 561
这就是告诉大家，矩阵的乘法运算，不满足交换律，矩阵顺序，不能随意设置，先发生的平移矩阵，放在后面，后发生的缩放矩阵放在前面，或者说，先发生的平移矩阵，更靠近顶点的齐次坐标。假设一个顶点原始坐标(2,0,0),先沿着x轴平移2，变为(4,0,0)，再x轴方向缩放10倍，最终坐标是(40,0,0)。把上面缩放矩阵和平移矩阵的顺序调换，重新计算结果，你会发现，和上面计算的模型矩阵不同，变换后坐标也不是(40,0,0),而是(22,0,0)。你可以发现上面同样的平移和缩放，顺序不同，变换后的顶点坐标也不相同。
WebGPU和threejs有啥区别
05-11
WebGPU是一种新的图形API，旨在提供更高效、更可靠的图形渲染体验。它是跨浏览器的，可以在多种平台上运行，包括桌面和移动设备。WebGPU具有更低的CPU开销、更高的渲染性能、更好的多线程支持、更高的安全性和更好的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值