Hands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0

Transcription

1 Hands-On Workshop: 3D Automotive Graphics on Connected Radios Using Rayleigh and OpenGL ES 2.0 FTF-AUT-F0348 Hugo Osornio Luis Olea A P R TM External Use

2 Agenda Back to the Basics! What is a GPU? What is OpenGL OpenGL Pipeline overview Exercise 1 Platform Introduction, Vertex Attributes, Vertex Shaders, Primitive types, Draw Calls: (You will leave knowing how to draw something) Exercise 2 What is a mesh, how to draw it, what is perspective, Vertex Buffer Objects Exercise 3 What is a texture and how to use them Exercise 4! Creating your first mesh, importing it to OpenGL, animating it! External Use 1

3 GOALS By the end of the session you will Not be afraid of 3D Graphics (if you were) Have a general idea of how a GPU and OpenGL work. Be able to understand a 3D application. Be able to CREATE your own 3D application from scratch. Have knowledge of fundamental OpenGL concepts that will make your life a lot easier in the future! External Use 2

4 Introduction Losing the fear from OpenGL What is a GPU What is OpenGL The OpenGL ES 2.0 Pipeline made easy! External Use 3

5 Oh, crap That s our usual expression when we first face a 3D framework. With a sample and simple file of up to 1000 lines and hundreds of files, executables, shared libraries, meshes and stuff, its like facing a huge and mean DRAGON! What the heck is EGL?, Bind an attribute? Perspective Projection? Lots of questions will flood your mind, weak your resolve and finally beat you. External Use 4

6 Your Dragon!! Contrary to popular beliefs, you should look this dragon not to the eye first, but to its feet! And its feet is the GPU! External Use 5

7 External Use 6

8 What is a GPU? Scholar Definition: A graphics processing unit (GPU), also occasionally called visual processing unit (VPU), is a specialized electronic circuit designed to rapidly manipulate and alter memory to accelerate the creation of images in a frame buffer intended for output to a display. A real engineer will tell you: It s a circuit/module capable of executing lots of similar operations at the same time. Both are right, but let s keep it simple. Lets be engineers, not scholars for now. External Use 7

9 GPU execution A CPU normally has one path of execution, where you are doing only 1 thing at the time. A GPU has the capability of doing several things at the same time. This is extremely helpful when you are trying to generate content for a 1024*1024 display. Assume that you want to do a simple operation per pixel using a CPU. That would require passes. Using a GPU you will require only a fraction of it! Long story short, you will usually use the GPU to create data to be displayed on a screen. External Use 8

10 External Use 9

11 What is OpenGL? OpenGL is a STANDARIZED way to talk to the GPU. It provides a complete API that you can use to create content to be displayed. External Use 10

12 External Use 11

13 Sitting on the Top Your application will be sitting on the top of OpenGL, using its API to interface with the GPU and create cool content to be displayed when you need it. External Use 12

14 ENOUGH TALK! Exercise 1 Drawing a Triangle! Drawing 3 Triangles!! Coloring your Triangles using Vertex Attributes Coloring your Triangles using Uniforms Indexed Draws to draw. YES triangles!!! External Use 13

15 Conclusion EVERY OpenGL ES 2.0 application needs a Vertex Shader and a Fragment Shader. You now know how to create, populate, compile, attach and link Vertex/Fragment shader and have programmed yours. Application can send information to both shaders using Vertex Attributes, Uniforms. Shaders can send information from Vertex to Fragment using Varyings. Primitives Need Vertex Data. Vertex Data have position and color (so far) Primitives can be drawn using gldrawarrays and gldrawelements External Use 14

16 THIS IS STILL 2D, Give me back my money!!! Exercise 2 Your First Mesh Perspective Transformation Vertex Buffer Objects External Use 15

17 Projection Matrix There's something wrong with this. IT LOOKS LIKE A FREAKING SQUARE!! This happens because we are looking at our Cube directly from the front without ANY projection at all. There has to be something that reality is doing that we are not. That something is called perspective. External Use 16

18 How do we see in real life? Do you remember how does a road look when it stretches to the horizon? A perspective projection essentially shifts vertices towards the eye, based on the location of that particular vertex. Vertices farther in Z from the front of the projection are shifted less than those closer to the eye. And the shift also depends on how far the vertices are from the center of the plane of projection, in the X,Y direction. External Use 17

19 Our Camera Matrix! After lots of Mathematics, we can say that our projection Matrix for our eye or camera is: This will place our Eye at 0,0,-1. On the example we provided a view frustrum of scale 1 (object properties length and width to be respected. External Use 18

20 Conclusion It is a PAIN to model your meshes using Arrays and code. No 3D for the WEAK!, if you really want to add depth, you need some matrix operations. Vertex Buffer Objects are the best way to share data with your GPU. External Use 19

21 No Clever comment here Exercise 3 Using Textures External Use 20

22 Conclusion Textures are an additional way to pass data to both, Vertex and Fragment shaders. Can be used to add texture to your meshes. Remember remember, they are NOT only images. External Use 21

23 We are almost there! Modelling SW Creating a simple cube How do I use it on OpenGL? ASSIMP! Creating a simple cube or an ugly mesh Animating your ugly mesh External Use 22

24 Modelling SW to use - BLENDER Blender is a free and open source 3D animation suite. It supports the entirety of the 3D pipeline modeling, rigging, animation, simulation, rendering, compositing and motion tracking, even video editing and game creation. Advanced users employ Blender s API for Python scripting to customize the application and write specialized tools; often these are included in Blender s future releases. Blender is well suited to individuals and small studios who benefit from its unified pipeline and responsive development process. Blender is cross-platform and runs equally well on Linux, Windows and Macintosh computers. Its interface uses OpenGL to provide a consistent experience. External Use 23

25 Modelling SW Creating a cube We are lucky, Blender programmers added a default mesh when you open up the SW That s right a cube! However, a regular cube does not look cool for UI elements, so we are going to make it slim and convert it into a portrait! External Use 24

26 Saving it, so it can be used on an OpenGL environment External Use 25

27 Why do we need an Importer? OpenGL ES 2.0 handles 3 kind of primitives. Triangles, Lines and Sprite-Points. In order to define each, you need a set of parameters, like position of each of their vertices. For a cube to be drawn, you would assume that we have 8 vertices right? But as OpenGL handles triangles only, we need more than that, and defining each vertex position one by one can be troublesome now, having a mesh of 3000 polygons, that would be simply impossible. External Use 26

28 ASSIMP Open Asset Import Library (short name: Assimp) is a portable Open Source library to import various well-known 3D model formats in a uniform manner. The most recent version also knows how to export 3d files and is therefore suitable as a general-purpose 3D model converter. See the feature list. Assimp aims to provide a full asset conversion pipeline for use in game engines / realtime rendering systems of any kind, but it is not limited to this purpose. In the past, it has been used in a wide range of applications. Written in C++, it is available under a liberal BSD license. There is a C API as well as bindings to various other languages, including C#/.net, Python and D. Assimp loads all input model formats into one straightforward data structure for further processing. This feature set is augmented by various post processing tools, including frequently-needed operations such as computing normal and tangent vectors. External Use 27

29 Conclusion Now you were able to create your first 3D Application! You now have a solid foundation, from Design to Implementation of how to create a 3D application. You also have a general Idea on how your GPU works and what is OpenGL and how to use it! External Use 28

30 Freescale Semiconductor, Inc. External Use