CS452/552; EE465/505. Image Formation
|
|
- Douglas Clarke
- 6 years ago
- Views:
Transcription
1 CS452/552; EE465/505 Image Formation
2 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on github tomorrow at noon 2
3 Image Formation! Fundamental imaging notions! Physical basis for image formation Light Color Perception! Synthetic camera model! Other models
4 Image Formation! In computer graphics, we form images which are generally two dimensional using a process analogous to how images are formed by physical imaging systems Cameras Microscopes Telescopes Human visual system
5 Elements of Image Formation! Objects! Viewer! Light source(s)! Attributes that govern how light interacts with the materials in the scene! Note the independence of the objects, the viewer, and the light source(s)
6 Light! Light is the part of the electromagnetic spectrum that causes a reaction in our visual systems! Generally these are wavelengths in the range of about nm (nanometers)! Long wavelengths appear as reds and short wavelengths as blues
7 Luminance and Color Images! Luminance Image Monochromatic Values are gray levels Analogous to working with black and white film or television! Color Image Has perceptional attributes of hue, saturation, and lightness Do we have to match every frequency in visible spectrum? No!
8 Three-Color Theory! Human visual system has two types of sensors Rods: monochromatic, night vision Cones Color sensitive Three types of cones Only three values (the tristimulus values) are sent to the brain! Need only match these three values Need only three primary colors
9 Additive and Subtractive Color! Additive color Form a color by adding amounts of three primaries CRTs, projection systems, positive film Primaries are Red (R), Green (G), Blue (B)! Subtractive color Form a color by filtering white light with Cyan (C), Magenta (M), and Yellow (Y) filters Light-material interactions Printing Negative film
10 Pinhole Camera Use trigonometry to find projection of point at (x,y,z) x p = -x/z/d y p = -y/z/d z p = d These are equations of simple perspective
11 Synthetic Camera Model projector p image plane projection of p center of projection
12 Advantages! Separation of objects, viewer, light sources! Two-dimensional graphics is a special case of three-dimensional graphics! Leads to simple software API Specify objects, lights, camera, attributes Let implementation determine image! Leads to fast hardware implementation
13 Global vs Local Lighting! Cannot compute color or shade of each object independently Some objects are blocked from light Light can reflect from object to object Some objects might be translucent
14 Ray Tracing and Geometric Optics! One way to form an image is to follow rays of light from a point source finding which rays enter the lens of the camera. However, each ray of light may have multiple interactions with objects before being absorbed or going to infinity. Can handle global effects: Multiple reflections, Translucent objects Slow Must have whole data base available at all times
15 Why not ray tracing?! Ray tracing seems more physically based so why don t we use it to design a graphics system?! Possible and is actually simple for simple objects such as polygons and quadrics with simple point sources! In principle, can produce global lighting effects such as shadows and multiple reflections but ray tracing is slow and not well-suited for interactive applications! Ray tracing with GPUs is close to real time
16 Practical Approach! Process objects one at a time in the order they are generated by the application Can consider only local lighting! Pipeline architecture application program! All steps can be implemented in hardware on the graphics card display 16
17 Immediate Mode Graphics! Geometry specified by vertices Locations in space( 2 or 3 dimensional) Points, lines, circles, polygons, curves, surfaces! Immediate mode Each time a vertex is specified in application, its location is sent to the GPU Old style uses glvertex Creates bottleneck between CPU and GPU Removed from OpenGL 3.1 and OpenGL ES 2.0
18 Retained Mode Graphics! Put all vertex attribute data in array! Send array to GPU to be rendered immediately! Almost OK but problem is we would have to send array over each time we need another render of it! Better to send array over and store on GPU for multiple renderings
19 Execution in Browser
20 Example: red triangle, revisited! How to draw lines? points?! How is the data sent to the GPU, and interpreted as the variables in the shaders?
21 Shaders! We assign names to the shaders that we can use in the JS file! These are trivial pass-through (do nothing) shaders that which set the two required built-in variables gl_position gl_fragcolor! Note both shaders are full programs! Note vector type vec4! Must set precision in fragment shader
22 Files../Common/webgl-utils.js: Standard utilities for setting up WebGL context in Common directory on website../common/initshaders.js: contains JS and WebGL code for reading, compiling and linking the shaders../common/mv.js: our matrix-vector package square.js: the application file
23 Example Code <!DOCTYPE html> <html> <head> <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 vposition; void main(){ gl_position = vposition; } </script> <script id="fragment-shader" type="x-shader/x-fragment"> precision mediump float; void main(){ gl_fragcolor = vec4( 1.0, 0.0, 0.0, 1.0 ); } </script>
24 Notes onload: determines where to start execution when all code is loaded canvas gets WebGL context from HTML file vertices use vec4 type in MV.js JS array is not the same as a C or Java array object with methods vertices.length // 4 Values in clip coordinates
25 Notes initshaders used to load, compile and link shaders to form a program object Load data onto GPU by creating a vertex buffer object on the GPU Note use of flatten() to convert JS array to an array of float32 s Finally we must connect variable in program with variable in shader need name, type, location in buffer
26 JS File (cont) // Configure WebGL gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearcolor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initshaders( gl, "vertex-shader", "fragment-shader" ); gl.useprogram( program ); // Load the data into the GPU var bufferid = gl.createbuffer(); gl.bindbuffer( gl.array_buffer, bufferid ); gl.bufferdata( gl.array_buffer, flatten(vertices), gl.static_draw );
27 JS File (cont) // Associate our shader variables with our data buffer }; var vposition = gl.getattriblocation( program, "vposition" ); gl.vertexattribpointer( vposition, 2, gl.float, false, 0, 0 ); gl.enablevertexattribarray( vposition ); render(); function render() { gl.clear( gl.color_buffer_bit ); gl.drawarrays( gl.triangles, 0, 3 ); }
28 Example: colored triangle! Let s make each vertex of the triangle a different color: red, green and blue what will this look like? 28
29 Example: colored triangle! Let s make each vertex of the triangle a different color: red, green and blue 29
30 (-1, 1) (0, 1) Normalized Device Coordinate System (1, 1) (-1, 0) (0, 0) (1, 0) (-1, -1) JEFF CHASTINE (0, -1) (1, -1) 30
31 Coordinates of our triangle (0.0f, 0.5f, 0.0f) (-0.5f, -0.5f, 0.0f) (0.5f, -0.5f, 0.0f) JEFF CHASTINE 31
32 ColorFillTriangle.html // ColorFillTriangle.html based on (c) 2012 matsuda <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>draw a triangle with different vertex colors</title> <script id="vertex-shader" type= x-shader/x-vertex"> // on next slide </script> <script id="fragment-shader" type= x-shader/x-fragment"> // next slide </script> <script type="text/javascript" src="../common/webgl-utils.js"></script> <script type="text/javascript" src="../common/initshaders.js"></script> <script type="text/javascript" src="colorfilltriangle.js"></script> </head>
33 Vertex Shader <script id="vertex-shader" type="x-shader/x-vertex"> attribute vec4 a_position; attribute vec4 a_color; varying vec4 v_color; void main() { } gl_position = a_position; v_color = a_color; </script>
34 Fragment Shader <script id="fragment-shader" type= x-shader/x-fragment"> precision mediump float; varying vec4 v_color; void main() { gl_fragcolor = v_color; } </script>
35 ColorFillTriangle.html, cont. <!DOCTYPE html> <html lang="en"> <head> // on previous slide </head> <body> <canvas id="gl-canvas" width="400" height="400"> Please use a browser that supports "canvas" </canvas> </body> </html>
36 ColorFillTriangle.js // ColorFillTriangle.js based on (c) 2012 matsuda window.onload = function init() { // Retrieve <canvas> element var canvas = document.getelementbyid( "gl-canvas" ); // Get the rendering context for WebGL var gl = WebGLUtils.setupWebGL(canvas); if (!gl) { console.log('failed to get the rendering context for WebGL'); return; } gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearcolor( 0.0, 0.0, 0.0, 1.0 );
37 ColorFillTriangle.js, cont. // Create shading program var program = initshaders( gl, "vertex-shader", "fragment-shader" ); gl.useprogram( program ); gl.program = program; // initvertexbuffers() is on the next slide var n = initvertexbuffers(gl); if (n < 0) { console.log('failed to set the vertex information'); return; } } // Specify the color for clearing <canvas> gl.clearcolor(0.0, 0.0, 0.0, 1.0); // Clear <canvas> gl.clear(gl.color_buffer_bit); // Draw the rectangle gl.drawarrays(gl.triangles, 0, n);
38 ColorFillTriangle.js, cont. function initvertexbuffers(gl) { var verticescolors = new Float32Array([ // Vertex coordinates and color 0.0, 0.5, 1.0, 0.0, 0.0, -0.5, -0.5, 0.0, 1.0, 0.0, 0.5, -0.5, 0.0, 0.0, 1.0, ]); var n = 3; // Create a buffer object var vertexcolorbuffer = gl.createbuffer(); if (!vertexcolorbuffer) { console.log('failed to create the buffer object'); return false; } // continued on next slide
39 ColorFillTriangle.js, cont. // Bind the buffer object to target gl.bindbuffer(gl.array_buffer, vertexcolorbuffer); gl.bufferdata(gl.array_buffer, verticescolors, gl.static_draw); var FSIZE = verticescolors.bytes_per_element; //Get the storage location of a_position, assign & enable buffer var a_position = gl.getattriblocation(gl.program, 'a_position'); if (a_position < 0) { console.log('failed to get the storage location of a_position'); return -1; } gl.vertexattribpointer(a_position, 2, gl.float, false, FSIZE * 5, 0); gl.enablevertexattribarray(a_position); // Enable the assignment of the buffer object
40 ColorFillTriangle.js, cont. // Get the storage location of a_color, assign buffer and enable var a_color = gl.getattriblocation(gl.program, 'a_color'); if(a_color < 0) { console.log('failed to get the storage location of a_color'); return -1; } gl.vertexattribpointer(a_color, 3, gl.float, false, FSIZE * 5, FSIZE * 2); gl.enablevertexattribarray(a_color); // Enable the assignment of the buffer object // Unbind the buffer object gl.bindbuffer(gl.array_buffer, null); } return n;
41 Vertex Processing! Much of the work in the pipeline is in converting object representations from one coordinate system to another Object coordinates Camera (eye) coordinates Screen coordinates! Every change of coordinates is equivalent to a matrix transformation! Vertex processor also computes vertex colors
42 Projection! Projection is the process that combines the 3D viewer with the 3D objects to produce the 2D image Perspective projections: all projectors meet at the center of projection Parallel projection: projectors are parallel, center of projection is replaced by a direction of projection
43 Primitive Assembly Vertices must be collected into geometric objects before clipping and rasterization can take place Line segments Polygons Curves and surfaces
44 Clipping Just as a real camera cannot see the whole world, the virtual camera can only see part of the world or object space Objects that are not within this volume are said to be clipped out of the scene
45 Rasterization! If an object is not clipped out, the appropriate pixels in the frame buffer must be assigned colors! Rasterizer produces a set of fragments for each object! Fragments are potential pixels Have a location in frame bufffer Color and depth attributes! Vertex attributes are interpolated over objects by the rasterizer
46 Fragment Processing! Fragments are processed to determine the color of the corresponding pixel in the frame buffer! Colors can be determined by texture mapping or interpolation of vertex colors! Fragments may be blocked by other fragments closer to the camera Hidden-surface removal
47 Lack of Object Orientation! All versions of OpenGL are not object oriented so that there are multiple functions for a given logical function! Example: sending values to shaders gl.uniform3f gl.uniform2i gl.uniform3dv! Underlying storage mode is the same
48 WebGL function format function name dimension gl.uniform3f(x,y,z) belongs to WebGL canvas x,y,z are variables gl.uniform3fv(p) p is an array
49 WebGL constants! Most constants are defined in the canvas object In desktop OpenGL, they were in #include files such as gl.h! Examples desktop OpenGL glenable(gl_depth_test); WebGL gl.enable(gl.depth_test) gl.clear(gl.color_buffer_bit)
50 WebGL and GLSL! WebGL requires shaders and is based less on a state machine model than a data flow model! Most state variables, attributes and related pre 3.1 OpenGL functions have been deprecated! Action happens in shaders! Job of application is to get data to GPU
51 GLSL! OpenGL Shading Language! C-like with Matrix and vector types (2, 3, 4 dimensional) Overloaded operators C++ like constructors! Similar to Nvidia s Cg and Microsoft HLSL! Code sent to shaders as source code! WebGL functions compile, link and get information to shaders
52 Coordinate Systems! The units in points are determined by the application and are called object, world, model or problem coordinates! Viewing specifications usually are also in object coordinates! Eventually pixels will be produced in window coordinates! WebGL also uses some internal representations that usually are not visible to the application but are important in the shaders! Most important is clip coordinates
53 Coordinate Systems and Shaders! Vertex shader must output in clip coordinates! Input to fragment shader from rasterizer is in window coordinates! Application can provide vertex data in any coordinate system but shader must eventually produce gl_position in clip coordinates! Simple example uses clip coordinates
54 WebGL Camera! WebGL places a camera at the origin in object space pointing in the negative z direction! The default viewing volume is a box centered at the origin with sides of length 2
55 Viewports! Do not have use the entire window for the image: gl.viewport(x,y,w,h)! Values in pixels (window coordinates)
56 Next Topic! Transformations & Viewing! User Interaction
Models and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Models and Architectures 1 Objectives Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for an interactive graphics system 2 Image Formation Revisited
More informationProgramming with OpenGL Complete Programs Objectives Build a complete first program
Programming with OpenGL Complete Programs Objectives Build a complete first program Introduce shaders Introduce a standard program structure Simple viewing Two-dimensional viewing as a special case of
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Image Formation
More informationImage Formation. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico
Image Formation Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico 1 Objectives Fundamental imaging notions Physical basis for image formation
More informationObjectives. Programming with WebGL Part 1: Background. Retained vs. Immediate Mode Graphics. Early History of APIs. PHIGS and X.
Objectives Programming with WebGL Part 1: Background CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Development of the OpenGL API OpenGL Architecture - OpenGL
More informationProgramming with WebGL Part 1: Background. CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Programming with WebGL Part 1: Background CS 432 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Rongkai Guo Assistant Professor at Computer Game Design program Kennesaw State University 1 Overview These lectures are for a senior/graduate elective for computer
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico 1 Overview These
More informationWebGL A quick introduction. J. Madeira V. 0.2 September 2017
WebGL A quick introduction J. Madeira V. 0.2 September 2017 1 Interactive Computer Graphics Graphics library / package is intermediary between application and display hardware Application program maps
More information3D graphics, raster and colors CS312 Fall 2010
Computer Graphics 3D graphics, raster and colors CS312 Fall 2010 Shift in CG Application Markets 1989-2000 2000 1989 3D Graphics Object description 3D graphics model Visualization 2D projection that simulates
More informationCS452/552; EE465/505. Overview of Computer Graphics
CS452/552; EE465/505 Overview of Computer Graphics 1-13-15 Outline! What is Computer Graphics? a historical perspective! Draw a triangle using WebGL Computer Graphics! Computer graphics deals with all
More informationLecture 1. Computer Graphics and Systems. Tuesday, January 15, 13
Lecture 1 Computer Graphics and Systems What is Computer Graphics? Image Formation Sun Object Figure from Ed Angel,D.Shreiner: Interactive Computer Graphics, 6 th Ed., 2012 Addison Wesley Computer Graphics
More informationCS452/552; EE465/505. Image Processing Frame Buffer Objects
CS452/552; EE465/505 Image Processing Frame Buffer Objects 3-12 15 Outline! Image Processing: Examples! Render to Texture Read: Angel, Chapter 7, 7.10-7.13 Lab3 new due date: Friday, Mar. 13 th Project#1
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science Laboratory University of New Mexico Models and Architectures
More informationModels and Architectures
Models and Architectures Objectives Learn the basic design of a graphics system Introduce graphics pipeline architecture Examine software components for an interactive graphics system 1 Image Formation
More informationCS452/552; EE465/505. Review & Examples
CS452/552; EE465/505 Review & Examples 2-05 15 Outline Review and Examples:! Shaders, Buffers & Binding! Example: Draw 3 Triangles Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Example:
More informationINTRODUCTION. Slides modified from Angel book 6e
INTRODUCTION Slides modified from Angel book 6e Fall 2012 COSC4328/5327 Computer Graphics 2 Objectives Historical introduction to computer graphics Fundamental imaging notions Physical basis for image
More informationGame Programming. Bing-Yu Chen National Taiwan University
Game Programming Bing-Yu Chen National Taiwan University What is Computer Graphics? Definition the pictorial synthesis of real or imaginary objects from their computer-based models descriptions OUTPUT
More informationModels and Architectures. Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico
Models and Architectures Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts University of New Mexico 1 Objectives Learn the basic design of a graphics system Introduce
More informationComputer Graphics. Bing-Yu Chen National Taiwan University The University of Tokyo
Computer Graphics Bing-Yu Chen National Taiwan University The University of Tokyo Introduction The Graphics Process Color Models Triangle Meshes The Rendering Pipeline 1 What is Computer Graphics? modeling
More informationOUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system
GRAPHICS PIPELINE 1 OUTLINE Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system 2 IMAGE FORMATION REVISITED Can we mimic the synthetic
More informationCSE4030 Introduction to Computer Graphics
CSE4030 Introduction to Computer Graphics Dongguk University Jeong-Mo Hong Timetable 00:00~00:10 Introduction (English) 00:10~00:50 Topic 1 (English) 00:50~00:60 Q&A (English, Korean) 01:00~01:40 Topic
More informationIntroduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL Ed Angel The Mandelbrot Set Fractals Fractal (fractional geometry) objects generate some of the most complex and beautiful graphics - The mathematics describing
More informationComputer Graphics. Bing-Yu Chen National Taiwan University
Computer Graphics Bing-Yu Chen National Taiwan University Introduction The Graphics Process Color Models Triangle Meshes The Rendering Pipeline 1 INPUT What is Computer Graphics? Definition the pictorial
More informationComputer Graphics and Visualization. Graphics Systems and Models
UNIT -1 Graphics Systems and Models 1.1 Applications of computer graphics: Display Of Information Design Simulation & Animation User Interfaces 1.2 Graphics systems A Graphics system has 5 main elements:
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 2: First Program
Comp 410/510 Computer Graphics Spring 2017 Programming with OpenGL Part 2: First Program Objectives Refine the first program Introduce a standard program structure - Initialization Program Structure Most
More informationIntroduction to OpenGL/GLSL and WebGL GLSL
Introduction to OpenGL/GLSL and WebGL GLSL Objectives! Give you an overview of the software that you will be using this semester! OpenGL, WebGL, and GLSL! What are they?! How do you use them?! What does
More informationSurvey in Computer Graphics Computer Graphics and Visualization
Example of a Marble Ball Where did this image come from? Fall 2010 What hardware/software/algorithms did we need to produce it? 2 A Basic Graphics System History of Computer Graphics 1200-2008 Input devices
More informationAPI Background. Prof. George Wolberg Dept. of Computer Science City College of New York
API Background Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Graphics API history OpenGL API OpenGL function format Immediate Mode vs Retained Mode Examples The Programmer
More informationCS452/552; EE465/505. Models & Viewing
CS452/552; EE465/505 Models & Viewing 2-03 15 Outline! Building Polygonal Models Vertex lists; gl.drawarrays( ) Edge lists: gl.drawelements( )! Viewing Classical Viewing Read: Viewing in Web3D Angel, Section
More informationToday s Agenda. Basic design of a graphics system. Introduction to OpenGL
Today s Agenda Basic design of a graphics system Introduction to OpenGL Image Compositing Compositing one image over another is most common choice can think of each image drawn on a transparent plastic
More informationGraphics Systems and Models
Graphics Systems and Models 2 nd Week, 2007 Sun-Jeong Kim Five major elements Input device Processor Memory Frame buffer Output device Graphics System A Graphics System 2 Input Devices Most graphics systems
More informationVTU QUESTION PAPER SOLUTION UNIT -1 INTRODUCTION
VTU QUESTION PAPER SOLUTION UNIT -1 INTRODUCTION 1. Briefly explain any two applications of computer graphics. (June 2012) 4M Ans: Applications of computer graphics are: Display Of Information Design Simulation
More informationCS452/552; EE465/505. Transformations
CS452/552; EE465/55 Transformations 1-29-15 Outline! Transformations Read: Angel, Chapter 4 (study cube.html/cube.js example) Helpful links: Linear Algebra: Khan Academy Lab1 is posted on github, due:
More informationNational Chiao Tung Univ, Taiwan By: I-Chen Lin, Assistant Professor
Computer Graphics 1. Graphics Systems National Chiao Tung Univ, Taiwan By: I-Chen Lin, Assistant Professor Textbook: Hearn and Baker, Computer Graphics, 3rd Ed., Prentice Hall Ref: E.Angel, Interactive
More informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 2 Part 2 Introduction to Shaders Matt Burlick - Drexel University - CS 432 1 Shaders To understand shaders, let s look at the graphics pipeline again The job
More informationComp4422. Computer Graphics. Lab 02: WebGL API Prof. George Baciu. PQ838 x7272.
Comp4422 Computer Graphics Lab 02: WebGL API www.comp.polyu.edu.hk/~csgeorge/comp4422 Prof. George Baciu csgeorge@comp.polyu.edu.hk PQ838 x7272 9/6/2018 COMP4422 Lab 02 George Baciu 2018 1 WebGL Prerequisites
More informationOver the past 15 years, OpenGL has become
Editors: Beatriz Sousa Santos and Ginger Alford The Case for Teaching Computer Graphics with WebGL: A 25-Year Perspective Ed Angel University of New Mexico Over the past 15 years, OpenGL has become the
More informationBuilding Models. CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science
Building Models CS 537 Interactive Computer Graphics Prof. David E. Breen Department of Computer Science 1 Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge
More informationCS450/550. Pipeline Architecture. Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012
CS450/550 Pipeline Architecture Adapted From: Angel and Shreiner: Interactive Computer Graphics6E Addison-Wesley 2012 0 Objectives Learn the basic components of a graphics system Introduce the OpenGL pipeline
More informationWe assume that you are familiar with the following:
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationWebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group
WebGL: Hands On DevCon5 NYC 2011 Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group Today's Agenda Introduce WebGL and its programming model. Show code for a complete example. Demonstrate
More informationComputer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2)
Computer Graphics CS 543 Lecture 4 (Part 2) Building 3D Models (Part 2) Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Modeling a Cube In 3D, declare vertices as (x,y,z)
More informationCS452/552; EE465/505. Shadow Mapping in WebGL
CS452/552; EE465/505 Shadow Mapping in WebGL 4-09 15 Outline! Shadow Mapping in WebGL Switching Shaders Framebuffer Objects (FBO) Read: Angel, Chapter 7: 7.12 Framebuffer Objects WebGL Programming Guide:
More informationGraphics Programming. Computer Graphics, VT 2016 Lecture 2, Chapter 2. Fredrik Nysjö Centre for Image analysis Uppsala University
Graphics Programming Computer Graphics, VT 2016 Lecture 2, Chapter 2 Fredrik Nysjö Centre for Image analysis Uppsala University Graphics programming Typically deals with How to define a 3D scene with a
More informationC P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE. Mikhail Bessmeltsev
C P S C 314 S H A D E R S, O P E N G L, & J S RENDERING PIPELINE UGRAD.CS.UBC.C A/~CS314 Mikhail Bessmeltsev 1 WHAT IS RENDERING? Generating image from a 3D scene 2 WHAT IS RENDERING? Generating image
More information2D graphics with WebGL
2D graphics with WebGL Some material contained here is adapted from the book s slides. September 7, 2015 (Dr. Mihail) 2D graphics September 7, 2015 1 / 22 Graphics Pipeline (Dr. Mihail) 2D graphics September
More informationRendering Objects. Need to transform all geometry then
Intro to OpenGL Rendering Objects Object has internal geometry (Model) Object relative to other objects (World) Object relative to camera (View) Object relative to screen (Projection) Need to transform
More informationWe will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell
We will use WebGL 1.0. WebGL 2.0 is now being supported by most browsers but requires a better GPU so may not run on older computers or on most cell phones and tablets. See http://webglstats.com/. We will
More informationCOMP371 COMPUTER GRAPHICS
COMP371 COMPUTER GRAPHICS SESSION 12 PROGRAMMABLE SHADERS Announcement Programming Assignment #2 deadline next week: Session #7 Review of project proposals 2 Lecture Overview GPU programming 3 GPU Pipeline
More informationCS475/CS675 - Computer Graphics. OpenGL Drawing
CS475/CS675 - Computer Graphics OpenGL Drawing What is OpenGL? Open Graphics Library API to specify geometric objects in 2D/3D and to control how they are rendered into the framebuffer. A software interface
More informationShaders. Slide credit to Prof. Zwicker
Shaders Slide credit to Prof. Zwicker 2 Today Shader programming 3 Complete model Blinn model with several light sources i diffuse specular ambient How is this implemented on the graphics processor (GPU)?
More informationRasterization-based pipeline
Rasterization-based pipeline Interactive Graphics: Color and Images 10/2/2014 Pagina 1 Rasterization-based rendering Input: set of vertices and its associated attributes Algorithm goes through several
More informationBCA611 Video Oyunları için 3B Grafik
BCA611 Video Oyunları için 3B Grafik WebGL - Shader Programming Zümra Kavafoğlu Canvas element The HTML element is used to draw graphics on a web page. Create canvas with id, width and height
More informationUlf Assarsson Department of Computer Engineering Chalmers University of Technology
Ulf Assarsson Department of Computer Engineering Chalmers University of Technology Tracing Photons One way to form an image is to follow rays of light from a point source finding which rays enter the lens
More informationCS452/552; EE465/505. Intro to Lighting
CS452/552; EE465/505 Intro to Lighting 2-10 15 Outline! Projection Normalization! Introduction to Lighting (and Shading) Read: Angel Chapter 5., sections 5.4-5.7 Parallel Projections Chapter 6, sections
More informationWebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers
Media #WWDC14 WebGL Creating Interactive Content with WebGL Session 509 Dean Jackson and Brady Eidson WebKit Engineers 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted
More informationBuilding Models. Prof. George Wolberg Dept. of Computer Science City College of New York
Building Models Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce simple data structures for building polygonal models - Vertex lists - Edge lists Deprecated
More informationCS451Real-time Rendering Pipeline
1 CS451Real-time Rendering Pipeline JYH-MING LIEN DEPARTMENT OF COMPUTER SCIENCE GEORGE MASON UNIVERSITY Based on Tomas Akenine-Möller s lecture note You say that you render a 3D 2 scene, but what does
More informationBuilding Models. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Building Models 1 Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 2 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 e v v 7 7
More informationGraphics Programming
Graphics Programming 3 rd Week, 2011 OpenGL API (1) API (application programming interface) Interface between an application program and a graphics system Application Program OpenGL API Graphics Library
More informationWebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015
WebGL and GLSL Basics CS559 Fall 2015 Lecture 10 October 6, 2015 Last time Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationCS452/552; EE465/505. Texture Mapping in WebGL
CS452/552; EE465/505 Texture Mapping in WebGL 2-26 15 Outline! Texture Mapping in WebGL Read: Angel, Chapter 7, 7.3-7.5 LearningWebGL lesson 5: http://learningwebgl.com/blog/?p=507 Lab3 due: Monday, 3/2
More informationCopyright Khronos Group 2012 Page 1. Teaching GL. Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012
Copyright Khronos Group 2012 Page 1 Teaching GL Dave Shreiner Director, Graphics and GPU Computing, ARM 1 December 2012 Copyright Khronos Group 2012 Page 2 Agenda Overview of OpenGL family of APIs Comparison
More informationComputer Graphics Lecture 2
1 / 16 Computer Graphics Lecture 2 Dr. Marc Eduard Frîncu West University of Timisoara Feb 28th 2012 2 / 16 Outline 1 Graphics System Graphics Devices Frame Buffer 2 Rendering pipeline 3 Logical Devices
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 3: Shaders
Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 3: Shaders Objectives Basic shaders - Vertex shader - Fragment shader Programming shaders with GLSL Finish first program void init(void)
More informationWebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.
About the Tutorial WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics. This tutorial starts with a basic introduction
More informationIntroduction to Computer Graphics with WebGL
1 Introduction to Computer Graphics with WebGL Ed Angel Transformations General Transformations A transformation maps points to other points and/or vectors to other vectors v=t(u) Q=T(P) 2 Affine Transformations
More informationComp 410/510 Computer Graphics Spring Programming with OpenGL Part 4: Three Dimensions
Comp 410/510 Computer Graphics Spring 2018 Programming with OpenGL Part 4: Three Dimensions Objectives Develop a bit more sophisticated three-dimensional example - Rotating cube Introduce hidden-surface
More informationShadows. Prof. George Wolberg Dept. of Computer Science City College of New York
Shadows Prof. George Wolberg Dept. of Computer Science City College of New York Objectives Introduce Shadow Algorithms Expand to projective textures 2 Flashlight in the Eye Graphics When do we not see
More informationWebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October
WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October 24 2016 Review Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, -.4 1.1, 0, -.1.9,.05,.05.33,.33,.33
More informationUlf Assarsson Department of Computer Engineering Chalmers University of Technology
Ulf Assarsson Department of Computer Engineering Chalmers University of Technology 1. I am located in room 4115 in EDIT-huset 2. Email: 3. Phone: 031-772 1775 (office) 4. Course assistant: Tomas Akenine-Mőller
More informationOPENGL RENDERING PIPELINE
CPSC 314 03 SHADERS, OPENGL, & JS UGRAD.CS.UBC.CA/~CS314 Textbook: Appendix A* (helpful, but different version of OpenGL) Alla Sheffer Sep 2016 OPENGL RENDERING PIPELINE 1 OPENGL RENDERING PIPELINE Javascript
More informationLecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation
Lecture 5 Vertex and Fragment Shaders-1 CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives The rendering pipeline and the shaders Data
More informationLecture 2. Shaders, GLSL and GPGPU
Lecture 2 Shaders, GLSL and GPGPU Is it interesting to do GPU computing with graphics APIs today? Lecture overview Why care about shaders for computing? Shaders for graphics GLSL Computing with shaders
More informationRendering. Converting a 3D scene to a 2D image. Camera. Light. Rendering. View Plane
Rendering Pipeline Rendering Converting a 3D scene to a 2D image Rendering Light Camera 3D Model View Plane Rendering Converting a 3D scene to a 2D image Basic rendering tasks: Modeling: creating the world
More informationIntroduction to Shaders.
Introduction to Shaders Marco Benvegnù hiforce@gmx.it www.benve.org Summer 2005 Overview Rendering pipeline Shaders concepts Shading Languages Shading Tools Effects showcase Setup of a Shader in OpenGL
More informationProgramming with OpenGL Part 3: Shaders. Ed Angel Professor of Emeritus of Computer Science University of New Mexico
Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 Objectives Simple Shaders - Vertex shader - Fragment shaders Programming shaders with
More informationWebGL. Mike Bailey. Oregon State University. What is WebGL?
WebGL Mike Bailey mjb@cs.oregonstate.edu Oregon State University What is WebGL? From WikiPedia: WebGL(Web Graphics Library) is a JavaScript API for rendering interactive 3D graphics and 2D graphics within
More informationCSE 167: Introduction to Computer Graphics Lecture #7: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016
CSE 167: Introduction to Computer Graphics Lecture #7: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2016 Announcements Project 2 due Friday 4/22 at 2pm Midterm #1 on
More informationComputer Graphics - Chapter 1 Graphics Systems and Models
Computer Graphics - Chapter 1 Graphics Systems and Models Objectives are to learn about: Applications of Computer Graphics Graphics Systems Images: Physical and Synthetic The Human Visual System The Pinhole
More informationBuilding Models. Objectives Introduce simple data structures for building polygonal models. Vertex lists Edge lists
Building Models Objectives Introduce simple data structures for building polygonal models Vertex lists Edge lists 1 Representing a Mesh Consider a mesh v 5 v 6 e e e 3 v 9 8 8 v e 4 1 e 11 v e v 7 7 1
More informationReal-Time Rendering (Echtzeitgraphik) Michael Wimmer
Real-Time Rendering (Echtzeitgraphik) Michael Wimmer wimmer@cg.tuwien.ac.at Walking down the graphics pipeline Application Geometry Rasterizer What for? Understanding the rendering pipeline is the key
More informationThe Graphics Pipeline
The Graphics Pipeline Lecture 2 Robb T. Koether Hampden-Sydney College Fri, Aug 28, 2015 Robb T. Koether (Hampden-Sydney College) The Graphics Pipeline Fri, Aug 28, 2015 1 / 19 Outline 1 Vertices 2 The
More informationOverview CS Plans for this semester. References. CS 4600 Fall Prerequisites
Overview CS 4600 What is CS 4600? What should know (pre reqs)? What will you get out of this course? Chuck Hansen Website: www.eng.utah.edu/~cs4600 Thanks to Ed Angel and Jeff Parker for slides and materials
More informationCSC 8470 Computer Graphics. What is Computer Graphics?
CSC 8470 Computer Graphics What is Computer Graphics? For us, it is primarily the study of how pictures can be generated using a computer. But it also includes: software tools used to make pictures hardware
More informationOpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders
OpenGL pipeline Evolution and OpenGL Shading Language (GLSL) Part 2/3 Vertex and Fragment Shaders Prateek Shrivastava CS12S008 shrvstv@cse.iitm.ac.in 1 GLSL Data types Scalar types: float, int, bool Vector
More informationCS130 : Computer Graphics Lecture 2: Graphics Pipeline. Tamar Shinar Computer Science & Engineering UC Riverside
CS130 : Computer Graphics Lecture 2: Graphics Pipeline Tamar Shinar Computer Science & Engineering UC Riverside Raster Devices and Images Raster Devices - raster displays show images as a rectangular array
More informationCS 354R: Computer Game Technology
CS 354R: Computer Game Technology Texture and Environment Maps Fall 2018 Texture Mapping Problem: colors, normals, etc. are only specified at vertices How do we add detail between vertices without incurring
More informationConverts geometric primitives into images Is split into several independent stages Those are usually executed concurrently
Rendering Pipeline Rendering Pipeline Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently Pipeline 18.10.2013 Steiner- Wallner- Podaras
More informationOPEN GL BACKGROUND. Objectives. Early History of APIs. SGI and GL. PHIGS and X. Modified from Angel 6e book slides
OPEN GL Modified from Angel 6e book slides BACKGROUND Objectives Early History of APIs Development of the OpenGL API OpenGL Architecture OpenGL as a state machine OpenGL as a data flow machine Functions
More informationPipeline Operations. CS 4620 Lecture Steve Marschner. Cornell CS4620 Spring 2018 Lecture 11
Pipeline Operations CS 4620 Lecture 11 1 Pipeline you are here APPLICATION COMMAND STREAM 3D transformations; shading VERTEX PROCESSING TRANSFORMED GEOMETRY conversion of primitives to pixels RASTERIZATION
More informationProgramming with OpenGL Shaders I. Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico
Programming with OpenGL Shaders I Adapted From: Ed Angel Professor of Emeritus of Computer Science University of New Mexico Objectives Shader Programming Basics Simple Shaders Vertex shader Fragment shaders
More informationGraphics Pipeline & APIs
Graphics Pipeline & APIs CPU Vertex Processing Rasterization Fragment Processing glclear (GL_COLOR_BUFFER_BIT GL_DEPTH_BUFFER_BIT); glpushmatrix (); gltranslatef (-0.15, -0.15, solidz); glmaterialfv(gl_front,
More informationBasic Graphics Programming
15-462 Computer Graphics I Lecture 2 Basic Graphics Programming Graphics Pipeline OpenGL API Primitives: Lines, Polygons Attributes: Color Example January 17, 2002 [Angel Ch. 2] Frank Pfenning Carnegie
More informationThe Graphics Pipeline
The Graphics Pipeline Lecture 2 Robb T. Koether Hampden-Sydney College Wed, Aug 23, 2017 Robb T. Koether (Hampden-Sydney College) The Graphics Pipeline Wed, Aug 23, 2017 1 / 19 Outline 1 Vertices 2 The
More informationCS 464 Review. Review of Computer Graphics for Final Exam
CS 464 Review Review of Computer Graphics for Final Exam Goal: Draw 3D Scenes on Display Device 3D Scene Abstract Model Framebuffer Matrix of Screen Pixels In Computer Graphics: If it looks right then
More informationThe Graphics Pipeline
The Graphics Pipeline Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel Ray Tracing: Why Slow? Basic ray tracing: 1 ray/pixel But you really want shadows, reflections, global illumination, antialiasing
More informationRasterization Overview
Rendering Overview The process of generating an image given a virtual camera objects light sources Various techniques rasterization (topic of this course) raytracing (topic of the course Advanced Computer
More informationCS4621/5621 Fall Computer Graphics Practicum Intro to OpenGL/GLSL
CS4621/5621 Fall 2015 Computer Graphics Practicum Intro to OpenGL/GLSL Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang
More information