2

基本上我正在升级我的应用程序,从 r52 到 r55。这个应用程序使用动画(Tweens)来更新线条,但也是一个粒子系统。在 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 中呈现的:

前

现在我已经阅读了 Migration wiki 页面,并得出结论我只需要更改几个名称,WebGLRenderer 构造函数、材质或着色器属性中没有任何内容。

我已经升级到 r55,现在视觉效果坏了:

后

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

此外,对于粒子,现在 alpha 蒙版已损坏(如果您仔细观察颜色不同,并且与其他粒子重叠时会出现“方形切割”,这是我在 r52 中使用的,只需调整 WebGLRender 设置即可修复)

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

4

1 回答 1

5

很可能,您需要将着色器材质设置为透明:

material.transparent = true;

三.js r.55

于 2013-01-30T17:11:43.983 回答