how to eliminate backside drawing in p5.js webgl

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);
}

Answers

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

    Screen Shot 2018-05-29 at 8.02.46 AM

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

  • edited May 29

    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.

  • sides

    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.

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

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

  • 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);
    
    }
    
  • Answer ✓

    I switched to three.js :/

Sign In or Register to comment.