1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL.

Slides:



Advertisements
Similar presentations
Chapter 2: Graphics Programming
Advertisements

CS 352: Computer Graphics Chapter 7: The Rendering Pipeline.
Graphics Pipeline.
CHAPTER 12 Height Maps, Hidden Surface Removal, Clipping and Level of Detail Algorithms © 2008 Cengage Learning EMEA.
 The success of GL lead to OpenGL (1992), a platform-independent API that was  Easy to use  Close enough to the hardware to get excellent performance.
Open Graphics Library (OpenGL)
Michael Robertson Yuta Takayama. WebGL is OpenGL on a web browser. OpenGL is a low-level 3D graphics API Basically, WebGL is a 3D graphics API that generates.
CSE Real Time Rendering. TBT (Not So) Real Time Rendering.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
Basic Graphics Concepts Day One CSCI 440. Terminology object - the thing being modeled image - view of object(s) on the screen frame buffer - memory that.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
CS 418: Interactive Computer Graphics Introduction to WebGL: HelloTriangle.html Eric Shaffer.
WebGL: in-browser 3D graphics Nick Whitelegg Maritme and Technology Faculty Southampton Solent University.
CS 450: COMPUTER GRAPHICS REVIEW: INTRODUCTION TO COMPUTER GRAPHICS – PART 2 SPRING 2015 DR. MICHAEL J. REALE.
CS 450: COMPUTER GRAPHICS PORTRAIT OF AN OPENGL PROGRAM SPRING 2015 DR. MICHAEL J. REALE.
Graphics Systems and OpenGL. Business of Generating Images Images are made up of pixels.
CSE Real Time Rendering Week 2. Graphics Processing 2.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Graphics CSCI 343, Fall 2015 Lecture 2 Introduction to HTML, JavaScript and WebGL.
INT 840E Computer graphics Introduction & Graphic’s Architecture.
GRAPHICS PIPELINE & SHADERS SET09115 Intro to Graphics Programming.
Computer Graphics Chapter 6 Andreas Savva. 2 Interactive Graphics Graphics provides one of the most natural means of communicating with a computer. Interactive.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 3D API OPENGL ES v1.0 Owned by Silicon Graphics (SGL) Control was then transferred to Khronos Group Introduction.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
User Input and Animation. For Further Reading Angel 7 th Ed: –Chapter 3: Input and Animation. –Chapter 4: Rotation and other transformation. Beginning.
1 Graphics CSCI 343, Fall 2015 Lecture 6 Viewing, Animation, User Interface.
1 Introduction to Computer Graphics with WebGL Ed Angel Professor Emeritus of Computer Science Founding Director, Arts, Research, Technology and Science.
1 Graphics CSCI 343, Fall 2015 Lecture 21 Lighting and Shading III.
1 Graphics CSCI 343, Fall 2015 Lecture 5 Color in WebGL.
1 Graphics CSCI 343, Fall 2015 Lecture 3 Introduction to WebGL.
Vertex Buffer Objects and Shader Attributes. For Further Reading Angel 7 th Ed: –Most parts of Chapter 2. Beginning WebGL: –Chapter 1: vertex Buffer Objects,
Programming with OpenGL Part 0: 3D API. For Further Reading Angel 7 th Ed: –2.2: JavaScript –2.3: OpenGL & WebGL –2.8: fragment & vertex shaders Beginning.
1 Graphics CSCI 343, Fall 2015 Lecture 25 Texture Mapping.
 Learn some important functions and process in OpenGL ES  Draw some triangles on the screen  Do some transformation on each triangle in each frame.
1 Perception and VR MONT 104S, Fall 2008 Lecture 20 Computer Graphics and VR.
What are shaders? In the field of computer graphics, a shader is a computer program that runs on the graphics processing unit(GPU) and is used to do shading.
1 Programming with OpenGL Part 2: Complete Programs.
1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 Programming with OpenGL Part 4: Color and Attributes Isaac Gang University.
1 Perception, Illusion and VR HNRS 299, Spring 2008 Lecture 15 Creating 3D Models.
Programming with OpenGL Part 3: Shaders Ed Angel Professor of Emeritus of Computer Science University of New Mexico 1 E. Angel and D. Shreiner: Interactive.
1 Introduction to Computer Graphics with WebGL ADOPTED from Ed Angel Chapter 2 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015.
Computer Graphics I, Fall Programming with OpenGL Part 2: Complete Programs.
Graphics Programming. Graphics Functions We can think of the graphics system as a black box whose inputs are function calls from an application program;
COMP 175 | COMPUTER GRAPHICS Remco Chang1/XX13 – GLSL Lecture 13: OpenGL Shading Language (GLSL) COMP 175: Computer Graphics April 12, 2016.
Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, Chapter 5 Examples 1.
Graphics CSCI 343, Fall 2017 Lecture 13 More on WebGL
Real-Time Rendering Buffers in OpenGL 3.3
The Basics: HTML5, Drawing, and Source Code Organization
Real-Time Rendering Geometry and Buffers
Objectives Simple Shaders Programming shaders with GLSL
Introduction to Computer Graphics with WebGL
Programming with OpenGL Part 2: Complete Programs
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Programming with OpenGL Part 4: Color and Attributes
Introduction to Computer Graphics with WebGL
Chapter VI OpenGL ES and Shader
Introduction to Computer Graphics with WebGL
The Graphics Pipeline Lecture 5 Mon, Sep 3, 2007.
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
Programming with OpenGL Part 3: Shaders
Programming with OpenGL Part 4: Color and Attributes
Mickaël Sereno Shaders Mickaël Sereno 25/04/2019 Mickaël Sereno -
CIS 441/541: Introduction to Computer Graphics Lecture 15: shaders
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics with WebGL
CS 480/680 Fall 2011 Dr. Frederick C Harris, Jr. Computer Graphics
Presentation transcript:

1 Graphics CSCI 343, Fall 2015 Lecture 4 More on WebGL

2 The init( ) function //Define the init( ) function and specify that it will be run //first when the document is loaded window.onload = function init() { //Grab the canvas we created in the HTML file var canvas = document.getElementById( "gl-canvas" ); gl = WebGLUtils.setupWebGL( canvas ); //Setup Canvas if ( !gl ) { //Error checking alert( "WebGL isn't available" ); } square( );//Set up the vertices for a square

3 More Administration // Configure WebGL // Define region in canvas for rendering image gl.viewport( 0, 0, canvas.width, canvas.height ); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); //Clear Color is White // Load shaders and initialize attribute buffers // InitShaders is provided by the text authors (in "Common") // It compiles and links the shaders and returns the result var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program );

4 Connecting to the Shaders // Load the data into the GPU //First create a WebGL buffer and // connect (bind) our data to it. var bufferId = gl.createBuffer(); // Create a new buffer //Make the new buffer the one we're using (bind it) gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); // Change points[ ] to an array of floats (flatten( )) // Use that array as our data buffer // Specify that we will display the points once (STATIC_DRAW) gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );

5 Connecting to the Shaders // Associate our shader variables with our data buffer // "vPosition" is an attribute for the vertex shader // (See the code for the vertex shader) var vPosition = gl.getAttribLocation( program, "vPosition" ); // Specify how the data in vPosition is arranged gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); render();//Render the image } //end init( )

6 Setting up the Attribute Pointer gl.vertexAttribPointer( vPosition, 2, gl.FLOAT, false, 0, 0 ); Variable name 2 floating point values per vertex Don't normalize data to range ( ) data are contiguous Starting address of data in buffer

The square( ) and render( ) functions function square( ) { // Vertices for corners of the square var vertices = [vec2( -1, -1 ), vec2( -1, 1 ), vec2( 1, 1 ), vec2( 1, -1)]; //Push vertices onto points array for (var i = 0; i < 4; i++) { points.push( vertices[i] ); } function render() { // Clear the drawing window (remember we set the // clear color to white) gl.clear( gl.COLOR_BUFFER_BIT ); // Draw the figures // gl.POINTS: Draw as individual points // Start at position 0, draw points.length points gl.drawArrays( gl.POINTS, 0, points.length ); }

8 Shaders Shaders are programs that are used by the GPUs when rendering data. For OpenGL applications, shaders are written in the OpenGL Shading Language (GLSL). GLSL is a language similar to C or C++ Vertex Shaders are executed once for each vertex that is passed to the rendering system when we call gl.drawArrays( ) Fragment Shaders are executed once for each fragment inside the clipping window. A fragment is a potential pixel that contains information about color, location and depth that can be passed to the frame buffer

9 The Vertex Shader The Vertex Shader defines how the GPU should handle each vertex in the graphics data. It transforms vertex location from world coordinates to clip (viewing window) coordinates. It uses a built-in state variable, gl_Position, which is used by the rasterizer* and is output by the shader. For now, we pass the vertex location to the vertex shader as a 4-element array (Positions in OpenGL have 4 dimensions—We'll see why later): attribute vec4 vPosition The key-word, attribute, indicates the variable vPosition is an input to the shader. *A rasterizer converts the images to pixels for display on a monitor.

10 Vertex Shader Example attribute vec4 vPosition; void main() { gl_Position = vPosition; } This shader does nothing but pass the vertex position through to the rasterizer.

11 The Fragment Shader Fragment Shaders define how the GPU should handle vertices and regions between vertices, e.g. lines between points or the inside of a polygon. The vertex shader sends information to the rasterizer, which outputs fragments (information about each potential pixel). The fragment shader must, at a minimum, assign a color to each fragment (unless the fragment is discarded, e.g. by hidden surface removal).

12 Fragment Shader Example precision mediump float; //medium precision floating point void main() { gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );//Red } Here, we assign the fragment the color red, as specified in RGBA color coordinates

13 Polygons  Polygons have an interior that can be filled.  Polygons are used in graphics systems to create surfaces.  Curved surfaces can be approximated by many small polygons.  Polygons can be rendered (drawn on the screen) rapidly.  The interior of the polygon must be well defined. It must be:  Simple, convex and flat.

14 Well behaved polygons Simple polygons: No pair of edges cross. Convex polygons: A line between any two points inside the polygon or on the boundary lies completely within the object Flat polygons: All vertices must lie in the same plane. This is trivial if the polygon is a triangle, but takes some work for polygons with more than 3 sides.

15 Curved Objects Ways to create curved objects: 1)Approximate the curve with lines or polygons. A circle is approximated as a regular polygon with n sides: Curved surfaces are approximated as a mesh of polygons: This is called tesselation. 2) Use Mathematical definitions: Define an object with a mathematical formula Build a graphics function to implement the object E.g. Quadric surfaces or polynomial curves 3) OpenGL has utility functions for approximate curved surfaces: Spheres, cones, cylinders.

16 Stroke Text Stroke text uses vertices to define line segments and curves to create each character. Example: PostScript Fonts Advantages: Can create as much detail as you want. Easy to rotate or change size Disadvantages: May be complex to define all characters. Can take up significant memory to store. Can take significant processing time to create.

17 Bit Mapped Text In Bit Mapped text each character is defined in a rectangular grid of bits known as a Bit Block. All characters are on the same size grid (e.g. 8x8 or 8x13) The block is transferred to the frame buffer with bit-block-transfer (bitblt) Advantage: It is very fast. Disadvantage: Cannot change size or rotate the text easily.

18 Attributes Attributes: Properties that determine how geometric primitives will be rendered. Examples: Line attributes: Solid, Dashed, Color, Thickness, etc. Polygon attributes: Filled or unfilled, Color or pattern fill Attributes are bound to the primitives.