Question

我正在尝试开发热图。

我的数据很多。

我正在创建一个纹理并绘制所有点，每个点都有一个1 / objectsCount的alpha。所以混合的最终结果是透明度较低的地方会更加发热。

然后，为了自定义颜色，我在屏幕上绘制纹理，在片段着色器中我正在检查alpha的值并相应地更改。

当我绘制100个物体时，它运作良好。 1000时，根本不是。我看到当我作为制服发送的不透明度小于0.003时，它被认为是0.可能是因为精度。我把高音放在任何地方，但我无法找到正确的位置。

如果我的算法不正确，我会很高兴听到新的算法。试图找出They did it的方式，但它更复杂。

绘制到纹理着色器

顶点着色器

...

uniform float pointSize;
 
void main() {
   gl_Position = LIGHTGLgl_ModelViewProjectionMatrix * LIGHTGLgl_Vertex;
   gl_PointSize = pointSize;
}

片段着色器

...
uniform highp float opacity;
uniform highp vec4 color;
uniform sampler2D sampler;
void main() {
   highp vec4 usedColor = color;
   gl_FragColor = usedColor * texture2D(sampler, gl_PointCoord );
   gl_FragColor.a *= opacity;
}

在屏幕上绘制结果 - 着色器

我的结果纹理的顶点是用于在屏幕上绘图是在剪辑空间中这就是为什么我不会与矩阵相乘

顶点着色器

...
attribute vec2 texCoords;
varying vec2 tex;
void main()
{
   gl_Position = LIGHTGLgl_Vertex;
   tex = texCoords;
}

片段着色器

...
uniform sampler2D sampler;
varying vec2 tex;
uniform float objCount;
void main()
{
   highp vec4 f = texture2D(sampler, tex);

   if (f.a > 0.)
   {
      f = vec4(1,0,0,1); // for the test we make it red
   }
   gl_FragColor = f;
}

Answer 1

在敲击键盘后，我终于找到了解决问题的方法。

在GL中创建纹理时，我们指定要为每个值保存的数据类型 - r / g / b / a。我们可以发送FLOAT并为每个值获取更多精确数据。

我的问题是这种类型是无符号字节。

此外，如果我们想要绘制此纹理，我们必须指定webgl扩展名OES_texture_float，如果我们使用线性过滤器，也可以指定OES_texture_float_linear。

// Creating the texture with FLOAT values
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);

// Loading the extensions
gl.getExtension('OES_texture_float');
gl.getExtension('OES_texture_float_linear');

webgl中的热图 - 使用alpha通道获得强度

1 个答案: