OpenGL shaders and programming models that provide object persistence
|
|
- Hugh Bradley
- 1 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
C 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
OPENGL 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
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
Lets 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
Shaders. 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)?
The 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:
WebGL 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
CSE 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:
Objectives 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
WebGL 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
Rasterization-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
Copyright 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
Lecture 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
GLSL 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
Programmable 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
GLSL 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
SHADER 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
CS452/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
Introduction 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
The 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
Understanding 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
CS4621/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
Mining 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
Supplement 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
The Rasterization Pipeline
Lecture 5: The Rasterization Pipeline Computer Graphics and Imaging UC Berkeley What We ve Covered So Far z x y z x y (0, 0) (w, h) Position objects and the camera in the world Compute position of objects
CSE 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
GLSL 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
Illumination & 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
CS 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
Lessons 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
Deferred 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
Converts 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
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
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
Lecture 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
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
Orthogonal 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
https://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
CGT520 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.
WebGL 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
Shaders (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
CSE 167: Lecture #8: Lighting. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011
CSE 167: Introduction to Computer Graphics Lecture #8: Lighting Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011 Announcements Homework project #4 due Friday, October 28 Introduction:
GLSL 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
LIGHTING AND SHADING
DH2323 DGI15 INTRODUCTION TO COMPUTER GRAPHICS AND INTERACTION LIGHTING AND SHADING Christopher Peters HPCViz, KTH Royal Institute of Technology, Sweden chpeters@kth.se http://kth.academia.edu/christopheredwardpeters
Recall: 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
ECS 175 COMPUTER GRAPHICS. Ken Joy.! Winter 2014
ECS 175 COMPUTER GRAPHICS Ken Joy Winter 2014 Shading To be able to model shading, we simplify Uniform Media no scattering of light Opaque Objects No Interreflection Point Light Sources RGB Color (eliminating
WebGL: 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
6.837 Introduction to Computer Graphics Assignment 5: OpenGL and Solid Textures Due Wednesday October 22, 2003 at 11:59pm
6.837 Introduction to Computer Graphics Assignment 5: OpenGL and Solid Textures Due Wednesday October 22, 2003 at 11:59pm In this assignment, you will add an interactive preview of the scene and solid
6.837 Introduction to Computer Graphics Assignment 5: OpenGL and Solid Textures Due Wednesday October 22, 2003 at 11:59pm
6.837 Introduction to Computer Graphics Assignment 5: OpenGL and Solid Textures Due Wednesday October 22, 2003 at 11:59pm In this assignment, you will add an interactive preview of the scene and solid
3D Programming. 3D Programming Concepts. Outline. 3D Concepts. 3D Concepts -- Coordinate Systems. 3D Concepts Displaying 3D Models
3D Programming Concepts Outline 3D Concepts Displaying 3D Models 3D Programming CS 4390 3D Computer 1 2 3D Concepts 3D Model is a 3D simulation of an object. Coordinate Systems 3D Models 3D Shapes 3D Concepts
Water Simulation on WebGL and Three.js
The University of Southern Mississippi The Aquila Digital Community Honors Theses Honors College 5-2013 Water Simulation on WebGL and Three.js Kerim J. Pereira Follow this and additional works at: http://aquila.usm.edu/honors_theses
Computergrafik. Matthias Zwicker Universität Bern Herbst 2016
Computergrafik Matthias Zwicker Universität Bern Herbst 2016 Today More shading Environment maps Reflection mapping Irradiance environment maps Ambient occlusion Reflection and refraction Toon shading
Advanced Lighting Techniques Due: Monday November 2 at 10pm
CMSC 23700 Autumn 2015 Introduction to Computer Graphics Project 3 October 20, 2015 Advanced Lighting Techniques Due: Monday November 2 at 10pm 1 Introduction This assignment is the third and final part
Computer Graphics 1. Chapter 7 (June 17th, 2010, 2-4pm): Shading and rendering. LMU München Medieninformatik Andreas Butz Computergraphik 1 SS2010
Computer Graphics 1 Chapter 7 (June 17th, 2010, 2-4pm): Shading and rendering 1 The 3D rendering pipeline (our version for this class) 3D models in model coordinates 3D models in world coordinates 2D Polygons
COMP environment mapping Mar. 12, r = 2n(n v) v
Rendering mirror surfaces The next texture mapping method assumes we have a mirror surface, or at least a reflectance function that contains a mirror component. Examples might be a car window or hood,
CS452/552; EE465/505. Image Formation
CS452/552; EE465/505 Image Formation 1-15-15 Outline! Image Formation! Introduction to WebGL, continued Draw a colored triangle using WebGL Read: Angel, Chapters 2 & 3 Homework #1 will be available on
Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014
Shaders CSCI 4239/5239 Advanced Computer Graphics Spring 2014 What is a Shader? Wikipedia: A shader is a computer program used in 3D computer graphics to determine the final surface properties of an object
CS452/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:
Introduction 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
GPU Programming EE Final Examination
Name Solution GPU Programming EE 4702-1 Final Examination Friday, 11 December 2015 15:00 17:00 CST Alias Methane? Problem 1 Problem 2 Problem 3 Problem 4 Problem 5 Problem 6 Exam Total (20 pts) (15 pts)
SEOUL NATIONAL UNIVERSITY
Fashion Technology 5. 3D Garment CAD-1 Sungmin Kim SEOUL NATIONAL UNIVERSITY Overview Design Process Concept Design Scalable vector graphics Feature-based design Pattern Design 2D Parametric design 3D
CSE 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
Introduction to the OpenGL Shading Language (GLSL)
1 Introduction to the OpenGL Shading Language (GLSL) This work is licensed under a Creative Commons Attribution-NonCommercial- NoDerivatives 4.0 International License Mike Bailey mjb@cs.oregonstate.edu
Visual HTML5. Human Information Interaction for Knowledge Extraction, Interaction, Utilization, Decision making HI-I-KEIUD
Visual HTML5 1 Overview HTML5 Building apps with HTML5 Visual HTML5 Canvas SVG Scalable Vector Graphics WebGL 2D + 3D libraries 2 HTML5 HTML5 to Mobile + Cloud = Java to desktop computing: cross-platform
Computergraphics Exercise 15/ Shading & Texturing
Computergraphics Exercise 15/16 3. Shading & Texturing Jakob Wagner for internal use only Shaders Vertex Specification define vertex format & data in model space Vertex Processing transform to clip space
Programming 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
CMSC427 Advanced shading getting global illumination by local methods. Credit: slides Prof. Zwicker
CMSC427 Advanced shading getting global illumination by local methods Credit: slides Prof. Zwicker Topics Shadows Environment maps Reflection mapping Irradiance environment maps Ambient occlusion Reflection
The 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
Illumination and Shading
Illumination and Shading Light sources emit intensity: assigns intensity to each wavelength of light Humans perceive as a colour - navy blue, light green, etc. Exeriments show that there are distinct I
Programming 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
Programming 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 0 Objectives Shader Basics Simple Shaders Vertex shader Fragment shaders 1 Vertex
CS770/870 Spring 2017 Open GL Shader Language GLSL
Preview CS770/870 Spring 2017 Open GL Shader Language GLSL Review traditional graphics pipeline CPU/GPU mixed pipeline issues Shaders GLSL graphics pipeline Based on material from Angel and Shreiner, Interactive
CMPS160 Shader-based OpenGL Programming. All slides originally from Prabath Gunawardane, et al. unless noted otherwise
CMPS160 Shader-based OpenGL Programming All slides originally from Prabath Gunawardane, et al. unless noted otherwise Shader gallery I Above: Demo of Microsoft s XNA game platform Right: Product demos
CEng 477 Introduction to Computer Graphics Fall
Illumination Models and Surface-Rendering Methods CEng 477 Introduction to Computer Graphics Fall 2007 2008 Illumination Models and Surface Rendering Methods In order to achieve realism in computer generated
Real-Time Graphics Architecture
Real-Time Graphics Architecture Kurt Akeley Pat Hanrahan http://www.graphics.stanford.edu/courses/cs448a-01-fall Geometry Outline Vertex and primitive operations System examples emphasis on clipping Primitive
Raytracing CS148 AS3. Due :59pm PDT
Raytracing CS148 AS3 Due 2010-07-25 11:59pm PDT We start our exploration of Rendering - the process of converting a high-level object-based description of scene into an image. We will do this by building
CS 4620 Midterm, March 21, 2017
CS 460 Midterm, March 1, 017 This 90-minute exam has 4 questions worth a total of 100 points. Use the back of the pages if you need more space. Academic Integrity is expected of all students of Cornell
CSE 167: Lecture #17: Procedural Modeling. Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011
CSE 167: Introduction to Computer Graphics Lecture #17: Procedural Modeling Jürgen P. Schulze, Ph.D. University of California, San Diego Fall Quarter 2011 Announcements Important dates: Final project outline
CS5620 Intro to Computer Graphics
So Far wireframe hidden surfaces Next step 1 2 Light! Need to understand: How lighting works Types of lights Types of surfaces How shading works Shading algorithms What s Missing? Lighting vs. Shading
Technical Game Development II. Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS 4731 Computer Graphics
Shader Programming Technical Game Development II Professor Charles Rich Computer Science Department rich@wpi.edu Reference: Rost, OpenGL Shading Language, 2nd Ed., AW, 2006 The Orange Book Also take CS
Three-Dimensional Graphics V. Guoying Zhao 1 / 55
Computer Graphics Three-Dimensional Graphics V Guoying Zhao 1 / 55 Shading Guoying Zhao 2 / 55 Objectives Learn to shade objects so their images appear three-dimensional Introduce the types of light-material
CS 380 Introduction to Computer Graphics. LAB (1) : OpenGL Tutorial Reference : Foundations of 3D Computer Graphics, Steven J.
CS 380 Introduction to Computer Graphics LAB (1) : OpenGL Tutorial 2018. 03. 05 Reference : Foundations of 3D Computer Graphics, Steven J. Gortler Goals Understand OpenGL pipeline Practice basic OpenGL
Graphics Hardware. Graphics Processing Unit (GPU) is a Subsidiary hardware. With massively multi-threaded many-core. Dedicated to 2D and 3D graphics
Why GPU? Chapter 1 Graphics Hardware Graphics Processing Unit (GPU) is a Subsidiary hardware With massively multi-threaded many-core Dedicated to 2D and 3D graphics Special purpose low functionality, high
Shader Series Primer: Fundamentals of the Programmable Pipeline in XNA Game Studio Express
Shader Series Primer: Fundamentals of the Programmable Pipeline in XNA Game Studio Express Level: Intermediate Area: Graphics Programming Summary This document is an introduction to the series of samples,
Graphics Hardware. Instructor Stephen J. Guy
Instructor Stephen J. Guy Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability! Programming Examples Overview What is a GPU Evolution of GPU GPU Design Modern Features Programmability!
Direct Rendering of Trimmed NURBS Surfaces
Direct Rendering of Trimmed NURBS Surfaces Hardware Graphics Pipeline 2/ 81 Hardware Graphics Pipeline GPU Video Memory CPU Vertex Processor Raster Unit Fragment Processor Render Target Screen Extended
Comp 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
Computer Graphics. Illumination and Shading
() Illumination and Shading Dr. Ayman Eldeib Lighting So given a 3-D triangle and a 3-D viewpoint, we can set the right pixels But what color should those pixels be? If we re attempting to create a realistic
Shaders. Introduction. OpenGL Grows via Extensions. OpenGL Extensions. OpenGL 2.0 Added Shaders. Shaders Enable Many New Effects
CSCI 420 Computer Graphics Lecture 4 Shaders Jernej Barbic University of Southern California Shading Languages GLSL Vertex Array Objects Vertex Shader Fragment Shader [Angel Ch. 1, 2, A] Introduction The
CS452/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
The Transition from RenderMan to the OpenGL Shading Language (GLSL)
1 The Transition from RenderMan to the OpenGL Shading Language (GLSL) Mike Bailey mjb@cs.oregonstate.edu This work is licensed under a Creative Commons Attribution-NonCommercial- NoDerivatives 4.0 International
CMSC427 Fall 2017 OpenGL Notes A: Starting with JOGL and OpenGL Objectives of notes Readings Computer Graphics Programming in OpenGL with Java
CMSC427 Fall 2017 OpenGL Notes A: Starting with JOGL and OpenGL Objectives of notes Show how to program full OpenGL in JOGL Start on shader programing Readings Computer Graphics Programming in OpenGL with
Homework #2 and #3 Due Friday, October 12 th and Friday, October 19 th
Homework #2 and #3 Due Friday, October 12 th and Friday, October 19 th 1. a. Show that the following sequences commute: i. A rotation and a uniform scaling ii. Two rotations about the same axis iii. Two
graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1
graphics pipeline computer graphics graphics pipeline 2009 fabio pellacini 1 graphics pipeline sequence of operations to generate an image using object-order processing primitives processed one-at-a-time
CS4621/5621 Fall Basics of OpenGL/GLSL Textures Basics
CS4621/5621 Fall 2015 Basics of OpenGL/GLSL Textures Basics Professor: Kavita Bala Instructor: Nicolas Savva with slides from Balazs Kovacs, Eston Schweickart, Daniel Schroeder, Jiang Huang and Pramook
Illumination and Shading
Illumination and Shading Illumination (Lighting)! Model the interaction of light with surface points to determine their final color and brightness! The illumination can be computed either at vertices or
Lecture 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
Lecture 12: Mid-term test solution & project. CITS 3003 Graphics & Animation
Lecture 12: Mid-term test solution & project CITS 3003 Graphics & Animation Slides: E. Angel and D. Shreiner: Interactive Computer Graphics 6E Addison-Wesley 2012 Objectives Explain solution to the mid-term
Comp 410/510 Computer Graphics. Spring Shading
Comp 410/510 Computer Graphics Spring 2017 Shading Why we need shading Suppose we build a model of a sphere using many polygons and then color it using a fixed color. We get something like But we rather
How do we draw a picture?
1 How do we draw a picture? Define geometry. Now what? We can draw the edges of the faces. Wireframe. We can only draw the edges of faces that are visible. We can fill in the faces. Giving each object
CS450/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