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

最新推荐文章于 2024-05-10 12:02:06 发布

肥宅Davina

最新推荐文章于 2024-05-10 12:02:06 发布

阅读量782

点赞数

分类专栏： WebGPU学习笔记文章标签：学习 javascript

本文链接：https://blog.csdn.net/m0_51146371/article/details/126901752

版权

本文档介绍了WebGPU的基础知识，包括开发需求、开发环境配置，以及如何使用Orillusion框架。通过VSCode和Vite进行项目设置，利用JavaScript和WGSL编写代码，并指导如何判断WebGPU是否可用，以及处理异步API。

摘要由CSDN通过智能技术生成

（一）简介&开发配置

开发需求

开发工具

Chrome
VSCode
Vite

开发语言

JavaScript
HTML/CSS
TypeScript
WGSL

系统环境

CMD/Terminal
Node.js
npm
Git

下载打开Orillusion开发模板

在VSCode新建Terminal

#克隆Orillusion的GitHub库到本地
git clone https://github.com/Orillusion/orillusion-webgpu-samples

#进入地址
cd orillusion-webgpu-samples

#Node.js命令：下载（需要事先安装Node.js）
npm install

npm run dev

Local:http://localhost:3000/

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

肥宅Davina

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

LVGL v8学习笔记 | 05 - LVGL基础对象

Mculover666的博客（嵌入式）

03-20

4228

一、lvgl对象 1. 基础对象（lv_obj_t）在lvgl中，任何控件都是一个对象。这些控件都继承自lvgl基础对象类，换句话说，lvgl基础类描述了所有控件共有的属性和方法，称之为lv_obj_t。 lv_obj_t类定义在文件lvgl\src\core\lv_obj.h文件中，定义如下： typedef struct _lv_obj_t { const lv_obj_class_t * class_p; struct _lv_obj_t * parent; _lv_obj_

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

肥宅Davina的博客

09-23

529

Vertex shader中主要就是这三个关键点。核心就是将mvp矩阵拆分开进行传入，用modelView来分别计算顶点和normal在变换后的世界坐标，其他的变量我们正常输出即可。

参与评论您还未登录，请先登录后发表或查看评论

webgpu学习笔记

m0_72410588的博客

05-17

244

作为Web平台上的新型图形渲染API，WebGPU具有很多优势和应用场景。了解WebGPU的基础知识和开发工具，可以帮助开发者更好地掌握WebGPU的原理和应用方法，进而快速上手开发WebGPU应用。

WebGPU学习笔记

为人类进化与传承而奋斗！

04-14

581

webapp --> dawnWire(IPC) --> Dawn Native --> OS API 初始化WebGPU(request adapter --> request device --> config context) --> 配置GPU管线() --> 录制Command队列()

Orillusion荣获SegmentFault AIGC Hackathon 2023 线上黑客马拉松赛二等奖&最佳创意奖

Orillusion的博客

04-23

242

https://my.oschina.net/u/5567858/blog/8682859

Orillusion | 第一个WebGPU中文社区

Orillusion的博客

12-28

1377

Orillusion团队，2021年9月成立，集合图形学、引擎开发、WebGPU应用等各领域的大牛，目标打造WebGPU渲染引擎的开源社区

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

肥宅Davina的博客

09-21

975

实际操作过程中，如果原始图像分辨率足够，一般无论使用哪种方法进行缩小的操作，肉眼都很难看出区别，但如果是放大的话效果就比较明显了。临近采样会在边缘呈现非常明显的锯齿感（马赛克效果），而线性采样边缘过渡比较平滑，但也在一定程度上造成了边缘模糊的情况。两者的最终效果不一定谁好谁劣，只是适用的内容不同。一般地，临近采样更适合边缘分割明显，颜色区域少的图像。而颜色丰富，过度较多的图，用线性采样的效果更好。社区中有很多采样优化算法，但考虑到GPU的运行效率问题，主流图形API中只内置了这两种方法。

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

肥宅Davina的博客

09-17

989

Orillusion官方WebGPU小白入门系列课程学习笔记

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

肥宅Davina的博客

09-17

660

Orillusion官方WebGPU小白入门系列课程学习笔记

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

肥宅Davina的博客

09-19

495

instance draw（demo5）：最大的优点是渲染管线的效率非常高，能最大限度地利用GPU的并行能力。对于资源的管理本质上是将group和buffer的切换放到了GPU / Shader里来做。JS中省去了创建多个buffer或group，内存上也没有多余的offset的需求。从buffer的读取性能来说，demo2和demo3虽然也是连续的buffer，但因为要对齐256个字节，其实每次指针切换实际上至少要移动256个字节。

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

肥宅Davina的博客

09-18

597

Vertex shader的裁剪空间又称为齐次空间以坐标为原点，建立整个图形的顶点坐标信息利用矩阵变换，将一个图形在世界空间坐标中进行坐标变换利用投影矩阵，用摄像机和视锥模拟不同视角将裁剪空间进行统一的归一化处理，抛弃NDC空间之外的图形把整个NDC空间通过内部的视图变换，得到二维平面结果最后的两步是由GPU驱动自动完成，不需要开发者的参与。我们需要考虑的主要是（第三步）在Vertex Shader中返回裁剪空间的计算结果。前两步主要是在用户的逻辑代码中进行的。

浅入浅出WebGPU

音视频开发进阶

01-17

601

一、什么是WebGPU1.1 WebGL的恩怨情仇先跟大家分享一波科技圈的八卦，感受一下WebGL是多么的不容易吧。OpenGL由Khronos Group组织在1992年的时候推出，距离...

WebGPU-6

caxieyou的专栏

07-14

590

再来看看第三个例子，textured_cube

webgpu 从入门到精通第一章

yyh231366的博客

12-07

1546

很多人都在问什么是webgpu,其实我也很好奇,这玩意,是什么,这玩意其实教程很少,然后经过一系列的学习,大概总结出一些东西,我们先看一下历史:WebGPU是一套基于浏览器的图形API，浏览器封装了现代图形API（Dx12、Vulkan、Metal），提供给Web 3D程序员，为 Web释放了更多的GPU 硬件的功能。有人给出了一句专业的一句这样的语言,但是好像听着有点迷糊是gpu一般指图形处理器。图形处理器（英语：graphics processing unit，缩写：GPU），又称显示核心、视觉处理器

版本更新丨Orillusion 0.7版本发布啦！

Orillusion的博客

02-12

873

Orillusion 0.7版本发布

Orillusion引擎开源一周，荣登Github Trending榜单

Orillusion的博客

05-14

274

Orillusion引擎于5月8日正式开源，短短一周荣登Github Trending第六名！

15个值得收藏的开源项目推荐