try {

        this.drawingContext =

            this.canvas.getContext('webgl2', this._pInst._glAttributes) ||

            this.canvas.getContext('experimental-webgl', this._pInst._glAttributes);

        if (this.drawingContext === null) {

            throw new Error('Error creating webgl2 context');

        } else {

            const gl = this.drawingContext;

            gl.enable(gl.DEPTH_TEST);

            gl.depthFunc(gl.LEQUAL);

            gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);

            this._viewport = this.drawingContext.getParameter(

                this.drawingContext.VIEWPORT

            );

        }

    } catch (er) {

        throw er;

    }

};

​

let simpleShader;

​

let img;

​

function preload(){

  // Load the shader

  simpleShader = loadShader('basic.vert', 'basic.frag');

  // Load the image

  matrix = loadImage("dither_matrix.png");

  // matrix = loadImage("ps1_dither_mat.png");

  img = loadImage("eximg_2.png");

}

​

function setup() {

  // shaders require WEBGL mode to work

  createCanvas(270, 270, WEBGL);

​

​

}

​

function draw() {  

  noSmooth();

  // shader() sets the active shader with our shader

  shader(simpleShader);

  // Send the image to the shader

  simpleShader.setUniform("uMatrixTex", matrix);

  simpleShader.setUniform("uImgTex", img);

  // rect gives us some geometry on the screen

  rect(0,0,width, height);

​

}

​