WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "WebGL and GLSL Basics. CS559 Fall 2016 Lecture 14 October"

Transcription

1 WebGL and GLSL Basics CS559 Fall 2016 Lecture 14 October

2 Review

3 Hardware Rasterization For each point: Compute barycentric coords Decide if in or out.7,.7, , 0, -.1.9,.05,.05.33,.33,.33

4 1988: The Personal Iris

5 A Pipeline 1 transf light project raster shade write

6 Applica>on Program The pipeline (1988) Graphics Driver Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

7 Applica>on Program The pipeline (2006-current) Graphics Driver Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

8 Applica>on Program Graphics Driver The parts you have to program Now (in addition to above) Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

9 A Triangle s Journey

10 A Program to Draw a Triangle The complete WebGL thing we need Doing each necessary steps Just one triangle

11 Just a Triangle

12 HTML like you are used to

13 A Lot of Code

14 Look at the process inside-out We ll start with the end of the pipeline And work backwards

15 Applica>on Program Graphics Driver The parts you have to program Now (in addition to above) Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

16 I warned you: Applica>on Program This step will get to be prexy exci>ng Graphics Driver Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

17 We have to program this step! Applica>on Program Graphics Driver The program is called the: Fragment Shader Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

18 Pixel in à Pixel out, each independent Applica>on Program All we do is change its values Graphics Driver Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

19 Coming axrac>ons Applica>on Program This step will get to be prexy exci>ng Graphics Driver Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

20 The Pixel Shader Given information about the pixel Compute color Optionally, compute other things

21 How to program it Use a Shading Language We ll use a language called GLSL Compiler built into WebGL Language specifics as we go

22 A (boring) Fragment Shader void main(void) { gl_fragcolor = vec4(0.0, 1.0, 1.0, 1.0); }

23 A (boring) Fragment Shader void main(void) { Shaders define a main func>on that take no arguments return no values gl_fragcolor = vec4(0.0, 1.0, 1.0, 1.0); }

24 A (boring) Fragment Shader void main(void) { GLSL Shaders operate by side effects on special variables (they look like globals) gl_fragcolor = vec4(0.0, 1.0, 1.0, 1.0); }

25 A (boring) Fragment Shader void main(void) GLSL has types useful in graphics Like 4 vectors { gl_fragcolor = vec4(0.0, 1.0, 1.0, 1.0); } This is opaque yellow (even colors are 4- vectors)

26 Processing Applica>on Program Graphics Driver We have to program this part too Also in GLSL Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

27 Process each vertex independently Applica>on Program Graphics Driver Transform compute x and n Clip Light compute c Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

28 What data about vertices? Inputs: Position Other Stuff A/ributes from applica>on Outputs: Position Other Stuff varying proper>es to framgment Shaders (remember interpola>on)

29 The simplest vertex shader attribute vec3 pos; void main(void) { } gl_position = vec4(pos, 1.0); }

30 The simplest vertex shader attribute vec3 pos; void main(void) { Shaders define a main func>on that take no arguments return no values gl_position = vec4(pos, 1.0); } }

31 The simplest vertex shader attribute vec3 pos; Shaders output by side effects: seang special variables void main(void) { } gl_position = vec4(pos, 1.0); }

32 The simplest vertex shader attribute vec3 pos; Shaders get input by reading special variables void main(void) { } gl_position = vec4(pos, 1.0); }

33 Special Variables Built in (magic) gl_position output of vertex shader gl_fragcolor output of frag shader User Defined attributes inputs to vertex shader varying output from vertex to fragment uniform constant over triangle group

34 The simplest vertex shader attribute vec3 pos; We are defining our own special variable void main(void) { } gl_position = vec4(pos, 1.0); }

35 The simplest vertex shader attribute vec3 pos; void main(void) { Cool GLSL feature: type conversions gl_position = vec4(pos, 1.0); } }

36 No Transformation? I will assume the position is already in the right coordinate system. The rasterizer (and everything else) works in Normalized Device Coordinates (NDC) -1 to 1 in each dimension

37 Applica>on Program Graphics Driver Start here Setup modes (window, ) Setup transform, lights Draw a triangle Posi>on, color, normal Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

38 In JavaScript using WebGL

39 The beginning

40 The beginning This should look like HTML5 Canvas You can have multiple contexts (draw canvas over WebGL)

41 Now about those shaders Get them into strings Use a library to read them from resources

42 Run the compiler!

43 Error Checking Here I checked for errors (since I often have syntax errors) You should check for errors everywhere

44 Run the compiler again! Need to compile both shaders

45 Link the shaders together Shaders always work in pairs Need to connect them

46 Setup the special variables Important to communicate with shaders

47 The simplest vertex shader attribute vec3 pos; Javascript needs to connect to the pos variable void main(void) { } gl_position = vec4(pos, 1.0); }

48 Communicating an attribute We give it an array of attributes Assign it to a position We have to ask which position

49 OK, Now for our triangle How do we get this data to the hardware? Need to do a block transfer

50 Applica>on Program Graphics Driver Need to get the ver>ces to the hardware fast! (normally more than 3) Command Buffer (Triangle Queue) Queue Processing (TCL) Cache Assembly Triangle Processing Rasterize Pixel Queue Pixel Processing Pixel Tests shading Geometry Shading Pixel Shading Texture Memory Render to texture Frame Buffer

51 Key Idea: Buffer Create a buffer buffer = a block of memory on the GPU Copy the data into the buffer Must be a special JavaScript object: Float32Array (array of fixed types)

52 Now to draw First we have to clear the screen Notice that color is a 4-vector I don t really need the z-buffer

53 Now we actually draw the triangle Notice that we use the shaders and the buffer

54 All that for a triangle!

55 Is it really 100 lines of code? Not really lots of comments Build wrappers to be more concise you do the same thing over and over But there are lots of steps and you should understand them

56 Two triangles Can you see where these triangles will go? (remember they are in NDC)

57 Change the array sizes

58 Two triangles

59 How do we color them differently?

60 Color per vertex Add an attribute for each vertex so we can pass a color for each Have the vertex shader output the color varying variable for fragment shader Have the fragment shader input the color

61 A (boring) Fragment Shader void main(void) { gl_fragcolor = vec4(0.0, 1.0, 1.0, 1.0); }

62 A (less boring) Fragment Shader precision highp float; varying vec3 outcolor; Our own magic variable! void main(void) { gl_fragcolor = vec4(outcolor, 1.0); }

63 A (less boring) Fragment Shader precision highp float; varying vec3 outcolor; Required so the shaders can talk void main(void) { gl_fragcolor = vec4(outcolor, 1.0); }

64 Connecting Shaders varying variables connect shaders the output of a vertex shader becomes the input to a fragment shader The 3 vertices of a triangle are interpolated

65 The simplest vertex shader attribute vec3 pos; void main(void) { } gl_position = vec4(pos, 1.0); }

66 The (almost) simplest vertex shader attribute vec3 pos; varying vec3 outcolor; void main(void) { gl_position = vec4(pos, 1.0); } outcolor = vec3(1.0,0.0,1.0); }

67 Two purple triangles hxp://jsbin.com/wecaci/edit?js,output

68 Make color an input as well attribute vec3 pos; attribute vec3 incolor; varying vec3 outcolor; void main(void) { gl_position = vec4(pos, 1.0); } outcolor = incolor; }

69 Remember We can t pass values directly to a fragment we don t even know what they will be! We pass attributes of vertices which can then pass them to fragments

70 Now to connect to JavaScript

71 Colors per vertex

72 Put them in a buffer

73 When we draw, use 2 buffers

74 Two triangles hxp://jsbin.com/digupi/edit?js,output

75 Apply a transformation One transformation for the triangle group It is constant over the drawarrays call This is a uniform variable hxp://jsbin.com/>rapu/19/edit?js,output

76 Simplifying the Code There is stuff you do over and over and Write it once and use it often Or let someone else write it once This is where twgl comes in

77 Compile two vertex programs For each run the compiler check for errors Link them together Attach to the attributes Set up to specify the uniforms

78 Do it by hand Do it with twgl var shaders = twgl.createprograminfo(gl, ["vs", "fs"]); Yes, one line And it grabs the string from script tags so they are separate from your JS program. But the documentation is terrible.

79 How about those shaders They do very specific things you need to understand the pipeline They have 3 kinds of weird variables you need to understand the model They are written in a cool language you ll pick it up quickly The language has a bunch of useful stuff look at the quick reference card

80 Learning Shader Programming Connecting your program to shaders is hard So, don t bother (yet) Use a Shader IDE that lets you focus on shaders Gives you an object, a program,

81 Some things about GLSL Very strongly typed float x = 1; // error! integer and float Cool sub-vector access: vec3 v; v.xy (a 2-vector) vec4(v,1) (a 4-vector) vec4(v.xy, v.zx)

82 More cool stuff about GLSL Lots of handy math functions They know it s for graphics! Limited control structures parallel execution means all the same Conditional functions step, softstep,

WebGL and GLSL Basics. CS559 Fall 2015 Lecture 10 October 6, 2015

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

More information

Drawing Fast The Graphics Pipeline

Drawing Fast The Graphics Pipeline Drawing Fast The Graphics Pipeline CS559 Fall 2016 Lectures 10 & 11 October 10th & 12th, 2016 1. Put a 3D primitive in the World Modeling 2. Figure out what color it should be 3. Position relative to the

More information

OPENGL RENDERING PIPELINE

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

More information

Drawing Fast The Graphics Pipeline

Drawing Fast The Graphics Pipeline Drawing Fast The Graphics Pipeline CS559 Spring 2016 Lecture 10 February 25, 2016 1. Put a 3D primitive in the World Modeling Get triangles 2. Figure out what color it should be Do ligh/ng 3. Position

More information

Lecture 11 Shaders and WebGL. October 8, 2015

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

More information

Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016

Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016 Practical Texturing (WebGL) CS559 Fall 2016 Lecture 20 November 7th 2016 In brief Starting with a simple model In brief Caveat : Issues with sampling & aliasing associate texture coordinates with primitives

More information

Drawing Fast The Graphics Pipeline

Drawing Fast The Graphics Pipeline Drawing Fast The Graphics Pipeline CS559 Fall 2015 Lecture 9 October 1, 2015 What I was going to say last time How are the ideas we ve learned about implemented in hardware so they are fast. Important:

More information

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. 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 information

Shader Programs. Lecture 30 Subsections 2.8.2, Robb T. Koether. Hampden-Sydney College. Wed, Nov 16, 2011

Shader Programs. Lecture 30 Subsections 2.8.2, Robb T. Koether. Hampden-Sydney College. Wed, Nov 16, 2011 Shader Programs Lecture 30 Subsections 2.8.2, 2.8.3 Robb T. Koether Hampden-Sydney College Wed, Nov 16, 2011 Robb T. Koether (Hampden-Sydney College) Shader Programs Wed, Nov 16, 2011 1 / 43 Outline 1

More information

Graphics 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 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 information

WebGL A quick introduction. J. Madeira V. 0.2 September 2017

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

More information

Programming shaders & GPUs Christian Miller CS Fall 2011

Programming 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 information

The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

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:

More information

Rasterization and Graphics Hardware. Not just about fancy 3D! Rendering/Rasterization. The simplest case: Points. When do we care?

Rasterization and Graphics Hardware. Not just about fancy 3D! Rendering/Rasterization. The simplest case: Points. When do we care? Where does a picture come from? Rasterization and Graphics Hardware CS559 Course Notes Not for Projection November 2007, Mike Gleicher Result: image (raster) Input 2D/3D model of the world Rendering term

More information

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

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

More information

BCA611 Video Oyunları için 3B Grafik

BCA611 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 information

COMP371 COMPUTER GRAPHICS

COMP371 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 information

Converts geometric primitives into images Is split into several independent stages Those are usually executed concurrently

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

More information

3D Drawing Visibility & Rasterization. CS559 Spring 2016 Lecture 9 February 23, 2016

3D Drawing Visibility & Rasterization. CS559 Spring 2016 Lecture 9 February 23, 2016 3D Drawing Visibility & Rasterization CS559 Spring 2016 Lecture 9 February 23, 2016 1. Put a 3D primitive in the World Modeling 2. Figure out what color it should be Shading 3. Position relative to the

More information

The Graphics Pipeline and OpenGL III: OpenGL Shading Language (GLSL 1.10)!

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/! Lecture Overview! Review

More information

GLSL Introduction. Fu-Chung Huang. Thanks for materials from many other people

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

More information

CS 432 Interactive Computer Graphics

CS 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 information

Programmable GPUs. Real Time Graphics 11/13/2013. Nalu 2004 (NVIDIA Corporation) GeForce 6. Virtua Fighter 1995 (SEGA Corporation) NV1

Programmable 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 information

12.2 Programmable Graphics Hardware

12.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 information

SHADER PROGRAMMING. Based on Jian Huang s lecture on Shader Programming

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

More information

Introduction to Shaders.

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

More information

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 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 information

The Graphics Pipeline

The 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 information

Getting fancy with texture mapping (Part 2) CS559 Spring Apr 2017

Getting fancy with texture mapping (Part 2) CS559 Spring Apr 2017 Getting fancy with texture mapping (Part 2) CS559 Spring 2017 6 Apr 2017 Review Skyboxes as backdrops Credits : Flipmode 3D Review Reflection maps Credits : NVidia Review Decal textures Credits : andreucabre.com

More information

The Graphics Pipeline

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

More information

Lecture 2. Shaders, GLSL and GPGPU

Lecture 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 information

CS559 Computer Graphics Fall 2015

CS559 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 information

Programming 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 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

The Graphics Pipeline

The 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 information

Blis: 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 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 information

Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

More information

Programmable Graphics Hardware

Programmable 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 information

Ciril Bohak. - INTRODUCTION TO WEBGL

Ciril 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 information

Rendering approaches. 1.image-oriented. 2.object-oriented. foreach pixel... 3D rendering pipeline. foreach object...

Rendering approaches. 1.image-oriented. 2.object-oriented. foreach pixel... 3D rendering pipeline. foreach object... Rendering approaches 1.image-oriented foreach pixel... 2.object-oriented foreach object... geometry 3D rendering pipeline image 3D graphics pipeline Vertices Vertex processor Clipper and primitive assembler

More information

Lecture 5 Vertex and Fragment Shaders-1. CITS3003 Graphics & Animation

Lecture 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 information

CS770/870 Fall 2015 Advanced GLSL

CS770/870 Fall 2015 Advanced GLSL Expanded Graphics Pipeline CS770/870 Fall 2015 Advanced GLSL Geometry definition Shaders can actually be inserted in more places in pipeline Vertex and fragment shaders are most important Vertex shader

More information

Pipeline Operations. CS 4620 Lecture Steve Marschner. Cornell CS4620 Spring 2018 Lecture 11

Pipeline 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 information

Pipeline Operations. CS 4620 Lecture 14

Pipeline 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 information

Shaders. Slide credit to Prof. Zwicker

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)?

More information

Sign up for crits! Announcments

Sign up for crits! Announcments Sign up for crits! Announcments Reading for Next Week FvD 16.1-16.3 local lighting models GL 5 lighting GL 9 (skim) texture mapping Modern Game Techniques CS248 Lecture Nov 13 Andrew Adams Overview The

More information

WebGL (Web Graphics Library) is the new standard for 3D graphics on the Web, designed for rendering 2D graphics and interactive 3D graphics.

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 information

Lecture 13: OpenGL Shading Language (GLSL)

Lecture 13: OpenGL Shading Language (GLSL) Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 18, 2018 1/56 Motivation } Last week, we discussed the many of the new tricks in Graphics require low-level access to the Graphics

More information

The Rasterization Pipeline

The Rasterization Pipeline Lecture 5: The Rasterization Pipeline (and its implementation on GPUs) Computer Graphics CMU 15-462/15-662, Fall 2015 What you know how to do (at this point in the course) y y z x (w, h) z x Position objects

More information

CS4621/5621 Fall Computer Graphics Practicum Intro to OpenGL/GLSL

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

More information

OpenGL shaders and programming models that provide object persistence

OpenGL shaders and programming models that provide object persistence OpenGL shaders and programming models that provide object persistence COSC342 Lecture 22 19 May 2016 OpenGL shaders We discussed forms of local illumination in the ray tracing lectures. We also saw that

More information

WebGL: Hands On. DevCon5 NYC Kenneth Russell Software Engineer, Google, Inc. Chair, WebGL Working Group

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

More information

CS4620/5620: Lecture 14 Pipeline

CS4620/5620: Lecture 14 Pipeline CS4620/5620: Lecture 14 Pipeline 1 Rasterizing triangles Summary 1! evaluation of linear functions on pixel grid 2! functions defined by parameter values at vertices 3! using extra parameters to determine

More information

Mining the Rendering Power in Web Browsers. Jianxia Xue Jan. 28, 2014

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

More information

TSBK 07! Computer Graphics! Ingemar Ragnemalm, ISY

TSBK 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 information

OUTLINE. Learn the basic design of a graphics system Introduce pipeline architecture Examine software components for a graphics system

OUTLINE. 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 information

Drawing in 3D (viewing, projection, and the rest of the pipeline)

Drawing in 3D (viewing, projection, and the rest of the pipeline) Drawing in 3D (viewing, projection, and the rest of the pipeline) CS559 Spring 2017 Lecture 6 February 2, 2017 The first 4 Key Ideas 1. Work in convenient coordinate systems. Use transformations to get

More information

Shadows. 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 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 information

Mobile Application Programing: Android. OpenGL Operation

Mobile Application Programing: Android. OpenGL Operation Mobile Application Programing: Android OpenGL Operation Activities Apps are composed of activities Activities are self-contained tasks made up of one screen-full of information Activities start one another

More information

Drawing in 3D (viewing, projection, and the rest of the pipeline)

Drawing in 3D (viewing, projection, and the rest of the pipeline) Drawing in 3D (viewing, projection, and the rest of the pipeline) CS559 Spring 2016 Lecture 6 February 11, 2016 The first 4 Key Ideas 1. Work in convenient coordinate systems. Use transformations to get

More information

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 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

More information

CPSC 436D Video Game Programming

CPSC 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 information

Rendering. Converting a 3D scene to a 2D image. Camera. Light. Rendering. View Plane

Rendering. 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 information

HW-Tessellation Basics

HW-Tessellation Basics HW-Tessellation Basics Peter Houska Institute of Computer Graphics and Algorithms Vienna University of Technology Tessellation Video [UnHe] Institute of Computer Graphics and Algorithms 1 What is Tessellation?

More information

X. GPU Programming. Jacobs University Visualization and Computer Graphics Lab : Advanced Graphics - Chapter X 1

X. 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 information

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 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

More information

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 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 information

CS 4620 Midterm, October 23, 2018 SOLUTION

CS 4620 Midterm, October 23, 2018 SOLUTION 1. [20 points] Transformations CS 4620 Midterm, October 23, 2018 SOLUTION (a) Describe the action of each of the following matrices, as transformations in homogeneous coordinates, in terms of rotation,

More information

CS452/552; EE465/505. Image Formation

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

More information

Drawing in 3D (viewing, projection, and the rest of the pipeline)

Drawing in 3D (viewing, projection, and the rest of the pipeline) Drawing in 3D (viewing, projection, and the rest of the pipeline) CS559 Fall 2016 Lecture 6/7 September 26-28 2016 The first 4 Key Ideas 1. Work in convenient coordinate systems. Use transformations to

More information

Dave Shreiner, ARM March 2009

Dave Shreiner, ARM March 2009 4 th Annual Dave Shreiner, ARM March 2009 Copyright Khronos Group, 2009 - Page 1 Motivation - What s OpenGL ES, and what can it do for me? Overview - Lingo decoder - Overview of the OpenGL ES Pipeline

More information

Rendering Objects. Need to transform all geometry then

Rendering 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 information

Today. Rendering - III. Outline. Texturing: The 10,000m View. Texture Coordinates. Specifying Texture Coordinates in GL

Today. Rendering - III. Outline. Texturing: The 10,000m View. Texture Coordinates. Specifying Texture Coordinates in GL Today Rendering - III CS148, Summer 2010 Graphics Pipeline and Programmable Shaders Artist Workflow Siddhartha Chaudhuri 1 2 Outline Texturing: The 10,000m View Intro to textures The fixed-function graphics

More information

WebGL. Creating Interactive Content with WebGL. Media #WWDC14. Session 509 Dean Jackson and Brady Eidson WebKit Engineers

WebGL. 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 information

Rasterization-based pipeline

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

More information

Game Graphics & Real-time Rendering

Game 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 information

2D graphics with WebGL

2D 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 information

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction

OUTLINE. Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction TEXTURE MAPPING 1 OUTLINE Implementing Texturing What Can Go Wrong and How to Fix It Mipmapping Filtering Perspective Correction 2 BASIC STRAGEGY Three steps to applying a texture 1. specify the texture

More information

GLSL 1: Basics. J.Tumblin-Modified SLIDES from:

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

More information

Introduction to Shaders for Visualization. The Basic Computer Graphics Pipeline

Introduction to Shaders for Visualization. The Basic Computer Graphics Pipeline Introduction to Shaders for Visualization Mike Bailey The Basic Computer Graphics Pipeline Model Transform View Transform Per-vertex Lighting Projection Transform Homogeneous Division Viewport Transform

More information

Water Simulation on WebGL and Three.js

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

More information

CS770/870 Spring 2017 Open GL Shader Language GLSL

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

More information

CS770/870 Spring 2017 Open GL Shader Language GLSL

CS770/870 Spring 2017 Open GL Shader Language GLSL CS770/870 Spring 2017 Open GL Shader Language GLSL Based on material from Angel and Shreiner, Interactive Computer Graphics, 6 th Edition, Addison-Wesley, 2011 Bailey and Cunningham, Graphics Shaders 2

More information

Real - Time Rendering. Graphics pipeline. Michal Červeňanský Juraj Starinský

Real - Time Rendering. Graphics pipeline. Michal Červeňanský Juraj Starinský Real - Time Rendering Graphics pipeline Michal Červeňanský Juraj Starinský Overview History of Graphics HW Rendering pipeline Shaders Debugging 2 History of Graphics HW First generation Second generation

More information

last time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders

last time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders last time put back pipeline figure today will be very codey OpenGL API library of routines to control graphics calls to compile and load shaders calls to load vertex data to vertex buffers calls to load

More information

CS452/552; EE465/505. Image Processing Frame Buffer Objects

CS452/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 information

Introduction to OpenGL/GLSL and WebGL GLSL

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

More information

Introduction to the OpenGL Shading Language (GLSL)

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

More information

Could you make the XNA functions yourself?

Could you make the XNA functions yourself? 1 Could you make the XNA functions yourself? For the second and especially the third assignment, you need to globally understand what s going on inside the graphics hardware. You will write shaders, which

More information

Mobile Application Programming: Android. OpenGL Operation

Mobile Application Programming: Android. OpenGL Operation Mobile Application Programming: Android OpenGL Operation OpenGL ES C-Based Performance-Oriented Graphics Library Wrapper libraries provided for Java, C#, etc. Produces 2D images from 2D or 3D geometric

More information

We assume that you are familiar with the following:

We 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 information

Understanding Shaders and WebGL. Chris Dalton & Olli Etuaho

Understanding Shaders and WebGL. Chris Dalton & Olli Etuaho Understanding Shaders and WebGL Chris Dalton & Olli Etuaho Agenda Introduction: Accessible shader development with WebGL Understanding WebGL shader execution: from JS to GPU Common shader bugs Accessible

More information

Models and Architectures. Angel and Shreiner: Interactive Computer Graphics 7E Addison-Wesley 2015

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 information