时间戳

首页 > 解决方案 > 将图像数组传递给计算着色器

compute-shader - 将图像数组传递给计算着色器

问题描述

我目前正在使用 WebGL 2.0 中的计算着色器草稿开发一个项目。[草案]。尽管如此，我不认为我的问题是特定于 WebGL 的，而更像是一个 OpenGL 问题。目标是构建一个用于计算着色器的图像金字塔。每个级别应该是 2^(n-level) 值的平方（低至 1x1）并包含简单的整数/浮点值...

我已经有了这个金字塔所需的值，存储在不同的 OpenGL 图像中，它们都具有相应的大小。我的问题是：你如何将我的图像数组传递给计算着色器。我在限制传递给 14 或 16 的图像数量方面没有问题......但它至少需要 12。如果有一种机制可以将图像存储在纹理中并且使用textureLod它可以解决问题，但我无法理解如何使用图像来做到这一点。

谢谢你的帮助，我很确定应该有一个明显的方法来做到这一点，但总的来说我对 OpenGL 比较陌生。

标签： compute-shaderwebgl2

解决方案

传入“图像金字塔”在 WebGL 中是很正常的事情。它们被称为mipmap。

gl.texImage2D(gl.TEXUTRE_2D, 0, gl.R32F, 128, 128, 0, gl.RED, gl.FLOAT, some128x128FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 1, gl.R32F, 64, 64, 0, gl.RED, gl.FLOAT, some64x64FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 2, gl.R32F, 32, 32, 0, gl.RED, gl.FLOAT, some32x32FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 3, gl.R32F, 16, 16, 0, gl.RED, gl.FLOAT, some16x16FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 4, gl.R32F, 8, 8, 0, gl.RED, gl.FLOAT, some8x8FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 5, gl.R32F, 4, 4, 0, gl.RED, gl.FLOAT, some4x4FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 6, gl.R32F, 2, 2, 0, gl.RED, gl.FLOAT, some2x2FloatData);
gl.texImage2D(gl.TEXUTRE_2D, 7, gl.R32F, 1, 1, 0, gl.RED, gl.FLOAT, some1x1FloatData);

第2列的数字是mip级别，后面是内部格式，后面是mip级别的宽度和高度。

texelFetch(someSampler, integerTexelCoord, mipLevel)您可以使用如下方式从着色器访问任何单个纹素

uniform sampler2D someSampler;

...

   ivec2 texelCoord = ivec2(17, 12);  
   int mipLevel = 2;
   float r = texelFetch(someSampler, texelCoord, mipLevel).r;

但你说你需要 12、14 或 16 个级别。16 级是 2(16-1) 或 32768x32768。那是 1.3 gig 的内存，所以你需要一个有足够空间的 GPU，你必须祈祷浏览器允许你使用 1.3 gig 的内存。

您可以通过使用 分配纹理texStorage2D然后使用 上传数据来节省一些内存texSubImage2D。

你提到使用图像。如果你的意思是<img>标签或者Image你不能从中获取浮点或整数数据。它们通常是每通道 8 位的值。

或者当然，而不是使用 mip 级别，您还可以将数据排列到纹理图集中

推荐阅读