Introduction to WebGL

Covers the introduction to Shaders and the rendering pipeline

Transcript

1. Introduction to WebGL Accelerated Rendering Pipeline + JavaScript = Amaze-balls Thursday, January 24, 13
2. What is WebGL Low level access to accelerated rendering hardware Performant, scalar processing using C-Style dialect called GLSL OpenGL Shader Language Advanced blending, rasterizing and visibility testing for “free” OpenGL ES 2.0 “like” API to increase portability Thursday, January 24, 13
3. OpenGL vs WebGL OpenGL 2.0 WebGL Immediate Mode Transformations Lighting Geometry Shaders Vertex Shaders Fragment Shaders Vertex Buffers Yes No Yes No * Yes No * ARB No ARB Yes ARB Yes ARB Yes * Can be emulated using shaders Thursday, January 24, 13
4. WebGL is not 3D, and not JavaScript No scene graph Example: glPushStack(); glPopStack(); No native transformation / projection User managed GPU memory Factory calls GPU elements are references, not objects Thursday, January 24, 13
5. Accelerated Rendering Pipeline Assembly Stage Render Stage Merge Stage Attribute Buffers Vertex Shader Rasterization Fragment Shader Test / Blend Render Buffer Index Buffer (optional) Thursday, January 24, 13
6. Anatomy of a WebGL Application Program Vertex Shader Fragment Shader Texture Buffer Frame Buffer Render Buffer Thursday, January 24, 13
7. Anatomy of a Program (Shaders) Data layer Constants: Compile-time constants Uniforms: Run-time constants (includes samplers) Attributes: Per-vertex data Varyings: Interpolated data generated by the rasterizer Thursday, January 24, 13
8. Anatomy of a Program (Shaders) Logic Vertex: Transform Attributes into Varyings and gl_Position Fragment: Transform Varyings into gl_FragColor Fragments may also be “discard”ed, preventing merge stage Thursday, January 24, 13
9. Simple GLSL Program Example VERTEX SHADER // Combined ModelView/Projection matrix uniform mat4 mvProj; attribute vec3 aPosition; // Vertex position attribute vec3 aColor; // Vertex color attribute vec2 aTexture; // Vertex UV Coordinates varying vec3 color; // Fragment color varying vec2 texture; // Fragment UV coords void main() { // Simply forward colors and textures // NOTE: This is where you would do lighting color = aColor; texture = aTexture; // Position our vertex in screen space gl_Position = vec4(aPosition, 1.0) * mvProj; } FRAGMENT SHADER // the 2D texture used as a texture map uniform sampler2D mytexture; // The interpolated values for our fragment (pixel) varying vec3 color; varying vec2 texture; void main() { // Multiply (ref: photoshop effect) two colors gl_Color = vec3(color, 1.0) * texture2D(mytexture, texture); } Thursday, January 24, 13
10. Math in GLSL Data is Scalar for high-density operations (SIMD) Numeric: float, int, bool Vector Types: vec[2-4], int[2-4], bool[2-4] Matrix Types: mat[2-4] Samplers provide linkage for both 2D and 3D (cube mapping) textures Shaders see textures all as the same size with unit colors Vector math is always performed “component wise” Exceptions: dot, length, distance, cross Thursday, January 24, 13
11. Accessing vector components Components are accessed using 3 sets: XYZW, RGBA, STPQ color.rgb = vec3(1.0, 1.0, 1.0); // .stp is an alias Read-only access provides “Swizzling” and “Replication” color = vec2(0.5,1.0).xxxy; // 50% gray, 100% alpha color = color.grb; // Randomly shuffle color components Vector Concatenation: gl_FragColor = vec4(color, 1.0); Thursday, January 24, 13
12. Accessing Matrix Components Matrices are stored in “Column-Major Order” Internally, these are just an array of floating point vectors (mostly) mat2 a = vec2 a[2]; Access entire column: a[x] = vec4(1.0); Access individual element: a[x][y] = 1.0; Thursday, January 24, 13
13. Advanced GLSL (Future reading) Arrays: Useful for skinning and multi-texturing Loop and Conditionals C-Structs Cannot use them with attributes Cannot be indexed (Example: myStruct[0].x) Functions Thursday, January 24, 13
14. Things to Remember Global names are combined in linking vertex and fragment shaders Loops and Conditionals are Death to performance “Shared Program Cursor / Program Memory” Don’t calculate constants in shaders ModelView * Projection = No no A stalled GPU is a stalled CPU Matrices and Arrays are flattened when uploading to the GPU Thursday, January 24, 13
15. Additional Pipeline Elements Back-face culling Depth tests / buffers Stencil buffers / Depth buffers Frame buffers + Render Buffers Multi-pass rendering techniques! (SSAO, Bloom, etc) Shadow-casting Blending Thursday, January 24, 13
16. Accelerated Rendering Pipeline Assembly Stage Render Stage Merge Stage Attribute Buffers Vertex Shader Rasterization Fragment Shader Test / Blend Render Buffer Index Buffer (optional) Thursday, January 24, 13
17. Rendering things on screen Document.querySelector(“canvas”).getContext(“experimental-webgl”); Create buffer objects Create and Upload textures (Textures are loaded into “texture units”) Create program Assign uniforms Bind buffers to attributes Call drawElements / drawArrays Thursday, January 24, 13
18. Additional Resources WebGL Reference Card v1.0 http://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf LightGL: Light weight WebGL middleware https://github.com/evanw/lightgl.js/ glMatrix: High performance matrix math for javascript http://glmatrix.net/ Learning WebGL http://learningwebgl.com/blog/?page_id=1217 Thursday, January 24, 13