Objectives Programming with WebGL •Development of the OpenGL API Part 1: Background •OpenGL Architecture - OpenGL as a state machine CS 432 Interactive Computer Graphics - WebGL as a data flow machine Prof. David E. Breen •Functions Department of Computer Science - Types - Formats •Simple program E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 1 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 2 1 2 Retained vs. Immediate Mode Early History oF APIs Graphics • Immediate •IFIPS (1973) formed two committees to - Geometry is drawn when CPU sends it to GPU come up with a standard graphics API - All data needs to be resent even if little changes - Graphical Kernel System (GKS) - Once drawn, geometry on GPU is discarded • 2D but contained good workstation model - Requires major bandwidth between CPU and GPU - Core - Minimizes memory requirements on GPU • Both 2D and 3D • Retained - GKS adopted as IS0 and later ANSI standard - Geometry is sent to GPU and stored (1980s) - It is displayed when directed by CPU •GKS not easily extended to 3D (GKS-3D) - CPU may send transformations to move geometry - Far behind hardware development - Minimizes data transfers, but GPU now needs enough memory to store geometry 3 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 4 3 4 PHIGS and X SGI and GL •Programmers Hierarchical Graphics •Silicon Graphics (SGI) revolutionized the System (PHIGS) graphics workstation by implementing the - Arose from CAD community graphics pipeline in hardware (1982) - Database model with retained graphics (structures) •To access the system, application •X Window System programmers used a library called GL - DEC/MIT effort •With GL, it was relatively simple to - Client-server architecture with graphics program three dimensional interactive •PEX combined the two applications - Not easy to use (all the defects of each) E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 5 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 6 5 6 1 OpenGL OpenGL Evolution The success of GL lead to OpenGL (1992), • Originally controlled by an Architectural Review a platform-independent API that was Board (ARB) - Easy to use - Members included SGI, Microsoft, Nvidia, HP, 3DLabs, IBM,……. - Close enough to the hardware to get excellent performance - Now Khronos Group - Focused on rendering - Was relatively stable (through version 2.5) • Backward compatible - Omitted windowing and input to avoid window • Evolution reflected new hardware capabilities system dependencies – 3D texture mapping and texture objects - An immediate mode system, that later added – Vertex and fragment programs retained mode functionality - Allows platform specific features through extensions E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 7 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 8 7 8 Modern OpenGL OpenGL 3.1 (2009) •Performance is achieved by using GPU •Totally shader-based rather than CPU - No default shaders •Control GPU through programs called - Each application must provide both a vertex shaders and a fragment shader •Application’s job is to send data to GPU •No immediate mode •GPU does all rendering •Few state variables •Most 2.5 functions deprecated - deprecate in CS - To mark (a component of a software standard) as obsolete to warn against its use in the future, so that it may be phased out. •Backward compatibility not required E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 9 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 10 9 10 What About Other Low-Level Other Versions Graphics Libraries? • OpenGL ES •Direct3D - Embedded systems - Part of DirectX, Windows-only - Version 1.0 simplified OpenGL 2.1 - Version 2.0 simplified OpenGL 3.1 •Mantle • Shader based - Developed by AMD - Version 3.0 simplified OpenGL 4.3 •Metal • WebGL 1.0 - Developed by Apple - Javascript implementation of ES 2.0 •Vulkan - Supported on newer browsers - “next-gen” OpenGL • OpenGL 4.1 è 4.5 - Added geometry & compute shaders and tessellator - Derived from Mantle E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 11 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 12 11 12 2 OpenGL Architecture A Simple Program (?) Generate a square on a solid background E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 13 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 15 13 15 It used to be easy What happened #include <GL/glut.h> void mydisplay(){ •Most OpenGL functions deprecated glClear(GL_COLOR_BUFFER_BIT); •Made heavy use of state variable default glBegin(GL_QUAD; glVertex2f(-0.5, -0.5); values that no longer exist glVertex2f(-0,5, 0,5); - Viewing glVertex2f(0.5, 0.5); glVertex2f(0.5, -0.5); - Colors glEnd() - Window parameters } int main(int argc, char** argv){ •Current version makes the defaults more glutCreateWindow("simple"); glutDisplayFunc(mydisplay); explicit glutMainLoop(); } •However, processing loop is the same E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 16 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 17 16 17 Execution in Browser Event Loop URL Browser Web Server •Remember that the sample program Web Page HTML specifies a render function which is a JS files JS Engine event listener or callback function - Every program should have a render callback - For a static application we need only execute Application CPU/GPUprogram the render function once - In a dynamic application, the render function can call itself recursively but each redrawing of Framebuffer Canvas the display must be triggered by an event Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 18 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 19 18 19 3 Lack of Object Orientation WebGL Function Format •All versions of OpenGL are not object function name oriented so that there are multiple functions dimension for a given logical function gl.uniform3f(x,y,z) •Example: sending values to shaders -glUniform3f belongs to WebGL canvas x,y,z are float variables -glUniform2i -glUniform3dv •Underlying storage mode is the same gl.uniform3fv(p) p is an array E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 21 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 22 21 22 WebGL constants WebGL and GLSL •Most constants are defined in the canvas •WebGL requires shaders and is based object less on a state machine model than a - In desktop OpenGL, they were in #include files data flow model such as gl.h •Most state variables, attributes and •Examples related pre-3.1 OpenGL functions have -desktop OpenGL been deprecated • glEnable(GL_DEPTH_TEST); •Action happens in shaders -WebGL • gl.enable(gl.DEPTH_TEST) •Job of application is to get data to GPU -gl.clear(gl.COLOR_BUFFER_BIT) Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 23 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 24 23 24 GLSL •OpenGL Shading Language Programming with OpenGL •C-like with Part 2: Complete Programs - Matrix and vector types (2, 3, 4 dimensional) - Overloaded operators - C++ like constructors •Similar to Nvidia’s Cg and Microsoft HLSL •Code sent to shaders as source code •WebGL functions compile, link and get information to shaders E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 25 E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 26 25 26 4 Objectives Coding in WebGL •Build a complete first program •Example: Draw a square - Introduce shaders - Each application consists of (at least) two files - Introduce a standard program structure - HTML file and a JavaScript file •Simple viewing •HTML - Two-dimensional viewing as a special case of - describes page three-dimensional viewing - includes utilities •Initialization steps and program structure - includes shaders •JavaScript - contains the graphics code E. Angel and D. Shreiner: Interactive Computer Graphics 6E © Addison-Wesley 2012 27 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 28 27 28 Coding in WebGL Square Program •Can run WebGL on any recent browser - Chrome - Firefox - Safari - Edge •Code written in JavaScript •JS runs within browser - Use local resources Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 29 Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 29 30 WebGL square.html <!DOCTYPE html> •Five steps <html> <script id="vertex-shader" type="x-shader/x-vertex"> - Describe page (HTML file) #version 300 es in vec2 aPosition; • request WebGL Canvas void main() • read in necessary files { gl_Position = vec4(aPosition, 0.0, 1.0); - Define shaders (HTML file) } • could be done with a separate file (browser dependent) </script> <script id="fragment-shader" type="x-shader/x-fragment"> - Compute or specify data (JS file) #version 300 es precision mediump float; - Send data to GPU (JS file) out vec4 fColor; - Render data (JS file) void main() Application { fColor = vec4( 1.0, 1.0, 1.0, 1.0 ); } </script> Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015 31 32 5 Old square.html Shaders <!DOCTYPE html> <html> • We assign