how to eliminate backside drawing in p5.js webgl

sirianth

Hi there,

I'm trying to draw a cube with a different text on every side. I've achieved that; HOWEVER, when I make my cube transparent I see the backface drawing of the text (e.g. one is overlayed over one); I only want to draw text on one side so that when I make the cube transparent, I don't want to have text overlapping text. How do I do this?

function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
  one = createGraphics(300, 300);
  two  = createGraphics(300, 300);
  three  = createGraphics(300, 300);
  four = createGraphics(300, 300);
  five = createGraphics(300, 300);
  six = createGraphics(300, 300);
}

function draw() {
  background(0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  //sides
  one.clear();
  one.background(100, 25);
  one.fill(255);
  one.textAlign(CENTER);
  one.textSize(64);
  one.text('one', 150, 150);

  two.clear();
  two.background(100);
  two.fill(255);
  two.textAlign(CENTER);
  two.textSize(64);
  two.text('two', 150, 150);

  three.clear();
  three.background(100);
  three.fill(255);
  three.textAlign(CENTER);
  three.textSize(64);
  three.text('three', 150, 150);

  four.clear();
  four.background(100);
  four.fill(255);
  four.textAlign(CENTER);
  four.textSize(64);
  four.text('four', 150, 150);

  five.clear();
  five.background(100);
  five.fill(255);
  five.textAlign(CENTER);
  five.textSize(64);
  five.text('five', 150, 150);

  six.clear();
  six.background(100);
  six.fill(255);
  six.textAlign(CENTER);
  six.textSize(64);
  six.text('six', 150, 150);

  //panes
  texture(one);
  translate(0, 0, 100);
  box(200,200,0);
  translate(0, 0, -100);

  texture(two);
  translate(0, 0, -100);
  box(200,200,0);
  translate(0, 0, 100);

  texture(three);
  translate(0, 100, 0);
  box(200,0,200);
  translate(0, -100, 0);

  texture(four);
  translate(0, -100, 0);
  box(200,0,200);
  translate(0, 100, 0);

  texture(five);
  translate(100, 0, 0);
  box(0,200,200);
  translate(-100, 0, 0);

  texture(six);
  translate(-100, 0, 0);
  box(0,200,200);
  translate(100, 0, 0);
}

jeremydouglass

Could you explain your exact problem using focused example? I think you are doing like this:

function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
  one = createGraphics(300, 300);
}

function draw() {
  background(0);
  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);

  //sides
  one.clear();
  one.background(100, 25);
  one.fill(255);
  one.textAlign(CENTER);
  one.textSize(64);
  one.text('one', 150, 150);

  //panes
  texture(one);
  box(200,200,0);

}

But I am not seeing what you are describing when I run it in Chrome:

koogs

the OP appears to be drawing 6 boxes, one for each face. and i think that's the problem. what does the output of his look like?

koogs

even if there's backface culling going on with the box, he's drawing a flat box, a plane, for each side, with, i guess, two faces. and one of those faces will be pointing towards the camera and therefore visible.

sirianth

Hey there, so as you can see above, when I make one of the six panes of the cube transparent, I see "one" written on both sides. What I want to create is a cube with a different text written on every side, that doesn't have the text drawn on the backside of the panes.

sirianth

To get a different text on every side, I have to use 6 panes (boxes), and texture each of those panes (boxes) with a pgraphic.

sirianth

^ would doing this with quads rather than box make any kind of difference (am going to test this soon)

sirianth

Did two tests with quads in case it was any different, but it seems like the quads can't accept transparency; i.e. transparency is just not working.

function setup() {
  createCanvas(window.innerWidth, window.innerHeight, WEBGL);
  one = createGraphics(300, 300);
}

function draw(){
  //sides
  one.clear();
  one.background(100, 50);
  one.fill(255);
  one.textAlign(CENTER);
  one.textSize(64);
  one.text('one', 150, 150);

  texture(one)
  //quad(38, 31, 86, 20, 69, 63, 30, 76);
  quad(76, 30, 63, 69, 20, 86, 31, 38);

}

sirianth

I switched to three.js :/