Javascript | PHP | Java | MySQL | HTML5 | JQuery | JOGL | 3D Math | GIT | Gamespot | Linux | Hardware | IPhone | Windows | Apache | C++ |
Search ( Min 3 characters )
| Tech | Title | Last Modified |
![]() | XCode IPhone / IPad Development - opengl 2d Sprite Texture Example | Sat 27 Apr 2013 |
One of the first things you will want to do in you iphone or ipad application is to draw a sprite ... here is how.... First: The following only need to be done once. call this from an init() function or somewhere where the application has been started and is running. IN YOUR HEADER FILE { GLuint posSlot; // pointer to the shader position array GLuint textSlot; // pointer to the texture coord array GLuint textId; // pointer to the texture id GLuint colId; // colour multiplier GLuint mvpm; // position matrix GLuint texture; // the texture } IN YOUR INIT FUNCTION { // load shader program - see shader loading section shaderProgram = loadShaderProgram( "myvertex.vsh" , "myfragment.fsh" ); float Verts[] = { 0, 0, 0, tx1, ty2, 0, 0, 0, // 0, sy, 0, tx1, ty1, 0, 0, 0, // sx, 0, 0, tx2, ty2, 0, 0, 0, // sx, sy, 0, tx2, ty1, 0, 0, 0 }; glGenBuffers(1, &buffer); glBindBuffer(GL_ARRAY_BUFFER, buffer); glBufferData(GL_ARRAY_BUFFER, sizeof(Verts), Verts, GL_DYNAMIC_DRAW); posSlot = glGetAttribLocation(shaderProgram, "Position"); textSlot = glGetAttribLocation(shaderProgram, "TexCoordIn"); textId = glGetUniformLocation(shaderProgram, "Texture"); colId = glGetUniformLocation(shaderProgram, "color"); mvpm = glGetUniformLocation(shaderProgram, "modelViewProjectionMatrix"); } IN YOUR DRAW FUNCTION { float x = 0; // x position float y = 0; // y position glDisable (GL_DEPTH_TEST); glDisable (GL_CULL_FACE); glBindBuffer(GL_ARRAY_BUFFER, buffer); glUseProgram(shaderProgram); glEnableVertexAttribArray(posSlot); glEnableVertexAttribArray(textSlot); glBindTexture(GL_TEXTURE_2D, texture); glUniform1i(textId, 0); glVertexAttribPointer(posSlot, 3, GL_FLOAT, GL_FALSE, 32, 0); glVertexAttribPointer(textSlot, 2, GL_FLOAT, GL_FALSE, 32, (GLvoid*) (sizeof(float) * 3)); GLKMatrix4 matrix = GLKMatrix4MakeTranslation(x, y, 0); glUniformMatrix4fv(mvpm, 1, 0, matrix.m); glUniform4f(colId, 1, 1, 1, 1); // you can change the colour of the sprite here glDrawArrays(GL_TRIANGLE_STRIP, 0, 4); glDisableVertexAttribArray(textSlot); glDisableVertexAttribArray(posSlot); glEnable(GL_DEPTH_TEST); glEnable(GL_CULL_FACE); } And the Shader you will need for this Fragment Shader varying lowp vec2 TexCoordOut; uniform sampler2D Texture; uniform highp vec4 color; void main(void) { highp vec4 textcol = texture2D(Texture, TexCoordOut); gl_FragColor = textcol*color; } Vertex Shader attribute vec4 Position; attribute vec2 TexCoordIn; varying vec2 TexCoordOut; uniform mat4 modelViewProjectionMatrix; void main(void) { gl_Position = modelViewProjectionMatrix *Position; TexCoordOut = TexCoordIn; } | ||
![]() | XCode IPhone / IPad Development - OpenGL Loading a GLSL Shader | Sat 27 Apr 2013 |
Loading a shader for use with Iphone or IPad Open GL Application. in your init code call this GLuint shader = loadShader("Shader.vsh","Shader.fsh"); GLuint loadShader(const char* vpath,const char* fpath) { GLint logLength; GLuint program = glCreateProgram(); char *vs = readFile(vpath); char *fs = readFile(fpath); GLuint vertShader = glCreateShader(GL_VERTEX_SHADER); GLuint fragShader = glCreateShader(GL_FRAGMENT_SHADER); const char* vv = vs, *ff = fs; glShaderSource(vertShader , 1, &vv, NULL); glShaderSource(fragShader, 1, &ff, NULL); glCompileShader(vertShader); glGetShaderiv(vertShader, GL_INFO_LOG_LENGTH, &logLength); if (logLength > 0) { GLchar *log = (GLchar *)malloc(logLength); glGetShaderInfoLog(vertShader, logLength, &logLength, log); NSLog(@"Shader compile log:\n%s", log); free(log); exit(1); } glCompileShader(fragShader); glGetShaderiv(fragShader, GL_INFO_LOG_LENGTH, &logLength); if (logLength > 0) { GLchar *log = (GLchar *)malloc(logLength); glGetShaderInfoLog(fragShader, logLength, &logLength, log); NSLog(@"Shader compile log:\n%s", log); exit(1); free(log); } glAttachShader(program, vertShader); glAttachShader(program, fragShader); glLinkProgram(program); glGetProgramiv(program, GL_INFO_LOG_LENGTH, &logLength); if (logLength > 0) { GLchar *log = (GLchar *)malloc(logLength); glGetProgramInfoLog(program, logLength, &logLength, log); NSLog(@"Program link log:\n%s", log); free(log); exit(1); } delete(vs); delete(fs); return program; } you can see an example of loading a text file @link(here,http://www.guyford.co.uk/showpage.php?id=262) | ||
![]() ![]() | How to setup and load GLSL Shaders in JOGL 2.0 | Wed 25 Jul 2012 |
In this example we set up 2 shaders. 1) A Vertex shader 2) A Fragment shader This tutorial will show you how to Load GLSL Shader into your JOGL Program , and how to use them. Contains FULL Class Code. Add the folowing code to the init glContext. // create a new shader object that we can reference later to activate it. shader = new ShaderControl(); shader.fsrc = shader.loadShader("f.txt"); // fragment GLSL Code shader.vsrc = shader.loadShader("v.txt"); // vertex GLSL Code shader.init(gl); You will have to create your own f.txt and v.txt, there is an example at the bottom of this article. Create this following class. // The shader control class. // loads and starts/stops shaders. Public class ShaderControl { private int vertexShaderProgram; private int fragmentShaderProgram; private int shaderprogram; public String[] vsrc; public String[] fsrc; // this will attach the shaders public void init( GL gl ) { try { attachShaders(gl); } catch (Exception e) { e.printStackTrace(); } } // loads the shaders // in this example we assume that the shader is a file located in the applications JAR file. // public String[] loadShader( String name ) { StringBuilder sb = new StringBuilder(); try { InputStream is = getClass().getResourceAsStream(name); BufferedReader br = new BufferedReader(new InputStreamReader(is)); String line; while ((line = br.readLine()) != null) { sb.append(line); sb.append('\n'); } is.close(); } catch (Exception e) { e.printStackTrace(); } System.out.println("Shader is " + sb.toString()); return new String[] { sb.toString() }; } // This compiles and loads the shader to the video card. // if there is a problem with the source the program will exit at this point. // private void attachShaders( GL gl ) throws Exception { vertexShaderProgram = gl.glCreateShader(GL.GL_VERTEX_SHADER); fragmentShaderProgram = gl.glCreateShader(GL.GL_FRAGMENT_SHADER); gl.glShaderSource(vertexShaderProgram, 1, vsrc, null, 0); gl.glCompileShader(vertexShaderProgram); gl.glShaderSource(fragmentShaderProgram, 1, fsrc, null, 0); gl.glCompileShader(fragmentShaderProgram); shaderprogram = gl.glCreateProgram(); // gl.glAttachShader(shaderprogram, vertexShaderProgram); gl.glAttachShader(shaderprogram, fragmentShaderProgram); gl.glLinkProgram(shaderprogram); gl.glValidateProgram(shaderprogram); IntBuffer intBuffer = IntBuffer.allocate(1); gl.glGetProgramiv(shaderprogram, GL.GL_LINK_STATUS, intBuffer); if (intBuffer.get(0) != 1) { gl.glGetProgramiv(shaderprogram, GL.GL_INFO_LOG_LENGTH, intBuffer); int size = intBuffer.get(0); System.err.println("Program link error: "); if (size > 0) { ByteBuffer byteBuffer = ByteBuffer.allocate(size); gl.glGetProgramInfoLog(shaderprogram, size, intBuffer, byteBuffer); for (byte b : byteBuffer.array()) { System.err.print((char) b); } } else { System.out.println("Unknown"); } System.exit(1); } } // this function is called when you want to activate the shader. // Once activated, it will be applied to anything that you draw from here on // until you call the dontUseShader(GL) function. public int useShader( GL gl ) { gl.glUseProgram(shaderprogram); return shaderprogram; } // when you have finished drawing everything that you want using the shaders, // call this to stop further shader interactions. public void dontUseShader( GL gl ) { gl.glUseProgram(0); } } Place the following functions around the piece of code that you want the shader to affect // Turn on the shader useShader(); ... Drawing code here that uses the shader // turn off the shader dontUseShader(); Now for the GLSL Code itself. These shaders are part of a water effect I use. the fragment shader. < FILE :: f.txt > uniform sampler2D fish_y_offset; uniform float alphavalue; void main() { gl_FragColor = texture2D(fish_y_offset, gl_TexCoord[0].st); gl_FragColor.a=alphavalue; } and the vertex shader < FILE :: v.txt > uniform float waveTime; uniform float waveWidth; uniform float waveHeight; void main(void) { vec4 v = vec4(gl_Vertex); v.y = 11 + sin(waveWidth * v.x + waveTime) * cos(waveWidth * v.z + waveTime) * waveHeight; gl_Position = gl_ModelViewProjectionMatrix * v; gl_TexCoord[0] = gl_MultiTexCoord0; } You will notice that there are some variables that begin with uniform, these can be manipulated from the application. Thus allowing you to configure the shader in real time. To modify the shader variables, add this to your main render loop.. int waveWidthLoc = gl.glGetUniformLocation(sp, "waveWidth"); gl.glUniform1f(waveWidthLoc, waveWidth); In the above code, we ask for the variable "waveWidth", we are then given an id for that variable. int the secondline, we then ask gl to set the variable with our own value waveWidth. | ||
![]() ![]() | JOGL Example - Loading a Texture | Thu 26 Jul 2012 |
To load a texture is very simple. however, it is important to remember that the size of the texture should be a power of 2 for the width and the height. Although this may load on your system , as some GFX cards can handle it, it wont on others, and you will be left with no texture. ie 8,16,32,64,128,256,512,1024,2048 To load a normal texture Texture text = TextureIO.newTexture(new File(filename), false); to load the texture mip map Texture text = TextureIO.newTexture(new File(filename), true); if using MipMaps dont forget the following code: gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_GENERATE_MIPMAP, GL.GL_TRUE); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_BASE_LEVEL, 0); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAX_LEVEL, 5); The JOGL 2 method is as follows To load a texture from a BufferedImage texture = AWTTextureIO.newTexture(<GLProfile>gp, myBufferedImage, <Use Mipmaps>true); And setting the Texture Parameters for mip maps gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2GL3.GL_TEXTURE_BASE_LEVEL, 0); gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2GL3.GL_TEXTURE_MAX_LEVEL, 5); gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2ES1.GL_GENERATE_MIPMAP, GL2.GL_TRUE); | ||
![]() ![]() | JOGL LIGHTING - A Simple Lighting Example | Thu 26 Jul 2012 |
The following code will set up a light source at cords ( 2000,3000,2000) ( x,y,z ) This example uses one light. Ambient light is the minimal light that will be seen. If this was 0,0,0 then where the light does not shine would be black. Which is not really good as when you face the direction of the light, all the objects would appear black. Therefore a 0.2f value for the ambient is sufficient to show the objects and some shading. Diffuse is used along with the normal, this should be set to 1, to allow full light intensity when facing the light. Specular light gives off a shiny surface light reflection. float[] lightPos = { 2000,3000,2000,1 }; // light position float[] noAmbient = { 0.2f, 0.2f, 0.2f, 1f }; // low ambient light float[] diffuse = { 1f, 1f, 1f, 1f }; // full diffuse colour gl.glEnable(GL.GL_LIGHTING); gl.glEnable(GL.GL_LIGHT0); gl.glLightfv(GL.GL_LIGHT0, GL.GL_AMBIENT, noAmbient, 0); gl.glLightfv(GL.GL_LIGHT0, GL.GL_DIFFUSE, diffuse, 0); gl.glLightfv(GL.GL_LIGHT0, GL.GL_POSITION,lightPos, 0); This will give you a basic light source for you scene. Here is an OpenGL V2 Version private void doLighting( GL2 gl ) { GlobalData.lightPos[0] = 50005; GlobalData.lightPos[1] = 30000; GlobalData.lightPos[2] = 50000;// -256 * 3; GlobalData.lightPos[3] = 1; gl.glEnable(GL2.GL_LIGHTING); gl.glEnable(GL2.GL_LIGHT0); float[] noAmbient = { 0.1f, 0.1f, 0.1f, 1f }; // low ambient light float[] spec = { 1f, 0.6f, 0f, 1f }; // low ambient light float[] diffuse = { 1f, 1f, 1f, 1f }; // properties of the light gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_AMBIENT, noAmbient, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_SPECULAR, spec, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_DIFFUSE, diffuse, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_POSITION, GlobalData.lightPos, 0); } In JOGL 2 its almost identical private void doLighting( GL2 gl ) { GlobalData.lightPos[0] = 50005; GlobalData.lightPos[1] = 30000; GlobalData.lightPos[2] = 50000; GlobalData.lightPos[3] = 1; gl.glEnable(GLLightingFunc.GL_LIGHTING); gl.glEnable(GLLightingFunc.GL_LIGHT0); float[] noAmbient ={ 0.1f, 0.1f, 0.1f, 1f }; // low ambient light float[] spec = { 1f, 0.6f, 0f, 1f }; // low ambient light float[] diffuse ={ 1f, 1f, 1f, 1f }; // properties of the light gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_AMBIENT, noAmbient, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_SPECULAR, spec, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_DIFFUSE, diffuse, 0); gl.glLightfv(GLLightingFunc.GL_LIGHT0, GLLightingFunc.GL_POSITION, GlobalData.lightPos, 0); } | ||
![]() ![]() | Setting Ortho Mode in JOGL | Thu 26 Jul 2012 |
If you want to draw a panel or flat sprites ontop of your 3D scene, then you probably want to draw in Ortho mode.. This mode allows you to draw sprites , and polygons in 2D. To set up Orthos mode, simply use the following code public void setOrtho() { gl.glLoadIdentity(); gl.glMatrixMode(GL.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(0, getWidth(), getHeight(), 0, 0, 2000); gl.glMatrixMode(GL.GL_MODELVIEW); gl.glViewport(0, 0, getWidth(), getHeight()); gl.glDisable(GL.GL_CULL_FACE); // Disable Culling gl.glDisable(GL.GL_DEPTH_TEST); // Disable Depth Testing gl.glHint(GL.GL_PERSPECTIVE_CORRECTION_HINT, GL.GL_NICEST); gl.glDisable(GL.GL_LIGHTING); gl.glColor4f(1, 1, 1, 1); } Cull face , and depth testing have been turned off as, we want to see everything we draw, and we dont want to worry about polygon winding. Almost identical in JOGL 2. public void setOrtho(GL2 gl) { gl.glLoadIdentity(); gl.glMatrixMode(GLMatrixFunc.GL_PROJECTION); gl.glLoadIdentity(); gl.glOrtho(0, getWidth(), getHeight(), 0, 0, 2000); gl.glMatrixMode(GLMatrixFunc.GL_MODELVIEW); gl.glViewport(0, 0, getWidth(), getHeight()); gl.glDisable(GL2.GL_CULL_FACE); // Enable Culling gl.glDisable(GL2.GL_DEPTH_TEST); // Enable Culling gl.glHint(GL2ES1.GL_PERSPECTIVE_CORRECTION_HINT, GL2.GL_NICEST); gl.glDisable(GLLightingFunc.GL_LIGHTING); gl.glColor4f(1, 1, 1, 1); } | ||
![]() ![]() | Using MIP Mapped Textures in JOGL | Thu 26 Jul 2012 |
To enable and use Mip Maps in JOGL, insert the following into your main render loop.. gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_BASE_LEVEL, 0); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAX_LEVEL, 5); gl.glTexParameteri(GL.GL_TEXTURE_2D, GL.GL_GENERATE_MIPMAP, GL.GL_TRUE); gl.glTexParameterf(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MAG_FILTER, GL.GL_NEAREST); gl.glTexParameterf(GL.GL_TEXTURE_2D, GL.GL_TEXTURE_MIN_FILTER, GL.GL_NEAREST_MIPMAP_NEAREST); The above sets Mip Mapping on, and with 5 levels. The GL.GL_GENERATE_MIPMAP flag ensures that JOGL will create the mip maps for you. The final part to get Mip Map Textures to work is, when you load the Texture, you must specify true in the "use mipmaps" flag. texture = TextureIO.newTexture(ABufferedImage, true); in JOGL 2 public void setupTextures( GL2 gl) { gl.glTexEnvf(GL2ES1.GL_TEXTURE_ENV, GL2ES1.GL_TEXTURE_ENV_MODE, GL2ES1.GL_MODULATE); gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2GL3.GL_TEXTURE_BASE_LEVEL, 0); gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2GL3.GL_TEXTURE_MAX_LEVEL, 5); gl.glTexParameteri(GL2.GL_TEXTURE_2D, GL2ES1.GL_GENERATE_MIPMAP, GL2.GL_TRUE); gl.glTexParameterf(GL2.GL_TEXTURE_2D, GL2.GL_TEXTURE_MAG_FILTER, GL2.GL_NEAREST); gl.glTexParameterf(GL2.GL_TEXTURE_2D, GL2.GL_TEXTURE_MIN_FILTER,GL2.GL_NEAREST_MIPMAP_NEAREST); } texture = AWTTextureIO.newTexture(<GLProfile>gp, ABufferedImage, <MipMapped Flag>true); | ||
![]() ![]() | Creating a Texture from a Buffered Image in JOGL | Thu 26 Jul 2012 |
To create a texture from a BufferedImage, use the following code. public static Texture createFromMemory( BufferedImage img ) { if (img == null) return null; Texture text = TextureIO.newTexture(img, true); // mipmap on return text; } The JOGL 2 way is slightly different as we cant use TextureIO to do this , so we use public Texture load(BufferedImage img,GLProfile gp) { if (img == null) return null; return AWTTextureIO.newTexture(gp, img, true); } | ||
![]() ![]() | Adding FOG to your scene in JOGL | Thu 26 Jul 2012 |
Adding FOG is simple... call this from your main render loop... OpenGL V1.1.0 public void DoFog( GL gl ) { FOG_DISTANCE = 90; float[] fogcol = { 0, 0, 0, 0 }; gl.glEnable(GL.GL_FOG); // Enable FOG gl.glFogi(GL.GL_FOG_MODE, GL.GL_LINEAR); // Set the FOG Type gl.glFogf(GL.GL_FOG_DENSITY, 0f); // Set Density gl.glFogfv(GL.GL_FOG_COLOR, fogcol, 0); // Set Fog Color gl.glFogf(GL.GL_FOG_START, FOG_DISTANCE - 30); // Start FOG gl.glFogf(GL.GL_FOG_END, FOG_DISTANCE); // End of FOG gl.glHint(GL.GL_FOG_HINT, GL.GL_NICEST); // NICE! } Here is a JOGL 2.0 Version public void DoFog( GL2 gl ) { FOG_DISTANCE = 90; float[] fogcol = { 0, 0, 0, 0 }; gl.glEnable(GL2ES1.GL_FOG); gl.glFogi(GL2ES1.GL_FOG_MODE, GL.GL_LINEAR); gl.glFogf(GL2ES1.GL_FOG_DENSITY, 0f); gl.glFogfv(GL2ES1.GL_FOG_COLOR, fogcol, 0); gl.glFogf(GL2ES1.GL_FOG_START, FOG_DISTANCE - 30); gl.glFogf(GL2ES1.GL_FOG_END, FOG_DISTANCE); gl.glHint(GL2ES1.GL_FOG_HINT, GL.GL_NICEST); } | ||


