WebGL 2D/3D Programming and Graphics Rendering For The Web

WebGL enables web content to use an API based on OpenGL ES 2.0 to perform 2D and 3D rendering in an HTML canvas in browsers that support it without the use of plug-ins. WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU).

Learn how to draw a point in WebGL.

Normalised Device Coordinates (NDC) Normalised device coordinates (NDCs) make up a coordinate system that describes positions on a virtual plotting device. The lower left corner corresponds to (0,0), and the upper right corner corresponds to (1,1).

Learn to draw a simple triangle in WebGL using the foundation we have already built.

Draws lines between each pair of vertices passed. If you pass four vertices, A, B, C and D, two lines are drawn: one between A and B, and one between C and D. To set up the screen for drawing in 2D, use GL.

Line strip - Draws lines between each vertex passed, from the beginning to the end. If you pass three vertices, A, B and C, two lines are drawn: one between A and B, and one between B and C.

Line loop - Draws connected lines on screen. The last vertex specified is connected to first vertex.

GL_TRIANGLES - Draws triangles on screen. Every three vertices specified compose a triangle.

GL_TRIANGLE_STRIP - Draws connected triangles on screen. Every vertex specified after first three vertices creates a triangle.

GL_TRIANGLE_FAN - Draws connected triangles like GL_TRIANGLE_STRIP, except draws triangles in fan shape.

Learn how to draw a quad using triangles.

Learn to draw a 3D cube

Three.js is a cross-browser JavaScript library and Application Programming Interface used to create and display animated 3D computer graphics in a web browser. Three.js uses WebGL.

3D models are available in hundreds of file formats, each with different purposes, assorted features, and varying complexity. Although three.js provides many loaders, choosing the right format and workflow will save time and frustration later on.

In WebGL, objects are built using sets of vertices, each of which has a position and a color; by default, all other pixels' colors (and all its other attributes, including position) are computed using interpolation, automatically creating smooth gradients.

Learn how to apply a different color to each triangle.

Learn how to apply a color to each vertex and interpolate the color beautifully across the planet.

A texture is an WebGL Object that contains one or more images that all have the same image format. A texture can be used in two ways: it can be the source of a texture access from a Shader, or it can be used as a render target.

Texture coordinates, also called UVs, are pairs of numbers stored in the vertices of a mesh.

These numbers are often used to stretch a 2D texture onto a 3D mesh, but they can be used for other things like coloring the mesh (see Vertex color), controlling the flow across the surface (see Flow map), etc.

Game engines commonly use two texture coordinates, U and V, for mapping the width and height of a texture. A third axis W can also be used for depth if you are using a 3D volume texture, but usually this coordinate is removed for efficiency.

Texture coordinates are measured in a scale of 0.0 to 1.0, with 0.0 and 1.0 at opposite sides of the texture. When a model has a UV distance greater than 1 (for example, UV goes from -1 to 2) then the texture will tile across the model.

These numbers are usually hidden from the artist, replaced by helpful visual representations of how the textures are projected. Planes, cylinders and spheres help the artist align the textures in a visual way, but it helps to know that games only see the UV numbers that these shapes create.

Let's learn about moving objects using translation.

WebGL uses the right handed coordinate system by default, that is, X goes to the right, Y goes up and Z goes out of the screen. After projection it is left handed, but that has something to do with how the depth buffer is organised and normally you need not be concerned with it.

Scaling is just about increasing or decreasing the size of an object. Let us see an example, if a triangle has vertices of the size [a,b,c], then obviously a triangle with the vertices [2a, 2b, 2c] will be double the original size. Thus, to scale a triangle, we need to multiply each vertices with the scaling factor. We can also scale a particular vertex.

For suppose, to scale a triangle using vertex shader of the program, we need to create a uniform matrix and then multiply the coordinate values with this matrix. Further, we pass a 4×4 diagonal matrix having the scaling factors of x,y,z coordinates in the diagonal positions ( as it is the last diagonal position 1).

See Drawing A 3D Cube Lesson for rotation.

Transformations can be combined by doing one transformation and then another. The three transformations that can be combined are scaling, rotation and translation.

The MouseEvent interface represents events that occur due to the user interacting with a pointing device (such as a mouse). Common events using this interface include click, dblclick, mouseup, mousedown.

MouseEvent derives from UIEvent, which in turn derives from Event. Though the MouseEvent.initMouseEvent() method is kept for backward compatibility, creating of a MouseEvent object should be done using the MouseEvent() constructor.

KeyboardEvent objects describe a user interaction with the keyboard; each event describes a single interaction between the user and a key (or combination of a key with modifier keys) on the keyboard. The event type (keydown, keypress, or keyup) identifies what kind of keyboard activity occurred.

Lets fix rotation and adding individual rotation.

Ambient light is “background” light. It bounces everywhere in all directions and comes from no specific place. Ambient light illuminates every face of a model regardless of the face’s orientation to a light source. All faces get the same amount of ambient light.