View All Posts
Want to keep up to date with the latest posts and videos? Subscribe to the newsletter
HELP SUPPORT MY WORK: If you're feeling flush then please stop by Patreon Or you can make a one off donation via ko-fi

Tutorial 6 is all about textures. In the original tutorial they use a rotating cube so we’ll do the same.

Fortunately the esUtils set of code comes with a handy function esGenCube which will generate vertices, tex coords and indices for drawing a cube. We now have some setup code in our awakeFromNib function:

// create a cube
esGenCube(1.0f, &cubeVertices, NULL, &cubeTexCoords, &cubeIndices);
// load up a texture
textureId=loadTexture(@"texture.png", -1, -1);

To actually draw a texture to the screen we need to modify our shaders. Our vertex shader now needs to take a set of texture coords in addition to the vertice positions. It now looks like:

attribute vec4 position;
attribute vec2 texcoord;
uniform mat4 mvp;

varying mediump vec2 v_texcoord;

void main()
    gl_Position = mvp * position;

Notice that we now have an attribute called texcoord that we assign to a varying called v_texcoord.

Our fragment shader looks like this:

varying mediump vec2 v_texcoord;
uniform sampler2D texture;

void main()
 gl_FragColor = texture2D(texture, v_texcoord);

This now has a uniform that is of type sampler2D (this will receive our texture) and the varying v_texcoord that will get the tex coord from the vertex shader. It uses the texture2D function to get the correct value from the texture and we assign that to the fragment colour.

Our drawing code now looks like this:

// reset our modelview to identity
// translate back into the screen by 6 units and down by 1 unit
esTranslate(&modelView, 0.0f , 0.0f, -3.0f);
// rotate the triangle
esRotate(&modelView, rCube, 1.0, 1.0, 0.0);
// tell the GPU we want to use our program
// create our new mvp matrix
esMatrixMultiply(&mvp, &modelView, &projection );
// set the mvp uniform
glUniformMatrix4fv(uniformMvp, 1, GL_FALSE, (GLfloat*) &mvp.m[0][0] );
// set the texture uniform
glBindTexture(GL_TEXTURE_2D, textureId);
glUniform1i(uniformTexture, 0);
// set the position vertex attribute with our triangle's vertices
glVertexAttribPointer(ATTRIB_POSITION, 3, GL_FLOAT, false, 0, cubeVertices);
// set the texture coords
glVertexAttribPointer(ATTRIB_TEXCOORD, 2, GL_FLOAT, 0, 0, cubeTexCoords);

// and finally tell the GPU to draw our triangle!
glDrawElements(GL_TRIANGLES, 36, GL_UNSIGNED_SHORT, cubeIndices);

That’s it! You can find the source code for this project here.


Related Posts

NeHe OpenGL tutorial 5 ported to ES2.0 - In this blog post, I delve into the specifics of porting code for drawing 3D shapes in ES2.0. I detail how to overcome the lack of depth buffer in the default OpenGL template and describe how to add rotation to objects by saving the model view matrix. This post offers a useful walkthrough, especially for those keen to deepen their understanding of 3D rendering nuances in ES2.0.
NeHe OpenGL tutorial 2, 3 and 4 ported to ES 2.0 - As I strove to learn OpenGLES 2.0 for new gaming projects on iPhone and Palm Pre, I faced certain challenges due to the introduction of a programmable graphics pipeline in OpenGLES 2.0. With this mechanism, we are responsible for writing the code to generate our graphics, which was overwhelming at first. To help others, I ported some of the NeHe tutorials over to OpenGLES2.0 on iPhone in an easily-digestible way. In this post, you will find a walkthrough of the first 4 tutorials, complete with codes, explanations and screenshots to make learning easier.

Related Videos

Fusion 360 Spherical Texture Mapping - Learn how to map a 2D texture onto a sphere in Fusion 360, using spherical projection and adjusting texture scales to create stunning images like Mars and the Moon.
Moon Lamp - Base Design in Fusion 360 and 3D Printing - Learn how to design and 3D-print a unique moon lamp base using Fusion 360, covering parameters, components, and extrusion. Watch as it comes to life when powered up!
256 Shades of Grey – Adventures in Image Processing - In this enlightening video, I delve into the deep and fascinating world of image processing. Forget everything you thought you knew about pixels – they’re not squares or rectangles and they definitely aren’t discs. All pixels are, my friends, are point samples, each capturing brightness or color at a particular position. Curious to know how to manipulate them? I also unravel this mysterious tapestry, familiarizing you with the technicalities of grayscale, RGB, HSB, YUV, and a fleeting mention of CMYK. And if you think that's all, hold tight! Did you know we could apply Fourier transforms, akin to graphic equalisers used in audio, to our good old two-dimensional images? Strap in as I guide you through this potentially overwhelming realm with a pinch of humor, lots of simplicity, and oodles of practical examples.
High-Res AS5048 Magnetic Rotary Encoder DIY - Learn how to create a custom magnetic rotary encoder using an AS5048 sensor and a 3D printed enclosure, greatly improving the accuracy and gameplay of an Asteroids game controller.
3D Printed Game Controller Designed in Fusion 360 - Learn how to design and build a custom game controller using 3D printing, Fusion 360, and ESP32 components in this step-by-step guide.
HELP SUPPORT MY WORK: If you're feeling flush then please stop by Patreon Or you can make a one off donation via ko-fi
Want to keep up to date with the latest posts and videos? Subscribe to the newsletter
Blog Logo

Chris Greening


> Image


A collection of slightly mad projects, instructive/educational videos, and generally interesting stuff. Building projects around the Arduino and ESP32 platforms - we'll be exploring AI, Computer Vision, Audio, 3D Printing - it may get a bit eclectic...

View All Posts