WebGL 与 WebGPU比对[4] - Uniform

目录 1. WebGL 1.0 Uniform 1.1. 用 WebGLUniformLocation 寻址 1.2. 矩阵赋值用 uniformMatrix[234]fv 1.3. 标量与向量用 uniform[1234][fi][v] 1.4. 传递纹理 2. WebGL 2.0 Uniform 2.1. 标量/向量/矩阵传值方法扩充 2.1. 什么是 UniformBlock 与 UniformBuffer 的创建 2.2. 状态绑定 2.3. 着色器中的 Uniform 2.4. 传递纹…

WebGL 与 WebGPU 比对[1] 前奏

目录 1 为什么是 WebGPU 而不是 WebGL 3.0 显卡驱动图形 API 的简单年表 WebGL 能运行在各个浏览器的原因 WebGPU 的名称由来 2 与 WebGL 比较编码风格 OpenGL 的编码风格 CPU 负载问题 WebGPU 的装配式编码风格厨子戏法 3 多线程与强大的通用计算(GPGPU)能力 WebWorker 多线程通用计算(GPGPU) 4 浏览器的实现 5 未来参考资料这篇讲讲历史,不太适合直奔主题的朋友们. 1 为什么是 WebGPU 而不是 We…

WebGL 与 WebGPU比对[5] - 渲染计算的过程

目录 1. WebGL 1.1. 使用 WebGLProgram 表示一个计算过程 1.2. WebGL 没有通道 API 2. WebGPU 2.1. 使用 Pipeline 组装管线中各个阶段 2.2. 使用 PassEncoder 调度管线内的行为 2.3. 使用 CommandEncoder 编码多个通道 2.4. PassEncoder 和 Pipeline 的关系 3. 总结前两篇文章介绍了 WebGL 和 WebGPU 是如何准备顶点和数字型 Uniform 数据的(纹理留到下一…

WebGL 与 WebGPU比对[6] - 纹理

目录 1. WebGL 中的纹理 1.1. 创建二维纹理与设置采样参数 1.2. 纹理数据写入与拷贝 1.3. 着色器中的纹理 1.4. 纹理对象 vs 渲染缓冲对象 1.5. 立方体六面纹理 1.6. WebGL 2.0 的变化 1.7. Mipmapping 技术 2. WebGPU 中的纹理 2.1. GPUTexture 的创建 2.2. 纹理数据写入与拷贝 2.3. 纹理视图 2.4. 着色器中的纹理与采样器 2.5. WebGPU 中的 Mipmapping 3. 纹理压缩编码算法…

WebGPU性能测试分析

大家好,本文对WebGPU进行性能测试和分析,目的是为了对比WebGL和WebGPU在"渲染"和"计算"两个维度的性能差异,具体表现为CPU性能和FPS性能两个方面的性能数据差异. 我们会分别在苹果笔记本和配备RTX显卡的台式机上,对WebGL和WebGPU分别进行性能测试. 本文对于WebGPU使用了"reuse render command buffer"和"dynamic uniform buffer offset"两种…

WebGPU 计算管线、计算着色器（通用计算）入门案例：2D 物理模拟

目录 1. WebGL 2. WebGPU 2.1. 适配器(Adapter)和设备(Device) 2.2. 着色器(Shaders) 2.3. 管线(Pipeline) 2.4. 并行(Parallelism) 2.5. 工作组(Workgroup) 2.6. 指令(Command) 3. 数据交换 3.1. 绑定组的布局(GPUBindGroupLayout) 3.2. 暂存缓冲区(Staging Buffer) 3.3. 过度调度 3.4. 麻烦的结构体(内存地址对齐问题) 3.5. 输…

webgl变换：深入图形平移

在以前的文章里,不管是绘制图形,绘制点亦或者是改变色值,所有的内容都是静态的. 在 webgl 里,图形的运动分为平移.旋转.缩放三种类型. 接下来,我们会从零基础开始,一点一点来深入了解图形如何进行运动. 首先来从零开始了解下图形的平移 1. 图形平移首先我们来看如何实现图形的平移操作. 平移的操作就是将图形的原始坐标加上对应的移动距离.首先来看下平移的实现 const vertexShaderSource = "" + "attribute vec4 apos;&q…

WebGPU | 相关知识概述

首先看下WebGPU的目标: 同时支持实时屏幕渲染和离屏渲染. 使通用计算能够在 GPU 上高效执行. 支持针对各种原生 GPU API 的实现:Microsoft 的 D3D12.Apple 的 Metal 和 Khronos 的 Vulkan. 提供一种人类可创作的语言来指定在 GPU 上运行的计算. 可在浏览器的多进程架构中实现,维护Web的安全性. 尽可能让应用程序在不同的用户系统和浏览器之间可移植地工作. 以有用但范围仔细的方式与 Web 平台的其余部分交互(基本上以一种或另一种方式共…

WebGPU 中消失的 VAO

1 VAO 是 OpenGL 技术中提出来的参考: 外链其中有一段文字记录了 VAO 是什么: A Vertex Array Object (VAO) is an object which contains one or more Vertex Buffer Objects and is designed to store the information for a complete rendered object. In our example this is a diamond cons…

WebGPU 中消失的 FBO 和 RBO

目录 1 WebGL 中的 FBO 与 RBO 1.1 帧缓冲对象(FramebufferObject) 1.2 颜色附件与深度模板附件的真正载体 1.3 FBO/RBO/WebGLTexture 相关方法收集 2 WebGPU 中的对等概念 2.1 渲染通道编码器(GPURenderPassEncoder)承担 FBO 的职能 2.2 多目标渲染 2.3 深度附件与模板附件 2.4 非 canvas 的纹理对象作为两种附件的注意点 3 读取数据 3.1 从 FBO 中读像素值 3.2 WebG…

WebGPU学习（十一）：学习两个优化：“reuse render command buffer”和“dynamic uniform buffer offset”

大家好,本文介绍了"reuse render command buffer"和"dynamic uniform buffer offset"这两个优化,以及Chrome->webgpu-samplers->animometer示例对它们进行的benchmark性能测试. 上一篇博文: WebGPU学习(十):介绍"GPU实现粒子效果" 学习优化:reuse render command buffer 提出问题每一帧经过下面的步骤进行…

WebGPU学习（二）: 学习“绘制一个三角形”示例

大家好,本文学习Chrome->webgl-samplers->helloTriangle示例. 准备Sample代码克隆webgl-samplers Github Repo到本地. (备注:当前的version为0.0.2) 实际的sample代码在src/examples/文件夹中,是typescript代码写的: 学习helloTriangle.ts 打开helloTriangle.ts文件,我们来看下init函数的内容. 首先是shader代码 const vertexShaderG…

WebGPU学习（五）: 现代图形API技术要点和WebGPU支持情况调研

大家好,本文整理了现代图形API的技术要点,重点研究了并行和GPU Driven Render Pipeline相关的知识点,调查了WebGPU的相关支持情况. 另外,本文对实时光线追踪也进行了简要的分析.这是我非常感兴趣的技术方向,也是图形学的发展方向之一.本系列后续文章会围绕这个方向进行更多的研究和实现相关的Demo. 上一篇博文: WebGPU学习(四):Alpha To Coverage 本文内容前置知识技术要点并行 Multiple Queues 同步多线程内存管理延迟渲染…

WebGPU学习（六）：学习“rotatingCube”示例

大家好,本文学习Chrome->webgpu-samplers->rotatingCube示例. 上一篇博文: WebGPU学习(五): 现代图形API技术要点和WebGPU支持情况调研学习rotatingCube.ts 我们已经学习了"绘制三角形"的示例,与它相比,本示例增加了以下的内容: 增加一个uniform buffer object(简称为ubo),用于传输model矩阵view矩阵projection矩阵的结果矩阵(简称为mvp矩阵),并在每帧被更新设置顶点…

如何用WebGPU流畅渲染百万级2D物体？

大家好~本文使用WebGPU和光线追踪算法,从0开始实现和逐步优化Demo,展示了从渲染500个2D物体都吃力到流畅渲染4百万个2D物体的优化过程和思路目录需求成果 1.选择渲染的算法 2.实现内存需求 3.渲染1个圆环 4.测试渲染极限 5.尝试设置workgroup_size 6.实现BVH 7.测试渲染极限 8.设置workgroup_size 9.测试内存占用 10.使用LBVH算法来构造BVH 11.实现剔除 12.改进遍历BVH 13.测试渲染极限总结后续的改进方向参考资…

WebGL入门教程(五)-webgl纹理

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL入门教程(三)-webgl动画 WebGL入门教程(四)-webgl颜色这里就需要用到纹理映射,他就是将一张真实图片贴到一个几何图像表面. 纹理图像:映射的这个图像称为纹理图像: 纹素:组成纹理图像的像素称为纹素: 纹理坐标:是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹素颜色: 效果图: 操作步骤: 1.创建HTML5 canvas 2.获取画布 canvas 的 ID 3…

WebGL入门教程(三)-webgl动画

前面文章: WebGL入门教程(一)-初识webgl WebGL入门教程(二)-webgl绘制三角形 WebGL动画有移动.旋转和缩放,我们将移动.旋转和缩放图形,然后将其绘制到屏幕上,称为变换(transformations)或者仿射变换(affine transformations). 1.移动效果图: 1.1在WebGL入门教程(二)-webgl绘制三角形的基础上进行修改,原理就是,三个顶点的坐标(x,y,z)同时发生了变化,重新计算三个坐标值: //顶点着色器程序 var VSHADE…

突袭HTML5之WebGL 3D概述

WebGL开启了网页3D渲染的新时代,它允许在canvas中直接渲染3D的内容,而不借助任何插件.WebGL同canvas 2D的API一样,都是通过脚本操纵对象,所以步骤也是基本相似:准备工作上下文,准备数据,在canvas中绘制对象并渲染.与2D不同的就是3D涉及的知识更多了,例如世界.光线.纹理.相机.矩阵等专业知识.WebGL有一个很好的中文教程,就是下面使用参考中的第一个链接,所以这里不再班门弄斧,后面的内容只是简单的总结一下学习的内容. 浏览器的支持由于微软有自己的图形发展计划,一…

Web3D编程入门总结——WebGL与Three.js基础介绍

/*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结.*/ /*第一部分,webgl与three.js基础介绍,要求读者掌握JavaScript入门知识*/ //webgl原理:通过JavaScript语言在浏览器端生成glsl代码,把glsl代码送入显卡执行,把执行结果显示在浏览器中 //简单例程: //根据Tony Parisi著…

这是html5中WebGL的演示

这是html5中WebGL的演示,让我们与他人分享爱您发送短消息.每次你进入它使用不同的位置,新的爱情点被添加到全球.让世界更明亮的地方与你的朋友分享! 源文件:部分代码:<!DOCTYPE html><html><head> <title>Geolocation love</title> <meta charset="utf-8"> <script src=&quo…

[WebGL入门]十四，绘制多边形

注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］.另外,鄙人webgl研究还不够深入.一些专业词语,假设翻译有误,欢迎大家指正. 这是本次的demo的运行结果绘制流程这次终于该绘制多边形了,之前的文章(十一,着色器的编译和连接)中介绍了HTML,顶点着色器和片段着色器,这次看一下javascript从開始到终于的所有处理. 假设前两篇文章介绍的内容全然理解的话,这次的内容也应该不难了.也许会有不easy理解的地方,…

[WebGL入门]二十四，补色着色

注:文章译自http://wgld.org/,原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外,鄙人webgl研究还不够深入,一些专业词语,假设翻译有误,欢迎大家指正. 本次的demo的执行结果着色方法上次介绍了反射光,反射光是实现光泽的必不可少的概念,到此为止,主要的光照效果都已经封装完成了. 光照的效果主要就是扩散光,环境光和反射光三种方法,灵活运用这三种光照,应该就能实现非常逼真的照明效果了. 前几篇一直在说光照,这次略微换个视点,看一下着色,着色是…

[WebGL入门]十六，绘制多个模型

注意:文章翻译http://wgld.org/.原作者杉本雅広(doxas),文章中假设有我的额外说明,我会加上［lufy:］,另外.鄙人webgl研究还不够深入.一些专业词语.假设翻译有误.欢迎大家指正. 本次的demo的执行结果顶点缓存的反复利用上一篇文章中,向多边形的三个顶点中加入了颜色这个新的顶点属性,给多边形涂抹了颜色.并且知道.使用新的VBO能够给对顶点属性进行自由的扩张. 那么.这次来挑战一下同一时候绘制多个模型.可是,不准备新的VBO.还利用上次的VBO.就是说,反复利用VB…

WebGL 创建和初始化着色器过程

1.编译GLSL ES代码,创建和初始化着色器供WebGL使用.这些过程一般分为7个步骤: 创建着色器对象(gl.createBuffer()); 向着色器对象中填充着色器程序的源代码(gl.shaderSource()): 编译着色器(gl.compileShander()); 创建程序对象(gl.createProgram()); 为程序对象分配着色器(gl.attachShader()): 连接程序对象(gl.linkProgram()): 使用程序对象(gl.useProgram()):…

图解WebGL&Three.js工作原理

“哥,你又来啦?”“是啊,我随便逛逛.”“别介啊……给我20分钟,成不?”“5分钟吧,我很忙的.”“不行,20分钟,不然我真很难跟你讲清楚.”“好吧……”“行,那进来吧,咱好好聊聊” 一.我们讲什么? 我们讲两个东西:1.WebGL背后的工作原理是什么?2.以Three.js为例,讲述框架在背后扮演什么样的角色? 二.我们为什么要了解原理? 我们假定你对WebGL已经有一定了解,或者用Three.js做过了一些东西,这个时候,你可能碰到了这样一些问题:1.很多东西还是做不出来,甚至没有任何思路:…

webgl自学笔记——光照

在Webgl中我们使用顶点着色器和片元着色器来为我们的场景创建光照模型.着色器允许我们使用数学模型来控制如何照亮我们的场景. 最好有线性代数的相关知识. 本章中: 光源.法线.材料光照和着色的区别 Goraud Phong着色方法和Lambertian Phong光照模型定义并使用uniforms.attributes.varyings 使用ESSL,webgl的着色器语言讨论跟着色有关的webgl api 继续关于webgl是一个状态机的分析,描述跟着色器相关的可以从状态机中设置和取回的…

webgl自学笔记——矩阵变换

这章主要探讨矩阵,这些矩阵代表了应用在我们场景上的变换,允许我们移动物体.然而在webGL api中并没有一个专门的camera对象,只有矩阵.好消息是使用矩阵来取代相机对象能让webgl在很多复杂动画中拥有更高的灵活性. 第四章中主要内容: 1.了解场景从3d世界到二维屏幕所经历的变换 2.学习仿射变换 3.将矩阵匹配到ESSL uniforms变量中 4.了解Model-View矩阵和透视投影矩阵 5.构造法线变换矩阵 6.创建一个相机对象使用它来旋转3d场景 WebGL中并没有一个可以操控…