WebGPU小白入门（二）：绘制简单三角形——3.创建渲染管线

Orillusion开发者社区 2022-08-25 12:45:35

为了让大家更好的理解和使用即将开源的WebGPU引擎，Orillusion的工程师们为大家准备了一系列的WebGPU课程！

WebGPU小白入门（一）介绍了如何用Vite零基础创建一个WebGPU的项目，以及WebGPU和WebGL的发展过程，以及如何运用async/await处理WebGPU API中的异步函数，收到了同学们的热烈欢迎！

本期视频干货满满，以最详细的步骤，教你如何绘制一个WebGPU三角形，并且掌握WebGPU 在浏览器中运行的架构，了解整个 WebGPU 绘制的基本流程，初始化device，创建渲染管线，录制渲染通道。每一步中都对应一些常用的API。

如何请求 adapter？如何请求 device ？如何去配置一个 canvas？

小小的三角形，大大的知识体系，赶快学起来吧！

https://www.bilibili.com/video/BV1ma41147s6/?vd_source=1fa2fb264a953f5311ffb73685c06d7f

...全文

394 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

CSDN-Ada助手 2023-01-13

打赏
举报

您可以前往 CSDN问答-前沿技术发布问题, 以便更快地解决您的疑问

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

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

内容概要：本文详细介绍了一个基于ESP32-CAM的智能门禁系统的设计与实现，涵盖系统总体架构、硬件选型、电路设计、软件开发环境搭建、核心代码实现（包括人脸识别算法、Web服务器与远程控制）、系统安全加固、监控与维护等多个方面。系统采用边缘计算模式，在ESP32设备端完成人脸特征提取与比对，实现了本地人脸识别与Web远程控制相结合的功能。通过FreeRTOS多任务调度机制，确保了系统的高效响应。此外，还提供了完整的系统部署与维护指南，包括硬件搭建、软件部署、故障排查、自动备份、更新与监控等。适合人群：具备一定嵌入式系统开发经验的工程师、物联网爱好者以及从事智能安防产品开发的技术人员。使用场景及目标：①应用于家庭、办公室等场所的安全门禁管理；②作为教学案例帮助学生理解嵌入式系统、物联网、机器学习在边缘设备上的综合应用；③为开发者提供一个完整的从硬件到软件再到运维的全栈式项目参考。阅读建议：建议读者结合实际硬件平台动手实践，逐步完成各模块的搭建与调试。重点关注人脸识别算法的实现细节、Web服务器与前端交互逻辑、系统安全性设计及自动化运维脚本的应用，以全面提升对智能物联网系统的理解和开发能力。

智能知识管理平台数据库初始化sql文件

将 Markdown 知识库自动转化为知乎回答并发布。支持 Claude Code 和 OpenClaw，全自动闭环：热点搜索 → 知识库匹配 → AI 撰写 → 发布 → 质量审核 → 回存

Orillusion-3D引擎开源社区

社区成员

社区内容

发帖

与我相关

我的任务

前端开源企业社区北京·朝阳区

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

欢迎大家加入Orillusion开发者社群，陪我们一起见证WebGPU的发展~

未来我们将会持续把最干货最前沿的WebGPU技术分享给每一位社区成员，也欢迎大家为Orillusion开源社区做出自己的贡献，分享自己的想法和经验。我们一直坚信，开源社区的技术留痕是每一位技术人员最崇高的追求！快来成为Orillusion社区第一批“源”住民吧！让一起打造有价值、有活力、有温度的共创社区！

国内外最前沿干货的WebGPU相关技术知识
详细的教程文档，帮助大家快速详尽地熟悉引擎
丰富的案例，让大家有更加直观的学习体验，可以迅速复制或者改造出自己需要的应用和场景
参与线下或线上开发者活动，大家互相分享学习
官方教学课程，会陆续上线针对不同人群定位的视频教程，B站推出的WebGPU小白课程已经上线九期，欢迎大家观看学习

更多渠道，欢迎关注加入~

官网：https://www.orillusion.com/

微信公众号：Orillusion

Github地址：https://github.com/Orillusion/orillusion-web

B站：https://b23.tv/zMCJqAd

试试用AI创作助手写篇文章吧

+ 用AI写文章