We closed this forum 18 June 2010. It has served us well since 2005 as the ALPHA forum did before it from 2002 to 2005. New discussions are ongoing at the new URL http://forum.processing.org. You'll need to sign up and get a new user account. We're sorry about that inconvenience, but we think it's better in the long run. The content on this forum will remain online.
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1
PNG transparency (Read 1646 times)
daniele
PNG transparency
Jan 31st, 2009, 3:08pm  
Hi, I've been toying around with Processing for quite a long time, but only recently I started experimenting with the fancier stuff -- such as OpenGL libraries.
I'm trying to draw a series of quads in a 3D space. Each quad is textured using a PNG image, with no blending. When rendering the quads or moving the camera around them, a couple of issues arise: the transparency of the PNG images doesn't seem to work, and the z-sorting looks a bit off (but I may be wrong on this one). I have no problems whatsoever when rendering with P3D, and using plain image() calls instead of the trickier but more efficient OpenGL methods.
I am posting the full code below. Most of the OpenGL stuff is based on code snippets by Robert Hodgin. Keep in mind that I am totally new to OpenGL black magic in Processing. The relevant part of the applet is in the draw() and glRenderImage() functions.
Code:

import processing.opengl.*;
import javax.media.opengl.*;
import com.sun.opengl.util.texture.*;
import toxi.geom.Vec3D;
import damkjer.ocd.*;

PGraphicsOpenGL pgl;
GL gl;
Texture glParticle;

POV pov;
Particle[] particles;
int numParticles = 500;
float radius = 150;

void setup() {
  size(500, 500, OPENGL);
  // OpenGL
  pgl = (PGraphicsOpenGL)g;
  gl = pgl.gl;
  gl.setSwapInterval(1);
  initGL();
  // POV
  pov = new POV(this, 0, 0, 400);
  pov.ISDRAGGING = true;
  // particles
  particles = new Particle[numParticles];
  for (int i=0; i<numParticles; i++)
    particles[i] = new Particle(random(radius/2), radius, random(PI), random(TWO_PI));
  // texture
  try { glParticle = TextureIO.newTexture(new File(dataPath("particle.png")), true); }
  catch (IOException e) { exit(); }
}

void draw() {
  background(0);
  pov.exist();
  gl.glEnable(GL.GL_DEPTH_TEST);
  pgl.beginGL();
  glParticle.bind();
  glParticle.enable();
  for (int i=0; i<numParticles; i++) particles[i].render();
  glParticle.disable();
  pgl.endGL();
}

class Particle {
  [...]
  void render() {
    glRenderImage(pos, diam);
  }
}

int squareList;

void initGL() {
  pgl.beginGL();
  squareList = gl.glGenLists(1);
  gl.glNewList(squareList, GL.GL_COMPILE);
  gl.glBegin(GL.GL_POLYGON);
  gl.glTexCoord2f(0, 0); gl.glVertex2f(-.5, -.5);
  gl.glTexCoord2f(1, 0); gl.glVertex2f(.5, -.5);
  gl.glTexCoord2f(1, 1); gl.glVertex2f(.5, .5);
  gl.glTexCoord2f(0, 1); gl.glVertex2f(-.5, .5);
  gl.glEnd();
  gl.glEndList();
  pgl.endGL();
}

void glRenderImage(Vec3D pos, float diam) {
  gl.glPushMatrix();
  gl.glTranslatef(pos.x, pos.y, pos.z);
  pov.glReverseCamera();
  gl.glScalef(diam, diam, diam);
  gl.glCallList(squareList);
  gl.glPopMatrix();
}

class POV {
  [...]
  void glReverseCamera() {
    gl.glRotatef(degrees(angleZ), 0, 0, 1.0);
    gl.glRotatef(degrees(angleY), 0, 1.0, 0);
  }
}
Back to top
 
 
daniele
Re: PNG transparency
Reply #1 - Jan 31st, 2009, 9:18pm  
I'm posting a minimal working example, more focused on the issue. Particle.png contains a white radial gradient fading from 100% alpha to 0%.

Quote:
import processing.opengl.*;
import javax.media.opengl.*;
import com.sun.opengl.util.texture.*;

PGraphicsOpenGL pgl;
GL gl;
Texture glParticle;
int squareList; // set by initGL

void setup() {
  size(500, 500, OPENGL);
  // OpenGL
  pgl = (PGraphicsOpenGL)g;
  gl = pgl.gl;
  gl.setSwapInterval(1);
  initGL();
  // texture
  try { glParticle = TextureIO.newTexture(new File(dataPath("particle.png")), true); }
  catch (IOException e) { exit(); }
  // draw some particles
  drawSomeParticles();
}

void draw() {}

void mouseReleased() { drawSomeParticles(); }

void initGL() {
  pgl.beginGL();
  squareList = gl.glGenLists(1);
  gl.glNewList(squareList, GL.GL_COMPILE);
  gl.glBegin(GL.GL_POLYGON);
  gl.glTexCoord2f(0, 0); gl.glVertex2f(-.5, -.5);
  gl.glTexCoord2f(1, 0); gl.glVertex2f(.5, -.5);
  gl.glTexCoord2f(1, 1); gl.glVertex2f(.5, .5);
  gl.glTexCoord2f(0, 1); gl.glVertex2f(-.5, .5);
  gl.glEnd();
  gl.glEndList();
  pgl.endGL();
}

void drawSomeParticles() {
  background(0);
  gl.glEnable(GL.GL_DEPTH_TEST);
  pgl.beginGL();
  glParticle.bind();
  glParticle.enable();
  for (int i=0; i<30; i++)
    drawOneParticle(random(width), random(height), random(height)-height, 80);
  glParticle.disable();
  pgl.endGL();
}

void drawOneParticle(float x, float y, float z, float diam) {
  gl.glPushMatrix();
  gl.glTranslatef(x, y, z);
  gl.glScalef(diam, diam, diam);
  gl.glCallList(squareList);
  gl.glPopMatrix();
}
Back to top
 
 
daniele
Re: PNG transparency
Reply #2 - Feb 16th, 2009, 11:16pm  
Sorry for bumping my own thread.
Adding gl.glDepthMask(false) kind of fixes the transparency problem, but it obviously messes up the z-sorting. Can anybody help?
(I'm using Processing 1.0.1 on Mac OS X 10.5.6.)
Back to top
 
 
Page Index Toggle Pages: 1
‹ Previous Topic | Next Topic ›