Can't change opacity anymore when upgrading from Three.js r52 to r55

Question

Basically I'm upgrading my app, from r52 to r55. This app use animations (Tweens) for updating lines, but also a ParticleSystem. Everything worked just fine in r52, scaling, moving and changing opacity.

I used these WebGLRenderer constructor settings:

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

And a simple shader I took from the examples:

<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>

I initialized the particle ShaderMaterial using:

    blending       : THREE.AdditiveBlending
    depthTest      : false
    transparent    : false

and the ParticleSystem by manually setting:

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

So here how it renders in Three.js r52:

before

Now I've read the Migration wiki page, and concluded I only had to change a few names, nothing in the WebGLRenderer constructor, materials or shaders attributes.

I've upgraded to r55 and now visuals are broken:

after

Lines and particles are now all bright (opacity not taken in account).

Moreover for particles now the alpha mask is broken (if you watch carefully the color is different, and there is a "square cut" when overlapping with other particles, something I had in r52 and fixed by simply tuning the WebGLRender settings)

What could have changed? I tried to change settings in the WebGL constructor, alphas, background colors.. but it didn't help.

WestLangley WestLangley · Accepted Answer · 2013-01-30T17:11:43

Likely, you need to set your shader material to transparent:

material.transparent = true;

three.js r.55

Can't change opacity anymore when upgrading from Three.js r52 to r55

1 Answers