three.js - 从 Three.js r52 升级到 r55 时无法再更改不透明度

Question

基本上我正在升级我的应用程序，从 r52 到 r55。这个应用程序使用动画 (Tweens) 来更新线条，还有一个 ParticleSystem。在 r52 中一切正常，缩放、移动和改变不透明度。

我使用了这些 WebGLRenderer 构造函数设置:

    clearColor: 0x1f1f1f
    clearAlpha: 1
    antialias: true
    sortObjects: false

还有一个我从示例中获取的简单着色器:

<script type="x-shader/x-vertex" id="vertexshader">
    attribute float size;
    attribute vec3 customColor;
    attribute float customOpacity;

    varying vec3 vColor;
    varying float vOpacity;

    void main() {
        vColor = customColor;
        vOpacity = customOpacity;

        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );
        gl_Position = projectionMatrix * mvPosition;
    }

</script>

<script type="x-shader/x-fragment" id="fragmentshader">
        uniform vec3 color;
        uniform sampler2D texture;

        varying vec3 vColor;
        varying float vOpacity;

        void main() {
            gl_FragColor = vec4( color * vColor, vOpacity );
            gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
        }
</script>

我使用以下方法初始化粒子 ShaderMaterial:

    blending       : THREE.AdditiveBlending
    depthTest      : false
    transparent    : false

和粒子系统通过手动设置:

  system.sortParticles = true
  system.matrixAutoUpdate = true
  system.visible = true
  system.dynamic = true

下面是它在 Three.js r52 中的呈现方式:

现在我已经阅读了迁移 wiki 页面，并得出结论，我只需更改几个名称，WebGLRenderer 构造函数、 Material 或着色器属性中没有任何更改。

我已经升级到 r55，但现在视觉效果不佳:

线条和粒子现在都是亮的(不考虑不透明度)。

此外，对于粒子，现在的 alpha 蒙版已损坏(如果您仔细观察，颜色会有所不同，并且在与其他粒子重叠时会出现“方形切割”，这是我在 r52 中拥有的，并通过简单地调整 WebGLRender 设置来修复)

什么可以改变？我尝试更改 WebGL 构造函数中的设置、alphas、背景颜色……但没有帮助。

Answer 1

可能，您需要将着色器 Material 设置为透明:

material.transparent = true;

three.js r.55