OpenGL shaders and programming models that provide object persistence
|
|
- Hugh Bradley
- 6 years ago
- Views:
Transcription
1 OpenGL shaders and programming models that provide object persistence COSC342 Lecture May 2016
2 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that there were reasons you might want to modify these: e.g. procedural textures for bump maps. Ideally the illumination calculations would be entirely programmable. OpenGL shaders facilitate high performance programmability. They have been available as extensions since OpenGL 1.5 (2003), but core within OpenGL 2.0 (2004). We will focus on vertex and fragment shaders, but there are other types: e.g. geometry shaders, and more recent shaders for tessellation and general computing. COSC342 OpenGL shaders and programming models that provide object persistence 2
3 GL Shading Language GLSL C-like syntax. (No surprises given the OpenGL lineage... ) However, compared to real use of C, GLSL programmers are further away from the actual hardware. Usually the GLSL code will be passed as a string into the OpenGL library you are using. Only supports limited number of data types: e.g. float, double,... Adds some special types of its own: e.g. vector types vec2, vec4. Unlike most software, GLSL is typically compiled every time you load your functions there isn t (yet...) a standardised GL machine code. COSC342 OpenGL shaders and programming models that provide object persistence 3
4 GLSL on the hardware The GLSL syntax just provides a standard way to specify functions. Different vendors may use vastly different hardware implementations. (Or indeed the CPU may be doing the GLSL work, e.g. Mesa.) On any hardware accelerated system, the GLSL code will be run in a massively parallel way. Crucially, it s usually a single-instruction multiple-data (SIMD) approach. This means that conditional branches and structures such as loops may be problematic. (Particularly if threads need to diverge.) COSC342 OpenGL shaders and programming models that provide object persistence 4
5 Vertex shaders Vertex shaders run in the vertex processor: recall that this replaced the Transform stage of the GL pipeline. Vertex shaders are given inputs including: uniform variables that hold the same value for all vertices; attributes that provide data per vertex: e.g. position, normal, colour, texture coordinates. Vertex shaders produce results by: assigning to predefined variables such as gl position the vertex s screen-space position; setting custom vertex attributes whose values are to be interpolated and provided to fragment shaders. COSC342 OpenGL shaders and programming models that provide object persistence 5
6 Fragment shaders Fragment shaders run in the fragment processor: recall that this replaced the Shade stage of the GL pipeline. e.g. you could use a fragment shader to implement Phong shading. Variables that were varying outputs of the vertex shader are (constant) inputs to the fragment shader. Fragment shaders cause effects by assigning to predefined variables. e.g. gl FragColour is a vec4 that the fragment shader can set to give this fragment (almost a pixel) an RGBA value. Fragment shaders can also set the depth value for z-buffering. COSC342 OpenGL shaders and programming models that provide object persistence 6
7 GLSL implementation of flat, constant, blue shading Not a particularly useful type of shading, but it does give us usefully minimal shader code. Our vertex shader will just ensure that vertices are transformed to screen coordinates void main () { gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } Our fragment shader sets all fragments to be blue void main () { gl_fragcolor = vec4 (0.0, 0.0, 1.0, 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 7
8 (Simplified) GLSL Gouraud shading Vertex shader: varying vec4 color ; void main () { vec3 n = normalize ( gl_ NormalMatrix * gl_ Normal ); vec3 l= normalize ( vec3 ( gl_lightsource [0]. position )); vec3 diffusereflection = vec3 ( gl_ LightSource [ 0]. diffuse ) * max (0.0, dot (n, l)); color = vec4 ( diffusereflection, 1. 0) ; gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } Fragment shader: varying vec4 color ; void main () { gl_ FragColor = color ; } COSC342 OpenGL shaders and programming models that provide object persistence 8
9 GLSL Phong shading sketch vertex and fragment shaders varying vec4 e; varying vec3 n; void main () { e = gl_ ModelViewMatrix * gl_ Vertex ; n = normalize ( gl_ NormalMatrix * gl_ Normal ); gl_position =... } varying vec4 e; varying vec3 n; void main () { vec3 nn = normalize ( n); vec3 ne = - normalize ( vec3 (e)); vec3 l =...; vec3 specularreflection ; if ( dot (nn, l) < 0.0) specularreflection = vec3 (0.0, 0.0, 0.0) ; else { specularreflection = vec3 ( gl_ LightSource [ index ]. specular ) * vec3 ( gl_ FrontMaterial. specular ) * pow ( max (0.0, dot ( reflect (-l, nn), ne)), gl_frontmaterial. shininess ); } gl_ FragColor = vec4 ( ambient... + diffuse... + specularreflection, 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 9
10 An aside: fractals Fractals are shapes that have infinite detail. (This implies that they must be procedurally generated.) Often they have self-similarity: e.g. recursive structures. You have encountered a fractal shape in COSC342 already: the Sierpinski Gasket (fractal triangle) in the first OpenGL lab. A fractal such as the figure to the right has a finite volume... but yet has an infinite surface area! Simple equations can produce intricate results: e.g. iterate z n+1 = z 2 n + c for complex numbers z and c to generate the Mandelbrot set. COSC342 OpenGL shaders and programming models that provide object persistence 10
11 A vertex shader for a procedural texture... uniform float real ; // fractal s " x" uniform float imag ; // fractal s " y" uniform float w; // width uniform float h; // height varying float xpos ; // changes across polygon varying float ypos ; void main ( void ) { xpos = clamp ( gl_vertex.x, 0.0,1.0) *w+ real ; ypos = clamp ( gl_vertex.y, 0.0,1.0) *h+ imag ; } // perform update of GLSL global variables gl_position = gl_modelviewprojectionmatrix * gl_vertex ; COSC342 OpenGL shaders and programming models that provide object persistence 11
12 ... and the corresponding fragment shader varying float xpos, ypos ; void main ( void ) { float iter = 0.0, square = 0.0, max_ square = 3. 0; float r = 0.0, i = 0. 0; float rt = 0.0, it = 0. 0; while ( iter < 1.0 && square < max_ square ) { rt = (r*r) - (i*i) + xpos ; it = (2.0 * r * i) + ypos ; r = rt; i = it; square = (r*r)+(i*i); iter += ; } gl_fragcolor = vec4 (iter, sin ( iter *20.00), sin ( iter *2.00), 1.0) ; } COSC342 OpenGL shaders and programming models that provide object persistence 12
13 Using the Pyglet library for Python to load GLSL vertex_ shader_ src = """ uniform float real,w,imag,h; varying float xpos, ypos ; void main ( void ) { xpos = clamp ( gl_vertex.x, 0.0,1.0) *w+ real ; ypos = clamp ( gl_vertex.y, 0.0,1.0) *h+ imag ; gl_position = gl_modelviewprojectionmatrix * gl_vertex ; } """ program = gl. glcreateprogram () vertex_ shader = self. create_ shader ( vertex_ shader_ src, gl. GL_VERTEX_SHADER ) gl. glattachshader ( self. program, vertex_shader ) gl. gllinkprogram ( self. program ) message = self. get_program_log ( self. program ) if message : raise ShaderException ( message ) COSC342 OpenGL shaders and programming models that provide object persistence 13
14 Maybe next time? COSC342 OpenGL shaders and programming models that provide object persistence 14
15 Persistent object modelling In OpenGL, you draw it, and it s on-screen (more or less).... however you can t later ask OpenGL what objects were drawn. (Although you can ask OpenGL to tell you pixel values.) Nonetheless, you probably want the next frame you are going to draw to be closely related to the one you just drew. Ideally you could explain to a graphics framework what your objects are, and it can maintain this state for you. There are many ways to acquire this functionality, such as through game engines (e.g. Unity3D, Blender, etc.), and scene-graph libraries. COSC342 OpenGL shaders and programming models that provide object persistence 15
16 Scene graphs When building a computer model of a bicycle just as you would when building a real bicycle you are likely to use discrete parts. A scene graph allows us to store a model that retains these constituent components. COSC342 OpenGL shaders and programming models that provide object persistence 16
17 Parameterised scene graphs Duplicated objects in our scene should share the same nodes in the scene-graph. Note that we can use nodes to hold matrices, as well as geometry. The transformations in a matrix node will apply to all children of that node. COSC342 OpenGL shaders and programming models that provide object persistence 17
18 Further decomposition of our bicycle scene graph In the case of our bicycle model, we can apply further geometric decomposition: a wheel is itself made up of subcomponents... COSC342 OpenGL shaders and programming models that provide object persistence 18
19 Standard Vector Graphics (SVG) The persistence mechanism for SVG is the HTML DOM. <! DOCTYPE html ><! -- i.e. HTML5 --> <html ><body > <svg style =" border :1 px solid black ;" width =" 100 " height =" 100 "> < circle id="my - circle " cx="40" cy="30" r="25" stroke =" blue " stroke - width ="2" fill =" green " /> </ svg > </ body ></ html > JavaScript can find and dynamically modify DOM elements: var c = document. getelementbyid ("my - circle "); c. setattribute ("cx",50); c. setattribute (" fill "," orange "); COSC342 OpenGL shaders and programming models that provide object persistence 19
20 WebGL Another important web technology for graphics is WebGL. Defines a standard way to access to OpenGL from web browsers. Specifically, it s based on OpenGL ES 2.0, and supports GLSL. In terms of syntax, the resulting web workload is a dog s breakfast. Development is likely to involve HTML, CSS, JavaScript, GLSL, in addition to WebGL s OpenGL-style naming. However serious web development is unlikely to involve manual editing of all these types of files (e.g. given frameworks, libraries, IDEs, etc). WebGL is likely to be very useful in popularising OpenGL further. It also allows mixing in of other web technologies. COSC342 OpenGL shaders and programming models that provide object persistence 20
21 WebGL hello world does not sensibly fit on one slide <! DOCTYPE html > <html ><head ><title >WebGL example </ title ></ head > <body >< script type =" text / javascript ">... shaders, data bulk - loading... function draw () { var gl = document. getelementbyid (" webgl "). getcontext (" experimental - webgl ");... var prog = shaderprogram ( gl, " attribute vec3 pos ; void main () { gl_ Position = vec4 ( pos, 2.0) ; }", " void main () { gl_ FragColor = vec4 (0.5, 0.5, 1.0, 1. 0) ; }");... attributesetfloats (gl, prog, " pos ", 3, [-1, 0, 0, 0, 1, 0, 0, -1, 0, 1, 0, 0]) ; gl. drawarrays (gl. TRIANGLE_STRIP, 0, 4); }... </ script > < canvas id=" webgl " width =" 640 " height =" 480 "></ canvas > </ body ></ html > COSC342 OpenGL shaders and programming models that provide object persistence 21
22 three.js: a JavaScript library that helps 3D web coding var scene = new THREE. Scene (); var S_W = window. innerwidth, S_H = window. innerheight ; var camera = new THREE. PerspectiveCamera ( 45, S_W / S_H, 0.1, 20000) ; scene. add ( camera ); camera. position. set (0,150,400) ; camera. lookat ( scene. position ); var renderer = new THREE. WebGLRenderer ( { antialias : true } ); renderer. setsize (S_W, S_H ); var container = document. getelementbyid ( ThreeJS ); container. appendchild ( renderer. domelement ); var light = new THREE. PointLight (0 xffffff ); light. position. set (100,150,200) ; scene. add ( light ); var geometry = new THREE. SphereGeometry ( 100, 32, 16 ); var material = new THREE. MeshLambertMaterial ( { color : 0 x8888ff } ); var mesh = new THREE. Mesh ( geometry, material ); mesh. position. set (0,40,0) ; scene. add ( mesh ); renderer. render ( scene, camera ); COSC342 OpenGL shaders and programming models that provide object persistence 22
WebGL (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 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 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 informationLets assume each object has a defined colour. Hence our illumination model is looks unrealistic.
Shading Models There are two main types of rendering that we cover, polygon rendering ray tracing Polygon rendering is used to apply illumination models to polygons, whereas ray tracing applies to arbitrary
More informationLecture 17: Shading in OpenGL. CITS3003 Graphics & Animation
Lecture 17: Shading in OpenGL CITS3003 Graphics & Animation E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives Introduce the OpenGL shading methods - per vertex shading
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 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 informationCS559 Computer Graphics Fall 2015
CS559 Computer Graphics Fall 2015 Practice Midterm Exam Time: 2 hrs 1. [XX Y Y % = ZZ%] MULTIPLE CHOICE SECTION. Circle or underline the correct answer (or answers). You do not need to provide a justification
More informationProgramming shaders & GPUs Christian Miller CS Fall 2011
Programming shaders & GPUs Christian Miller CS 354 - Fall 2011 Fixed-function vs. programmable Up until 2001, graphics cards implemented the whole pipeline for you Fixed functionality but configurable
More informationThe Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!
! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Updates! for 24h lab access:
More informationCSE 167: Lecture #8: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012
CSE 167: Introduction to Computer Graphics Lecture #8: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2012 Announcements Homework project #4 due Friday, November 2 nd Introduction:
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 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 information12.2 Programmable Graphics Hardware
Fall 2018 CSCI 420: Computer Graphics 12.2 Programmable Graphics Hardware Kyle Morgenroth http://cs420.hao-li.com 1 Introduction Recent major advance in real time graphics is the programmable pipeline:
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 informationObjectives Shading in OpenGL. Front and Back Faces. OpenGL shading. Introduce the OpenGL shading methods. Discuss polygonal shading
Objectives Shading in OpenGL Introduce the OpenGL shading methods - per vertex shading vs per fragment shading - Where to carry out Discuss polygonal shading - Flat - Smooth - Gouraud CITS3003 Graphics
More informationThe Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!
! The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)! Gordon Wetzstein! Stanford University! EE 267 Virtual Reality! Lecture 4! stanford.edu/class/ee267/! Lecture Overview! Review
More informationLighting and Shading II. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Lighting and Shading II 1 Objectives Continue discussion of shading Introduce modified Phong model Consider computation of required vectors 2 Ambient Light Ambient light is the result of multiple interactions
More informationEDAF80 Introduction to Computer Graphics. Seminar 3. Shaders. Michael Doggett. Slides by Carl Johan Gribel,
EDAF80 Introduction to Computer Graphics Seminar 3 Shaders Michael Doggett 2017 Slides by Carl Johan Gribel, 2010-13 Today OpenGL Shader Language (GLSL) Shading theory Assignment 3: (you guessed it) writing
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 informationCS 130 Final. Fall 2015
CS 130 Final Fall 2015 Name Student ID Signature You may not ask any questions during the test. If you believe that there is something wrong with a question, write down what you think the question is trying
More informationProgrammable Graphics Hardware
CSCI 480 Computer Graphics Lecture 14 Programmable Graphics Hardware [Ch. 9] March 2, 2011 Jernej Barbic University of Southern California OpenGL Extensions Shading Languages Vertex Program Fragment Program
More informationCS 432 Interactive Computer Graphics
CS 432 Interactive Computer Graphics Lecture 6 Part 2 Lighting and Shading in OpenGL Matt Burlick - Drexel University - CS 430 1 OpenGL Shading Need Vertex Normals Material properties Lights Position of
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 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 informationPipeline Operations. CS 4620 Lecture 14
Pipeline Operations CS 4620 Lecture 14 2014 Steve Marschner 1 Pipeline you are here APPLICATION COMMAND STREAM 3D transformations; shading VERTEX PROCESSING TRANSFORMED GEOMETRY conversion of primitives
More informationGame Graphics & Real-time Rendering
Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) angus@ucsc.edu Lucas Ferreira (TA) lferreira@ucsc.edu creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/creativecodinglab
More informationComputer Graphics Coursework 1
Computer Graphics Coursework 1 Deadline Deadline: 4pm, 24/10/2016 4pm 23/10/2015 Outline The aim of the coursework is to modify the vertex and fragment shaders in the provided OpenGL framework to implement
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 informationSHADER PROGRAMMING. Based on Jian Huang s lecture on Shader Programming
SHADER PROGRAMMING Based on Jian Huang s lecture on Shader Programming What OpenGL 15 years ago could do http://www.neilturner.me.uk/shots/opengl-big.jpg What OpenGL can do now What s Changed? 15 years
More information[175 points] The purpose of this assignment is to give you practice with shaders in OpenGL.
CPSC 441 Computer Graphics Assignment 5 due 11/20/18 (11:59 p.m.) [175 points] The purpose of this assignment is to give you practice with shaders in OpenGL. Part 1: First, download and get the code itself
More informationProgrammable GPUs. Real Time Graphics 11/13/2013. Nalu 2004 (NVIDIA Corporation) GeForce 6. Virtua Fighter 1995 (SEGA Corporation) NV1
Programmable GPUs Real Time Graphics Virtua Fighter 1995 (SEGA Corporation) NV1 Dead or Alive 3 2001 (Tecmo Corporation) Xbox (NV2A) Nalu 2004 (NVIDIA Corporation) GeForce 6 Human Head 2006 (NVIDIA Corporation)
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 informationLecture 09: Shaders (Part 1)
Lecture 09: Shaders (Part 1) CSE 40166 Computer Graphics Peter Bui University of Notre Dame, IN, USA November 9, 2010 OpenGL Rendering Pipeline OpenGL Rendering Pipeline (Pseudo-Code) 1 f o r gl_vertex
More informationPROFESSIONAL. WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB. Andreas Anyuru WILEY. John Wiley & Sons, Ltd.
PROFESSIONAL WebGL Programming DEVELOPING 3D GRAPHICS FOR THE WEB Andreas Anyuru WILEY John Wiley & Sons, Ltd. INTRODUCTION xxl CHAPTER 1: INTRODUCING WEBGL 1 The Basics of WebGL 1 So Why Is WebGL So Great?
More informationGLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people
GLSL Introduction Fu-Chung Huang Thanks for materials from many other people Shader Languages Currently 3 major shader languages Cg (Nvidia) HLSL (Microsoft) Derived from Cg GLSL (OpenGL) Main influences
More informationHomework 3: Programmable Shaders
Homework 3: Programmable Shaders Introduction to Computer Graphics and Imaging (Summer 2012), Stanford University Due Monday, July 23, 11:59pm Warning: The coding portion of this homework involves features
More informationProgrammable shader. Hanyang University
Programmable shader Hanyang University Objective API references (will be skipped) Examples Simple shader Phong shading shader INTRODUCTION GLSL(OPENGL SHADING LANGUAGE) Scalar Data types Structure Structures
More informationGLSL 1: Basics. J.Tumblin-Modified SLIDES from:
GLSL 1: Basics J.Tumblin-Modified SLIDES from: Ed Angel Professor of Computer Science, Electrical and Computer Engineering, and Media Arts Director, Arts Technology Center University of New Mexico and
More informationThe Rasterization Pipeline
Lecture 5: The Rasterization Pipeline Computer Graphics and Imaging UC Berkeley CS184/284A, Spring 2016 What We ve Covered So Far z x y z x y (0, 0) (w, h) Position objects and the camera in the world
More informationCHAPTER 1 Graphics Systems and Models 3
?????? 1 CHAPTER 1 Graphics Systems and Models 3 1.1 Applications of Computer Graphics 4 1.1.1 Display of Information............. 4 1.1.2 Design.................... 5 1.1.3 Simulation and Animation...........
More informationComputer Graphics (CS 543) Lecture 8a: Per-Vertex lighting, Shading and Per-Fragment lighting
Computer Graphics (CS 543) Lecture 8a: Per-Vertex lighting, Shading and Per-Fragment lighting Prof Emmanuel Agu Computer Science Dept. Worcester Polytechnic Institute (WPI) Computation of Vectors To calculate
More informationCS452/552; EE465/505. Lighting & Shading
CS452/552; EE465/505 Lighting & Shading 2-17 15 Outline! More on Lighting and Shading Read: Angel Chapter 6 Lab2: due tonight use ASDW to move a 2D shape around; 1 to center Local Illumination! Approximate
More informationI Can t Believe It s Not
I Can t Believe It s Not Flash! @thomasfuchs Animating CSS properties Timer JavaScript sets CSS Reflow Rendering Paint Animating CSS properties Timer JavaScript sets CSS Reflow
More informationCS 418: Interactive Computer Graphics. Basic Shading in WebGL. Eric Shaffer
CS 48: Interactive Computer Graphics Basic Shading in WebGL Eric Shaffer Some slides adapted from Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 205 Phong Reflectance Model Blinn-Phong
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 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 informationSupplement to Lecture 22
Supplement to Lecture 22 Programmable GPUs Programmable Pipelines Introduce programmable pipelines - Vertex shaders - Fragment shaders Introduce shading languages - Needed to describe shaders - RenderMan
More informationBlis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017
Blis: Better Language for Image Stuff Project Proposal Programming Languages and Translators, Spring 2017 Abbott, Connor (cwa2112) Pan, Wendy (wp2213) Qinami, Klint (kq2129) Vaccaro, Jason (jhv2111) [System
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 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 informationUnderstanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics. Sean Ellis Consultant Graphics Engineer ARM, Maidenhead
Understanding M3G 2.0 and its Effect on Producing Exceptional 3D Java-Based Graphics Sean Ellis Consultant Graphics Engineer ARM, Maidenhead Introduction M3G 1.x Recap ARM M3G Integration M3G 2.0 Update
More informationMining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014
Mining the Rendering Power in Web Browsers Jianxia Xue Jan. 28, 2014 Outline Web application as software deployment platform WebGL: Graphics API inside browsers Explore browser rendering capability through
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 informationInteractive Computer Graphics A TOP-DOWN APPROACH WITH SHADER-BASED OPENGL
International Edition Interactive Computer Graphics A TOP-DOWN APPROACH WITH SHADER-BASED OPENGL Sixth Edition Edward Angel Dave Shreiner Interactive Computer Graphics: A Top-Down Approach with Shader-Based
More informationCSE 167: Introduction to Computer Graphics Lecture #13: GLSL. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015
CSE 167: Introduction to Computer Graphics Lecture #13: GLSL Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2015 Announcements Project 6 due Friday Next Thursday: Midterm #2
More informationGLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people
GLSL Introduction Fu-Chung Huang Thanks for materials from many other people Programmable Shaders //per vertex inputs from main attribute aposition; attribute anormal; //outputs to frag. program varying
More informationCS230 : Computer Graphics Lecture 4. Tamar Shinar Computer Science & Engineering UC Riverside
CS230 : Computer Graphics Lecture 4 Tamar Shinar Computer Science & Engineering UC Riverside Shadows Shadows for each pixel do compute viewing ray if ( ray hits an object with t in [0, inf] ) then compute
More informationIllumination & Shading I
CS 543: Computer Graphics Illumination & Shading I Robert W. Lindeman Associate Professor Interactive Media & Game Development Department of Computer Science Worcester Polytechnic Institute gogo@wpi.edu
More informationCS GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1. Markus Hadwiger, KAUST
CS 380 - GPU and GPGPU Programming Lecture 7: Shading and Compute APIs 1 Markus Hadwiger, KAUST Reading Assignment #4 (until Feb. 23) Read (required): Programming Massively Parallel Processors book, Chapter
More informationIntroduction to Computer Graphics with WebGL
1 Introduction to Computer Graphics with WebGL Ed Angel Lighting in WebGL WebGL lighting Application must specify - Normals - Material properties - Lights State-based shading functions have been deprecated
More informationCPSC 436D Video Game Programming
CPSC 436D Video Game Programming OpenGL/Shaders Opengl RENDERING PIPELINE Copyright: Alla Sheffer 1 Opengl RENDERING PIPELINE C/C++ OpenGL GLSL (automatic) (automatic) GLSL (automatic) opengl Low-level
More informationTSBK 07! Computer Graphics! Ingemar Ragnemalm, ISY
1(84) Information Coding / Computer Graphics, ISY, LiTH TSBK 07 Computer Graphics Ingemar Ragnemalm, ISY 1(84) Lecture 5 3D graphics part 3 Illumination Illumination applied: Shading Surface detail: Mappings
More informationDeferred Rendering Due: Wednesday November 15 at 10pm
CMSC 23700 Autumn 2017 Introduction to Computer Graphics Project 4 November 2, 2017 Deferred Rendering Due: Wednesday November 15 at 10pm 1 Summary This assignment uses the same application architecture
More informationCS 130 Exam I. Fall 2015
S 3 Exam I Fall 25 Name Student ID Signature You may not ask any questions during the test. If you believe that there is something wrong with a question, write down what you think the question is trying
More informationContent. Building Geometry Appearance Lights Model Loaders
Content Building Geometry Appearance Lights Model Loaders Building Geometry A Geometry represents a 3D object: Mesh: The form or structure of a shape (What to draw) Material: The color, transparency, and
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 informationInformation Coding / Computer Graphics, ISY, LiTH GLSL. OpenGL Shading Language. Language with syntax similar to C
GLSL OpenGL Shading Language Language with syntax similar to C Syntax somewhere between C och C++ No classes. Straight ans simple code. Remarkably understandable and obvious! Avoids most of the bad things
More informationModule Contact: Dr Stephen Laycock, CMP Copyright of the University of East Anglia Version 1
UNIVERSITY OF EAST ANGLIA School of Computing Sciences Main Series PG Examination 2013-14 COMPUTER GAMES DEVELOPMENT CMPSME27 Time allowed: 2 hours Answer any THREE questions. (40 marks each) Notes are
More informationLessons Learned from HW4. Shading. Objectives. Why we need shading. Shading. Scattering
Lessons Learned from HW Shading CS Interactive Computer Graphics Prof. David E. Breen Department of Computer Science Only have an idle() function if something is animated Set idle function to NULL, when
More informationObjectives. Introduce the OpenGL shading Methods 1) Light and material functions on MV.js 2) per vertex vs per fragment shading 3) Where to carry out
Objectives Introduce the OpenGL shading Methods 1) Light and material functions on MV.js 2) per vertex vs per fragment shading 3) Where to carry out 1 Steps in OpenGL shading Enable shading and select
More informationCSE 167: Introduction to Computer Graphics Lecture #7: Lights. Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2015
CSE 167: Introduction to Computer Graphics Lecture #7: Lights Jürgen P. Schulze, Ph.D. University of California, San Diego Spring Quarter 2015 Announcements Thursday in-class: Midterm Can include material
More informationCiril Bohak. - INTRODUCTION TO WEBGL
2016 Ciril Bohak ciril.bohak@fri.uni-lj.si - INTRODUCTION TO WEBGL What is WebGL? WebGL (Web Graphics Library) is an implementation of OpenGL interface for cmmunication with graphical hardware, intended
More informationLecture 11 Shaders and WebGL. October 8, 2015
Lecture 11 Shaders and WebGL October 8, 2015 Review Graphics Pipeline (all the machinery) Program Vertex and Fragment Shaders WebGL to set things up Key Shader Concepts Fragment Processing and Vertex
More informationOrthogonal Projection Matrices. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015
Orthogonal Projection Matrices 1 Objectives Derive the projection matrices used for standard orthogonal projections Introduce oblique projections Introduce projection normalization 2 Normalization Rather
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 information03 Vector Graphics. Multimedia Systems. 2D and 3D Graphics, Transformations
Multimedia Systems 03 Vector Graphics 2D and 3D Graphics, Transformations Imran Ihsan Assistant Professor, Department of Computer Science Air University, Islamabad, Pakistan www.imranihsan.com Lectures
More informationCSE 167: Introduction to Computer Graphics Lecture #6: Lights. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2014
CSE 167: Introduction to Computer Graphics Lecture #6: Lights Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2014 Announcements Project 2 due Friday, Oct. 24 th Midterm Exam
More informationhttps://ilearn.marist.edu/xsl-portal/tool/d4e4fd3a-a3...
Assessment Preview - This is an example student view of this assessment done Exam 2 Part 1 of 5 - Modern Graphics Pipeline Question 1 of 27 Match each stage in the graphics pipeline with a description
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 informationX. GPU Programming. Jacobs University Visualization and Computer Graphics Lab : Advanced Graphics - Chapter X 1
X. GPU Programming 320491: Advanced Graphics - Chapter X 1 X.1 GPU Architecture 320491: Advanced Graphics - Chapter X 2 GPU Graphics Processing Unit Parallelized SIMD Architecture 112 processing cores
More informationIllumination and Shading
CT4510: Computer Graphics Illumination and Shading BOCHANG MOON Photorealism The ultimate goal of rendering is to produce photo realistic images. i.e., rendered images should be indistinguishable from
More informationGLSL v1.20. Scott MacHaffie Schrödinger, Inc.
1 GLSL v1.20 Scott MacHaffie Schrödinger, Inc. http://www.schrodinger.com Table of Contents Introduction...2 Example 01: Trivial shader...2 Syntax...3 Types of variables...3 Example 02: Materials vertex
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 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 informationShader Programming. Daniel Wesslén, Stefan Seipel, Examples
Shader Programming Daniel Wesslén, dwn@hig.se Stefan Seipel, ssl@hig.se Examples 1 Per-pixel lighting Texture convolution filtering 2 Post-processing, animated procedural textures Vertex displacement mapping
More informationModels 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 informationCGT520 Lighting. Lighting. T-vertices. Normal vector. Color of an object can be specified 1) Explicitly as a color buffer
CGT520 Lighting Lighting Color of an object can be specified 1) Explicitly as a color buffer Bedrich Benes, Ph.D. Purdue University Department of Computer Graphics 2) Implicitly from the illumination model.
More informationTopics and things to know about them:
Practice Final CMSC 427 Distributed Tuesday, December 11, 2007 Review Session, Monday, December 17, 5:00pm, 4424 AV Williams Final: 10:30 AM Wednesday, December 19, 2007 General Guidelines: The final will
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 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 informationSome advantages come from the limited environment! No classes. Stranight ans simple code. Remarkably. Avoids most of the bad things with C/C++.
GLSL OpenGL Shading Language Language with syntax similar to C Syntax somewhere between C och C++ No classes. Stranight ans simple code. Remarkably understandable and obvious! Avoids most of the bad things
More informationComputer graphics 2: Graduate seminar in computational aesthetics
Computer graphics 2: Graduate seminar in computational aesthetics Angus Forbes evl.uic.edu/creativecoding/cs526 Homework 2 RJ ongoing... - Follow the suggestions in the Research Journal handout and find
More informationShaders (some slides taken from David M. course)
Shaders (some slides taken from David M. course) Doron Nussbaum Doron Nussbaum COMP 3501 - Shaders 1 Traditional Rendering Pipeline Traditional pipeline (older graphics cards) restricts developer to texture
More informationCMSC427 Final Practice v2 Fall 2017
CMSC427 Final Practice v2 Fall 2017 This is to represent the flow of the final and give you an idea of relative weighting. No promises that knowing this will predict how you ll do on the final. Some questions
More informationCOMP 4801 Final Year Project. Ray Tracing for Computer Graphics. Final Project Report FYP Runjing Liu. Advised by. Dr. L.Y.
COMP 4801 Final Year Project Ray Tracing for Computer Graphics Final Project Report FYP 15014 by Runjing Liu Advised by Dr. L.Y. Wei 1 Abstract The goal of this project was to use ray tracing in a rendering
More informationPhong Lighting & Materials. Some slides modified from: David Kabala Others from: Andries Van Damm, Brown Univ.
Phong Lighting & Materials Some slides modified from: David Kabala Others from: Andries Van Damm, Brown Univ. Lighting and Shading Lighting, or illumination, is the process of computing the intensity and
More informationGLOBAL EDITION. Interactive Computer Graphics. A Top-Down Approach with WebGL SEVENTH EDITION. Edward Angel Dave Shreiner
GLOBAL EDITION Interactive Computer Graphics A Top-Down Approach with WebGL SEVENTH EDITION Edward Angel Dave Shreiner This page is intentionally left blank. Interactive Computer Graphics with WebGL, Global
More informationRecall: Indexing into Cube Map
Recall: Indexing into Cube Map Compute R = 2(N V)N-V Object at origin Use largest magnitude component of R to determine face of cube Other 2 components give texture coordinates V R Cube Map Layout Example
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 information