This is the 19th day of my participation in the August More Text Challenge

WebGL draws flow charts

Gets the webGL drawing context

Initialize the shader

Set the coordinate information of a point

Sets the canvas background color

Empty canvas

draw

Shader language

Shaders are divided into vertex shaders and slice shaders

  • Vertex shader: A program used to draw vertex features
  • Slice shader: A program that performs slice – by – slice processing, such as lighting

Shader variable declaration – store qualifiers

  1. Attribute variable: Transmits data about vertices
  2. Uniform variables: Transfer data that is vertex-dependent (or vertex-independent) (global variables)
  3. Textures variables: Texture (Texture is a sequence of data. You can read as much data as you like while the shader is running. In most cases, it holds image data, but a texture is just a sequence of data, and you can store as much data as you like besides color data.
  4. Varying variables are a way of transferring values from the vertex shader to the fragment shader. Varying variables set in the vertex shader obtain different interpolations during the run of the fragment shader, depending on whether the rendered primitives are points, lines, or triangles.

Creating shaders

Gl.createshader (type): // createShader type: gl.vertex_shader // create vertex shader gl.fragment_shader // copy code copy code for the slice shaderCopy the code

Add resources to the shader

gl.shaderSource(shader, source); Source: added program (string type) Copy code Copy codeCopy the code

Compile the shader code

gl.compileShader(shader); Shader: Copy code for the shader to compile Copy codeCopy the code

Create a program

gl.createProgram(); Copy code Copy codeCopy the code

Binding shader

gl.attachShader(program,shader); Program: inserted program: shader: shader to bind Copy code Copy codeCopy the code

Connect shader program:

gl.linkprogram(program); Copy code Copy codeCopy the code

The plot

gl.drawArrays(mode,first,count); Mode: Specifies the drawing method that can accept the following constant symbols: Gl. POINTS, gl. LINES, gl. LINE_STRIP, gl. LINE_LOOP, gl, TRIANGLES, gl. TRIANGLE_STRIP, gl. TRIANGLE_FAN first: Specifies which vertex to draw from (integer) count: Specifies how many vertices (integer) to draw copy code Copy codeCopy the code

Next, let’s do the math of webGL drawing points in code

Code implementation

<body> <canvas width="500" id="oCanvas"></canvas> <script type="notjs" id = "vertex"> void main () { gl_Position = Vec4,0,0,1 (0); Gl_PointSize = 10.0; </script> <script type="notjs" id="fragment"> void main () {gl_FragColor = vec4(0,0,0,1); } </script> <script > var oCanvas = document.getElementById('oCanvas'); var gl = oCanvas.getContext('webgl'); if (! Gl) {alert(' browsers don't support webGL'); Function createShader(gl, type, source) {var shader = gl.createshader (type); gl.shaderSource(shader,source); gl.compileShader(shader); var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS); return shader; console.log(gl.getShaderInfoLog(shader)); } var vetexStr = document.getElementById('vertex').innerText; var fragmentStr = document.getElementById('fragment').innerText; console.log(vetexStr,fragmentStr); var vertexShader = createShader(gl, gl.VERTEX_SHADER, vetexStr); var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentStr); function createProgram(gl, vertexShader, fragmentShader) { var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); return program; } var program = createProgram(gl, vertexShader, fragmentShader); gl.useProgram(program); Gl. ClearColor (0,0,1,1); gl.clear(gl.COLOR_BUFFER_BIT); gl.drawArrays(gl.POINS,0, 1); </script> </body> Copy code Copy codeCopy the code

We can see that we have successfully implemented the webGL draw point using code