preface

WebGL programming is a programmable shader method specially used in the Web side, which is a programming approach to control GPU rendering by the Web side

Its standard is based on OpenGL ES 2.0, and it also uses GLSL as a shader language. The GLSL standard used is called GLSL ES and is specifically for shader writing on the Web side

WebGL itself also provides a number of interfaces for data transfer with the Web itself, which are generally placed on the WebGLRenderingContext after initialization, i.e. the return value of getContext. Most of the API can be seen from above

Preliminary study on WebGL programming

Initialize the canvas with WebGL on the Canvas (note that getWebGLContext uses the wrapped code provided in the WebGL programming guide, bypassing compile and attach operations)

function main() {
  const canvas = document.getElementById('webgl')
  // Get the WebGL context
  const gl = getWebGLContext(canvas)
  // Specify the color to empty the canvas (use black). Note that the color and Alpha value are only between 0.0.-1.0
  gl.clearColor(0.0.0.0.0.0.1.0)
  / / empty canvas
  gl.clear(gl.COLOR_BUFFER_BIT)
}


// Another way to get context
// Get WebGL context under current standards
const canvas = document.createElement('canvas')
const gl = canvas.getContext('webgl')
Copy the code

Draw a point, where you can see the VertexShader and FragmengShader vertexshaders written in strings. Once passed in and initialized, a call to gl.drawArrays draws a pixel point on the canvas

const VertexShader = Function main() {gl_Position = vec4(0.0, 0.0, 1.0, 1.0); Gl_PointSize = 10.0; } `
const FragmentShader = ` precision mediump float; Function main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `

function main() {
    // Get the canvas element with id webGL
    const canvas = document.getElementById('webgl')
    // Get the WebGL context
    const gl = getWebGLContext(canvas)
    initShaders(gl, VertexShader, FragmentShader)
    
    gl.clearColor(0.0.0.0.0.0.1.0)
    gl.clear(gl.COLOR_BUFFER_BIT)
    gl.drawArrays(gl.POINTS, 0.1)}Copy the code

API

JS

  • getWebGLContext
    • Enable WebGL functionality and get the WebGLRenderingContext, the context in which the WebGL API resides
  • initShaders
    • Initializes the Shaders and adds a partial error message to the compilation of the Shaders
    • Note that the log must be actively added to show the error, as it is essentially a reading error on the GPU
  • gl.clearColor
    • Initialize the color API, which actually operates on COLOR_BUFFER_BIT as
  • gl.clear
    • Initialize several specific buffers, which correspond to COLOR_BUFFER in the code
  • gl.COLOR_BUFFER_BIT
    • The color Buffer
  • gl.drawArrays
    • Draw function, by passing draw method and draw point, to draw a graph
  • gl.POINTS
    • Draw mode, here I draw a point and select gl.POINTS mode, more on this later. All of these patterns have something to do with triangles, which means that WebGL takes complex geometric shapes apart and re-renders them by drawing triangles and combining approximations

GLSL

  • gl_Position
    • Indicates the position of the vertices. In GLSL, it is vec4 data, which will be expanded later
  • gl_PointSize
    • Indicates the size of the vertex, which must be a floating point number
  • gl_FragColor
    • The color of the slice, receiveGLSLVector data types that represent the four RGBA color components, such as vec4(1.0, 0.0, 0.0, 1.0) in the code above, with the final color being opaque red

The Precision Mediump float is actually a global precision definition within the chip shader, as we’ll see later

The principle of

Vertex shader According to the vertex information, here we can control the reading and setting of vertices through the JS interface, so JS can use GLSL to achieve the operation of GPU

The slice shader renders each pixel based on the slice information. Note that the slice shader is actually called for each pixel

conclusion

WebGL is actually a programming method for GPU, which can draw various complex graphics patterns by controlling vertex shaders and chip shaders. GLSL ES is a shader language in WebGL, with an API similar to OpenGL, in which JS plays the role of C++. And the GLSL language use the GPU for rendering services