The OpenGL ES 2.0 Programming Guide

Aaftab Munshi, Dan Ginsburg, Dave Shreiner

Mentioned 17

The first comprehensive guide to developing 3D graphic applications on mobile devices, from the leading authorities on OpenGL ES.

More on Amazon.com

Mentioned in questions and answers.

Well, here's my request. I don't know OpenGL already, and I'm not willing to learn it, I want to learn OpenGL ES directly since I'm targeting my development to android, however. I want to learn OpenGL ES in order to develop my 2D games. I chose it for performances purpose (since basic SurfaceView drawing isn't that efficient when it comes to RT games). My question is: where to start? I've spent over a month browsing Google and reading/trying some tutorials/examples I've found anywhere but to be honest, it didn't help much and this is for two reasons:

  1. Almost all the articles/tutorials I've came across are 3D related (I only want to learn how to do my 2D Sprites drawing)
  2. There's no base to start from since all the articles targets a specific things like: "How to draw a triangle (with vertices)", "How to create a Mesh"... etc.

I've tried to read some source code too (ex.: replica island) but the codes are too complicated and contains a lot of things that aren't necessary; result: I get lost among 100 .java files with weird class names and stuff.

I guess there's no course like the one I'm looking for, but I'll be very glad if somebody could give me some guidelines and some links maybe to learn what I'm up to (only OpenGL ES 2D Sprites rendering! nothing 3D).

2D programming is just 3D programming that's constrained to a plane. You'll have no choice but to learn 3D, but when you're using it just set z = 0.

There is an offical book on OpenGL ES. That might give you the intro that you're after: http://www.amazon.com/OpenGL-ES-2-0-Programming-Guide/dp/0321502795/

I am aware that there were similar questions in past few years, but after doing some researches I still can't decide where from and what should I learn. I would also like to see your current, actual view on modern OpenGL programming with more C++ OOP and shader approach. And get sure that my actual understanding on some things is valid.

So... currently we have OpenGL 4.2 out, which as I read somewhere requires dx11 hardware (what does it mean?) and set of 'side' libraries, to for example create window.

There is the most common GLUT, which I extremely hate. One of main reason are function calls, which doesn't allow freedom in the way how we create main loop. As some people were telling, it was not meant for games.

There is also GLFW, which actually is quite nice and straight-forward to me. For some reason people use it with GLUT. ( which provides not only window initialisation, but also other utilities? )

And there is also SFML and SDL ( SDL < SFML imo ), whereas both of them sometimes need strange approach to work with OGL and in some cases are not really fast.

And we have also GLEW, which is extension loading utility... wait... isn't GLUT/GLFW already an extension? Is there any reason to use it, like are there any really important extensions to get interested with?

Untill now we have window creation (and some utilities), but... OGL doesn't take care of loading textures, neither 3D models. How many other libs do I need?

Let's mention education part now. There is (in)famous NeHe tutorial. Written in C with use of WinApi, with extremely unclear code and outdated solutions, yet still the most popular one. Some stuff like Red Book can be found, which are related to versions like 2.x or 3.x, however there are just few (and unfinished) tutorials mentioning 4.x.

What to go with?

If you are writing a game, I would avoid things like GLUT, and write your own wrappers that will make the most sense for your game rendering architecture.

I would also avoid OpenGL 4.2 at this point, unless you only want to target specific hardware on specific platforms, because support is minimal. i.e., the latest version of Mac OSX Lion just added support for OpenGL 3.2.

For the most comprehensive coverage of machines made in the last few years, build your framework around OpenGL 2.1 and add additional support for newer OpenGL features where they make sense. The overall design should be the same. If you're only interested in targeting "current" machines, i.e. machines from late 2011 and forward, build your framework around OpenGL 3. Only the newest hardware supports 4.2, and only on Windows and some Linux. If you're interested in targeting mobile devices and consoles, use OpenGL ES 2.0.

GLEW loads and manages OpenGL Extensions, which are hardware extensions from different vendors, as opposed to GLUT which is a toolkit for building OpenGL applications, completely different things. I would highly recommend using GLEW, as it will provide a clean mechanism for determining which features are available on the hardware it is being run on, and will free you from the task of having to manually assign function pointers to the appropriate functions.

OpenGL SuperBible is a pretty good book, also check OpenGL Shading Language. Everything you do with modern OpenGL is going to involve the use of shaders - no more fixed functionality - so your biggest challenge is going to be understanding GLSL and how the shader pipelines work.

I'm currently learning modern OpenGL as well. I've also had hard time finding good resources, but here's what I've discovered so far.

I searched for a good book and ended up with OpenGL ES 2.0 Programming Guide, which I think is the best choice for learning modern OpenGL right now. Yes, the book is about OpenGL ES, but don't let that scare you. The good thing about OpenGL ES 2.0 is that all the slow parts of the API have been removed so you don't get any bad habits from learning it while it's still very close to desktop OpenGL otherwise, with only a few features missing, which I think you can learn rather easily after you've mastered OpenGL ES 2.0.

On the other hand, you don't have the mess with windowing libraries etc. that you have with desktop OpenGL and so the book on OpenGL ES won't help you there. I think it's very subjective which libraries to use, but so far I've managed fine with SDL, ImageMagick and Open Asset Import Library.

Now, the book has been a good help, but apart from that, there's also a nice collection of tutorials teaching modern OpenGL from ground up at OpenGL development on Linux. (I think it's valid on other OSes the name nevertheless.) The book, the tutorials and a glance or two every now and then to the Orange Book have been enough in getting me understand the basics of modern OpenGL. Note that I'm still not a master in the area, but it's definitely got me started.

The iPhone SDK has an example of using ES 2.0 with a set of (Vertex & Fragment) GLSL shaders to render a varying colored box. Is there an example out there on how to render a simple texture using this API? I basically want to take a quad, and draw a texture onto it.

The old ES 1.1 API's don't work at all anymore, so I'm needing a bit of help getting started. Most shader references talk mainly about advanced shading topics, but I'm really unsure about how to tell the shader to use the bound texture, and how to reference the UV's.

Thanks!

There's a nice tutorial on this in the web site to go with the book OpenGL ES 2 The examples from the book are all at www.opengles-book.com.

Chapter 9, Simple_Texture2D does exactly what you want. It sets up a shader that samples a texture, initializes it, and shades the triangles using the texture.

The shader program is close to:

varying vec2 v_texCoord;
uniform sampler2D s_texture;
void main() {
  gl_FragColor = texture2D(s_texture, v_texCoord);
}

and you set it up thusly:

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_2D, userData->textureId);
// Set the sampler texture unit to 0
glUniform1i(userData->samplerLoc, 0);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_SHORT, indices);

But see the actual code, from the links I gave above, to really see the example.

Good day!

I am doing some simple tests with OpenGL ES 2.0 for Android. I am using a model loader that works well in the Emulator. However, when I try to use it on a ASUS ZenFone 2E (Android 5.0.1) (Prepaid Phone) it simply shows the clear color of the background with no rotating model. I am hoping that someone who is well experienced in both OpenGL ES 2.0 and Android will assist me. Sorry for the verbosity, I really have no idea why it isn't working on the phone. Here is the source (I'm an extreme novice):

GameView.java:

package wise.child.dials;

import android.content.Context;
import android.opengl.GLES20;
import android.opengl.GLSurfaceView;
import android.opengl.Matrix;
import android.os.SystemClock;

import java.io.IOException;
import java.nio.FloatBuffer;

import javax.microedition.khronos.egl.EGLConfig;
import javax.microedition.khronos.opengles.GL10;

import model.Model;
import render.Program;
import render.Shader;
import util.OBJLoader;

public class GameView extends GLSurfaceView implements GLSurfaceView.Renderer {

    // App Context
    private Context mContext;

    // Handles
    private int mPositionHandle;
    private int mColorHandle;
    private int mMVPMatrixHandle;

    // Program & Shaders
    private Program testProgram;
    private Shader testVertexShader;
    private Shader testFragmentShader;

    // Model
    private Model model;
    private FloatBuffer vertexFloatBuffer;
    private int vertexCount;

    // Matrices
    private final float[] mMVPMatrix = new float[16];
    private final float[] mProjectionMatrix = new float[16];
    private final float[] mViewMatrix = new float[16];
    private float[] mRotationMatrix = new float[16];

    // Constructor
    public GameView(Context context) {
        super(context);

        // App Context
        mContext = context;

        // OpenGL ES 2.0 Context
        setEGLContextClientVersion(2);

        // Renderer
        setRenderer(this);
    }

    /*-------------------*/
    /* Rendering Methods */
    /*-------------------*/

    // One Time Initialization
    @Override
    public void onSurfaceCreated(GL10 gl, EGLConfig config) {
        GLES20.glClearColor(0.95f, 0.95f, 0.95f, 1f);

        // Initialize Shaders
        testVertexShader = new Shader(GLES20.GL_VERTEX_SHADER, mContext, R.raw.test_vertex_shader);
        testFragmentShader = new Shader(GLES20.GL_FRAGMENT_SHADER, mContext, R.raw.test_fragment_shader);

        // Create Program
        testProgram = new Program(testVertexShader, testFragmentShader);
        testProgram.use();

        // Get Handles - Uniforms & Attributes
        mPositionHandle = testProgram.getAttribute("vPosition");
        mColorHandle = testProgram.getUniform("vColor");
        mMVPMatrixHandle = testProgram.getUniform("uMVPMatrix");

        // Model
        try {
            model = OBJLoader.loadOBJ(mContext, R.raw.spider);
            vertexFloatBuffer = model.getVerticesFromIndices();
            vertexCount = model.getVertexCount();
        } catch (IOException e) {
            e.printStackTrace();
        }

    }

    // Drawing Call
    @Override
    public void onDrawFrame(GL10 gl) {
        GLES20.glClear(GLES20.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);

        // Time and Rotation Animation
        float[] scratch = new float[16];
        long time = SystemClock.uptimeMillis() % 4000L;
        float angle = 0.090f * ((int) time);
        Matrix.setRotateM(mRotationMatrix, 0, angle, angle, angle, angle);

        // Set and Bind Data
        GLES20.glEnableVertexAttribArray(mPositionHandle);
        GLES20.glVertexAttribPointer(mPositionHandle, 3, GLES20.GL_FLOAT, false, 12, vertexFloatBuffer);

        // Set Color
        float[] color = {.75f, 0f, 0f, 1f};
        GLES20.glUniform4fv(mColorHandle, 1, color, 0);

        // Camera Position - View Matrix
        Matrix.setLookAtM(mViewMatrix, 0, 0, 0, -15, 0f, 0f, 0f, 0f, 1.0f, 0.0f);

        // Projection x View
        Matrix.multiplyMM(mMVPMatrix, 0, mProjectionMatrix, 0, mViewMatrix, 0);

        // Rotation x MVP
        Matrix.multiplyMM(scratch, 0, mMVPMatrix, 0, mRotationMatrix, 0);

        // Final Matrix
        GLES20.glUniformMatrix4fv(mMVPMatrixHandle, 1, false, scratch, 0);

        // Draw
        GLES20.glDrawArrays(GLES20.GL_TRIANGLES, 0, vertexCount);

        // Disable
        GLES20.glDisableVertexAttribArray(mPositionHandle);

    }

    // GLSurface Changed
    @Override
    public void onSurfaceChanged(GL10 gl, int width, int height) {

        // GL Viewport & Aspect Ratio
        GLES20.glViewport(0, 0, width, height);
        float aspectRatio = (float) width / height;

        // Calculate Projection
        Matrix.frustumM(mProjectionMatrix, 0, -aspectRatio, aspectRatio, -1, 1, 3, 50);
    }

}

Shader.java

package render;

import android.content.Context;
import android.opengl.GLES20;
import android.util.Log;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

public class Shader {

    // Shader Source Code
    public String shaderSource;

    // Shader Handle
    public int shaderHandle;

    public int programHandle;

    public Shader(int type, Context context, int resID) {

        try {
            shaderSource = loadShader(context, resID);
            Log.d("Shader Load", "Success!");
            System.out.println(shaderSource);
        } catch (IOException e) {
            Log.d("Shader Load", "Failed.");
            e.printStackTrace();
        }

        shaderHandle = GLES20.glCreateShader(type);
        GLES20.glShaderSource(shaderHandle, shaderSource);
        GLES20.glCompileShader(shaderHandle);

    }

    // Get From Raw Folder
    private String loadShader(Context context, int resID) throws IOException {

        BufferedReader reader = new BufferedReader(
                new InputStreamReader(context.getResources().openRawResource(resID))
        );

        String line, shader;
        StringBuilder builder = new StringBuilder();

        while ((line = reader.readLine()) != null) {
            builder.append(line).append('\n');
        }

        reader.close();

        shader = builder.toString();

        return shader;
    }

    // Associated Program
    public void setProgram(int handle) {
        programHandle = handle;
    }


}

Program.java

package render;

import android.opengl.GLES20;

import java.util.ArrayList;
import java.util.List;

public class Program {

    public int handle;

    private Shader vertexShader;
    private Shader fragmentShader;

    private List<String> attributes = new ArrayList<String>();
    private List<String> uniforms = new ArrayList<String>();

    public Program(Shader vertexShader, Shader fragmentShader) {
        this.vertexShader = vertexShader;
        this.fragmentShader = fragmentShader;

        this.vertexShader.setProgram(handle);
        this.fragmentShader.setProgram(handle);

        handle = GLES20.glCreateProgram();
        GLES20.glAttachShader(handle, vertexShader.shaderHandle);
        GLES20.glAttachShader(handle, fragmentShader.shaderHandle);
        GLES20.glLinkProgram(handle);


    }

    public void use() {
        GLES20.glUseProgram(handle);
    }

    public int getAttribute(String name) {
        return GLES20.glGetAttribLocation(handle, name);
    }

    public void setAttribute(String name) {

    }

    public int getUniform(String name) {
        return GLES20.glGetUniformLocation(handle, name);
    }
}

Model.java

package model;

import java.nio.ByteBuffer;
import java.nio.ByteOrder;
import java.nio.FloatBuffer;
import java.util.ArrayList;
import java.util.List;

public class Model {

    private static final int NUM_OF_COORDS = 3;

    public List<Vertex> vertices = new ArrayList<Vertex>();
    public List<Vertex> normals = new ArrayList<Vertex>();
    public List<Face> faces = new ArrayList<Face>();

    public Model() {}

    public int getVertexCount() {
        return faces.size() * NUM_OF_COORDS;
    }

    public FloatBuffer getVerticesFromIndices() {

        int numOfVertices = 3;
        int bytesPerFloat = 4;

        ByteBuffer bb = ByteBuffer.allocateDirect(faces.size() * numOfVertices * NUM_OF_COORDS * bytesPerFloat);
        bb.order(ByteOrder.nativeOrder());
        FloatBuffer vertexFloatBuffer = bb.asFloatBuffer();

        // Use indices to find proper vertex
        for (Face face : faces) {

            // VERTEX 1
            vertexFloatBuffer.put(vertices.get((int) (face.vertex.x - 1)).x);
            vertexFloatBuffer.put(vertices.get((int) (face.vertex.x - 1)).y);
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.x - 1)).z);

            // VERTEX 2
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.y - 1)).x);
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.y - 1)).y);
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.y - 1)).z);

            // VERTEX 3
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.z - 1)).x);
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.z - 1)).y);
            vertexFloatBuffer.put(vertices.get((int)(face.vertex.z - 1)).z);
        }

        vertexFloatBuffer.position(0);

        return vertexFloatBuffer;
    }

    public FloatBuffer getNormalsFromIndices() {

        int numOfVertices = 3;
        int bytesPerFloat = 4;

        ByteBuffer bb = ByteBuffer.allocateDirect(faces.size() * numOfVertices * NUM_OF_COORDS * bytesPerFloat);
        bb.order(ByteOrder.nativeOrder());
        FloatBuffer normalFloatBuffer = bb.asFloatBuffer();

        // Use indices to find proper normal
        for (Face face : faces) {

            // VERTEX 1
            normalFloatBuffer.put(normals.get((int) (face.normal.x - 1)).x);
            normalFloatBuffer.put(normals.get((int) (face.normal.x - 1)).y);
            normalFloatBuffer.put(normals.get((int)(face.normal.x - 1)).z);

            // VERTEX 2
            normalFloatBuffer.put(normals.get((int)(face.normal.y - 1)).x);
            normalFloatBuffer.put(normals.get((int)(face.normal.y - 1)).y);
            normalFloatBuffer.put(normals.get((int)(face.normal.y - 1)).z);

            // VERTEX 3
            normalFloatBuffer.put(normals.get((int)(face.normal.z - 1)).x);
            normalFloatBuffer.put(normals.get((int)(face.normal.z - 1)).y);
            normalFloatBuffer.put(normals.get((int)(face.normal.z - 1)).z);
        }

        normalFloatBuffer.position(0);

        return normalFloatBuffer;
    }


}

OBJLoader.java

package util;

import android.content.Context;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

import model.Face;
import model.Model;
import model.Vertex;

public class OBJLoader {

    /* loads .obj data from file in res/raw folder */
    public static Model loadOBJ(Context context, int resID) throws IOException {

        Model model = new Model();

        BufferedReader reader = new BufferedReader(
                new InputStreamReader(context.getResources().openRawResource(resID))
        );

        String line;

        while ((line = reader.readLine()) != null) {
            if (line.startsWith("v ")) {
                // Vertex
                float x = Float.valueOf(line.split(" ")[1]);
                float y = Float.valueOf(line.split(" ")[2]);
                float z = Float.valueOf(line.split(" ")[3]);
                model.vertices.add(new Vertex(x, y, z));

            } else if (line.startsWith("vn ")) {
                // Normal
                float x = Float.valueOf(line.split(" ")[1]);
                float y = Float.valueOf(line.split(" ")[2]);
                float z = Float.valueOf(line.split(" ")[3]);
                model.normals.add(new Vertex(x, y, z));

            } else if (line.startsWith("f ")) {
                // Face
                Vertex vertexIndices = new Vertex(
                        Float.valueOf(line.split(" ")[1].split("/")[0]),
                        Float.valueOf(line.split(" ")[2].split("/")[0]),
                        Float.valueOf(line.split(" ")[3].split("/")[0])
                );

                Vertex normalIndices = new Vertex(
                        Float.valueOf(line.split(" ")[1].split("/")[2]),
                        Float.valueOf(line.split(" ")[2].split("/")[2]),
                        Float.valueOf(line.split(" ")[3].split("/")[2])
                );

                model.faces.add(new Face(vertexIndices, normalIndices));
            }
        }

        reader.close();

        return model;
    }
}

MainActivity.java

package wise.child.dials;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Fullscreen & No Title Bar
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

        // Set OpenGL ES Drawing Surface (Game View)
        setContentView(new GameView(this));
    }
}

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="wise.child.dials">

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <supports-gl-texture android:name="GL_OES_compressed_ETC1_RGB8_texture" />
    <supports-gl-texture android:name="GL_OES_compressed_paletted_texture" />

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".MenuActivity"
            android:screenOrientation="landscape"
            android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen">
        </activity>

        <activity
            android:name=".MainActivity"
            android:screenOrientation="landscape"
            android:theme="@android:style/Theme.Holo.NoActionBar.Fullscreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <activity android:name=".SplashScreen" />
    </application>

</manifest>

Vertex Shader

attribute vec4 vPosition;

uniform mat4 uMVPMatrix;

void main() {
    gl_Position = uMVPMatrix * vPosition;
}

Fragment Shader

uniform vec4 vColor;

void main() {
    gl_FragColor = vColor;
}

enter image description here

The Solution to this Particular Issue:

So, I added this line to my fragment shader:

precision mediump float;

to give us:

Fragment Shader

precision mediump float;

uniform vec4 vColor;

void main() {
    gl_FragColor = vColor;
}

Why this worked, I'm embarrassed to say that I do not know. If anybody is willing to elaborate further, please do I am curious. I'm still learning OpenGL ES 2.0. In my reading of OpenGL ES 2.0 Programming Guide (Good Book), I came across that line. And they noted, "In OpenGL ES 2.0, nothing can be drawn unless a valid vertex and fragment shader have been loaded." The Android tutorial also included this line, so I know it's critical.

I'm an Objective-C / Swift software developer (in training) currently with an application in the App Store. But I have recently really been interested in Metal, Apple's new alternative to OpenGL. But I'm not exactly sure how to begin... Apple's documentation is handy, but only if you really know what you are doing in the first place. Are there any good tips to beginning? I really haven't explored the area of 3D game programming so would you recommend I learn another language first? And if so which?

I'm just looking for good tutorial books or sites that get in depth with the how and why. I like to understand what exactly I'm doing instead of just typing in code, but there are so many languages and beginner's books that I really don't know where to start... Can anyone help me with this?

Metal is a newer graphics API. So if you are new to graphics and 3D game programming you may want to start with OpenGL- specifically since there are many textbooks out there that teaches you fundamentals of graphics using OpenGL. As for a web page on OpenGL, one of my favorite ones is songho. Books on OpenGL ES2.0 and OpenGL ES3.0 includes sections on programming with OpenGLES for iOS.

If you would specifically like to explore Metal API itself, there are multiple videos from WWDC 2014 that details on the basics and has demos on how to do work with Metal in Xcode. An introductory article that details on what and why with respect to Metal is the objc.io one. And a more detailed one is metalbyexample.

To understand in depth as to how these graphics APIs work, you might need a grasp on GPU architecture. The Real-Time Rendering is probably the best book on the subject. These lecture videos from Prof. John Owens at UC Davis also describes the architecture in a clear and concise manner.

I am trying to find some very basic tutorials like how to draw a line, how to draw a triangle, how to draw a rectangle etc using OpenGLES in android. All the tutorials I found are in Java but I am looking for C++ based samples. I'll be very thankful if someone can point me to such tutorials.

Update

I am creating activity and renderer in Java but I want to implement/redirect methods like OnDrawFrame, OnSurfaceChanged and OnSurfaceCreated in/to C++.

I would advise to first learn OpenGL (2.0+) on the desktop and then move to OpenGL|ES. As a beginner you are bound to make mistakes and it will be easier to find, fix and learn from them as well the theory and requirements of 3D rendering. When you have a firm grasp you could make the jump instantly into OGL|ES with just the reference pages at hand.

For a crash course though, this book and that have proven quite useful.

Actually this question is asked earlier.. OpenGL on Android using C++ only may be its useful for you.. But the correct approach is first learn opengl because opengles is like a subset of opengl. here a link for a good book http://www.amazon.com/OpenGL-SuperBible-Comprehensive-Tutorial-Reference/dp/0321712617/ref=sr_1_2?s=books&ie=UTF8&qid=1318312610&sr=1-2

I'm working on an app based on Apple's GLPaint sample code. I've changed the clear color to transparent black and have added an opacity slider, however when I mix colors together with a low opacity setting they don't mix the way I'm expecting. They seem to mix the way light mixes, not the way paint mixes. Here is an example of what I mean:

enter image description here

The "Desired Result" was obtained by using glReadPixels to render each color separately and merge it with the previous rendered image (i.e. using apple's default blending).

However, mixing each frame with the previous is too time consuming to be done on the fly, how can I get OpenGL to blend the colors properly? I've been researching online for quite a while and have yet to find a solution that works for me, please let me know if you need any other info to help!

From the looks of it, with your current setup, there is no easy solution. For what you are trying to do, you need custom shaders. Which is not possible using just GLKit.

Luckily you can mix GLKit and OpenGL ES.

My recommendation would be to:

  1. Stop using GLKit for everything except setting up your rendering surface with GLKView (which is tedious without GLKit).
  2. Use an OpenGl program with custom shaders to draw to a texture that is backing an FBO.
  3. Use a second program with custom shaders that does post processing (after drawing above texture to a quad which is then rendered to the screen).

A good starting point would be to load up the OpenGl template that comes with Xcode. And start modifying it. Be warned: If you don't understand shaders, the code here will make little sense. It draws 2 cubes, one using GLKit, and one without - using custom shaders.

References to start learning:

Finally, if you are really serious about using OpenGL ES to it's full potential, you really should invest the time to read through OpenGL ES 2.0 programming guide. Even though it is 6 years old, it is still relevant and the only book I've found that explains all the concepts correctly.

I want to render a scene with an outline post processing effect in OpenGL ES 2.0.

First I render all the opaque objects. Then I use a post processing shader for silhouette detection that uses the depth buffer as a texture. And now I want to render all the objects using alpha blending, without writing to the depth buffer, but using depth testing with the values from the depth buffer texture used for silhouette detection.

If I would have rendered the translucent objects before the post processing, the post processing would have rendered the outlines of opaque objects over them since they don't write to the depth buffer.

How do you tell OpenGL ES 2.0 to use a texture as the depth buffer?

Thank you

Check out the OES_depth_texture extension. With this you can

// generate and bind a new Framebuffer object
glGenFramebuffers( ... );
glBindFramebuffer( ... );

// create a depth texture
glTexImage2D(...,  GL_DEPTH_COMPONENT, ...);

// and attach it to the Framebuffer with     
glFramebufferTexture2D(..., GL_DEPTH_ATTACHMENT, ...);

Without OpenGL extensions there is no perfect solution. You can write depth values into the color buffer, but you will have limited precision there.

This SO thread covers the same question for WebGL which suffers from the same problem.
The GLES2 book covers Framebuffer Objects and Renderbuffer Objects, including extensions, in chapter 12.

I'm slowly learning OpenGLES 2.0 using my iPad (running iOS 4.3) and XCode 4 (on a Mac running Snow Leopard).

I've been following this tutorial so far and have a simple spinning cube with very basic GLSL code to display it.

Are there any step by step tutorials out there that explain how to do really simple lighting? I've found quite a lot of snippets of GLSL however I can't seem to find any examples that show what to do with it. To begin with all I want is some ambient lighting and a light source I can position somewhere that provides diffuse lighting.

I've found various tutorials (such as the NeHe GLSL one), but unless I'm doing something wrong they give errors about undefined identifiers for things like "gl_NormalMatrix" and "gl_LightSource".

this tutorial is not about opengl es, but worth reading http://www.lighthouse3d.com/tutorials/glsl-tutorial/lighting/

you need to read the opengl es spec, to see what constant and function you can use.

opengl es is not the same as opengl. you should read this

http://www.khronos.org/opengles/sdk/docs/reference_cards/OpenGL-ES-2_0-Reference-card.pdf

in opengl es 2.0, you don't have gl_NormalMatrix, and gl_LightSource, because there is no fixed rendering pipeline, that is the biggest difference between es and the normal opengl.

Instead of using gl_NormalMaxtrix and gl_lightsource, you have to load in your own matrix and light sources. but the concept of rendering is the same as the normal opengl, just that you will have to write everything by yourself.

I remember this book has an implementation of the whole rendering pipeline with opengl es

http://www.amazon.com/iPhone-Programming-Developing-Graphical-Applications/dp/0596804822/ref=sr_1_1?ie=UTF8&qid=1314213541&sr=8-1

or maybe this book

http://www.amazon.com/OpenGL-ES-2-0-Programming-Guide/dp/0321502795/ref=sr_1_1?s=books&ie=UTF8&qid=1314213582&sr=1-1

I am not sure. it's long time ago.

This is a follow up to my original Question, which was probably too broad (whereas this one is probably too specific but maybe I can apply Newton's Method).

My specific situation is: OpenGL ES 2.0, on Android, using only Java (no JNI/Native code).

I am trying to understand how EGL and Android's GLES implimentation work together (or don't). I am having trouble because the EGL interface(API) does not seem well suited to Android's Java centric, Activity based OS.

As a specific example: I have subclassed GLSurfaceView and create an instance using an XML layout and then use findViewById() to retrieve a reference. Using this approach I have the textured triangle example working (GLES 2.0 on Android 2.2, API level 8). This example does not use EGL. As a learning exercise I wanted to re-write it using EGL.

All the examples I can find use eglGetDisplay() and eglInitialize(), and create a context in puff of greasy black smoke. None of the examples, references and questions I have found apply specifically to ES2.0/EGL/Android/Java. Am I completely missing something? This question is related (I think) but does not have any responses and the example used in the ES 2.0 Programming Guide is a stand alone C implementation.

What's the best way to run into android game development with OpenGL ES? I tried some tutorials, but all they assume that you are already familiar with OpenGL(using c++). So, if I want to use OpenGL ES I need to learn it with c++?

This book is pretty awesome for learning Opengl ES 2.0. It does a great job of teaching the ins and outs of opengl es in a platform agnostic POV. From that point the OpenGL/interface examples for the android sdk/ndk should get you where you need to go!

Are there any e-books out there on the topic of OpenGL in Android?

You haven't said how experienced you are with OpenGL and/or Android in general, but I'll assume that you are familiar with the basics.

In that case, the two books in this series both have significant coverage of OpenGL, which you can see by looking inside at their table of contents:

Those, together with a reference book on standard OpenGL ES 2.0 should be all you need for a long, long time.

I confess, I have only looked through parts of the entire ocean of GL questions here to find this. Please comment if you find a duplicate.

I'm looking for a very small tutorial or if possible a ready code example of how to use OpenGL ES 2.0 as a simple drawing surface in Windows.

By "simple" I mean I will not do 3D, layers, shaders or anything like that (maybe later). I just want a GL surface set up in a standard Win32 window and do some "putpixel()", "line()", "rect()", "circle" etc. Basically using GL as a replacement for standard Win32 Device Contexts.

In short, something like this:

  1. Include headers, link to lib
  2. call init/setup surface
  3. PutRect
  4. Refresh
  5. PutLine
  6. Refresh
  7. Cleanup/Exit

Most tutorials I find start with "Once upon a time..." which I might dig into later on, but now I just need the fastest startup possible.

This is a hard question, what you want is a 2D Graphics or Game engine that uses OpenGL ES 2.0. I don't know any, but i will give you the tools you need.

You should get the book OpenGL ES 2.0 Programming Guide, it contains everything about OpenGL ES 2.0. You will have to use shaders since ES 2.0 doesn't contain any fixed function pipeline. That book contains basic shaders you can use.

This other question here contains tutorials and sample code for OpenGL ES 2.0

This should be enough for you to learn how to draw more complex primitives as circles and lines.

To draw pixels on the screen, use a 2D texture. Painting pixel-by-pixel is going to be very slow.

I hope this helps you. Remember, OpenGL ES 2.0 is very different to OpenGL ES 1.1 and OpenGL!

if this topic is a duplicate, I'm sorry, but I couldn't find the information I am asking anywhere.

I had started learning OpenGL, and I had even made a very simple game using OpenGL ES 1.1 some years ago for iOS. However, I have abandoned it in favor of other projects. The last version of OpenGL I checked out was 2.1, and frankly, I just checked it out without giving it too much attention before abandoning it for my full time iOS employment.

Now, I want to pick it up again. However, the books I have cover OpenGL 2.5 (Red Book), OpenGL ES 2.0 (I hadn't have the chance to open it) and OpenGL Shading language (I can't remember which one, but I bought it at the same time I bought the Red Book). I have read that OpenGL 3.0 and above changed dramatically the rendering pipeline making it fully programmable, and that's why it dropped support for older features, getting also rid of obsolete and bloating functions.

I have two computers with OS X 10.7.4, a Macbook with GeForce 9400M, and an iMac with ATI Radeon HD 6750 Mobility, both of which I believe are in compliance with OpenGL 3.0 (at least with most features).

Giving all this information, here are my main questions:

  1. Are there any good start up tutorials in OpenGL 3.0+?
  2. Are there any good start up tutorials in OpenGL 3.0 + for OS X? All I could find was outdated tutorials for fixed pipeline
  3. Are the books I already have going to help me or will I need to buy their newest versions due to the shift in the OpenGL pipeline?
  4. Is there something I have misunderstood or that I am missing?

My target is mainly OS X, iOS and Android, therefore I am not interested in platform-specific resources and information. I understand that every platform has its own implementation and extensions to the OpenGL API, but I wan to be as platform-independent as possible. I am not specifying any language in my question, since I am proficient in C/C++/ObjC and the Android OpenGL Java implementation is not that different from what I hear.

Time is not an issue, nor my mathematical/programming skills. And I also don't want to initially learn how to use any wrappers/frameworks around OpenGL, before I learn the basics of OpenGL before learning abstract notions and frameworks around it.

Thank in advance for all the information and directions you can give me regarding this matter.

Answer to question 3:

An excellent book about OpenGL ES 2.0 is OpenGL ES 2.0 Programming Guide by Aaftab Munshi. As OpenGL ES 2.0 is roughly a subset of OpenGL 3.0+, this book might be useful for OpenGL 3.0+ developers as well.

There is no really good book about OpenGL 3.0+. The currently available editions of the OpenGL Red Book mainly focus on old-style deprecated OpenGL programming and can not be recommended. There will be a new edition of the OpenGL Red Book available in January 2013 with 85% new material and focus on modern OpenGL programming. Wait with the Red Book until then.

I'm following a real complete tutorial for 2D game developing on android using OpenGL, and I encountered the following

static final String VERTEX_SHADER_CODE =
        "uniform mat4 u_mvpMatrix;" +
        "attribute vec4 a_position;" +

        "void main() {" +
        "  gl_Position = u_mvpMatrix * a_position;" +
        "}";

static final String FRAGMENT_SHADER_CODE =
        "precision mediump float;" +
        "uniform vec4 u_color;" +

        "void main() {" +
        "  gl_FragColor = u_color;" +
        "}";

I'm new to OpenGL so I'd like to know what does that code means? or where can I read more about it.

I also read about GL Program, I'd like to know what is that too.

These are two pieces of code that will get executed by the graphics chip. The code is written in GLSL ES, a language based on GLSL 1.20 from desktop OpenGL.

The first piece of code is the vertex shader; it is executed for each vertex. The second is the fragment shader; it is executed for each pixel of rasterized geometry. Your examples do just the bare minimum, or maybe even less than that. For example, shader code usually performs lighting computations. These computations are missing here; the rendered output will not look like 3D objects yet. Later tutorials will add these computations.

If you start with OpenGL and GLSL on Android, it is a good idea to read an OpenGL ES2.0 book like this one. There are also books specific for GLSL, but general OpenGL books cover everything you need when you get started.

One more note: Some Android tutorials and example apps store shader code in string literals like you posted. It is actually quite a pain to write code like this (no line breaks, no syntax highlighting). You might want to read you shader programs from separate text files instead.

I'm having a really hard time finding beginner-friendly resources about using Vertex Buffer Objects.

The closest thing I came across was this tutorial, but it deals with a 3D rotating cube and also doesn't do any subsequent color modification after the VBO has been created.

Maybe someone knows an even better tutorial which reduces the complexity to the simplest base line possible to understand how VBOs work.

My boss wants me to implement VBOs for a simulation where we have a grid of rectangles which is colorized about 30 times per second. Right now my logic simply creates one rectangle after another and issues a glDrawArrays call, which is very slow.

Here is the best tutorial I've found online about OpenGL ES: http://iphonedevelopment.blogspot.com/2009/05/opengl-es-from-ground-up-table-of.html

You also have the Golden Book if necessary: http://www.amazon.com/exec/obidos/ASIN/0321502795/khongrou-20 (10 pages to read in chapter 6 to get an introduction on VBOs)

(and what about giving up OpenGL ES 1.1 to OpenGL ES 2.0 ?)

OpenGL for Embedded Systems (OpenGL ES) is a subset of the OpenGL 3D graphics API designed for embedded devices such as mobile phones, PDAs, and video game consoles. OpenGL ES is managed by the not-for-profit technology consortium, the Khronos Group, Inc.

Current version is OpenGL ES 2.0 ( tag), publicly released in March 2007. It eliminates most of the fixed-function rendering pipeline in favor of a programmable one. Almost all rendering features of the transform and lighting pipelines, such as the specification of materials and light parameters formerly specified by the fixed-function API, are replaced by shaders written by the graphics programmer. As a result, OpenGL ES 2.0 is not backwards compatible with OpenGL ES 1.1.

The latest version is OpenGL ES 3.0 specification, publicly released in August 2012. OpenGL ES 3.0 is backwards compatible with OpenGL ES 2.0, enabling applications to incrementally add new visual features to applications.

More information at

  1. Khronos Official page
  2. Wikipedia page on OpenGLES

Books: