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