OPENGL INTRODUCTION 林宏祥 2014/10/06. 此投影片已被稍微簡化過,跟今日課堂上的內容不太一樣。 如果想要看更詳細說明的人,請參考每頁投影片下面的『備忘稿』

Slides:



Advertisements
Similar presentations
Understanding the graphics pipeline Lecture 2 Original Slides by: Suresh Venkatasubramanian Updates by Joseph Kider.
Advertisements

Graphics Pipeline.
Status – Week 257 Victor Moya. Summary GPU interface. GPU interface. GPU state. GPU state. API/Driver State. API/Driver State. Driver/CPU Proxy. Driver/CPU.
CS 4363/6353 BASIC RENDERING. THE GRAPHICS PIPELINE OVERVIEW Vertex Processing Coordinate transformations Compute color for each vertex Clipping and Primitive.
Computer Graphic Creator: Mohsen Asghari Session 2 Fall 2014.
Computer Graphics Visible Surface Determination. Goal of Visible Surface Determination To draw only the surfaces (triangles) that are visible, given a.
As well as colors, normals, and other vertex data PUSHIN’ GEO TO THE GPU JEFF CHASTINE 1.
MAT 594CM S2010Fundamentals of Spatial ComputingAngus Forbes Overview Today: - Make sure everyone is set up with an OpenGL environment - OpenGL basics:
Open Graphics Library (OpenGL)
Michael Robertson Yuta Takayama. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates.
Programmable Pipelines. Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
CSE 381 – Advanced Game Programming Basic 3D Graphics
Geometric Objects and Transformations. Coordinate systems rial.html.
Programmable Pipelines. 2 Objectives Introduce programmable pipelines ­Vertex shaders ­Fragment shaders Introduce shading languages ­Needed to describe.
Week 2 - Wednesday CS361.
Image Synthesis Rabie A. Ramadan, PhD 2. 2 Java OpenGL Using JOGL: Using JOGL: Wiki: You can download JOGL from.
Buffers Textures and more Rendering Paul Taylor & Barry La Trobe University 2009.
WebGL: in-browser 3D graphics Nick Whitelegg Maritme and Technology Faculty Southampton Solent University.
MIT EECS 6.837, Durand and Cutler Graphics Pipeline: Projective Transformations.
CS 450: COMPUTER GRAPHICS REVIEW: INTRODUCTION TO COMPUTER GRAPHICS – PART 2 SPRING 2015 DR. MICHAEL J. REALE.
CSC 461: Lecture 3 1 CSC461 Lecture 3: Models and Architectures  Objectives –Learn the basic design of a graphics system –Introduce pipeline architecture.
Homogeneous Form, Introduction to 3-D Graphics Glenn G. Chappell U. of Alaska Fairbanks CS 381 Lecture Notes Monday, October 20,
OpenGL Conclusions OpenGL Programming and Reference Guides, other sources CSCI 6360/4360.
1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.
CSE Real Time Rendering Week 2. Graphics Processing 2.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1Computer Graphics Lecture 4 - Models and Architectures John Shearer Culture Lab – space 2
COMPUTER GRAPHICS CSCI 375. What do I need to know?  Familiarity with  Trigonometry  Analytic geometry  Linear algebra  Data structures  OOP.
CAP4730: Computational Structures in Computer Graphics 3D Transformations.
Shadow Mapping Chun-Fa Chang National Taiwan Normal University.
GRAPHICS PIPELINE & SHADERS SET09115 Intro to Graphics Programming.
Programmable Pipelines Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University.
OpenGL Shader Language Vertex and Fragment Shading Programs.
Advanced Computer Graphics Spring 2014 K. H. Ko School of Mechatronics Gwangju Institute of Science and Technology.
CSE 381 – Advanced Game Programming GLSL. Rendering Revisited.
Review on Graphics Basics. Outline Polygon rendering pipeline Affine transformations Projective transformations Lighting and shading From vertices to.
Chapters 5 2 March Classical & Computer Viewing Same elements –objects –viewer –projectors –projection plane.
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Programming with OpenGL Part 2: Complete Programs Ed Angel Professor.
Viewing and Projection
 Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Models and Architectures 靜宜大學 資訊工程系 蔡奇偉 副教授 2012.
An Introduction to the Cg Shading Language Marco Leon Brandeis University Computer Science Department.
GLSL Review Monday, Nov OpenGL pipeline Command Stream Vertex Processing Geometry processing Rasterization Fragment processing Fragment Ops/Blending.
COMP 175 | COMPUTER GRAPHICS Remco Chang1/XX13 – GLSL Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 12, 2016.
CS 480/680 Computer Graphics Programming with Open GL Part 2: Complete Programs Dr. Frederick C Harris, Jr. Fall 2011.
Pushin’ Geo to the GPU As well as colors, normals, and other vertex data Made by Jeff Chastine, Modified by Chao Mei Jeff Chastine.
Projection and Clipping
- Introduction - Graphics Pipeline
Real-Time Rendering Buffers in OpenGL 3.3
Programmable Pipelines
The Basics: HTML5, Drawing, and Source Code Organization
CSCE 441 Computer Graphics 3-D Viewing
Introduction to OpenGL
CS451Real-time Rendering Pipeline
Models and Architectures
Introduction to Computer Graphics with WebGL
Chapter VI OpenGL ES and Shader
Chapter V Vertex Processing
Lecture 13 Clipping & Scan Conversion
Programming with OpenGL Part 2: Complete Programs
Programming with OpenGL Part 2: Complete Programs
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
CS5500 Computer Graphics April 24, 2006.
Introduction to OpenGL
CS 480/680 Computer Graphics GLSL Overview.
Mickaël Sereno Graphics Memory Mickaël Sereno 11/07/2019 Mickaël Sereno -
OpenGL-Rendering Pipeline
Computer Graphics Vertex Array Object
Presentation transcript:

OPENGL INTRODUCTION 林宏祥 2014/10/06

此投影片已被稍微簡化過,跟今日課堂上的內容不太一樣。 如果想要看更詳細說明的人,請參考每頁投影片下面的『備忘稿』

TODAY WE WILL TALK ABOUT… 1. Rasterization and transformation implementation 2. OpenGL progress

RASTERIZATION 3D model 2D image

RASTERIZATION transformation clipping scan conversion suited for hardware acceleration

TRANSFORMATION => matrix vector multiplication => from object space to clipping space Space transition: a vector is multiplied by a corresponding transformation matrix. The series of space: a definition describe the rendering process

LOADING MODEL FILE Triangle Triangle Triangle Triangle object coordinate

Rotation Translation MOVE AND ROTATE OBJECT

world coordinate

camera coordinate camera parameters in : eye point, reference point, up vector ADD CAMERA

NOW WE ENTER CLIPPING SPACE Clipping space: a viewing volume in 3D space. The viewing volume is related to projection model.

Orthogonal Projection -Z X x camera x

Perspective Projection -Z X x camera x d z

Viewing volume of orthogonal projection Near Clipping Plane Far Clipping Plane Left Clipping Plane Right Clipping Plane Bottom Clipping Plane Top Clipping Plane x y -z (camera coordinates)

Viewing volume of perspective projection Far Clipping Plane Near Clipping Plane Left Clipping Plane Right Clipping Plane Bottom Clipping Plane Top Clipping Plane x y -z (camera coordinates)

What is the transformation from camera space to clipping space? Let’s see normalized device coordinates space.

NDC SPACE NDC space: a viewing volume in 3D space (cuboid). x y z Note: NDC is a left-hand coordinate system (because of z-buffer)

enclosed by (in OpenGL system): x NDC = 1, x NDC =-1, y NDC =1, y NDC =-1, z NDC =1, z NDC =-1

FROM CLIPPING SPACE TO NDC SPACE viewing volume in clipping space == viewing volume in NDC space after the division operation. (Clipping coordinates is also a left-hand coordinate system)

Viewing volume of orthogonal projection nearVal farVal left right bottom top x y -z (camera coordinates)

NDC space

A CANONICAL VIEW x NDC 0 1 x camera right left Viewing volume on NDC space Viewing Volume on camera space

same mapping in y direction and z direction The z component will multiply (-1) for flipping.

zFar zNear Viewing volume of perspective projection (camera coordinates) x y -z

fovy: the viewing angle in y direction

Perspective Projection -Z X x camer a x d = 1 some scaling -Z X d z

A CANONICAL VIEW.. -Z -zNear -zFar y0y0 z camera fovy Y

-Z -zNear -zFar y0y0 z camera fovy Y

After projection, the boundaries should map to 1, -1 -Z -zNear -zFar y0y0 z camera fovy Y y camera

Similarly in x, but consider the aspect.

Mapping on z: inverse proportional to camera coordinates.

-zFar is mapping to 1, -zNear is mapping to -1, then

NDC space

FROM NDC SPACE TO WINDOW SPACE (x 0, y 0 ): window position (w, h): size of the window

SCAN CONVERSION Vector to fragments

OPENGL PROGRESS Fixed openGL pipeline (openGL 1.x) Programmable openGL pipeline (above openGL 2.x)

Fixed openGL pipelineProgrammable openGL pipeline The programming becomes very different since modern hardware (GPU) has changed.

ADVANTAGE ON FIXED PIPELINE Easy to learn: regard the pipeline as a black box.

DIS-ADVANTAGE ON FIXED PIPELINE PROGRAMMING Debugging is hard if you do not know openGL pipeline. (In modern graphic programming, we “must” understand the programmable system or we cannot programming easily) Only provide specific functions, thus limiting the creativity and problem solving. The programming on modern programmable GPU is totally different from that of fixed pipeline. (You must learn from the start).

DEPRECATED 聲明不贊成 & EVIL OPENGL OpenGL 4.2 Reference card: Blue means deprecated Current version: OpenGL & GLSL 4.3 OpenGL 4.3 Reference card: Deprecated functions are gone! and many many many more… …since 2008! (GLSL since 2004) GPUs have changed! (from “progressive openGL” 2012 slides)

RENDER LOOP(CLIENT) initialize window load shader program clear frame buffer Update transformation Update Objects Draw Object SwapBuffers while (running): a linear array on GPU memory

SHADER DATA Uniform = Shared Constant Vertex Data = ANYTHING YOU WANT! Example? Positions… Normals… Colors… Texture Coordinates… “Per-object constant” (from “progressive openGL” slides, 2012)

SHADER DATA AND GLSL OpenGL 4.2 Reference card: Blue means deprecated “Per-object constant” (from “progressive openGL” slides, 2012)

IN VS. OUT Vertex Shader in = Data from Vertex Buffer out = Rasterizer in Fragment Shader in = Rasterizer out out = ANYTHING YOU WANT! Rasterizer GPU Memory … but usually pixel color and depth (from “progressive openGL” slides, 2012)

EXAMPLE: DRAW AN TRIANGLE

CLIENT //declare a linear array on CPU memory static const GLfloat g_vertex_buffer_data[] = { -1.0f, -1.0f, 0.0f, (use xyz vector to represent a vertex) 1.0f, -1.0f, 0.0f, 0.0f, 1.0f, 0.0f, }; GLuint vertexbuffer; // generate the vertex buffer object(VBO) glGenBuffers(1, &vertexbuffer); // bind VBO to GL_ARRAY_BUFFER, a state in OpenGL context glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer); // allocate GPU memory and copy VBO content to the memory glBufferData(GL_ARRAY_BUFFER, sizeof(g_vertex_buffer_data), g_vertex_buffer_data, GL_STATIC_DRAW);

CLIENT do{ … // Use shader program glUseProgram(programID); // Give an attribute id to the VBO ( a VBO can be assigned many attribute ids) glEnableVertexAttribArray(0); //bind VBO vertexbuffer again (in other application we may have many VBOs) glBindBuffer(GL_ARRAY_BUFFER, vertexbuffer); glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 0, (void*)0 );//describe the content in VBO // Draw the triangle glDrawArrays(GL_TRIANGLES, 0, 3); // 3 indices starting at 0 -> 1 triangle …. // Swap buffers glfwSwapBuffers(); } while( ……); (3 floats for a point) (offset)(padding) (read 3 vertices once)

VERTEX SHADER //specify GLSL version #version 330 core // Get vertex data from the VBO according to the vertex attribute id. The vertex data will stored in declared variable “vertex_position” layout(location = 0) in vec3 vertex_position; void main(){ // gl_Position is a built-in variable in GLSL, which is an output variable of the vertex shader gl_Position = vec4(vertex_position, 1.0); } note: vertex shader “must” output vertex position (in clipping coordinate space) to let OpenGL system perform scan conversion

FRAGMENT SHADER #version 330 //declare an output variable “color” to the image out vec3 color; void main() { // output red color for each segment color = vec3(1,0,0); } Note: In fragment shader, it receives a fragment in a “triangle” when vertex shader finish processing three vertices (remember GL_TRIANGLE in client code?) The fragment is already in window coordinate here. We can derive the coordinate from the built-in variable for other application

REFERENCE Dominik Seifert, “Progressive OpenGL” slides, 2012 ICG course. Hong-Shiang Lin, “ICG clipping” slides, 2012 ICG course. Jason L.McKesson, “Learning Modern 3D Graphics Programming” website. 2012