Getting Started with WebGL-WEBGL introduction and 3D Graphics

What is WebGL?

WebGL is a technology that uses JavaScript to achieve 3D graphics, and the browser does not need plug-in support, and Web developers can write code with a system graphics card (GPU) to render 3D scenes and objects.

The WebGL-based OpenGL es 2.0,opengl ES is a subset of the OpenGL three-dimensional graphics API, designed for embedded devices such as phones, tablets, and game consoles. The browser kernel implements the ability to call 3D via JavaScript through the encapsulation of the OpenGL API. WebGL content is implemented in the browser as a special context for the canvas label in HTML5.

The WEBGL standard was developed and maintained by the Kolnas Organization (Khronos Group), which is a member of browser vendors such as Google, Mozilla, opera and Apple, making a significant contribution to this standard.

WebGL Support Status

All major desktop browsers now support WebGL, but only part of the latest version is supported on the mobile browser.

Desktop browser

• Mozilla Firefox 4+
• Google Chrome 8+
• Internet Explorer 11+
• Safari 5.1+
• Opera 12+

Mobile browser

• Firefox 25+
• Google Chrome 31+
• Opera Mobile 12+
• Android Browser temporarily not supported
• IOS Safari temporarily does not support
• IE Mobile temporarily does not support

 

3D Graphic Science

Before we really start learning wlebgl, we need to learn more about 3D graphics to help with the next 3D graphics programming.

3D coordinate system

Cartesian coordinate system is familiar to everyone, that is, the common Cartesian coordinate system in mathematics, consisting of two axes perpendicular to each other, usually labeled X-axis and y-axis. This coordinate system can be used to define the coordinate position of the elements in the page.

In addition to the X and Y axes when drawing 3D graphics, we also need a Z-axis to represent the depth, which is the distance of the 3D object from the screen.

Point, Line, polygon, and grid

All objects in 3D space are made up of dots, lines, and polygons. A point consists of 3 values-X, Y, Z, representing a unique position within 3D space. 2 points can be connected to a line, 3 points we can form a plane. Multiple faces are stitched together to form a grid.

Our common sphere looks very smooth, in fact, by a number of points, lines, and a combination of surface.

Texture map and material

The mesh itself is free of textures and materials.

Textures can define the appearance of a mesh surface, either solid or filled bitmaps, or even more complex.

Material is the characteristics of the surface of the mesh, whether the model is transparent, reflective, etc. are defined by the mesh material.

Transformations and matrices

The shape of the 3D mesh is determined by the vertex position. Model transformation is the use of matrices to model the size, displacement, rotation and other operations. If you don't understand the matrix, you don't have to worry about it, and many of the WEBGL libraries help us do the right things.

Cameras, viewports, and projections

The 3D space we see on the canvas is not a real 3D space, but rather a mathematical algorithm for projecting the simulated 3D space into an image of the 2D viewport. Projection is the process of mapping objects in a simulated three-dimensional space to a screen to generate a two-dimensional image. The projection is divided into orthogonal projection and perspective projection, which is the realization principle of the camera.

The camera is the eye of the user observing the scene, and the camera's field of view determines the perspective relationship and what we see on the canvas.

Coloring device

For the final rendering model, the developer must precisely define the relationship between the fixed point, the transform, the material, and the camera. This is done by the shader. Shaders contain algorithms that project the model onto the screen, usually written in the Class C language, compiled and run in the Graphics Processing Unit (GPU).

Getting Started with WebGL-WEBGL introduction and 3D Graphics