Text has opaque background when using webgl renderer

p5.js
1

Hi all,

I am developing a rotating 3D scatter plot to display egg colours. I have labelled the three axes red, green and blue using these bits of code (only relevant sections shown (full script):

function preload() {
  ssp = loadFont('SourceSansPro-Regular.ttf');
}

function setup() {
  textFont(ssp);
  textSize(12);
  textAlign(CENTER, CENTER);
}

function draw(){
  text('BLUE', 0 , 0); 
}

However looking at the following screenshot you can see when the green label passes at the front of the rest of the chart the spaces within the letters are opaque. The same problem occurs with the other labels but they don’t pass in front of anything else so it’s not noticeable.

download (2)
download (2)800×800 18.4 KB

I’ve tried both TTF and OTF versions of the font but I get the same results. Is there a trick I am missing, or this a result of the way the font is constructed/rendered? Is there anything I can do to make the gaps in the letters transparent?

Many thanks,
Neville

2

Hi,

Does it work with other fonts ?
Is it specific to the SourceSansPro font?

3

Thanks for the response. Yes it is affecting other fonts too, I’ve also tried OpenSans.

Interestingly as I look a little closer at the issue I can see that when the text passes in front of other text, the background behaves as I would expect. The problem is only apparent when it passes in front of the rectangle. You can see in this screenshot the ‘G’ passes in front of both text and a rectangle.

textbgcrop

4

Ooooh, I’ve been experimenting with a sketch to replicate the issue in a simpler way and it struck me.

I was rendering the text before the rectangles. Even though I’d positioned them correctly in the z-plane, it appears if the order of rendering matters - simple example sketch.

I suppose it’s obvious!

1 Like
5

I’m having the same issue but I’m only rendering text in a for loop function. No rectangles or other elements are even called. I can’t for the life of me figure out how to get it to be transparent behind the characters. Any help would be greatly appreciated!

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  textFont(SF);
  textSize(width / 6);
  textAlign(CENTER, CENTER);
  
}

function draw() {
  
background(150);
orbitControl(2,2,.5);

var zrepeat = 12;
let wordcolor =  color('rgba(100%,100%,100%,1)');

push();

for(var i = 0; i < zrepeat; i++) {
    
  push();
    fill(wordcolor);
    text('help!', 0, 0);
    pop();
    translate(0, 0, -400);
}

}

function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}