Initialize the shader process

<canvas id="glcanvas" width="640" height="480"></canvas>
Copy the code
// Initialize the shader program so that WebGL knows how to draw our data
function initShaders(gl, vshader, fshader) {
  // Create a shader of the specified type
  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  if(! vertexShader || ! fragmentShader) {return null;
  }

  // s4. 创建 WebGLProgram
  var program = gl.createProgram();
  if(! program) {return null;
  }

  S5. Add WebGLShader to WebGLProgram
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);

  S6. Link the incoming WebGLProgram object to complete the process of preparing the GPU code for the program's chip and vertex shaders
  gl.linkProgram(program);

  // Check the result of the link
  var linked = gl.getProgramParameter(program, gl.LINK_STATUS); // Returns information about the WebGLProgram program object
  if(! linked) {var error = gl.getProgramInfoLog(program); // Return the WebGLProgram object information log
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program); / / remove WebGLProgram
    gl.deleteShader(fragmentShader); / / remove WebGLShader
    gl.deleteShader(vertexShader); / / remove WebGLShader
    return null;
  }

  if(! program) {console.log('Failed to create program');
    return false;
  }

  // s7. Add the defined WebGLProgram object to the current render state
  gl.useProgram(program);

  return true;
}

// Create a shader of the specified type, upload the source code, and compile it
function loadShader(gl, type, source) {
  S1. Create a WebGLShader object
  var shader = gl.createShader(type);
  if (shader == null) {
    console.log('unable to create shader');
    return null;
  }

  // s2. Set GLSL code for WebGLShader (vertex shader and slice shader).
  gl.shaderSource(shader, source);

  // s3. Compile a GLSL shader and make it binary, which can then be used by WebGLProgram objects.
  gl.compileShader(shader);

  // Check the compilation result
  var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); // Returns information about the shader
  if(! compiled) {var error = gl.getShaderInfoLog(shader); // Returns the WebGLShader object information log
    console.log('Failed to compile shader: ' + error);
    gl.deleteShader(shader); / / remove WebGLShader
    return null;
  }

  return shader;
}
Copy the code
  // Vertex shader program
  const VSHADER_SOURCE = 
  Void main() {gl_Position = vec4(0.0, 0.0, 0.0, 1.0); // set coordinate gl_PointSize = 10.0; // Set the size} '

  // Chip shader program
  const FSHADER_SOURCE = 
  Void main() {gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Set the color} '

  function main() {
    // 1. Get canvas element
    const canvas = document.getElementById('glcanvas')

    // 2. Get the WebGL drawing context
    const gl = canvas.getContext('webgl')

    if(! gl) { alert('WebGL is not supported')
      return
    }

    // Initialize the shader
    if(! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Shader initialization failed')
      return
    }

    // 3. Set the background color (specify the color to empty the canvas)
    gl.clearColor(0.0.1.0.0.0.1.0)

    // 4. Clear the canvas
    gl.clear(gl.COLOR_BUFFER_BIT)

    // 5. Draw a point
    gl.drawArrays(gl.POINTS, 0.1)
  }

  main()
Copy the code

Analysis of the

The process of drawing a point was examined in the previous article, but the initialization step of the shader was ignored. Now we will examine the initialization process of the shader

  • 1. Create a WebGLShader object —— gl.createshader
  • 2. Set the GLSL program code for WebGLShader ——gl.shaderSource
  • 3. Compile a GLSL shader and make it binary, which can then be used by WebGLProgram objects ——gl.compileShader
  • 4. Create the WebGLProgram object ——gl.createProgram
  • 5. Add WebGLShader to WebGLProgram——gl.attachShader
  • 6. Link the incoming WebGLProgram object to complete the process of preparing the GPU code for the program’s chip and vertex shaders —— gl.linkprogram
  • 7. Add the defined WebGLProgram object to the current render state ——gl.useProgram

gl.createShader()

WebGLRenderingContext. CreateShader () is used to create a WebGLShader shader object, This object can use WebGLRenderingContext. ShaderSource () and WebGLRenderingContext.com pileShader configuration shader code () method

/ * * *@param The type parameter is either gl.vertex_shader or gl.fragment_shader * gl.vertex_shader // for creating vertex shaders */
WebGLShader gl.createShader(type);
Copy the code

gl.shaderSource()

WebGLRenderingContext. ShaderSource () method is used to set WebGLShader shaders (vertex shader and fragment shader) of GLSL program code

/** * passes the string form code specified by source to the shader specified shader. If code has already been passed to the shader, the old code will be replaced *@param Shader WebGLShader (shader object) * used to set the program code@param Source contains the string */ of the GLSL program code
void gl.shaderSource(shader, source);
Copy the code

gl.compileShader()

WebGLRenderingContext.com pileShader () is used to compile a GLSL shader, makes it into binary data, and then can be used by WebGLProgram object

/ * * *@param Shader A slice or vertex shader (WebGLShader) */
void gl.compileShader(shader)
Copy the code

gl.createProgram()

WebGLRenderingContext. CreateProgram () method is used to create and initialize a WebGLProgram object

WebGLProgram gl.createProgram();
Copy the code

gl.attachShader()

WebGLRenderingContext. AttachShader () method is responsible for add a snippet WebGLProgram or vertex shader

/ * * *@param Program A WebGLProgram object *@param Shader A WebGLShader */ of type fragment or vertex
void gl.attachShader(program, shader);
Copy the code

gl.linkProgram()

WebGLRenderingContext. LinkProgram WebGLProgram links () method is given, so as to complete for program slice and vertex shader GPU code process

/ * * *@param Program A WebGLProgram */ for linking
void gl.linkProgram(program);
Copy the code

gl.useProgram()

WebGLRenderingContext. UseProgram () method will be defined WebGLProgram objects are added to the current state of rendering

/ * * *@param Program The WebGLProgram object to add */
void gl.useProgram(program);
Copy the code