Shaders Effect

//index82
window.addEventListener('resize', onWindowResize, false);

function onWindowResize() {
    canvas.width = multiplier * window.innerWidth;
    canvas.height = multiplier * window.innerHeight;

    gl.viewport(0, 0, canvas.width, canvas.height);

    gl.uniform2fv(resolutionHandle, [canvas.width, canvas.height]);
}

function compileShader(shaderSource, shaderType) {
    let shader = gl.createShader(shaderType);
    gl.shaderSource(shader, shaderSource);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
        console.error("Shader compile failed with: " + gl.getShaderInfoLog(shader));
    }
    return shader;
}

function getAttribLocation(program, name) {
    let attributeLocation = gl.getAttribLocation(program, name);
    if (attributeLocation == -1) {
        console.error("Cannot find attribute <", name, ">.", "Unused variables are optimised out.");
    }
    return attributeLocation;
}

function getUniformLocation(program, name) {
    let uniformLocation = gl.getUniformLocation(program, name);
    if (uniformLocation == null) {
        console.error("Cannot find uniform <", name, ">.", "Unused variables are optimised out.");
    }
    return uniformLocation;
}

// shaders
let vertexShader = compileShader(vertexSource, gl.VERTEX_SHADER);
let fragmentShader = compileShader(fragmentSource, gl.FRAGMENT_SHADER);

let program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

gl.useProgram(program);

let vertexData = new Float32Array([
    -1.0, 1.0, // top left
    -1.0, -1.0, // bottom left
    1.0, 1.0, // top right
    1.0, -1.0, // bottom right
]);

let vertexDataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexDataBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertexData, gl.STATIC_DRAW);

let positionHandle = getAttribLocation(program, 'position');
gl.enableVertexAttribArray(positionHandle);
gl.vertexAttribPointer(positionHandle, 2, gl.FLOAT, false, 0, 0);

let timeHandle = getUniformLocation(program, "time");
let resolutionHandle = getUniformLocation(program, "resolution");
let sceneHandle = getUniformLocation(program, "u_scene");
let paletteHandle = getUniformLocation(program, "u_palette");

onWindowResize();
gl.uniform1f(sceneHandle, scene);
gl.uniform1f(paletteHandle, palette);

function setScene(name) {
    switch (name) {
        case "Circle":
            scene = 0;
            break;
        case "Heart":
            scene = 1;
            break;
        case "Star":
            scene = 2;
            break;
        default:
            scene = 3;
    }
}

function setPalette(name) {
    switch (name) {
        case "Grayscale":
            palette = 0;
            break;
        case "Rainbow":
            palette = 1;
            break;
        case "Red":
            palette = 2;
            break;
        default:
            palette = 3;
    }
}

let lastFrame = Date.now();
let thisFrame;

function draw() {
    thisFrame = Date.now();
    time += (thisFrame - lastFrame) / 1000.0;
    lastFrame = thisFrame;

    gl.uniform1f(timeHandle, time);
    gl.uniform1f(sceneHandle, scene);
    gl.uniform1f(paletteHandle, palette);

    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

    requestAnimationFrame(draw);
}

draw();