The target

Learn the basic WebGL API with WebGL rendering pipeline

Learn the WebGL API in conjunction with the rendering pipeline

WebGL rendering pipeline

Leverage the WebGL API to control the rendering pipeline

  • Create the Shader program
  • Pass the data directly to the Shader
  • Writes data to each buffer and uses the buffer to pass data to the Shader
  • Configure some of the rendering operations, such as setting blend mode, switching on and off some of the tile operations

Create the Shader program

Create Shader — > import GLSL code — > compile Shader — > Create Program — > Connect Shader objects — > Link Program — > Use Program

// Create a Shader object
vertex_shader = webglContext.createShader(webglContext.VERTEX_SHADER)  // Vertex shader
fragment__shader = webglContext.createShader(webglContext.FRAGMENT_SHADER)  // Chip shader

// Import GLSL code
webglContext.shaderSource(vertex_shader, vertex_glsl)
webglContext.shaderSource(fragment_shader, fragment_glsl)

/ / compile a Shader
webglContext.compileShader(vertex_shader)
webglContext.compileShader(fragment_shader)

// Get the compile status
Boolean webglContext.getShaderParameter(vertex_shader, webglContext.COMPILE_STATUS)
Boolean webglContext.getShaderParameter(fragment_shader, webglContext.COMPILE_STATUS)

// Create the Program object
program = webglContext.createProgram()

// Connect the compiled Shader code
webglContext.attachShader(program, vertex_shader)
webglContext.attachShader(program, fragment_shader)

// Link Program
webglContext.linkProgram(program)

// Get the link status
Boolean webglContext.getProgramParameter(program, webglContext.LINK_STATUS)

// Use the program
webglContext.useProgram(program)
Copy the code

Gets the variables in the Shader and passes the values

Create pointer variables — > get or bind Shader variable addresses — > pass values using Setter methods of webglContext

/ / for the Attribute
var attriName
webglContext.bindAttribLocation(program, attriName, 'Variable name in shader') // Bind js and Shader variables
webglContext.enableVertexAttribArray(attriName)   // Activate the js variable
webglContext.vertexAttribPointer(attriName, ....)  // Pass the vertex buffer

or

var attriName
attriName = webglContext.getAttribLocation(program, 'Variable name in Shader')  // Get variableswebglContext.vertexAttrib... (attriName, ....)/ / assignment

/ / for Uniform
var uniformName
uniformName = webglContext.getUniformLocation(program, 'Uniform name in shader')  // Get the uniFROM variablewebglContext.uniform... (uniformName, ...)// Assign Uniform variables
Copy the code

Using vertex Buffers

Create buffer — > Bind buffer — > import data into buffer

// Create buffer
buffer = webglContext.createBuffer()

/ / binding Buffer
webglContext.bindBuffer(webglContext.ARRAY_BUFFER, buffer)

// Pass the value to Buffer
webglContext.bufferData(webglContext.ARRAT_BUFFER, data, ...) 

Copy the code

Using index buffers

In the premise of using vertex buffer, the use of index buffer. Create buffer — > Bind buffer — > import data into buffer

buffer = webglContext.createBuffer()
webglContext.bindBuffer(webglContext.ELEMENT_ARRAY_BUFFER, buffer)
webglContext.bufferData(webglContext.ELEMENT_ARRAT_BUFFER, data, ...) 
Copy the code

Using texture buffers

// Create texture and load image
texture = webgl.createTexture()
texture.image = new Image()
texture.image.src = Image_url
texture.image.onload = () = > {
    // Bind the texture buffer and configure it
    webglContext.bindTexture(webglContext.TEXTURE_2D, texture)
    webglContext.texImage2D(webglContext.TEXTURE_2D, 0, webglContext.RGBA, webglContext.RGBA, webglContext.UNSIGNED_BYTE, texture.image)
    webglContext.texParameteri(webglContext.TEXTURE_2D, webglContext.TEXTURE_MAG_FILTER, webgl.NEAREST)
    webglContext.texParameteri(webglContext.TEXTURE_2D, webglContext.TEXTURE_MIN_FILTER, webgl.NEAREST)
    webglContext.texParameteri(webglContext.TEXTURE_2D, webglContext.TEXTURE_WRAP_S, webglContext.CLAMP_TO_EDGE)
    webglContext.texParameteri(webglContext.TEXTURE_2D, webglContext.TEXTURE_WRAP_T, webglContext.CLAMP_TO_EDGE)
    webglContext.bindTexture(webglContext.TEXTURE_2D, null)  // Restore the texture buffer default state
    
    // Activate the texture buffer
    webglContext.activeTexture(webglContext.TEXTURE0)   // Activate the texture buffer
    webglContext.bindTexture(webglContext.TEXTURE_2D, texture)  // Toggle texturesUniformli (A texture variable in a shader,0)  //0 is the index of the buffer where the texture is located
}

Copy the code

The frame buffer

frambuffer = webglContext.createFrameBuffer()
webglContext.bindFramebuffer(webglContext.FRAMEBUFFER, framebuffer)  // Create the frame buffer
depthbuffer = webglContext.createRenderbuffer()         // Create render buffer as depth buffer for frame buffer
webglContext.bindRenderbuffer(webglContext.RENDERBUFFER, depthbuffer)
webglContext.renderbufferStorage(webglContext.RENDERBUFFER, webglContext.DEPTH_COMPONET16, width, height)
webglContext.framebufferRenderbuffer(webglContext.FRAMEBUFFER, webglContext.DEPTH_ATTACHMENT, webglContext.RENDERBUFFER, depthbuffer)

texture = webglContext.createTexture()
webglContext.framebufferTexture2D(webglContext.FRAMEBUFFER, webglContext.COLOR_ATTACHMENT0, webglContext.TEXTURE_2D, texture, 0)    // Create a texture as a color buffer for the frame buffer
Copy the code

Vertex state buffer

Save the state of VertexShader

VAOExt = webglContext.getExtension('OES_vertex_array_object') vao = VAOExt.createVertexArrayOES() VAOExt.bindVertexArrayOES(vao) ... State change VAOExt. BindVertexArrayOES (null)
Copy the code

Sets the primitive type and draws

Starts drawing and sets the type of primitive assembly

webglContext.drawArrays(Type, ...) // Draw with vertex buffer data
webglContext.drawElements(Type, ...)  // Draw with index buffer data
Copy the code

Mixed render mode

webglContext.enable(webglContext.DEPTH_TEST)
webglContext.depthFunc(webglContext.LEQUEAL)
webglContext.blendFunc(webglContext.SRC_ALPHA, webglContext.ONE) // other blending rendering modes
webglContext.enable(webglContext.BLEND)   // Enable blending rendering
Copy the code