目录 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. 纹理压缩编码算法…

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

目录 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 数据的(纹理留到下一…

目录 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. 传递纹…

var vShader = ` attribute vec4 a_Position; attribute vec2 a_TexCoord; varying vec2 v_TexCoord; void main(){ gl_Position = a_Position; v_TexCoord = a_TexCoord; } `; var fShader = ` //设定默认精度 #ifdef GL_ES precision mediump float; #endif uniform sampler2…

1.纹理坐标 纹理坐标是纹理图像上的坐标,通过纹理坐标可以在纹理图像上获取纹理颜色.WebGL系统中的纹理坐标系统是二维的,如图所示.为了将纹理坐标和广泛使用的x.y坐标区分开来,WebGL使用s和t命名纹理坐标(st坐标系统). 纹理图像的四个角坐标为左下角(0.0,0.0),右下角(1.0,0.0),右上角(1.0, 1.0)和左上角(0.0, 1.0).纹理坐标很通用,因为坐标值与图像自身的尺寸无关,不管是128*128还是128*256的图像,右上角的纹理坐标始终是(1.0, 1.0).…

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

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…

目录 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…

目录 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. 输…