Further fixes to AardGl

src/ext/lib/ar-detect/AardGl.js

@@ -44,6 +44,12 @@ class AardGl {
 
     this.canDoFallbackMode = false; 
     this.logger.log('info', 'init', `[AardGl::ctor] creating new AardGl. arid: ${this.arid}`);
+
+    this.glData = {
+      positionBuffer: null,
+      textureCoordsBuffer: null,
+      textureCoordsLocation: null
+    };
   }
 
   /**
@@ -198,11 +204,29 @@ class AardGl {
   }
   //#endregion
   //#region WebGL helpers
+  glInitBuffers(width, height) {
+    // create buffers and bind them
+    this.glData.positionBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl, this.glData.positionBuffer);
+
+    // create rectangle for drawing
+    this.glSetRectangle(this.gl, width, height);
+
+    // create texture coordinate buffer
+    this.glData.textureCoordsBuffer = this.gl.createBuffer();
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glData.textureCoordsBuffer);
+
+    // this.gl.bufferData(this.gl.ARRAY_BUFFER, new Float32Array([0.0, 0.0, 1.0, ))
+
+    // create a texture
+
+  }
+
   glSetRectangle(glContext, width, height) {
     glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array([
-      0, 0,
+      0, 0,       //
-      width, 0,
+      0, height,  // this triangle is flipped. This and
-      0, height,
+      width, 0,   // this line are swapped over for experiment
       0, height,
       width, 0,
       width, height
@@ -224,7 +248,7 @@ class AardGl {
 
     // check if shader was compiled successfully
     if (! glContext.getShaderParameter(shader, this.gl.COMPILE_STATUS)) {
-      this.logger.log('error', ['init', 'debug', 'arDetect'], `%c[AardGl::setupShader] <@${this.arid}> Failed to setup shader. Error given:`, glContext.getShaderInfoLog(), _ard_console_stop);
+      this.logger.log('error', ['init', 'debug', 'arDetect'], `%c[AardGl::setupShader] <@${this.arid}> Failed to setup shader. Error given:`, this.gl.getShaderInfoLog(shader), _ard_console_stop);
       glContext.deleteShader(shader);
       return null;
     }
@@ -241,11 +265,12 @@ class AardGl {
     console.log(glContext, shaders);
     const program = glContext.createProgram();
     for (const shader of shaders) {
+      console.log("shader", shader);
       glContext.attachShader(program, shader);
     }
     glContext.linkProgram(program);
     if (! glContext.getProgramParameter(program, glContext.LINK_STATUS)) {
-      this.logger.log('error', ['init', 'debug', 'arDetect'], `%c[AardGl::setupProgram] <@${this.arid}> Failed to setup program.`, glContext.getProgramInfoLog(), _ard_console_stop);
+      this.logger.log('error', ['init', 'debug', 'arDetect'], `%c[AardGl::setupProgram] <@${this.arid}> Failed to setup program.`, glContext.getProgramInfoLog(program), _ard_console_stop);
       return null;
     }
 
@@ -343,42 +368,8 @@ class AardGl {
     //
     // [2] SETUP WEBGL STUFF —————————————————————————————————————————————————————————————————————————————————
     //#region webgl setup
-    this.gl = this.canvas.getContext("webgl");
     
-    // load shaders and stuff. PixelSize for horizontalAdder should be 1/sample canvas width
+    this.glSetup();
-    const vertexShaderSrc = getBasicVertexShader();
-    const horizontalAdderShaderSrc = generateHorizontalAdder(10, 1 / cwidth); // todo: unhardcode 10 as radius
-
-    // compile shaders
-    const vertexShader = this.compileShader(this.gl, vertexShaderSrc, this.gl.VERTEX_SHADER);
-    const horizontalAdderShader = this.compileShader(this.gl, horizontalAdderShaderSrc, this.gl.FRAGMENT_SHADER);
-
-    // link shaders to program
-    this.glProgram = this.compileProgram(this.gl, [vertexShader, horizontalAdderShader]);
-
-    // look up where the vertex data needs to go
-    // const positionLocation = this.gl.getAttributeLocation(glProgram, 'a_position');
-    // const textureCoordsLocation = this.gl.getAttributeLocation(glProgram, 'a_textureCoords');
-
-    // create buffers and bind them
-    this.positionBuffer = this.gl.createBuffer();
-    this.textureCoordsBuffer = this.gl.createBuffer();
-    this.gl.bindBuffer(this.gl, this.positionBuffer);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureCoordsBuffer);
-
-    // create a texture
-    this.texture = this.gl.createTexture();
-    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
-
-    // set some parameters
-    // btw we don't need to set gl.TEXTURE_WRAP_[S|T], because it's set to repeat by default — which is what we want
-    this.gl.texParameteri(this.gl, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
-    this.gl.texParameteri(this.gl, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
-
-    // we need a rectangle. This is output data, not texture. This means that the size of the rectangle should be
-    // [sample count] x height of the sample, as shader can sample frame at a different resolution than what gets
-    // rendered here. We don't need all horizontal pixels on our output. We do need all vertical pixels, though)
-    this.glSetRectangle(this.gl, this.settings.active.aard.sampleCols, cheight);
 
     // do setup once
     // tho we could do it for every frame
@@ -433,6 +424,43 @@ class AardGl {
     console.log("DRAWING BUFFER SIZE:", this.gl.drawingBufferWidth, '×', this.gl.drawingBufferHeight);
   }
 
+  glSetup(cwidth, cheight) {
+    this.gl = this.canvas.getContext("webgl");
+
+    // load shaders and stuff. PixelSize for horizontalAdder should be 1/sample canvas width
+    const vertexShaderSrc = getBasicVertexShader();
+    const horizontalAdderShaderSrc = generateHorizontalAdder(10, 1 / cwidth); // todo: unhardcode 10 as radius
+
+    // compile shaders
+    const vertexShader = this.compileShader(this.gl, vertexShaderSrc, this.gl.VERTEX_SHADER);
+    const horizontalAdderShader = this.compileShader(this.gl, horizontalAdderShaderSrc, this.gl.FRAGMENT_SHADER);
+
+    // link shaders to program
+    this.glProgram = this.compileProgram(this.gl, [vertexShader, horizontalAdderShader]);
+
+    // look up where the vertex data needs to go
+    // const positionLocation = this.gl.getAttributeLocation(glProgram, 'a_position');
+    // const textureCoordsLocation = this.gl.getAttributeLocation(glProgram, 'a_textureCoords');
+
+    this.glInitBuffers(this.settings.active.aard.sampleCols, cheight);
+
+    this.texture = this.gl.createTexture();
+    this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
+
+    // texture is half-transparent blue by default. Helps with debugging.
+    this.gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, [0, 0, 255, 128]);
+
+    // set some parameters
+    // btw we don't need to set gl.TEXTURE_WRAP_[S|T], because it's set to repeat by default — which is what we want
+    this.gl.texParameteri(this.gl, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
+    this.gl.texParameteri(this.gl, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
+
+    // we need a rectangle. This is output data, not texture. This means that the size of the rectangle should be
+    // [sample count] x height of the sample, as shader can sample frame at a different resolution than what gets
+    // rendered here. We don't need all horizontal pixels on our output. We do need all vertical pixels, though)
+    this.glSetRectangle(this.gl, this.settings.active.aard.sampleCols, cheight);
+  }
+
   drawScene() {
     // clear canvas
     this.gl.clearColor(0.0, 0.0, 1.0, 0.5); 
@@ -440,13 +468,17 @@ class AardGl {
 
     this.gl.useProgram(this.glProgram);
 
-    this.gl.bindBuffer(this.gl, this.positionBuffer);
+    this.gl.bindBuffer(this.gl, this.glData.positionBuffer);
-    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.textureCoordsBuffer);
+    this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glData.textureCoordsBuffer);
 
     // this.gl.bindFramebuffer(this.gl.FRAMEBUFFER, framebuffer)
 
+    // run our program
+    this.gl.useProgram(this.glProgram);
+    this.gl.drawElements(this.gl.TRIANGLES, )
+
     // get the pixels back out:
-    // this.gl.readPixels(0, 0, width, height, format, type, pixels)
+    this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.pixelBuffer);
   }
 
   updateTexture() {
@@ -550,13 +582,13 @@ class AardGl {
   }
 
   frameCheck(){
+    try {
       if(! this.video){
         this.logger.log('error', 'debug', `%c[AardGl::frameCheck] <@${this.arid}>  Video went missing. Destroying current instance of videoData.`);
         this.conf.destroy();
         return;
       }
 
-    console.info("frame check into happenings")
 
       // we dont have blackframe canvas atm
       // if (!this.blackframeContext) {
@@ -587,9 +619,16 @@ class AardGl {
         this.logger.log('error', 'aardGl', `%c[AardGl::frameCheck] <@${this.arid}> Something went wrong while trying to update/draw video frame with gl!`, "color:#000; backgroud:#f51;", e);
       }
 
-    console.log("TEXTURE DRAWN!")
+      console.log("TEXTURE DRAWN!", this.pixelBuffer)
+
+
+
+      // [N] clear data
 
       this.clearImageData(imageData);
+    } catch (e) {
+      this.logger.log('error', 'debug', `%c[AardGl::frameCheck] <@${this.arid}> Error during framecheck.`, "background: #000; color: #fa2", e);
+    }
   }
 
   /**