Open GL Textures CS 480 Using textures in

Open. GL Textures CS 480 Using textures in Open. GL using Assimp and Image. Magick

Textures Overview 01 Loading an image using Image. Magick and Magick++ into our engine as raw data 02 Passing the raw data into Open. GL, setting up the shaders, and finally render a texture to screen 03 Using Assimp to load in texture coordinates for models

Textures Primer: What are Textures? Textures provide a way of giving models a variety of colors and detail, without having to increase the vertex count of the model. At its core, a texture is an image that we want to stick onto our model, like decals or paint.

Textures Primer: How Are Textures Put On Models? ● To place an image on a model, we need to somehow map a 2 D image onto a 3 D model; we can do this through Texture Coordinates. This is expressed as a Vec 2, with a range between 0. 0 and 1. 0 inclusive. They are responsible for mapping some part of the image (the vec 2) onto a specific vertex.

Learning By Example: Open. GL and Image. Magick

Learning By Example ● ● In this example, we will be modifying PA 0 to display a texture onto the screen. We will be taking this triangle, and instead of rendering colors, we will render a texture instead. Haven’t seen this in a while

Learning By Example ● ● We will attempt to display this good girl on the screen. (This is my friend’s dog, Diamond) A very good girl

Loading Images into our Engine

Loading Images: Using Image. Magick to read in images ● First and foremost, we need a way to get the data from an image into our engine as raw data, which Open. GL could understand. In this example, we will be using Image. Magick, an open source image processing library.

Loading Images First, we need to make some changes to the graphics_headers. h code: ● ● ● Add the Magick++ library In the Vertex struct, add a vec 2 called texture Update the Vertex constructor to include initializing the texture What it should look like once we’re done

Loading Images ● Now that we have the Vertex struct updated, we can now add the texture coordinate data into our triangle Our vertex array with the new texture coordinates added at the end

Loading Images Finally, in the Object constructor, we will read in our image (called test. jpg) into our program by doing the following: ● ● ● Create a BLOB (Binary Large OBject) which will hold the raw data Create an Image which will load the test data Load the Image, and write the data into the BLOB in the RGBA format The code to load

Passing Data into Open. GL

Passing in the Data into Open. GL: How we get our texture into the GPU ● Now that we have the data loaded into our engine, we need a way to get it into Open. GL so that we can use shaders to do something with the data. With that, we will Generate a buffer, Bind the buffer to use it, and Load the data into the buffer.

Open. GL Primer: How do we pass stuff to Open. GL? ● To pass stuff into the GPU, we need to understand how Open. GL knows when to take in data passed into it. We will be using a diagram to demonstrate how most data is passed to Open. GL

Open. GL Primer ● GOAL: Be able to use the data we put into our program in our shaders Get these connected to data somehow

Open. GL Primer: Generate ● Generate open. GL pointers using gl. Gen. Buffer or gl. Gen. Texture (saved as GLuints in program) Allocated area for data

Open. GL Primer: Bind ● Bind the pointers that we want to pass data into using the GLuints that we got when generating Open. GL now knows where to store the data that will be passed to it

Open. GL Primer: Load ● Load in data using functions like gl. Tex. Image 2 D or gl. Vertex. Attrib. Pointer Data from program now in GPU memory

Open. GL Primer: Bind to Shader ● Tell Open. GL which variables to pass into to by using gl. Active. Texture or gl. Uniform Data now properly bound to shader

Passing into Open. GL ● ● As a start, we want to keep the pointer to our texture in the GPU as a part of our Object. Since Open. GL pointers are saved as a GLuint in the CPU, we will create a GLuint in our object. h header

Passing into Open. GL Using what we learned, we are going back into the Object constructor to make the following changes: ● ● Initialize our GLuint using gl. Gen. Textures Bind the texture Load in all the texture data into Open. GL using the gl. Tex. Image 2 D command Set a few parameters for the image

Displaying the Texture

Displaying the Texture: Get the texture to finally appear in our program ● Now that we have successfully passed all the data into Open. GL, we can finally use Shaders to show us our texture

Displaying the Texture: To pass in the data into our shader, we need to first tell Open. GL what to use. We can do this by going into our render function in the Object and making the following changes: ● ● Enable and disable a new vertex attribute array for our texture coordinates Pass in the attribute pointer for our texture coordinate array ○ ● Notice that the second argument in our added pointer is a 2 instead of a 3, that is because we are passing in a vec 2 instead of a vec 3 Bind the texture we want to use by setting an active texture and binding it Lots of binding

Displaying the Texture: Next, we need to use the data we had bound in our program in our shader. In the Vertex shader, we will make the following changes: ● ● ● Add in an additional layout for texture coordinates (make sure it’s a vec 2!) Add an additional smoothed output for texture coordinates Pass through the coordinates to the fragment shader Basically a texture passthrough

Displaying the Texture: Finally, we can make the following changes to the Fragment shader to use the texture and coordinates to render to the triangle: ● ● ● Take in the smoothed texture from the fragment shader Define a new uniform Sampler 2 D (this is the texture data we bound in the render function) Instead of color, set the frag_color to sample the texture data using the texture coordinate using the texture 2 D function Where the magic happens

Displaying the Texture: ● Compile, render, and check to see if the texture renders properly Good girl spotted!

Other fun things to try ● Open. GL shaders can do a lot more than just render textures; since everything is basically a number in GLSL, try modifying the colors by adding or multiplying the vertex color that we replaced A good, colorful girl spotted!

Open. GL Textured Models using Assimp

Assimp Texture Coordinate Loading ● ● With this new addition to our engine, we now have an additional field to populate in each vertex: a texture coordinate How do we pull texture coordinates from our models?

Assimp Texture Coordinate Loading Each of our ai. Mesh objects have an ai. Vector 3 D *m. Texture. Coords where we can pull texture coordinates from. We can pass them into our Vertex struct by doing the following: 1. Check to make sure that the model has texture coordinates ○ mesh->Has. Texture. Coords(0); 2. Get the texture coordinates for a specific vertex i: ○ ○ glm: : vec 2 texture; ai. Vector 3 D vert = mesh->m. Texture. Coords[0][i]; texture. x = vert. x; texture. y = vert. y; 3. Push data into the object’s vertex array

Questions?