如何在 WebGL 中进行最大强度投影 [MIP]答案

【问题标题】：How to do Maximum Intensity Projection [ MIP ] in WebGL如何在 WebGL 中进行最大强度投影 [MIP]
【发布时间】：2013-04-14 21:07:48
【问题描述】：

我创建了一个演示 [http://jsfiddle.net/georgeneil/cfrsj/16/]，使用了执行混合的三个.js，即 THREE.AdditiveBlending。但这给了我一种白光效果，因此有一种信息丢失的感觉。

我需要一个可以投影最大强度的混合结果。如何使用three.js 做到这一点？

在 OpenGL 中，我可以使用 glBlendEquationEXT(GL_MAX_EXT) 做到这一点。

我更新了演示 [http://jsfiddle.net/georgeneil/cfrsj/21]，让概念更加清晰。现在有 8 个粒子，4 个是红色的，剩下的 4 个是黑色的。如果 MIP 工作正常，即使 BLACK 与 RED 重叠，我们也只能看到 RED 粒子

我在寻找什么可以从这个演示 [http://jsfiddle.net/georgeneil/cfrsj/28/] 中得到解释。我需要查看不与红色像素重叠的黑色像素。我需要得到如附图所示的效果。

【问题讨论】：

标签： webgl three.js

【解决方案1】：

如果我理解你的问题，那么这应该是一个正确的解决方案。

http://jsfiddle.net/cfrsj/26/

编辑：

这就是我模拟该功能的方式。我使用 NormalBlending。

首先我确保颜色饱和

    float r= vColor.r > 0.0? 1.0 : 0.0;
    float g= vColor.g > 0.0? 1.0 : 0.0; 
    float b= vColor.b > 0.0? 1.0 : 0.0;

然后我检查 alpha 是否需要

    gl_FragColor.a = gl_FragColor.a * 
                     texture2D( texture, gl_PointCoord ).r * 
                     (test.r > 0.0 ? 1.0 : 
                         (test.g > 0.0?1.0:
                         (test.b > 0.0?1.0:0.0)));

【讨论】：

这里我们只能看到最亮的像素。我在寻找什么可以从这个演示 [jsfiddle.net/georgeneil/cfrsj/28] 中得到解释。我需要查看与红色像素不重叠的黑色像素。我需要得到如附图所示的效果。

【解决方案2】：

这是 webgl 中的一个错误。一种解决方法是用

初始化gl

gl = canvas.getContext("experimental-webgl", { alpha: false } );

【讨论】：

我没明白你的意思。你能让它在 jsfiddle 演示中工作吗？
我认为 MIP 逻辑仍然无法正常工作。我更新了演示 [jsfiddle.net/georgeneil/cfrsj/21]，让概念更加清晰。现在有 8 个粒子，4 个是红色的，剩下的 4 个是黑色的。如果 MIP 工作正常，即使 BLACK 与 RED 重叠，我们也只能看到 RED 粒子
获得您想要达到的目标有点困难。你说你想要透明度，但你将粒子的 alpha 值设置为 1。
但它可以通过 glBlendEquationEXT(GL_MAX_EXT) 在 OpenGL 中实现。 [leri.univ-reims.fr/~bittar/cours/OpenGL/opengl/…]

【解决方案3】：

您可能对以下两个链接感兴趣：

【讨论】：