What is WebGL?
- low-level JavaScript API to access the GPU from within scripts on web pages
- Usage: performant real-time 3D graphics in the browser.
- It's a web standard
- doesn't need a plugin
- managed by Khronos group
- based on OpenGL ES
- See http://learningwebgl.com
Khronos Group
Supported Browsers
To enable on Chrome:
chrome.exe –no-sandbox –enable-webgl
To enable on Firefox:
about:config > webgl > webgl.enabled_for_all_sites > true
Chrome Frame - a plugin for Internet Explorer
WebGL Samples
Questions
Considerations
- CPU Compositioning
- WebGL is rendered via GPU
- displayed on HTML5 canvas – avoid blending (HTML5 overlays) à occurs on CPU!
- Security
- No less than ActiveX or any plugin today
- Drivers can detect lockup & reset graphics card
WebGL Coding Model
- Low level – script based pixel & vertex shaders injected into GPU à fast (faster than WPF
) - Subset of OpenGL ES for mobile
- mixture of C-like GLSL shader code blocks and JavaScript in one file
- Mesh Models are JSON encoded
- On Windows, DirectX OpenGL emulator
Javascrpt Libraries
Higher level abstraction
WebGL Shader Pipeline
- JS drawArrays function turns data into pixels displayed on canvas.
- WebGL processes the data
- –attributes (from buffers passed at initialization)
- –Uniforms - variables (projection & model-view matrices)
- vertex shader
- –called once for each vertex
- –outputs its results into gl_Position varying variable
- Rasterizer converts the 3D vectorized image into a 2D rasterized image
- fragment shader
- called once for each pixel in the image – applies linear interpolation
- outputs its results into gl_FragColor varying variable
- Shader pipeline outputs to the frame buffer for rendering on the screen
Data
Buffers
- Mesh Model vertices to render
- passed in once from initBuffers
Matrices
- Perspective matrix: viewport, viewing angle, frustrum clipping planes
- Model View matrix: rotate, translate, scale
- passed in from DrawScene as uniforms
Shaders
- Programs to run on GPU
- Vertex shader: manipulate each vertex with matrix transforms
- Pixel Shader: apply color / texture / light effects on each pixel
- passed in once from initShaders
GLSL
very similar to HLSL – just different qualifier names
Variable qualifiers
- uniform == in argument from calling code
- attribute == data unit in from shader pipeline stage
- varying == result unit out from shader pipeline stage
- gl_X == implicit varying variable
Linear Algebra data types – e.g.
- vec3 -a 3 vector
- Mat4 - a 4x4 matrix
Getting Started
Pass in HTML5 canvas element on which to render
call functions to initialize WebGL , load shader script blocks and mesh model vertices in buffers on GPU, then repeatedly call drawScene to pass in position & model matrices as uniforms for the vector shader to manipulate the mesh
function webGLStart() {
var canvas = document.getElementById("canvas");
initGL(canvas);
initShaders();
initBuffers(); // buffers - hold the polygon data to pass to GPU
drawScene(); // draws the triangle and the square, using the buffers
}
<body onload="webGLStart();">
<canvas id="canvas" style="border:none;" width="500"height="500">
</canvas>
Next steps
View my intro slides: http://www.slideshare.net/joshuareuben9/html5-game-programming-1-intro-to-web-gl
Learn WebGL here: http://learningwebgl.com/blog/?page_id=1217