OpenGL_JS-shaders_class

• Context retrieval

// canvas creation and initializing OpenGL context
/ / is very simple
canvas = document.createElement("canvas"); 
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
gl = canvas.getContext("webgl2");
if(! gl) {console.log("WebGL 2 needed");
    return;
}
Copy the code

• Window scaling function

function framebufferSizeCallback(width, height) {
    canvas.width = width;
    canvas.height = height;
    gl.viewport(0.0, width, height);
    requestAnimationFrame(render);
}
window.onresize = () = > {
    framebufferSizeCallback(window.innerWidth, window.innerHeight); / / is very simple
};
Copy the code

• Create shader and program and delete shader

• Vertex shader

export let vs_shader = `#version 300 es
layout (location = 0) in vec3 aPos;
layout (location = 1) in vec3 aColor;
out vec3 ourColor;
void main()
{
    gl_Position = vec4(aPos, 1.0);
    ourColor = aColor;
}
Copy the code

• Chip shader

export let fs_shader = `#version 300 es
precision mediump float;
out vec4 FragColor;
in vec3 ourColor;
void main()
{
    FragColor = vec4(ourColor, 1.0f); } `Copy the code

• export

import {vs_shader} from "./vs_shader.js";
import {fs_shader} from "./fs_shader.js";
export {vs_shader, fs_shader}
Copy the code

• The creation of a shader

export class Shader {
    constructor(gl, vertexCode, fragmentCode, geometryCode) {
        this.createShader = function (gl, source, type) {
            var shader = gl.createShader(type);
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            return shader;
        };
        var program = gl.createProgram();
        var vshader = this.createShader(gl, vertexCode, gl.VERTEX_SHADER);
        var fshader = this.createShader(gl, fragmentCode, gl.FRAGMENT_SHADER);
        gl.attachShader(program, vshader);
        gl.deleteShader(vshader);
        gl.attachShader(program, fshader);
        gl.deleteShader(fshader);
        gl.linkProgram(program);
        var log = gl.getProgramInfoLog(program);
        if (log) {
            console.log(log);
        }
        log = gl.getShaderInfoLog(vshader);
        if (log) {
            console.log(log);
        }
        log = gl.getShaderInfoLog(fshader);
        if (log) {
            console.log(log);
        }
        this.programId = program; };use(gl) {
        gl.useProgram(this.programId);
    }
    setBoolean(gl, name, value) {
        gl.uniform1i(gl.getUniformLocation(this.programId, name), value ? 1 : 0);
    }
    setInt(gl, name, value) {
        gl.uniform1i(gl.getUniformLocation(this.programId, name), value);
    }
    setFloat(gl, name, value) {
        gl.uniform1f(gl.getUniformLocation(this.programId, name), value);
    }
    setFloat2(gl, name, value1, value2) {
        gl.uniform2f(gl.getUniformLocation(this.programId, name), value1, value2);
    }
    setFloat3(gl, name, value1, value2, value3) {
        gl.uniform3f(gl.getUniformLocation(this.programId, name), value1, value2, value3);
    }
    setFloat4(gl, name, value1, value2, value3, value4) {
        gl.uniform4f(gl.getUniformLocation(this.programId, name), value1, value2, value3, value4); }}//# sourceMappingURL=Shader.js.map
Copy the code

• Using the shader

import { vs_shader, fs_shader } from ".. /.. /js/Ch6/shaders/index.js";
import { Shader } from ".. /.. /js/common/Shader.js";
ourShader = new Shader(gl, vs_shader, fs_shader);
Copy the code

• VAO
• createVertexArray bindVertexArray
• createBuffer bindBuffer bufferData vertexAttribPointer enableVertexAttribArray

// This code is a javascript translation of code originally written by Joey de Vries under the CC BY-NC 4.0 licence. 
// For more information please visit https://learnopengl.com/About

let vertices = new Float32Array([
    0.5, -0.5.0.0.1.0.0.0.0.0,
    -0.5, -0.5.0.0.0.0.1.0.0.0.0.0.0.5.0.0.0.0.0.0.1.0
]);
VAO = gl.createVertexArray(); 
let VBO = gl.createBuffer();
gl.bindVertexArray(VAO);
gl.bindBuffer(gl.ARRAY_BUFFER, VBO);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
gl.vertexAttribPointer(0.3, gl.FLOAT, false.6 * sizeFloat, 0);
gl.enableVertexAttribArray(0);
gl.vertexAttribPointer(1.3, gl.FLOAT, false.6 * sizeFloat, (3 * sizeFloat));
gl.enableVertexAttribArray(1);
requestAnimationFrame(render);

function render() {
    processInput();
    gl.clearColor(0.2.0.3.0.3.1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
    ourShader.use(gl);
    gl.bindVertexArray(VAO);
    gl.drawArrays(gl.TRIANGLES, 0.3);
    requestAnimationFrame(render);
}
function processInput() {}Copy the code