opengl-es - WebGL - 丢弃由顶点着色器标记的片段

Question

我有一个使用 Three.js 创建的粒子系统，其中每个粒子都有一组关联的参数(x、y、z、成本、炒作等...)，我还保留每个的最小值/最大值。我已将它们定义为属性并创建了统一的最小/最大条目。通过 slider 修改统一值以充当范围过滤器。

attributes["aGain"] = { type: "f", value: [] };

uniforms["uGainMin"] = { type: "f", value: 10.0 };
uniforms["uGainMax"] = { type: "f", value: 15.0 };

在顶点着色器中，我声明了属性和变量来充当 FS 的标志。 1.0 表示可见，0.0 表示丢弃。

varying float vectorVisible;
attribute float again;

然后我将每个属性与相应的统一值进行比较。

if (aGain < uGainMin || aGain > uGainMax) { vectorVisible = 0.0; }
else { vectorVisible = 1.0; }

if block 为每个属性/统一配对都有一个条件。

在片段着色器中，我检查 vertexVisible 的值。

if (vectorVisible == 0.0) discard;

发生的情况是，只要任何滤镜 slider 值变得大于 0，我的整个粒子系统就会消失。

作为健全性检查，如果 VS 中的 gl_Position.x 组件小于 0，我尝试将 vertexVisible 设置为 0.0，这确实会导致这些片段被丢弃。

if (gl_Position.x < 0.0) vectorVisible = 0.0;
else vectorVisible = 1.0;

我的属性数组已正确填充，并且我在编译或运行时没有收到任何警告。那么，我对这整件事是否偏离了目标？

My related initial question regarding filtering by parameters

更新:顶点着色器

这是整个顶点着色器。我必须将其应用到 THREE.js 粒子基本着色器中，这就是为什么它在 main 函数前面设置 gl_Position 的原因。

uniform float size;
uniform float scale;
attribute float ay;
uniform float uyMin;
uniform float uyMax;
attribute float ax;
uniform float uxMin;
uniform float uxMax;
attribute float az;
uniform float uzMin;
uniform float uzMax;
attribute float again;
uniform float ugainMin;
uniform float ugainMax;
#ifdef USE_COLOR
    varying vec3 vColor;
#endif
#ifdef USE_SHADOWMAP
    varying vec4 vShadowCoord[ MAX_SHADOWS ];
    uniform mat4 shadowMatrix[ MAX_SHADOWS ];
#endif
void main() {
    #ifdef USE_COLOR
        #ifdef GAMMA_INPUT
            vColor = color * color;
        #else
            vColor = color;
        #endif
    #endif
    vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
    #ifdef USE_SIZEATTENUATION
        gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
    #else
        gl_PointSize = size;
    #endif
    gl_Position = projectionMatrix * mvPosition;
    #if defined( USE_ENVMAP ) || defined( PHONG ) || defined( LAMBERT ) || defined (         USE_SHADOWMAP )
        #ifdef USE_SKINNING
            vec4 worldPosition = modelMatrix * skinned;
        #endif
        #if defined( USE_MORPHTARGETS ) && ! defined( USE_SKINNING )
            vec4 worldPosition = modelMatrix * vec4( morphed, 1.0 );
        #endif
        #if ! defined( USE_MORPHTARGETS ) && ! defined( USE_SKINNING )
            vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
        #endif
    #endif
    #ifdef USE_SHADOWMAP
        for( int i = 0; i < MAX_SHADOWS; i ++ ) {
            vShadowCoord[ i ] = shadowMatrix[ i ] * worldPosition;
        }
    #endif

    /***** Filters *****/
    if (ay < uyMin || ay > uyMax) gl_Position.xyz = vec3(2.);
    else if (ax < uxMin || ax > uxMax) gl_Position.xyz = vec3(2.);
    else if (az < uzMin || az > uzMax) gl_Position.xyz = vec3(2.);
    else if (again < ugainMin || again > ugainMax) gl_Position.xyz = vec3(2.);
}

JSFiddle

看看它(不)工作here .

Answer 1

根据新信息:

添加此:

var material = new THREE.ShaderMaterial({
    attributes:{
        aGain:{
            type:"f",
            value:null
        }
    },
    fragmentShader: fs_source....

我无法解释为什么，但它应该有效。 :)

如果没有它，我根本无法让 aGain 显示出来(就 GPU 而言，它们都是 0)。

我不知道答案的正确程序是什么。另一个答案是关于裁剪的事情，这是为了

“为什么我的自定义 Three.js 属性缓冲区没有显示在着色器 Material 中？”。