What is WebGL

WebGL is a technology for drawing and rendering complex three-dimensional graphics (3D graphics) on a web page and allowing user interaction. WebGL technology combines HTML5 and JavaScript, allowing developers to create and render 3D graphics on a web page (web browser).

As the latest HTML standard, HTML5 extends traditional HTML features, such as two-dimensional graphics, network transmission, and local storage. With the advent of the HTML5 era, browsers are rapidly changing from simple display tools to complex application platforms. WebGL was designed to create three-dimensional applications and user experiences on web pages.

WebGL is embedded in the browser, we do not need to install plug-ins and libraries to use it directly, and it is browser-based, and can be WebGL programs on multiple platforms.

The origin of WebGL (brief introduction)

Widely used 3D graphics rendering technologies on personal computers are Direct3D and OpenGL

  • Direct3D is part of Microsoft DirectX technology
  • OpenGL is an open source free software service, so it is also widely used on multiple platforms.

WebGL is also a branch of OpenGL.

The updating and standardization of the OpenGL specification is the responsibility of the Khronos organization (a non-profit industry association that focuses on the formulation, publication, and promotion of multiple open standards). In 2009, Khronos established a WebGL working group and began to establish WebGL specifications based on OpenGL ES , And released the first version of the WebGL specification in 2011.

WebGL Development Basics

  • canvas

WebGL uses the canvas element in HTML5 to define the drawing area on the web page. If there is no WebGL, JavaScript can only draw two-dimensional graphics on the canvas. With WebGL, you can draw three-dimensional graphics on the canvas.

  • Programming language

Usually a WebGL program includes three programming languages: HTML, JavaScript, and OpenGL ES. OpenGL ES?

  • What are the basic concepts of WebGL?


Zhuo Colorizer
Fragment shader
Matrix Operations
Translation, rotation, scaling, compound transformation algorithms
OpenGL ES, Shader Programming Language
Hierarchical Model
Other advanced technologies

Persist in original technology sharing, your support will encourage me to continue to create!