Webgl study Notes

Buffer type 1, vertex buffer (ARRAY_BUFFER) 2, index buffer (ELEMENT_ARRAY_BUFFER) 3, texture 4, frame buffer (may contain depth buffer) 5, depth buffer 6, color buffer 7, template buffer

Matrix 1, model matrix 2, observation matrix 3, projection matrix 4, viewport

Opengl pure programmable pipeline technology creates a main and you insert code into main and you compile that code and you create a process and you put that compiled main into the process and you link it to the process that uses it

Create a buffer

<! 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, initial - scale = 1.0">
    <title>Document</title>
</head>

<body onload="initLoad()">
    <canvas id="myCanvas"></canvas>
</body>
<script id="vertexShader" type="x-shader/x_vertex">
    attribute vec3 v3Position;
    void main(void)
    {
        gl_Position = vec4(v3Position,1.0);
    }
</script>
<script id="fragmentShader" type="x-shader/x_fragment">
    void main(void)
    {
        gl_FragColor = vec4(0.0.1.0.1.0.1.0);
    }
</script>

<script>
    var VSHADER_SOURCE =
        "attribute vec4 v3Position;" +
        "void main() {" +
        // Set the coordinates
        "gl_Position = v3Position; " +
        "}";
    var FSHADER_SOURCE =
        "void main() {" +
        // Set the color
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
    var webgl
    var programObject
    function initLoad() {
        var v3PositionIndex = 0;

        var canvas = document.getElementById('myCanvas');
        webgl = canvas.getContext('webgl');
        webgl.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
        // Pass the code to be executed to the graphics card
        // Initialization is similar to creating a main
        // Create the vertex shader object
        var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
        // Create the chip shader object
        var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
        // Insert code into main
        webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
        webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
        // Compile the code
        webgl.compileShader(vertexShaderObject);
        webgl.compileShader(fragmentShaderObject);
        if(! webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {// Obtain the compile status of the vertexShaderObject
            alert("error:vertexShaderObject");
        }
        if(! webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {// Get the compile status of the fragmentShaderObject
            alert("error:fragmentShaderObject");
        }
        // Create a process similar to exe
        programObject = webgl.createProgram();
        // Pass the compiled program to the process
        webgl.attachShader(programObject, vertexShaderObject);
        webgl.attachShader(programObject, fragmentShaderObject);
        / / input value
        webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
        // Link to generate a real executable program
        webgl.linkProgram(programObject)
        if(! webgl.getProgramParameter(programObject, webgl.LINK_STATUS)) {// Get the compile status of the fragmentShaderObject
            alert("error:programObject");
        }
        console.log(webgl.getAttribLocation(programObject, 'v3Position'))
        // glsl
        // Use this executable program
        webgl.useProgram(programObject);
        / / coordinates
        var jsArrayData = [
            0.0.1.0.0.0,
            -1.0, -1.0.0.0.1.0, -1.0.0.0
        ]
        var triangleBuffer = webgl.createBuffer(); // Create a buffer
        / / binding
        webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
        // Bind the buffer value and type to the third parameter to identify the static type
        webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW); // Use DYNAMIC_DRAW for frequent changes
        // Occasionally STREAM_DRAW three types of vertex buffer
        // webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
        // Assign the buffer object to the v3PositionIndex variable
        webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false.0.0);
        // Connect the v3PositionIndex variable to the buffer object assigned to it
        webgl.enableVertexAttribArray(v3PositionIndex);
        // Clear the specified < canvas > color
        webgl.clearColor(0.0.0.0.0.0.1.0);

        / / to empty < canvas >
        webgl.clear(webgl.COLOR_BUFFER_BIT);



        // The type of the name to be assigned is whether the type of the dimension variable is normalized or not
        webgl.drawArrays(webgl.TRIANGLES, 0.3);
    }


</script>

</html>


</script>

</html>

</script>

</html>
Copy the code

Vertex buffer

webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
webgl.bufferData(webgl.ARRAY_BUFFER,4 * 9, webgl.STATIC_DRAW); / / byte
// Update part of the buffer
webgl.bufferSubData(webgl.ARRAY_BUFFER,2.new Float32Array([]))
// Change from the second byte to the next

Copy the code

Index buffer

If you want to draw a rectangle, you can put two triangles together

	var v3PositionIndex = 0;
   var VSHADER_SOURCE =
        "attribute vec3 v3Position;" +
        "void main() {" +
        // Set the coordinates
        "Gl_Position = vec4 (v3Position, 1.0); " +
        "}";
    var FSHADER_SOURCE =
        "void main() {" +
        // Set the color
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
var triangleBuffer = webgl.createBuffer();
var jsArrayData2 = [
	  -0.5.0.5.0.0.0.5.0.5.0.0.0.5, -0.5.0.0,
       -0.5.0.5.0.0.0.5, -0.5.0.0,
      -0.5, -0.5.0.0
]
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false.0.0);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.clearColor(0.0.0.0.0.0.1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.drawArrays(webgl.TRIANGLES, 0.6);
Copy the code

And then the rectangle will be drawn but the bottom one, the float array that you use for drawing one is four bytes and all of that has to be transmitted to the graphics card to draw the rectangle4*3*6 bytes of content (72 bytes)You can see that some of the coordinates are duplicate and you can write two less pointsYou can save 4*3*2 bytes (24 bytes)You can useIndex buffer

var jsArrayData2 = [
	  -0.5.0.5.0.0.0.5.0.5.0.0.0.5, -0.5.0.0,
       -0.5.0.5.0.0.0.5, -0.5.0.0,
      -0.5, -0.5.0.0
]
Copy the code

usageYou can see that this rectangle is made up of two trianglesIt's 012 and 023

var v3PositionIndex = 0;
   var VSHADER_SOURCE =
        "attribute vec3 v3Position;" +
        "void main() {" +
        // Set the coordinates
        "Gl_Position = vec4 (v3Position, 1.0); " +
        "}";
    var FSHADER_SOURCE =
        "void main() {" +
        // Set the color
        "gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);" +
        "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

// Modified content ------
// Here are the four points of the rectangle
var jsArrayData2 = [
	  -0.5.0.5.0.0.0.5.0.5.0.0.0.5, -0.5.0.0,
      -0.5, -0.5.0.0
]
// Index the array
var indexArray = [
	  0.1.2.0.2.3
]
// ------
var triangleBuffer = webgl.createBuffer();
// Create an index buffer
var indexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
// Manipulate the index buffer
// Change the current operation buffer to indexBuffer
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
Note that only unsigned short integers can be used here
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false.0.0);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.clearColor(0.0.0.0.0.0.1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
// The method used to call painting will change
// webgl.drawArrays(webgl.TRIANGLES, 0, 6);
// The first parameter is the type of the drawing, the second parameter is the number of points and the third parameter is the type of the drawing, and the fourth parameter is the offset value
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)
Copy the code

It works the same as aboveGradient rectangle

var v3PositionIndex = 0;
var inColor = 1;
var VSHADER_SOURCE =
   "precision lowp float;" +
   "attribute vec3 v3Position;" +
   "attribute vec4 inColor;" +
   "varying vec4 outColor;" +
   "void main() {" +
   // Set the coordinates
   "outColor= inColor;" +
   "Gl_Position = vec4 (v3Position, 1.0); " +
   "}";
var FSHADER_SOURCE =
   "precision lowp float;" +
   "varying vec4 outColor;" +
   "void main() {" +
   // Set the color
   "gl_FragColor = outColor;" +
   "}";
let webgl = null;
let programObject  = null;
var canvas = document.getElementById('myCanvas');
webgl = canvas.getContext('webgl');
webgl.viewport(0.0, canvas.clientWidth, canvas.clientHeight);
var vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
var fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);
webgl.shaderSource(vertexShaderObject, VSHADER_SOURCE)
webgl.shaderSource(fragmentShaderObject, FSHADER_SOURCE)
webgl.compileShader(vertexShaderObject);
webgl.compileShader(fragmentShaderObject);
programObject = webgl.createProgram();
webgl.attachShader(programObject, vertexShaderObject);
webgl.attachShader(programObject, fragmentShaderObject);
webgl.linkProgram(programObject);
webgl.useProgram(programObject);
webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");

// Modified content ------
// Here are the four points of the rectangle
   var jsArrayData2 = [
            // x,y,z,r,g,b,a
            -0.5.0.5.0.0.1.0.0.0.0.0.1.0.0.5.0.5.0.0.1.0.1.0.0.0.1.0.0.5, -0.5.0.0.1.0.0.0.1.0.1.0,
            -0.5, -0.5.0.0.1.0.0.0.1.0.1.0,]// Index the array
var indexArray = [
	  0.1.2.0.2.3
]
// ------
var triangleBuffer = webgl.createBuffer();
// Create an index buffer
var indexBuffer = webgl.createBuffer();
webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData2), webgl.STATIC_DRAW);
// Manipulate the index buffer
// Change the current operation buffer to indexBuffer
webgl.bindBuffer(webgl.ELEMENT_ARRAY_BUFFER, indexBuffer);
Note that only unsigned short integers can be used here
webgl.bufferData(webgl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indexArray), webgl.STATIC_DRAW);
webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false.4 * 7.0);
webgl.vertexAttribPointer(inColor, 4, webgl.FLOAT, false.4 * 7.3 * 4);
webgl.enableVertexAttribArray(v3PositionIndex);
webgl.enableVertexAttribArray(inColor);
webgl.clearColor(0.0.0.0.0.0.1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
// The method used to call painting will change
// webgl.drawArrays(webgl.TRIANGLES, 0, 6);
// The first parameter is the type of the drawing, the second parameter is the number of points and the third parameter is the type of the drawing, and the fourth parameter is the offset value
webgl.drawElements(webgl.TRIANGLES, 6, webgl.UNSIGNED_SHORT, 0)
Copy the code

View compiled error messages for vertex shader objects and fragment shader objects

     var canvas = document.getElementById('myCanvas');
        webgl = canvas.getContext('webgl');
 if(! webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)) {// Obtain the compile status of the vertexShaderObject
            var err = webgl.getShaderInfoLog(vertexShaderObject)
            console.log(err)
            alert("error:vertexShaderObject");
        }
        if(! webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)) {// Get the compile status of the fragmentShaderObject
            var err = webgl.getShaderInfoLog(fragmentShaderObject)
            console.log(err)
            alert("error:fragmentShaderObject");
        }
Copy the code

Vertex buffer

Index buffer

View compiled error messages for vertex shader objects and fragment shader objects

Related Posts

Canvas shooting mini game

XState: it’s 1202, is there anyone who still uses fake state management libraries?

Ref + Dynamic components