卞正冠 P76094703@gs.ncku.edu.tw

姚勝翊 ND8081018@gs.ncku.edu.tw

Learn

​

OpenGL

Introduction

Introduction

• Mainly considered as a specification for rendering 2D and 3D vector graphics.
• Created in 1991 by Silicon Graphics, Inc. Now it is managed by Khronos Group.

​

Introduction

• Cross-platform

Linux

Windows

etc.

• Cross-Language

C & C++

Java

Python

etc.

Environment

(Windows, C++)

Requirement

• In this slide, we will use the specification:

OpenGL version 3.3 or above.

​

• With the requirement listed below:

Visual Studio - Integrated development environment (IDE)

GLFW - OpenGL utility library

GLEW - OpenGL Extension Wrangler Library

GLFW

https://www.glfw.org/download.html

GLEW

http://glew.sourceforge.net/

GLFW & GLEW

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Visual Studio

Creating

a window

Include

Init GLFW

Create a window object

Init GLEW

Viewport

Render loop

End of the main function

Input

Create a window

Render pipeline

Pipeline

The graphics pipeline can be divided into two large parts: the first transforms your 3D coordinates into 2D coordinates and the second part transforms the 2D coordinates into actual colored pixels.

Shader

• Graphics cards process your data within the graphics pipeline.
• The processing cores run small programs on the GPU for each step of the pipeline. These small programs are called shaders.

Pipeline

Normalized Device Coordinate(NDC)

Once your vertex coordinates have been processed in the vertex shader, they should be in normalized device coordinates which is a small space where the x, y and z values vary from -1.0 to 1.0.

Vertex Specification

• Vertex specification is the procedure of setting up rendering objects.
• Submit the vertex stream data into the rendering pipeline.
• Tell the program how the data stream is represented.

​

VBO

• It can be used as a source of vertex array data for OpenGL context.
• Usually stores some vertex attributes like position, normal.

​

VAO

• Vertex array object (VAO)
• It stores the necessary state for object data.
• It normally stores the format of the data and the VBO provided the data.

EBO

An EBO is a buffer, just like a vertex buffer object, that stores indices that OpenGL uses to decide what vertices to draw.

Vertex Shader

• Vertex shader handles the manipulation of the individual vertex.
• It determines the final attribute of the single vertex.
• Each input vertex must map to a specific output vertex.

Fragment Shader

• Manipulate the fragment into colors and depth value.
• Determine the color of the fragment.

Render

Code

https://learnopengl.com/Getting-started/Hello-Window

Vertex data

An array containing 3d position data belonging to 3 vertices:

{ {-0.5, -0.5, 0}, {0.5, -0.5, 0}, {0, 0.5, 0} }

Generate the OpenGL object

Bind

• Bind the VAO.
• Bind the buffer object to vertex array object and specify the data (copy them into OpenGL context memory).

​

Shader

• Shaders are written in the OpenGL Shading Language (GLSL).

Vertex Shader

Fragment Shader

Shader

Compile Shader

Create Shader Program

Create a shader program object to link the shader.

Vertex attribute array

• Enable and specify the generic vertex attribute array.

Render the mesh in render loop

• Clear the render buffer.
• Bind the correct vertex array object and texture.
• Use the proper shader program.
• Draw the mesh.

Draw a triangle

Draw more triangle

Draw more triangle

Draw more triangle

As you can see, there is some overlap on the vertices specified. We specify bottom right and top left twice!

Vertex & index data

Generate the OpenGL object

Bind

• Bind the VAO.
• Bind the buffer object to vertex array object and specify the data (copy them into OpenGL context memory).

​

Render the mesh in render loop

Draw more triangle (EBO)