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.
Index › Programming Questions & Help › OpenGL and 3D Libraries › how do i make neon fx
‹ Previous Topic | Next Topic ›
Pages: 1 2 
how do i make neon fx (Read 7878 times)
V
Re: how do i make neon fx
Reply #15 - Jan 29th, 2010, 8:56am  
Jeff,

Honestly i don't have a ready answer for that question. It's quite tricky but..

A couple reasons:

- Main class is based on processing syntax (done this way to make things easier for others to understand)
- Texture handling (support for more texture formats that i need)
- Shader/effects support (i work with these all the time)
- Custom 3d file format and rendering framework
- Works directly with opengl as i was used to do, before adapting processing as my work tool
- Scene handling. (for 3d scenes, etc)
- Performance.
- It works with processing, but it does not depend on processing
- I never made a framework with java before, so i had to make one.

I can't speak about GLGraphics. never used it.
Back to top
« Last Edit: Jan 31st, 2010, 11:51am by V »  
Victor Martins | www.pixelnerve.com/v
WWW  
Bloom
Re: how do i make neon fx
Reply #16 - Jan 29th, 2010, 5:20pm  
Hi everyone,
I finally did it with glGraphics: (making 'pure' opengl commands glowing)

here is the code
**********IMPORTANT
To make it working, youll need whats in glgraphics/eamples/BloomEffect 's data folder. (you can have it by downloading the library)

Quote:
/*
 Author: Bloom
 Date: jan-2010
 Glow test with codeanticode's glgraphics (using opengl commands)
*/

import processing.opengl.*;
import javax.media.opengl.*;
import damkjer.ocd.*;
import codeanticode.glgraphics.*;

GLGraphics pgl;
GLGraphicsOffScreen offscreen;
GL gl;

GLTexture srcTex, bloomMask, destTex;
GLTexture tex0, tex2, tex4, tex8, tex16;
GLTextureFilter extractBloom, blur, blend4, toneMap;

Camera cam;

void setup(){
 size(720, 480, GLConstants.GLGRAPHICS);
 noStroke();
 hint( ENABLE_OPENGL_4X_SMOOTH );  
 
 // Loading required filters.
 extractBloom = new GLTextureFilter(this, "ExtractBloom.xml");
 blur = new GLTextureFilter(this, "Blur.xml");
 blend4 = new GLTextureFilter(this, "Blend4.xml");  
 toneMap = new GLTextureFilter(this, "ToneMap.xml");
   
 //srcTex = new GLTexture(this, "lights.jpg"); //remplaced by offscreen.getTexture()
 
 destTex = new GLTexture(this, width, height);
 
 // Initializing bloom mask and blur textures.
 bloomMask = new GLTexture(this, width, height, GLTexture.FLOAT);
 tex0 = new GLTexture(this, width, height, GLTexture.FLOAT);
 tex2 = new GLTexture(this, width / 2, height / 2, GLTexture.FLOAT);
 tex4 = new GLTexture(this, width / 4, height / 4, GLTexture.FLOAT);
 tex8 = new GLTexture(this, width / 8, height / 8, GLTexture.FLOAT);
 tex16 = new GLTexture(this, width / 16, height / 16, GLTexture.FLOAT);
 
 cam = new Camera(this, 0, 0, 200);
 
 offscreen = new GLGraphicsOffScreen(this, width, height, true, 4);  
 pgl = (GLGraphics) g;  
 gl = offscreen.gl;
 
 frameRate(30);

}

void draw(){
 
 background(0);
 
 float fx = float(mouseX) / width;
 float fy = float(mouseY) / height;
 
 srcTex = offscreen.getTexture();
 
 offscreen.beginDraw();
   offscreen.background(0);
       
   cam.circle(radians(1));    
   //cam.circle(radians(mouseX / 800.) * PI);
   cam.feed();
   
   //offscreen.glDisable( GL.GL_DEPTH_TEST );
   //offscreen.glEnable( GL.GL_BLEND );
   //offscreen.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);
       
   offscreen.beginGL();
     gl.glPushMatrix();
       line_3d(new PVector(  0,  50,  50), new PVector(-50, -50, -50), 1.66, color(255, 70, 70));
       line_3d(new PVector(-50, -50, -50), new PVector( 50, -50, -50), 1.66, color(255, 70, 70));
       line_3d(new PVector( 50, -50, -50), new PVector(  0,  50,  50), 1.66, color(255, 70, 70));
             
       line_3d(new PVector(  0,  50, -50), new PVector(-50, -50,  50), 1.66, color(255, 70, 70));
       line_3d(new PVector(-50, -50,  50), new PVector( 50, -50,  50), 1.66, color(255, 70, 70));
       line_3d(new PVector( 50, -50,  50), new PVector(  0,  50, -50), 1.66, color(255, 70, 70));      
     gl.glPopMatrix();
   offscreen.endGL();
 
 offscreen.endDraw();
 
 // Extracting the bright regions from input texture.
 extractBloom.setParameterValue("bright_threshold", fx);
 extractBloom.apply(srcTex, tex0);

 // Downsampling with blur.
 tex0.filter(blur, tex2);
 tex2.filter(blur, tex4);    
 tex4.filter(blur, tex8);    
 tex8.filter(blur, tex16);    
 
 // Blending downsampled textures.
 blend4.apply(new GLTexture[]{tex2, tex4, tex8, tex16}, new GLTexture[]{bloomMask});
 
 // Final tone mapping into destination texture.
 toneMap.setParameterValue("exposure", fy);
 toneMap.setParameterValue("bright", fx);
 toneMap.apply(new GLTexture[]{srcTex, bloomMask}, new GLTexture[]{destTex});
 
 image(destTex, 0, 0, width, height);

}

//inspired from James Carruthers's drawLine
//http://processing.org/discourse/yabb2/num_1262458611.html#4
void line_3d(PVector pv1, PVector pv2, float weight, color _color){
 PVector v1 = new PVector(pv2.x - pv1.x, pv2.y - pv1.y, pv2.z - pv1.z);
 
 float rho = sqrt(pow(v1.x, 2) + pow(v1.y, 2) + pow(v1.z, 2));
 float phi = acos(v1.z / rho);
 float the = atan2(v1.y, v1.x);
 
 v1.mult(0.5);      
 
 float zval = pv1.dist(pv2) * 0.5;  
 float rad = radians(120) * weight * 0.5;
   
 gl.glPushMatrix();
   gl.glTranslatef(pv1.x, pv1.y, pv1.z);
   gl.glTranslatef(v1.x, v1.y, v1.z);
   gl.glRotatef(degrees(the), 0, 0, 1);
   gl.glRotatef(degrees(phi), 0, 1, 0);
   gl.glColor4f(red(_color)/255, green(_color)/255, blue(_color)/255, 0.67);
   
   //DRAW THE 3D 'LINE' (with 3 planes)  
   gl.glBegin(GL.GL_QUADS);
     //1
     gl.glVertex3f( rad, -rad,  zval);
     gl.glVertex3f( rad, -rad, -zval);
     gl.glVertex3f(-rad, -rad, -zval);
     gl.glVertex3f(-rad, -rad,  zval);      
     //2
     gl.glVertex3f(-rad, -rad,  zval);
     gl.glVertex3f(-rad, -rad, -zval);
     gl.glVertex3f(   0,  rad, -zval);
     gl.glVertex3f(   0,  rad,  zval);
     //3
     gl.glVertex3f(   0,  rad,  zval);
     gl.glVertex3f(   0,  rad, -zval);
     gl.glVertex3f( rad, -rad, -zval);
     gl.glVertex3f( rad, -rad,  zval);
   gl.glEnd();
   
 gl.glPopMatrix();
   
}



codeanticode.glgraphics: http://users.design.ucla.edu/~acolubri/processing/glgraphics/home/index.html

You will also need ocd lib:
http://www.gdsstudios.com/processing/libraries/ocd/
Back to top
 
 
Bloom
Re: how do i make neon fx
Reply #17 - Jan 29th, 2010, 5:25pm  
Anyways, the result with the VITAMIN library seems to be visually more interesting... but didnt succed to make it works with external camera lib AND "pure" opengl commands ... soo i guess we have to make our own choice about that

if someone can do the same but WITH the Vitamin lib, please post it there Smiley

thanks guys Cheesy
Back to top
 
 
V
Re: how do i make neon fx
Reply #18 - Jan 30th, 2010, 1:03pm  
vitamin works independently with processing, which can be questionable for many of you, but i prefer it that way. if you want to do any transformations just use that camera library to do them for you, then get the position/target info and pass along to camera()

here's what i think its happening to you.
you are using OCD to transform the world geometry internally..
then vitamin is resetting the GL transformations (calling perspective() and camera() for example). whatever lib you use, ends up being a wrapper around jogl (opengl) so the transformations are there.

glgraphics could do the same as what i did. shouldn't be hard to port it, but i won't do that for you.


hint for using OCD within vitamin:
vgl.camera( cam.position()[0], cam.position()[1], cam.position()[2],
             cam.target()[0], cam.target()[1], cam.target()[2],
             cam.up()[0], cam.up()[1], cam.up()[2] );

have fun.
Back to top
« Last Edit: Jan 31st, 2010, 12:06pm by V »  
Victor Martins | www.pixelnerve.com/v
WWW  
ac
Re: how do i make neon fx
Reply #19 - Feb 1st, 2010, 12:59pm  
the problem with the glgraphics-based code is the use of a weak blur filter (3x3). I tried with larger filters (using horizontal+vertical decomposition of a 13x13 filter as in the vitamin example). However some "blockiness" remained. For now the only solution i found that makes the glgraphics version of the neon effect look better is to apply the blur filter many times. In order to do this, some additional textures are needed:

Code:

// Initializing bloom mask and blur textures.
bloomMask = new GLTexture(this, width, height, GLTexture.FLOAT);
tex0 = new GLTexture(this, width, height, GLTexture.FLOAT);
tex2 = new GLTexture(this, width / 2, height / 2, GLTexture.FLOAT);
tmp2 = new GLTexture(this, width / 2, height / 2, GLTexture.FLOAT); 
tex4 = new GLTexture(this, width / 4, height / 4, GLTexture.FLOAT);
tmp4 = new GLTexture(this, width / 4, height / 4, GLTexture.FLOAT);
tex8 = new GLTexture(this, width / 8, height / 8, GLTexture.FLOAT);
tmp8 = new GLTexture(this, width / 8, height / 8, GLTexture.FLOAT); 
tex16 = new GLTexture(this, width / 16, height / 16, GLTexture.FLOAT);
tmp16 = new GLTexture(this, width / 16, height / 16, GLTexture.FLOAT);


and then the "downsampling with blur" is replaced by:

Code:

// Downsampling with blur
tex0.filter(blur, tex2);
tex2.filter(blur, tmp2);        
tmp2.filter(blur, tex2);
    
tex2.filter(blur, tex4);        
tex4.filter(blur, tmp4);
tmp4.filter(blur, tex4);            
tex4.filter(blur, tmp4);
tmp4.filter(blur, tex4);            
    
tex4.filter(blur, tex8);        
tex8.filter(blur, tmp8);
tmp8.filter(blur, tex8);        
tex8.filter(blur, tmp8);
tmp8.filter(blur, tex8);        
tex8.filter(blur, tmp8);
tmp8.filter(blur, tex8);

tex8.filter(blur, tex16);     
tex16.filter(blur, tmp16);
tmp16.filter(blur, tex16);        
tex16.filter(blur, tmp16);
tmp16.filter(blur, tex16);        
tex16.filter(blur, tmp16);
tmp16.filter(blur, tex16);
tex16.filter(blur, tmp16);
tmp16.filter(blur, tex16);


This code doesn't look very nice, this is true. It also looks very slow (many filters applied in tandem) but since most of them operate on small textures anyway, the impact on the fps seems to be almost negligible (it runs at 60fps on a modest geforce 8400).

Pushing the brightness parameter almost to zero creates a nice light blob.
Back to top
 
WWW  
V
Re: how do i make neon fx
Reply #20 - Feb 1st, 2010, 1:54pm  
Hey ac,

Yes it looks like alot of filtering going on and lots of textures used to achieve the effect.
downsampling to a 1/4, blurring with a 13tap gaussian and upscale should work.
also there is no need to go with floating point textures.
Back to top
 
Victor Martins | www.pixelnerve.com/v
WWW  
ac
Re: how do i make neon fx
Reply #21 - Feb 1st, 2010, 4:36pm  
hi V,

You are right, i implemented your suggestions and they work quite nicely. The requirement for float textures is because the original code comes from an HDR example. The toneMap filter does the mapping from the high dynamic range to the [0,1] intervals.

In any case, the output is different between the two methods, specially when the bloom is very strong (brightness parameter close to zero). I put below the complete code of both methods for anyone interested:

http://users.design.ucla.edu/~acolubri/processing/glgraphics/neon.zip

http://users.design.ucla.edu/~acolubri/processing/glgraphics/neon2.zip
Back to top
 
WWW  
Pages: 1 2 
‹ Previous Topic | Next Topic ›