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 for use in web browsers. Independant of hardware: same code runns on all the graphical hardware independant of the manufacturer. Independant of the platform: same code for interactive graphics runns on many patforms: Linux, Mac, Windows,» 200 instructions instructions are intended for drawing interactive 3D graphics. 2
What WebGL is not? It does not have support for: UI implementation and interaction; use interaction (keyboard, mouse, ); it uses JavaScript libraries for this. It does not have instructions for: description of 3D objects; it only supports a small set of graphics primitives: dots, lines, polygons 3
WebGL General structure of simple program: initialization of OpenGL context: OpenGL context is part of HTML5 canvas, we obtain the context from the canvas. initialization of OpenGL parameters view definition, initialization of shaders, main program loop (when we use single thread): 1. clear the screen 2. draw 3D scene 3. process I/O devices 4. refresh the context See 00-introduction and 01-polygons 4
WebGL and web browsers Support in most modern browsers: Chrome, Firefox, IE, Safari, Opera, Edge support is implemented in different manner on different systems: Through OpenGL, Direct3D, Direct X, Support on mobile devices: mobile browsers support WebGL: Android Browser, Chrome, Firefox, ios, WebOS, IE, WebGL is winner in battle with Java Applets and Flash Player for 3D rendering on web. 5
OpenGL pipeline Vertex shader Vertex data uniforms array of verices array of indices (textures, variables) [1, 2, 3], [3, 2, 4], [4, 2, 7], [7, 2, 5],... vertex shader Basic vertex positions assembling triangles Rasterization rasterization Display pixels Fragment shader fragment shader Pixel color, depth,... Framebuffer operations (depth test, blending, ) Texturing and blending WebGL Framebuffer framebuffer 6
Polygons Each polygon has two sites: back and front side; OpenGL can draw each side differently; order of veritces defines which side is front side and which side is back side; when we look at the front side, the order of vertices is counter clockwise: right hand rule righthanded coordinate system; we can also change the orientation of polygons. clockwise counter clockwise 7
Transformations Basis for meaningful drawing represent basic transformations: translation; scaling; rotation; projection. Execution of transformation is performed in vertex shader. Developer must take care for appropriate transformations and their chaining, as well as storring (e.g. transformation stack). 8
Transformations Transformation chaining: matrix multiplication: right most matrix represent first transformation. Typical structure of three transformation: TRS translation * rotation * scale ( * point ) 9
Transformations Point v ocs of object O is in the origin of world coordinate system. It represents local coordinate system (c.s.); we can move the point in desired place in the world by model transformation, typicaly TRS: v wcs = (T R S) v ocs ; cammera is at location p and has its own coordinate system; transformation of v wcs into view coordiante system is performed by view transformation: v vcs = (T R ) v wcs. 10
Transformation Projection transformation transforms point v vcs into projected coordinates. We also define how to cut the projection plane and normalization of the coordinates in range of (-1, -1) and (1, 1) : v pcs = Pv vcs. Transformation into viewport transforms normalized coordinates into viewport of the application window: Z-Buffer (z coordinate of vertice) is used to define which points will be drawn; v ndcs = Nv pcs. 11
Transformations (TRS) z y y O OCS x y x z z O WCS (TR) z y O VCS (P) x (N) O NDCS x Računalniška grafika in tehnologija iger - WebGL 12
How are things in WebGL? Geometry we define geometry with float arrays in JavaScript and transfer them onto GPU with use of VBOs (vertex buffered objects), we can read the geometry from the files; in case when geometry is changing we change it in JavaScript and refresh VBO structures on GPU. Transformations matrix stack is implemented in JavaScript; transformation matrices are sent into shaders via input variables (uniforms); every time, when view changes we have to refresh appropriate uniforms. 13
Vertex shader With vertex shader we can implement the functionality of graphics pipeline for processing vertices: vertex transformation; color transformation; lighting (light definition); generation of texture coordiantes for mappint textures 14
Fragment shader With fragment shaderjem we can implement the functionality of graphics pipeline for fragment processing: fragments can be smaller than pixesl or can contain multiple pixels; calculation color and texturing for individual fragment; multi texturing; special effects (fog, blur, ); normal calculation for individual fragment; With multiple pass we can achieve additional special effects (blending, motion blur, ) Values can be transferred between shaders through the variables which are interpolated for individual fragment. 15
Other shaders (not in WebGL) Tessellation shader shader, intended for procedural subdivision of individual surfaces for achieving higher detail of the models; it consists of two faces: Tessellation Control to what degree should tessellation be calculated; Tessellation Evaluation calculates actual positions of vertices according to the calculated pattern. Geometry shader shader, which allows procedural generation of geometry on the GPU; it is executed after the vertex shader in the pipeline and after tessellation shader if it exists; inputs are individual primitives, output are 0 or more instances of input primitives. 16