Geeks With Blogs

Josh Reuben

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

image

Supported Browsers

image

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  Smile )
  • 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

image

  • 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

Posted on Thursday, July 26, 2012 9:49 AM | Back to top


Comments on this post: An Introduction to WebGL

# re: An Introduction to WebGL
Requesting Gravatar...
Such useful tool and it can really give the best work. - Paradise Home Improvement Charlotte
Left by Robert Nyers on Jan 06, 2017 9:14 PM

Your comment:
 (will show your gravatar)


Copyright © JoshReuben | Powered by: GeeksWithBlogs.net