CSE 5542 — Real Time Rendering TBT

Скачать презентацию CSE 5542 — Real Time Rendering TBT Скачать презентацию CSE 5542 — Real Time Rendering TBT

0a5dc3fefc6fca39454521b48a6b3fb3.ppt

  • Количество слайдов: 109

CSE 5542 - Real Time Rendering CSE 5542 - Real Time Rendering

TBT (Not So) Real Time Rendering TBT (Not So) Real Time Rendering

Where ? Time - TR 11: 10 AM – 12: 30 p. M Place Where ? Time - TR 11: 10 AM – 12: 30 p. M Place - DL 0264

Labs ? • Your own machine … • Graphics PC Lab – CL 112 Labs ? • Your own machine … • Graphics PC Lab – CL 112 D ? • Platforms: PC (visual studio), Mac OS X or Linux

Who Am I ? Who Am I ?

The Instructor Name: Raghu Machiraju Email: machiraju. 1@osu. edu Office hours: M: 3 -4 The Instructor Name: Raghu Machiraju Email: machiraju. [email protected] edu Office hours: M: 3 -4 PM TR 12: 30 PM – 1: 30 PM

Grading Grading

The Grader Name: Tzi-Husan Wei Email: TBA Office hours: Monday: 4: 30 -5: 30 The Grader Name: Tzi-Husan Wei Email: TBA Office hours: Monday: 4: 30 -5: 30 PM Wed: 3: 00 -5: 00 PM Fri: 3: 00 -5: 00 PM

Grading - Labs: 45% (10+12+13+10) - Strict deadlines. - Final Project: 15% - No Grading - Labs: 45% (10+12+13+10) - Strict deadlines. - Final Project: 15% - No Final Exam - Quizzes: 20%(5 x 4) - (Take Home) Midterm: 15%

Information Web: http: //www. cse. ohio-state. edu/~raghu/5542 Piazza: https: //piazza. com/osu/spring 2015/cse 5542/home Prerequisite: Information Web: http: //www. cse. ohio-state. edu/~raghu/5542 Piazza: https: //piazza. com/osu/spring 2015/cse 5542/home Prerequisite: 3901 (560) or 3902 or 3903 math 2568 (568) or 571 permission from the instructor

Pre-reqs Pre-reqs

Must Haves ü You need to be enthusiastic about Computer Graphics ü You need Must Haves ü You need to be enthusiastic about Computer Graphics ü You need to be fluent in C/C++/Java programming ü You need to be comfortable with linear algebra ü You need to be willing to get hands-dirty: Open. GL, Web. GL, 3 D Printing, GLSL, hardware

CAVEATS – Not a … CAVEATS – Not a …

Closer to … Closer to …

The Book The Book

Earlier … Earlier …

Diff 7 e 6 e Diff 7 e 6 e

Will Follow Text Closely Will Follow Text Closely

Useful Books – Open. GL, GLSL http: //proquest. safaribooksonline. com Open. GL programming Guide Useful Books – Open. GL, GLSL http: //proquest. safaribooksonline. com Open. GL programming Guide , 8 th edition Open. GL shading language 3 rd edition

Useful Books - Web. GL Useful Books - Web. GL

Useful Books - Java. Script Useful Books - Java. Script

Useful Tool - Blender Useful Tool - Blender

Reference Books – Open. GL/ES https: //www. khronos. org/ Reference Books – Open. GL/ES https: //www. khronos. org/

Reference Books – HTML 5 Reference Books – HTML 5

Reference Books Computer Graphics Principle and Practice 3 rd edition Real-Time Rendering 3 rd Reference Books Computer Graphics Principle and Practice 3 rd edition Real-Time Rendering 3 rd edition

Reference Books Graphics shaders: Theory and Practice, 2 nd edition Open. GL 4. 0 Reference Books Graphics shaders: Theory and Practice, 2 nd edition Open. GL 4. 0 Shading Language Cookbook

Reference - Und Others Reference - Und Others

Reference Reference

What do we Study ? What do we Study ?

Teapots Teapots

A Real One A Real One

Drawing Teapots Drawing Teapots

Step 1 Step 1

Step 2 Step 2

Step 3 Step 3

Step 4 Step 4

Step 5 Step 5

Step 6 Step 6

Manufacturing Teapots & Minions Manufacturing Teapots & Minions

Manufacturing Teapots http: //oncampus. osu. edu/replicating-in-3 d/ https: //www. ted. com/talks/lisa_harouni_a_primer_on_3 d_ printing http: Manufacturing Teapots http: //oncampus. osu. edu/replicating-in-3 d/ https: //www. ted. com/talks/lisa_harouni_a_primer_on_3 d_ printing http: //news. cornell. edu/stories/2013/04/rapid-realitystudents-design-3 -d-printed-products

You will all make these http: //www. thingiverse. com/thing: 68880 You will all make these http: //www. thingiverse. com/thing: 68880

http: //www. thingiverse. com/thing: 68880 http: //www. thingiverse. com/thing: 68880

Manufacturing Teapots http: //onderin. de. buro. la/cura-ani-500 -64 c. gif Manufacturing Teapots http: //onderin. de. buro. la/cura-ani-500 -64 c. gif

And These And These

Maybe Not This Maybe Not This

Manufacturing Minions https: //www. youtube. com/watch? v=-2 u. Y 7 rjhh. Ms Manufacturing Minions https: //www. youtube. com/watch? v=-2 u. Y 7 rjhh. Ms

We will not do this … Kevin Wolf, 3 D Printer, Mechanical Eng. , We will not do this … Kevin Wolf, 3 D Printer, Mechanical Eng. , OSU

Virtual Teapots Virtual Teapots

An Icon ! An Icon !

Which one is real ? Which one is real ?

Real vs Virtual – Boston Museum Real vs Virtual – Boston Museum

More fake ones ! http: //codegolf. stackexchange. com/questions/22620/draw-the-utah-teapot More fake ones ! http: //codegolf. stackexchange. com/questions/22620/draw-the-utah-teapot

Shutterbug ! Shutterbug !

Toy Story Toy Story

A Platonic Relationship ! A Platonic Relationship !

Building with Blender https: //www. youtube. com/watch? v=Qyi. Bw L 2 Scec Building with Blender https: //www. youtube. com/watch? v=Qyi. Bw L 2 Scec

Another Method https: //www. youtube. com/watch? v=x 8 Ai. Ei 4 a. J 4 Another Method https: //www. youtube. com/watch? v=x 8 Ai. Ei 4 a. J 4 g

You will be also doing this … You will be also doing this …

And better than this ! And better than this !

Open. GL, GLSL Open. GL, GLSL

Open. GL, GLSL Open. GL, GLSL

Topics and Outcomes Topics and Outcomes

To Reiterate Geometric Modeling Software Tools 3 D Printed Version To Reiterate Geometric Modeling Software Tools 3 D Printed Version

Learning Outcomes Familiarity - Basic understanding of graphics hardware/software - Basics of modeling and Learning Outcomes Familiarity - Basic understanding of graphics hardware/software - Basics of modeling and 3 D Printing - Basics of interaction

Learning Outcomes - Skills - Open. GL/GLSL to control graphics hardware - Web. GL/Open. Learning Outcomes - Skills - Open. GL/GLSL to control graphics hardware - Web. GL/Open. GL-ES to allow interactions - Blender to build models

Learning Outcomes Cognitive - Advanced real time rendering algorithms - Integrating three different software Learning Outcomes Cognitive - Advanced real time rendering algorithms - Integrating three different software suites – Web. GL, GLSL, Open. GL - Solid and curve modeling nuances

Specific Topics • Overview of Graphics Hardware and Software • Coordinate systems • Web. Specific Topics • Overview of Graphics Hardware and Software • Coordinate systems • Web. GL Interaction modes – HTML 5 – Immediate vs. retained mode • Open. GL geometry drawing - Open. GL vertex buffer objects • Open. GL Shading Language - Vertex and fragment shaders • 3 D transformation and Viewing

Specific Topics • Illumination – Flat, Gourad, Phong shading models – Fixed function pipeline Specific Topics • Illumination – Flat, Gourad, Phong shading models – Fixed function pipeline and shaders • Visibility and Z-buffering • Texture Mapping – Image and procedural textures • Bump, environment, & projective texture mapping

Specific Topics • Real time shadows • Particle Methods • Advanced topics in shaders Specific Topics • Real time shadows • Particle Methods • Advanced topics in shaders – Geometry shader – Tessellation shader • Advanced topics in rendering and graphics

Image Formation 72 Image Formation 72

Image Formation – Cameras – Microscopes – Telescopes – Human visual system 73 Image Formation – Cameras – Microscopes – Telescopes – Human visual system 73

Synthetic Camera Model projector p image plane projection of p center of projection 74 Synthetic Camera Model projector p image plane projection of p center of projection 74

Image Formation (Eine Explanation) Ray Tracing and Geometric Optics Problemo ? 75 Image Formation (Eine Explanation) Ray Tracing and Geometric Optics Problemo ? 75

The Real Thing ! http: //www. uccs. edu/~rtirado/Astronomy_Texts/Lig ht_Image_Formation. pdf The Real Thing ! http: //www. uccs. edu/~rtirado/Astronomy_Texts/Lig ht_Image_Formation. pdf

Essentials of Image Formation • Objects • Camera • Light source(s) • Light-material interaction Essentials of Image Formation • Objects • Camera • Light source(s) • Light-material interaction • Independence of objects, viewer, and light source(s)

Light 78 Light 78

Luminance vs. Color http: //www. workwithcolor. com/color-luminance-2233. htm 79 Luminance vs. Color http: //www. workwithcolor. com/color-luminance-2233. htm 79

How Many Colors ? Human visual system – Rods: monochromatic, night vision – Cones How Many Colors ? Human visual system – Rods: monochromatic, night vision – Cones • Color sensitive • Three types of cones • Only three values (the tristimulus values) are sent to the brain – Three primary colors – R, G, B 80

In Days Long Gone 81 In Days Long Gone 81

Even in these days ! Even in these days !

The Camera The Camera

Real Cameras Real Cameras

Viewing Viewing

Eine Simple Kamera – The Pinhole Simple Perspective - find projection of point at Eine Simple Kamera – The Pinhole Simple Perspective - find projection of point at (x, y, z) xp= -x/z/d yp= -y/z/d zp= d 86 Angel and Shreiner: Interactive Computer Graphics 6 E © Addison-Wesley 2012

Perspective Perspective

DYC http: //www. pinhole. cz/en/pinholecameras/dirkon_01. html DYC http: //www. pinhole. cz/en/pinholecameras/dirkon_01. html

Not Bad Not Bad

Let Us Go Digital http: //electronics. howstuffworks. com/digital-camera. htm Let Us Go Digital http: //electronics. howstuffworks. com/digital-camera. htm

Rasters Rasters

Pixels & Resolution Pixels & Resolution

Is A Pixel Really A Square ? http: //alvyray. com/Memos/CG/Microsoft/6_pixel. pdf Is A Pixel Really A Square ? http: //alvyray. com/Memos/CG/Microsoft/6_pixel. pdf

An image ? 8 bits/pixel 0 255 An image ? 8 bits/pixel 0 255

CCD Cameras - Resolution http: //www. dalsa. com/shared/content/pdfs/CCD_vs_CMOS_Litwiller_2005. pdf CCD Cameras - Resolution http: //www. dalsa. com/shared/content/pdfs/CCD_vs_CMOS_Litwiller_2005. pdf

Image Digitization Sampling: Resolution Quantization: Measured Value Image Digitization Sampling: Resolution Quantization: Measured Value

Image Digitization Sampling Quantization Image Digitization Sampling Quantization

https: //get. webgl. org/ https: //get. webgl. org/

Kewl Sites http: //www. chromeexperiments. com/webgl/ Kewl Sites http: //www. chromeexperiments. com/webgl/

Coding in Web. GL • Can run Web. GL on any recent browser – Coding in Web. GL • Can run Web. GL on any recent browser – Chrome – Firefox – Safari – IE • Code written in Java. Script • JS runs within browser – Use local resources 100

Example: triangle. html 101 Example: triangle. html 101

attribute vec 4 v. Position; void" src="http://present5.com/presentation/0a5dc3fefc6fca39454521b48a6b3fb3/image-102.jpg" alt="Example Code 102

Oops. . . your browser doesn't support the HTML 5 canvas element 103

JS File var gl; var points; window. onload = function init(){ var canvas = JS File var gl; var points; window. onload = function init(){ var canvas = document. get. Element. By. Id( "gl-canvas" ); gl = Web. GLUtils. setup. Web. GL( canvas ); if ( !gl ) { alert( "Web. GL isn't available" ); } // Three Vertices var vertices = [ vec 2( -1, -1 ), vec 2( 0, 1 ), vec 2( 1, -1 ) ]; 104

JS File (contd. ) // Configure Web. GL // gl. viewport( 0, 0, canvas. JS File (contd. ) // Configure Web. GL // gl. viewport( 0, 0, canvas. width, canvas. height ); gl. clear. Color( 1. 0, 1. 0 ); // Load shaders and initialize attribute buffers var program = init. Shaders( gl, "vertex-shader", "fragment-shader" ); gl. use. Program( program ); // Load the data into the GPU var buffer. Id = gl. create. Buffer(); gl. bind. Buffer( gl. ARRAY_BUFFER, buffer. Id ); gl. buffer. Data( gl. ARRAY_BUFFER, flatten(vertices), gl. STATIC_DRAW ); 105

JS File (contd. ) // Associate out shader variables with our data buffer var JS File (contd. ) // Associate out shader variables with our data buffer var v. Position = gl. get. Attrib. Location( program, "v. Position" ); gl. vertex. Attrib. Pointer( v. Position, 2, gl. FLOAT, false, 0, 0 ); gl. enable. Vertex. Attrib. Array( v. Position ); render(); }; function render() { gl. clear( gl. COLOR_BUFFER_BIT ); gl. draw. Arrays( gl. TRIANGLES, 0, 3 ); } 106

Java. Script Notes • Java. Script (JS) is the language of the Web – Java. Script Notes • Java. Script (JS) is the language of the Web – All browsers will execute JS code – Java. Script is an interpreted object-oriented language 107

JS Notes • Is JS slow? – JS engines in browsers are getting much JS Notes • Is JS slow? – JS engines in browsers are getting much faster – Not a key issues for graphics since once we get the data to the GPU it doesn’t matter how we got the data there • JS is a (too) big language – We don’t need to use it all – Choose parts we want to use – Don’t try to make your code look like C or Java 108




  • Мы удаляем страницу по первому запросу с достаточным набором данных, указывающих на ваше авторство. Мы также можем оставить страницу, явно указав ваше авторство (страницы полезны всем пользователям рунета и не несут цели нарушения авторских прав). Если такой вариант возможен, пожалуйста, укажите об этом.