WebGL - Khronos

WebGL - Khronos is a graphics library for creating 3D visual elements in Web applications without separate plug-ins.

WebGL is designed as a rendering context of the HTML5 <canvas> element. The WebGL context is still being developed and has not been standardized. WebGL uses 3D rendering APIs derived from OpenGL® ES 2.0, and is realized by binding shaders and OpenGL® ES Shading Language (GLSL ES) as JavaScript.

The main features of the WebGL include:

• Importing the WebGL context

  You can use the getContext() method of the Canvas object to import the WebGL context.

• Using programs and shaders

  You can use shaders, such as the vertex shader and fragment shader, to convert shape data to display it on the screen as pixels. Shaders must be initialized and attached to programs. The vertex shader sets the final position of a vertex, and the fragment shader sets the final colors of each pixel.

• Using buffers

  A buffer is a memory block for storing temporary data. In WebGL, you must create a vertex buffer object (VBO) to store vertex attributes, such as location, color, and texture coordinates.

  Note
  The deleteBuffer() method can be used to delete the buffer.

• Drawing on the screen

  You can use shader attributes to define which buffer to pass to the application, and then record the buffer in the drawing buffer to display the content on the screen.

• Applying realistic 3D effects

  To apply a more realistic 3D effect to objects in WebGL, you can use the following features:

  • Texture

    You can set the color value and map an image on the object surface.

    Each vertex can have a unique color. When converting a vertex shader to a fragment shader, all the middle pixels are filled, and through linear interpolation of the vertex attributes, the color differences between vertices are automatically given gradation effects.

  • Animation

    You can apply object and timer coordinate changes to create a moving animation.

  • 3D perspective

    You can use Z-index and matrix to create a 3D perspective.

  You can also use touch effects with textures and 3D perspectives.

• WebGL frameworks

  Numerous frameworks exist to easily import low-level methods to WebGL and to develop WebGL more productively.

  The three.js is one of the most widely used WebGL frameworks. It is a lightweight JavapScript library, in which many settings that need to be performed when developing WebGL are already set as basis. Consequently, three.js reduces the overlapping code due to repetitive setting works.

  You can use the three.js framework to, for example, apply light and camera effects.