Overlap Transparent Materials cutting off Starting in REV 95

Questions
,
1

Transparent Bitmap Materials , like loaded transparent PNG and TEXT rendered as materials start to occlude or cut out squares in other transparent materials close behind them starting in REV 95.

REV 94 Overlapping Text:
working_text_overlap

Rev 95 Overlapping Text ( cut off ):
not_working_overlap

In REV 94 Everything works great. Transparent materials can overlap. Starting in REV 95 it cuts out squares. What is different starting in REV 95?

Method used to create text is:

Link.prototype.makeTextSprite=function( message, parameters ) {
    var colorobj = hexToRgb(this.color);
    if ( parameters === undefined ) parameters = {};
    var fontface = parameters.hasOwnProperty("fontface") ? parameters["fontface"] : "Helvetica";
    var fontsize = parameters.hasOwnProperty("fontsize") ? parameters["fontsize"] :100;
    var borderThickness = parameters.hasOwnProperty("borderThickness") ? 
parameters["borderThickness"] : 0;
    var borderColor = parameters.hasOwnProperty("borderColor") ?parameters["borderColor"] : { r:0, g:0, b:0, a:1.0 };
    var backgroundColor = parameters.hasOwnProperty("backgroundColor") ?parameters["backgroundColor"] : { r:0, g:0, b:0, a:1.0 };
    var textColor = parameters.hasOwnProperty("textColor") ?parameters["textColor"] : { r:colorobj.r, g:colorobj.g, b:colorobj.b, a:1.0 };
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.font = "" + fontsize + "px " + fontface;
    var metrics = context.measureText( message );
    var textWidth = metrics.width;
    context.fillStyle = "rgba("+textColor.r+", "+textColor.g+", "+textColor.b+", 1.0)";
    context.font = "" +42 + "px " + fontface;
    context.fillText( "000007" ,0, 80,400);
    context.fill()
    context.fillStyle ="#dbbd7a";

    var texture = new THREE.Texture(canvas)
    texture.needsUpdate = true;
    var spriteMaterial = new THREE.SpriteMaterial( { map: texture, useScreenCoordinates: false } );
    var sprite = new THREE.Sprite( spriteMaterial );
    sprite.scale.set( 21,21,21 );
    return sprite;
}
3

Can you please provide a code snippet that shows how you create your text label? A live demo that demonstrates the issue would be even better.

4

SpriteMaterial does not have a property useScreenCoordinates anymore. So setting it has no effect. Besides, instead of doing this:

var texture = new THREE.Texture( canvas );
texture.needsUpdate = true;

do this:

var texture = new THREE.CanvasTexture( canvas );

With three.js R95 sprite rendering is now integrated in WebGLRenderer. This change was planned years ago and solved many conceptual problems (e.g. you can now use Sprites in VR).

The official example does not show the mentioned visual glitch. So there might be a problem when creating your canvas texture. A live example would be helpful for further debugging.

5

Thanks , Mugen87.

It actually turned out the fix was passing depthWrite:false to THREE.SpriteMaterial constructor, but I don’t fully understand why or how it enables transparent materials to not erase each other…

THREE.SpriteMaterial( { depthWrite:false } )
Perhaps this was default before R95, starting in R95 it requires explicit setting?

1 Like
6

No, there was no change like that. If you provide a small live demo that illustrates the original transparency issue, I’ll take a closer look.