2

基本的に、アプリを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

およびParticleSystemを手動で設定します。

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

それで、ここでそれがThree.jsr52でどのようにレンダリングされるか：

前

これで、Migration wikiページを読み、いくつかの名前を変更するだけで済み、WebGLRendererコンストラクター、マテリアル、またはシェーダー属性には何も変更する必要がないと結論付けました。

r55にアップグレードしましたが、ビジュアルが壊れています。

後

線とパーティクルがすべて明るくなりました（不透明度は考慮されていません）。

さらに、パーティクルの場合、アルファマスクが壊れています（注意深く見ると、色が異なり、他のパーティクルとオーバーラップするときに「正方形のカット」があります。これは、r52で行ったもので、WebGLRender設定を調整するだけで修正されます）

何が変わったのでしょうか？WebGLコンストラクターの設定、アルファ、背景色を変更しようとしましたが、役に立ちませんでした。

4

1 に答える 1

5

おそらく、シェーダー マテリアルを透明に設定する必要があります。

material.transparent = true;

three.js r.55

于 2013-01-30T17:11:43.983 に答える