typescript - Three.js ShaderMaterial 仅适用于某些 GPU

Question

我为 3d 飞机跟踪器添加了发光效果:

效果由 THREE.ShaderMaterial 驱动。该效果仅适用于某些 PC。在其他 PC 上，效果不可见，但没有显示任何错误，其他一切正常。我试过多台 PC 和操作系统，似乎是硬件相关问题，而不是操作系统问题。

glow 效果的代码如下所示:

private _createGlow(radius: number, segments: number) {

    let material = new THREE.ShaderMaterial({
        uniforms: {
            "c":   { type: "f", value: 0.01 },
            "p":   { type: "f", value: 6 },
            glowColor: { type: "c", value: new THREE.Color(0x002296) },
            viewVector: { type: "v3", value: this._camera.position }
        },
        vertexShader: `
        uniform vec3 viewVector;
        uniform float c;
        uniform float p;
        varying float intensity;
        void main() 
        {
            vec3 vNormal = normalize( normalMatrix * normal );
            vec3 vNormel = normalize( normalMatrix * viewVector );
            intensity = pow( c - dot(vNormal, vNormel), p );

            gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
        }`,
        fragmentShader: `
        uniform vec3 glowColor;
        varying float intensity;
        void main() 
        {
            vec3 glow = glowColor * intensity;
            gl_FragColor = vec4( glow, 1.0 );
        }`,
        side: THREE.FrontSide,
        blending: THREE.AdditiveBlending,
        transparent: true
    });

    let geometry = new THREE.SphereGeometry(radius, segments, segments);
    let mesh = new THREE.Mesh(geometry, material);
    mesh.scale.multiplyScalar(1.2);
    return mesh;
}

创建场景的代码如下:

this._scene = new THREE.Scene();
this._scene.add(this._universe);
this._scene.add(this._glow);
this._scene.add(this._atmosphere1);
this._scene.add(this._atmosphere2);
this._scene.add(this._earth);
this._scene.add(this._light);
this._scene.add(new THREE.AmbientLight(0x333333, 0.9));

这是 GPU 驱动程序问题还是类似问题？我该如何解决？谢谢!

Answer 1

您的问题中有很多未知数。由于我们无法访问您测试过代码的所有系统，因此我们不能只拿走您的代码，“修复它”并返回一个有效的代码段。

但是，您可以做的是在进行 3D 编程时普遍有用的事情，即差分调试 - 分而治之。

着色器使用的功能至少是过去 10 年制造的硬件所支持的，因此我会更广泛地寻找问题。乍一看，我怀疑有几个罪魁祸首:

• 剔除 - 您的网格可能在渲染过程中被错误地剔除
• 深度失败 - 您的网格可能未通过深度测试(从您的代码中看不出原因)
• 环境制服(normalMatrix 等)可能未正确初始化。

在这种情况下，基本过程是从最基本的基本着色器开始，逐步进行，直到找到导致错误行为的单个语句或表达式。

首先制作一个只输出白色(或 glowColor)的着色器并禁用剔除并测试它 - 你看到你的球体了吗？

• 是 - 深度检查有效；
• 否 - 深度检查有问题。

启用剔除 - 你看到球体了吗？

• 是的 - 剔除很好(可能 - 你可以看到模型的背面)；
• 不 - 你的脸被错误地剔除了。

接下来是调试法线向量 - 将法线传递给像素着色器并将它们输出为片段颜色。您可以使用 (n * 0.5) + 0.5 对它们进行编码，以获得对象的世界空间“法线贴图”。看起来不错吗？

• 是 - 环境制服可能是正确的；
• 不，这可能是 three.js 中的错误。

最后添加强度计算。它有效吗？嗯，它不应该，因为此时我们已经重建了整个发光效果，我们知道它并不总是有效。那为什么它不起作用呢？

最后一个问题 - 如果 GPU 除以 0 会怎样？

• 首先 - 你不会收到错误。
• 其次 - 不应允许这种情况发生，因为到处都是 NaN，最终会出现无意义的 GPU 相关结果。

我猜测您的代码为何不起作用是因为 pow( c - dot(vNormal, vNormel), p ) 每当基数为负时返回 NaN。不同的 GPU 可能有不同的处理 NaN 的方式，有些方式不如其他方式明显。

简而言之:您应该通读整篇文章。方法比结果有用得多。