code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, > <title>Document</title> <style> canvas {background-color: #000; } </style> </head> <body> <canvas id="webgl"></canvas> <script id="vertexShader" type="x-shader/x-vertex"> // Attribute Declare vec4 type variable pos attribute vec4 pos; // attribute declare the vertex color variable attribute vec4 color; // VARYING specifies the vertex color. The variable varying VEC4 V_color is interpolated. Void main(){// ApOS assigns the vertex coordinates to the built-in variable gl_Position // each vertex processing data gl_Position = pos; v_color = color; } </script> <script id="fragmentShader" type="x-shader/x-fragment"> // It receives v_color data from the vertex shader varying VEC4 V_color; Void main(){// process the data piece by piece, set all the pieces (pixels) to red gl_FragColor = v_color; } </script> <script> const webgl = document.querySelector("#webgl"); const gl = webgl.getContext("webgl"); // vertexShader source code const vertexShaderSource = document.getelementbyid ("vertexShader").innertext; // Source code const fragShaderSource = document.getelementById ("fragmentShader").innerText; // Initialize shader const Program = initShader(gl, vertexShaderSource, fragShaderSource); // Get the vertex shader's location variable apos, that is, aposLocation points to the apOS variable. const posLocation = gl.getAttribLocation(program, "pos"); const colorLocation = gl.getAttribLocation(program, "color"); Const data = new Float32Array([0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5]); Const buffer = gl.createBuffer(); // bindBuffer object, activate buffer gl.bindbuffer (gl.array_buffer, buffer); Gl. bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); // The data in the buffer is passed to the position variable apos gl.vertexattribPointer (posLocation, 2, gl.float, false, 0, 0); / / allow the data transfer gl. EnableVertexAttribArray (posLocation); onst colorData = new Float32Array([0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0]); const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, colorData, gl.STATIC_DRAW); gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(colorLocation); // Start drawing gl.drawArrays(gl.LINE_LOOP, 0, 4); Function initShader(gl, vertexShaderSource, fragmentShaderSource) { var vertexShader = gl.createShader(gl.VERTEX_SHADER); var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(vertexShader); gl.compileShader(fragmentShader); var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program); return program; } </script> </body> </html>Copy the code

conclusion

  1. Get the Canvas brush.
const webgl = document.querySelector("#webgl");
const gl = webgl.getContext("webgl");
Copy the code

2. Get the shader language.

// vertexShader source code const vertexShaderSource = document.getelementbyid ("vertexShader").innertext; // Source code const fragShaderSource = document.getelementById ("fragmentShader").innerText;Copy the code

3. Initialize the shader language and bind the brush to the shader program.

function initShader(gl, vertexShaderSource, fragmentShaderSource) { var vertexShader = gl.createShader(gl.VERTEX_SHADER); var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(vertexShader); gl.compileShader(fragmentShader); var program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); LinkProgram (program); gl.linkProgram(program); gl.useProgram(program); return program; }Copy the code

5. Vertex data or color data is associated with shader variables.

// Get the vertex shader's location variable apos, that is, aposLocation points to the apOS variable. const posLocation = gl.getAttribLocation(program, "pos"); Const data = new Float32Array([0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5]); Const buffer = gl.createBuffer(); // bindBuffer object, activate buffer gl.bindbuffer (gl.array_buffer, buffer); Gl. bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); // The data in the buffer is passed to the position variable apos gl.vertexattribPointer (posLocation, 2, gl.float, false, 0, 0); / / allow the data transfer gl. EnableVertexAttribArray (posLocation);Copy the code

4. Draw graphs

gl.drawArrays(gl.LINE_LOOP, 0, 4);
Copy the code