openglprocessingtextures

Using Processing P3D (OpenGL) texture is not drawing, no error is reported


The following program correctly renders a textured quad in processing using the underlying OpenGL. The texture is hereTexture of Saturn's rings

PShape s;
void setup() {
  size(800, 800, P3D);
  PImage ringtexture = loadImage("saturnringcolor.jpg");
  textureMode(NORMAL);
  fill(150, 0, 0);
  s = createShape();
  s.beginShape();
  s.texture(ringtexture);
  final float INSET = 10;
  final float x1 = INSET, x2 = width - INSET;
  final float y1 = INSET, y2 = height - INSET;
  s.vertex(x1+50, y1, 0, 0);
  s.vertex(x2-50, y1, 1, 0);
  s.vertex(x2, y2, 1, 1);
  s.vertex(x1, y2, 0, 1);
  s.endShape();
  background(0);
  shape(s);
}

When I create a ring with multiple quads and try to apply the texture, it is just all one color beige.

void setup() {
  size(800,800,P3D);
  PImage ringtexture = loadImage("saturnringcolor.jpg");
  PShape s = createShape();
  s.beginShape(QUADS);
  s.noStroke();

  float r2 = 250, r = 200;
  float nexta;
  s.texture(ringtexture);
  for (float a = 0; a < PI*2; a = nexta) {
    nexta = a + PI / 30;
    // Define the 4 corners of the quad
    s.vertex(r2 * cos(a), r2 * sin(a), 0, 0);
    s.vertex(r2 * cos(nexta), r2 * sin(nexta), 1, 0);
    s.vertex(r * cos(nexta), r * sin(nexta), 1, 1);
    s.vertex(r * cos(a), r * sin(a), 0, 1);
  }
  s.endShape();
  background(0);
  translate(width/2, height/2);
  shape(s);
}

Aside from that, there is a separate image with transparency because the rings of saturn have gaps. I assume I have to combine the two images and get the alpha channel in a format that supports it. So change the jpeg to a png?


Solution

  • Try adding textureMode(NORMAL) and noLoop();

    PImage ringTexture;
    
    void setup() {
      size(800,800,P3D);
      ringTexture = loadImage("saturnRing.jpg");
      textureMode(NORMAL);
      PShape s = createShape();
      s.beginShape(QUADS);
      s.noStroke();
    
      float r2 = 250, r = 200;
      float nexta;
      s.texture(ringTexture);
      for (float a = 0; a < PI*2; a = nexta) {
        nexta = a + PI / 30;
        // Define the 4 corners of the quad
        s.vertex(r2 * cos(a), r2 * sin(a), 0, 0);
        s.vertex(r2 * cos(nexta), r2 * sin(nexta), 1, 0);
        s.vertex(r * cos(nexta), r * sin(nexta), 1, 1);
        s.vertex(r * cos(a), r * sin(a), 0, 1);
      } 
      s.endShape();
      background(0);
      translate(width/2, height/2);
      shape(s,0,0);
      noLoop();
    }
    
    

    Output: enter image description here