•  Print this page
    Print this page

WebGL
 
 
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is executed on a computer's Graphics Processing Unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group.

More information about WebGL: https://www.khronos.org/webgl/

Quick guides







WebGL examples



Information
The WebGL examples were taken from the Coursera WebGL course given by Edward Angel (University of New Mexico)

Operating system used
Windows Vista Home Premium SP 2

Software prerequisites
none


No Description Files
1 Renders a single red triangle. This example uses a Float32Array, which is similar to C, Java or Python array and its data can be sent directly to the GPU. triangle.html
2 Similar to triangle but uses a JavaScript array, which is an object, and thus needs the flatten function to send its data to the GPU. triangle2.html
3 Generates a white square on a black background using a JS Array. square.html
4 Generates a white square on a black background using a Float32Array. square2.html
5 Sierpinski gasket after 5 recursive subdivisions. gasket2.html
5a Sierpinski gasket with slider for recursive subdivisions. gasket2_tessellate.html
5b Sierpinski gasket with slider for recursive subdivisions and rotation. gasket2_tessellate_rotate.html
5c Sierpinski gasket with slider for recursive subdivisions, rotation and twist. gasket2_tessellate_rotate_twist.html
5c Sierpinski gasket with polygon selection with slider for recursive subdivisions, rotation and twist. gasket2_tessellate_rotate_twist_polygons.html
6 Three-dimensional Sierpinski gasket. gasket4.html
7 Two-dimensional Sierpinski gasket with slide bar to control number of subdvisions. gasket5.html
8 Triangle with color interpolation. trianglec.html
9 Rotating square with menu, keyboard and button input. rotatingSquare2.html
10 Adds a slider to rotatingSquare2. rotatingSquare3.html
11 Rotating cube with solid color faces. cube.html
12 Similar to cube but by commenting and uncommenting a couple of lines you can use color interpolation. cubef.html
13 Rotating cube using render by elements. cubev.html
14 Sombrero image drawn as a mesh using orthographic view. Mesh is drawn twice, once filled and once with lines. hat.html
15 Cube with Shading (single light source). shadedCube.html
16 Cube with checkerboard texture and a sinsusoidal texture applied using a second texture unit. textureCubev4.html
17 Two color particles moving randomly rendered as points diffusing their colors over time. Example shows render to texture and buffer ping ponging. particleDiffusion.html
18 Drawing lines by selecting line width and line color. drawing_lines.html
19 Move, rotate and scale a cube in X, Y and Z direction geometric_cad.html
20 Move, rotate and scale a cube, cone, sphere or cylinder in X, Y and Z direction geometric_cad2.html
21 Move, rotate and scale a cube, cone, sphere or cylinder in X, Y and Z direction. Save and show multiple shapes. geometric_cad3.html
22 Move, rotate and scale a cube, cone, sphere or cylinder in X, Y and Z direction. Save and show multiple shapes.
Implement two lightning sources. 		geometric_cad4.html