- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
WebGL 获取的是 WebGLRenderingContext/WebGLRenderingContext2
对象,必须依赖于有合适宽度和高度的 HTMLCanvasElement
,通常命名为 gl
,gl 变量有非常多方法,允许修改 WebGL 的全局状态
const gl = document.getElementById("id")?.getContext("webgl")
// ...
而 WebGPU 则不依赖具体的 Canvas,它操作的是物理图形卡设备,并使用 ES6/7
的异步语法获取,获取的是 GPUAdapter
和 GPUDevice
,但是与 WebGLRenderingContext
起着类似“发出大多数命令”的大管家式角色的,更多是 GPUDevice
对象
const entryFn = async () => {
if (!navigator.gpu) {
return
}
// 测试版 Chrome 有可能返回 null
const adapter = await navigator.gpu.requestAdapter()
if (!adapter) {
return
}
const device = await adapter.requestDevice()
// ...
}
entryFn()
WebGPU 的入口是 navigator.gpu
对象,这个对象在 WebWorker 中也有,所以对 CPU 端的多线程有良好的支持。使用此对象异步请求适配器后,再使用适配器请求具象化的设备对象即可。
至于“适配器”和“设备”的概念界定,需要读者自行阅读 WebGPU Explainer、WebGPU Specification Core Object 等资料,前者大概是物理设备的一个变量符号,而根据不同的场景、线程需求再次请求“设备”,此设备并非物理设备,只是一个满足代码上下文所需要条件的、更实际的“对象”。
每次请求的适配器对象是不同的,不具备单例特征。
设备对象用于创建 WebGPU 中几乎所有的子类型,包括 GPUBuffer
、GPUTexture
等,以及访问一些自有属性,例如队列属性 device.queue
.
在 WebGLRenderingContext 时,允许传递一些参数:
const gl = canvasEle.getContext("webgl", {
alpha: false, // 是否包含透明度缓存区
antialias: false, // 是否开抗锯齿
depth: false, // 是否包含一个16位的深度缓冲区
stencil: false, // 是否包含一个8位的模板缓冲区
failIfMajorPerformanceCaveat: false, // 在系统性能低的环境中是否创建上下文
powerPreference: "high-performance", // GPU电源配置,"high-performance" 是高性能
preserveDrawingBuffer: false, // 是否保留缓冲区
premultipliedAlpha: false, // 是否预乘透明度通道
})
在请求 WebGPU 的适配器时,保留了性能选项(当前规范)powerPreference:
// in async function
const adapter = await navigator.gpu.requestAdapter({
powerPreference: "high-performance",
})
关于 requestAdapter 方法的参数,其类型 GPURequestAdapterOptions
定义,见下:
dictionary GPURequestAdapterOptions {
GPUPowerPreference powerPreference;
boolean forceFallbackAdapter = false;
};
enum GPUPowerPreference {
"low-power",
"high-performance",
};
forceFallbackAdapter
参数用得不多,有需要的读者可自行查询官方文档。
请求设备对象时,则允许传入 GPUDeviceDescriptor
参数对象,该对象允许有两个可选参数,一个是 requiredFeatures
,类型为 string[]
,另一个是 requiredLimits
,类型是键为 string 值为 number 的对象:
dictionary GPUDeviceDescriptor : GPUObjectDescriptorBase {
sequence<GPUFeatureName> requiredFeatures = [];
record<DOMString, GPUSize64> requiredLimits = {};
};
requireFeatures 数组的元素是字符串,不是随便填的,要参考 WebGPU Spec 24 功能索引表 中的功能。传递这个功能数组,就意味着要向适配器请求有这么多功能的设备对象;
requireLimits 则向图形处理器请求判断,我传递进来的这个要求,你能不能满足。
如果超过了适配器的 limits,那么请求将失败,适配器的 requestDevice 方法将返回一个 reject 的 Promise;
如果传入的限制条目的要求没有比全局默认值更好(有“更大更好”和“更小更好”,参考 WebGPU 第3章 中有关 limits 的表述),那就返回带默认值的设备对象,并 resolve Promise;
其中,限制条目有哪些,默认值是多少,对某个限制条目“更大值更好”还是“更小值更好”,要参考 WebGPU Spec 3.6 限制 中的表格。
上面这么说会比较抽象,下面举例说明。
例如下面这个例子,请求设备对象时,会问适配器能不能满足我要求的条件:
const device = await adapter.requestDevice({
maxBindGroups: 2,
maxUniformBuffersPerShaderStage: 4,
maxTextureDimension2D: 2048,
})
显然,请求的这三个条件都满足要求,返回的设备对象的限制列表都按所有限制条目的默认值来。
console.log(device.limits)
{
maxBindGroup: 4,
maxUniformBuffersPerShaderStage: 12,
maxTextureDimension2D: 8192,
// ...
}
关于这段,requiredLimits 的含义是“我的程序可能要这样的要求,你这个适配器能不能满足”,而不是“我要这么多要求,你给我返回一个这些参数的设备对象”。设备的创建过程,在 WebGPU Specification 的第 3 章,核心对象 - 设备中有详细描述。
WebGL 的请求参数包括了性能参数和功能参数,较为简单。
WebGPU 分成了两个阶段,请求适配器时可以对性能作要求,请求设备对象时可以对使用 GPU 时各个方面的参数作校验能不能满足程序要求。
一些网站说你应该通过以下方式初始化 webgl: var gl = c.getContext("webgl") || c.getContext("experimental-webgl"); if (!
我一直在寻找有关 WebGL 的信息以及可以分配用于渲染的最大纹理数/内存量。这显然是特定于硬件/设备的,因此我正在寻找一种智能处理纹理的方法。 我目前有 512x512 RGBA8 格式的纹理。一个
我想知道是否可以利用WebGL进行任何异步调用? 我研究了Spec v1和Spec v2,他们什么都没提及。在V2中,有一种WebGL查询机制,我认为这不是我想要的。 在网络上进行搜索并没有确定的定义
我正在参与一个 webgl 项目。 当我调用 gl.DrawElements 时,会显示错误“范围超出缓冲区范围”。 我肯定确保我传递了正确的缓冲区长度或偏移量。但是,仍然显示错误。 我认为有几个原因
我知道 WebGL 中有 8 个纹理的限制。 我的问题是,8 是全局限制还是每个着色器/程序明智的? 如果它是每个着色器/程序明智的限制,这是否意味着,一旦我将纹理加载到一个着色器的制服上,我就可以开
我一直在使用 Haxe + Away3D 编写一个小型行星生成器,并将其部署到 HTML5/WebGL。但是在渲染云时我遇到了一个奇怪的问题。我有行星网格,然后云网格在相同位置稍大一些。 我正在使用柏
关闭。这个问题是opinion-based 。目前不接受答案。 想要改进这个问题吗?更新问题,以便 editing this post 可以用事实和引文来回答它。 . 已关闭 8 年前。 Improv
在 OpenGL 中,深度缓冲区值是根据场景的近和远裁剪平面计算的。 (引用:Getting the true z value from the depth buffer) 这在 WebGL 中是如何
简单的问题,但我无法在任何地方的规范中找到答案。我可能在某处遗漏了明显的答案。 我可以在 WebGL 片段着色器中同时使用多少个纹理?如果它是可变的,那么假设 PC 使用的合理数字是多少? (对移动不
我有一个渲染场景的帧缓冲区,现在我想将它渲染到“全屏”四边形。如何设置我的相机以及我应该在我的顶点着色器中放置什么以便将帧缓冲区的纹理渲染到整个屏幕。 我试过像这样创建一个全屏四边形 var gl =
我正在阅读 here 的教程。 var gl; function initGL() { // Get A WebGL context var canvas = document.getEle
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引起辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the he
我正在学习 WebGL,我能感觉到我的速度很慢,因为我很难调试我的代码。是否有任何扩展或工具可以帮助我知道缓冲区、属性指针、矩阵等的值。 我在谷歌上搜索并了解了 chrome 扩展程序 spector
我可以在某处找到任何文档来记录 WebGL 调用所需的先决条件吗? 我已经对 WebGL 基础有了相当深入的了解,但现在我正在创建自己的“框架”,并且我正在更深入地了解。 例如, enableVert
关闭。这个问题是opinion-based .它目前不接受答案。 想改善这个问题吗?更新问题,以便可以通过 editing this post 用事实和引文回答问题. 7年前关闭。 Improve t
我有兴趣在 webgl 中执行一些密集计算,所以它在 GPU 上运行。 大多数文档都讨论了如何渲染图形。 我正在完成非常简单的任务:对于给定的图像,将其转换为灰度,并找到局部最大值的坐标(比其邻居更亮
我目前在 WebGL 中使用这个片段着色器来对照片纹理应用高光/阴影调整。 着色器本身是直接从优秀的 GPUImage 中拉出来的适用于 iOS 的库。 uniform sampler2D input
我是 webgl 的新手。我正在尝试设置时间统一,因此我可以随着时间的推移更改片段着色器的输出。我认为这实现起来相当简单,但我正在努力。我知道这两种方法可能涉及: https://developer.
我正在尝试使用两个 Canvas 并排绘制相同的 WebGL 场景。是否可以?到目前为止,我还没有走运。 思路如下: 我加载几何 我设置了两个gl上下文,每幅 Canvas 一个 我调用 drawEl
我正在学习 WebGL 并尝试显示一个球体。没有纹理,只有每个顶点着色,但我在 Opera 和 Chrome 中收到以下错误消息:“[.WebGLRenderingContext]GL 错误:GL_I
我是一名优秀的程序员,十分优秀!