step.js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSDoc: Source: step.js</title>

    <script src="scripts/prettify/prettify.js"> </script>
    <script src="scripts/prettify/lang-css.js"> </script>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc-default.css">
</head>

<body>

<div id="main">

    <h1 class="page-title">Source: step.js</h1>

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>

/** The parent class for each Step of the pipeline, automating a lot of the WebGL stuff. */
class Step {

    constructor(context, params={}) {
        this.gl  = context;
        this.params = params;
        this.width = params.width || 640;
        this.height = params.height || 360;

    }

    /**
     * @description Create and Link Programs, and set the output framebuffer
     */

    setup(){
        this.program = this.createProgram();
        this.outBuffer = this.setupOutput();
    }

    /**
     * @description Set the Output viewport heigt/weidth and set the output framebuffer
     */
    setOutput(){
        const gl = this.gl;
        gl.viewport(0, 0, this.width, this.height);
        gl.bindFramebuffer(gl.FRAMEBUFFER, null);
    }

    /**
     * @description Utility function to set the format of the texture used for the output
     */
    getOutputTexture(){
        return this.createTexture(this.gl.RGB8, this.params.width, this.params.height);
    }


    /**
     * @description Basic code to run the program encapsulated by this step
     */
    run(input){

        const gl = this.gl;

        gl.useProgram(this.program);

        this.setInput(input);
        this.setOutput();

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


    /**
     * @description Create the framebuffer and texture to store the output of this step
     */
    setupOutput(){

        const gl = this.gl;

        const outputTexture = this.getOutputTexture();

        const frameBuffer = gl.createFramebuffer()
        gl.bindFramebuffer(gl.FRAMEBUFFER, frameBuffer)
        gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, outputTexture, 0);

        this.outTexture = outputTexture;

        return frameBuffer;
    }

    setInput(){

    }


    /**
     * @description Default Fragment shader - returns the input
     */

    getFragmentShader(){

        const fragmentShaderSource = String.raw`#version 300 es

                precision highp float;
            
                uniform sampler2D u_inputFrame;
            
                in vec2 v_texCoord;
            
                out vec4 outColor;

                void main() {
                  outColor = texture(u_inputFrame, v_texCoord);
                }
              `;



        return this.createShader(this.gl.FRAGMENT_SHADER, fragmentShaderSource);

    }

    /**
     * @description Default Vertex shader (processed the whole frame)
     */
    getVertexShader(){

        const vertexShaderSource = String.raw`#version 300 es

            in vec2 a_position;
            in vec2 a_texCoord;
       
            out vec2 v_texCoord;
        
            void main() {
              gl_Position = vec4(a_position, 0.0, 1.0);
              v_texCoord = a_texCoord;
            }
          `;


        return this.createShader(this.gl.VERTEX_SHADER, vertexShaderSource);

    }

    /**
     * @description Utility fn  create a WebGL shader
     */

    createShader(type, source){

        const gl = this.gl;

        const shader = gl.createShader(type);
        gl.shaderSource(shader, source);
        gl.compileShader(shader);

        return shader;

    }

    /**
     * @description Utility function to create a program with default values for the vertex shader
     */
    createProgram(){


        const fragmentShader = this.getFragmentShader();
        const vertexShader = this.getVertexShader();

        const gl = this.gl;

        const vertexArray = gl.createVertexArray()
        gl.bindVertexArray(vertexArray);


        const positionBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
        gl.bufferData(gl.ARRAY_BUFFER,  new Float32Array([-1.0, -1.0, 1.0, -1.0, -1.0, 1.0, 1.0, 1.0]), gl.STATIC_DRAW);

        const texCoordBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
        gl.bufferData( gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 1.0, 1.0]),  gl.STATIC_DRAW);


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

        const positionAttributeLocation = gl.getAttribLocation(program, 'a_position')
        gl.enableVertexAttribArray(positionAttributeLocation)
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
        gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0)

        const texCoordAttributeLocation = gl.getAttribLocation(program, 'a_texCoord')
        gl.enableVertexAttribArray(texCoordAttributeLocation)
        gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer)
        gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0)



        return program;

    }

    /**
     * @description Utility function to create a WebGL texture
     */

    createTexture(internalFormat, width, height){

        const gl = this.gl;

        const texture = gl.createTexture()
        gl.bindTexture(gl.TEXTURE_2D, texture)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
        gl.texStorage2D(gl.TEXTURE_2D, 1, internalFormat, width, height);

        return texture;

    }


}


export default Step;</code></pre>
        </article>
    </section>




</div>

<nav>
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Pipeline.html">Pipeline</a></li><li><a href="Step.html">Step</a></li><li><a href="TFLiteStep.html">TFLiteStep</a></li><li><a href="VirtualBackgroundFilter.html">VirtualBackgroundFilter</a></li></ul>
</nav>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc/jsdoc">JSDoc 3.6.7</a> on Sat Jan 08 2022 19:43:10 GMT-0800 (Pacific Standard Time)
</footer>

<script> prettyPrint(); </script>
<script src="scripts/linenumber.js"> </script>
</body>
</html>