tamius-han/ultrawidify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Get webgl setup to not fail and periodic functions to trigger periodically

Browse Source
This commit is contained in:
Tamius Han 2020-06-27 19:28:02 +02:00
parent 831e6b8541
commit 836bf6240e
1 changed files with 65 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
src/ext/lib/ar-detect/AardGl.js
View File

@ -207,7 +207,7 @@ class AardGl {
glInitBuffers(width, height) { glInitBuffers(width, height) {
// create buffers and bind them // create buffers and bind them
this.glData.positionBuffer = this.gl.createBuffer(); this.glData.positionBuffer = this.gl.createBuffer();
this.gl.bindBuffer(this.gl, this.glData.positionBuffer); this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.glData.positionBuffer);
// create rectangle for drawing // create rectangle for drawing
this.glSetRectangle(this.gl, width, height); this.glSetRectangle(this.gl, width, height);
@ -224,6 +224,10 @@ class AardGl {
glSetRectangle(glContext, width, height) { glSetRectangle(glContext, width, height) {
glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array([ glContext.bufferData(glContext.ARRAY_BUFFER, new Float32Array([
// 0, height,
// width, height,
// 0, 0,
// width, 0
0, 0, // 0, 0, //
0, height, // this triangle is flipped. This and 0, height, // this triangle is flipped. This and
width, 0, // this line are swapped over for experiment width, 0, // this line are swapped over for experiment
@ -248,7 +252,7 @@ class AardGl {
// check if shader was compiled successfully // check if shader was compiled successfully
if (! glContext.getShaderParameter(shader, this.gl.COMPILE_STATUS)) { 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:`, this.gl.getShaderInfoLog(shader), _ard_console_stop); this.logger.log('error', ['init', 'debug', 'arDetect'], `%c[AardGl::setupShader] <@${this.arid}> Failed to setup shader. Error given:`, _ard_console_stop, this.gl.getShaderInfoLog(shader));
glContext.deleteShader(shader); glContext.deleteShader(shader);
return null; return null;
} }
@ -295,7 +299,7 @@ class AardGl {
throw "Settings prevent autoar from starting" throw "Settings prevent autoar from starting"
} }
} catch (e) { } catch (e) {
this.logger.log('error', 'init', `%c[AardGl::init] <@${this.arid}> Initialization failed.`, _ard_console_stop, e); this.logger.log('error', ['init', 'debug', 'aard'], `%c[AardGl::init] <@${this.arid}> Initialization failed.`, _ard_console_stop, e);
} }
} }
@ -353,9 +357,9 @@ class AardGl {
// FOR DEBUG PURPOSES ONLY — REMOVE! // FOR DEBUG PURPOSES ONLY — REMOVE!
var body = document.getElementsByTagName('body')[0]; var body = document.getElementsByTagName('body')[0];
this.canvas.style.position = "absolute"; this.canvas.style.position = "fixed";
this.canvas.style.left = `50px`; this.canvas.style.left = `50px`;
this.canvas.style.top = `50px`; this.canvas.style.top = `64px`;
this.canvas.style.zIndex = 10002; this.canvas.style.zIndex = 10002;
body.appendChild(this.canvas); body.appendChild(this.canvas);
@ -369,7 +373,9 @@ class AardGl {
// [2] SETUP WEBGL STUFF ————————————————————————————————————————————————————————————————————————————————— // [2] SETUP WEBGL STUFF —————————————————————————————————————————————————————————————————————————————————
//#region webgl setup //#region webgl setup
this.glSetup(); this.glSetup(cwidth, cheight);
console.log("glsetup complete")
// do setup once // do setup once
// tho we could do it for every frame // tho we could do it for every frame
@ -377,56 +383,53 @@ class AardGl {
//#endregion //#endregion
//
// [3] detect if we're in the fallback mode and reset guardline
//
if (this.fallbackMode) {
this.logger.log('warn', 'debug', `[AardGl::setup] <@${this.arid}> WARNING: CANVAS RESET DETECTED/we're in fallback mode - recalculating guardLine`, "background: #000; color: #ff2");
// blackbar, imagebar
this.guardLine.reset();
}
//
// [4] see if browser supports "fallback mode" by drawing a small portion of our window
//
try {
this.blackframeContext.drawWindow(window,0, 0, this.blackframeCanvas.width, this.blackframeCanvas.height, "rgba(0,0,128,1)");
this.canDoFallbackMode = true;
} catch (e) {
this.canDoFallbackMode = false;
}
// //
// [5] do other things setup needs to do // [5] do other things setup needs to do
// //
this.detectionTimeoutEventCount = 0; // this.detectionTimeoutEventCount = 0;
this.resetBlackLevel(); // this.resetBlackLevel();
// if we're restarting AardGl, we need to do this in order to force-recalculate aspect ratio // // if we're restarting AardGl, we need to do this in order to force-recalculate aspect ratio
this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()}); // this.conf.resizer.setLastAr({type: AspectRatio.Automatic, ratio: this.getDefaultAr()});
this.canvasImageDataRowLength = cwidth << 2; // this.canvasImageDataRowLength = cwidth << 2;
this.noLetterboxCanvasReset = false; // this.noLetterboxCanvasReset = false;
if (this.settings.canStartAutoAr() ) { // if (this.settings.canStartAutoAr() ) {
this.start(); // this.start();
} // }
if(Debug.debugCanvas.enabled){ // if(Debug.debugCanvas.enabled){
// this.debugCanvas.init({width: cwidth, height: cheight}); // // this.debugCanvas.init({width: cwidth, height: cheight});
// DebugCanvas.draw("test marker","test","rect", {x:5, y:5}, {width: 5, height: 5}); // // DebugCanvas.draw("test marker","test","rect", {x:5, y:5}, {width: 5, height: 5});
} // }
this.conf.arSetupComplete = true; this.conf.arSetupComplete = true;
console.log("DRAWING BUFFER SIZE:", this.gl.drawingBufferWidth, '×', this.gl.drawingBufferHeight); console.log("DRAWING BUFFER SIZE:", this.gl.drawingBufferWidth, '×', this.gl.drawingBufferHeight);
// start autodetection after setup is complete
this.start();
} }
glSetup(cwidth, cheight) { glSetup(cwidth, cheight) {
this.gl = this.canvas.getContext("webgl"); this.gl = this.canvas.getContext("webgl");
if (this.gl === null) {
throw new Error('Unable to initialize WebGL. WebGL may not be supported by machine.');
}
// set color to half-transparent blue initially, for testing purposes
if (process.env.CHANNEL === 'dev') {
try {
this.gl.clearColor(0, 0, 1.0, 0.5);
this.gl.clear(this.gl.COLOR_BUFFER_BIT);
} catch (e) {
console.error("failing to clear channel!", e);
}
}
// load shaders and stuff. PixelSize for horizontalAdder should be 1/sample canvas width // load shaders and stuff. PixelSize for horizontalAdder should be 1/sample canvas width
const vertexShaderSrc = getBasicVertexShader(); const vertexShaderSrc = getBasicVertexShader();
const horizontalAdderShaderSrc = generateHorizontalAdder(10, 1 / cwidth); // todo: unhardcode 10 as radius const horizontalAdderShaderSrc = generateHorizontalAdder(10, 1 / cwidth); // todo: unhardcode 10 as radius
@ -442,23 +445,38 @@ class AardGl {
// const positionLocation = this.gl.getAttributeLocation(glProgram, 'a_position'); // const positionLocation = this.gl.getAttributeLocation(glProgram, 'a_position');
// const textureCoordsLocation = this.gl.getAttributeLocation(glProgram, 'a_textureCoords'); // const textureCoordsLocation = this.gl.getAttributeLocation(glProgram, 'a_textureCoords');
this.glInitBuffers(this.settings.active.aard.sampleCols, cheight); console.log("program compiled. init buffers");
this.glInitBuffers(this.settings.active.aardGl.sampleCols, cheight);
console.log("program compiled. buffer init complete");
this.texture = this.gl.createTexture(); this.texture = this.gl.createTexture();
this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture); this.gl.bindTexture(this.gl.TEXTURE_2D, this.texture);
// texture is half-transparent blue by default. Helps with debugging. // 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]); // this.gl.texImage2D(
// this.gl.TEXTURE_2D, // target
// 0, // level
// this.gl.RGBA, // internal format
// 1, 1, 0, // width, height, border
// this.gl.RGBA, // format of content
// this.gl.UNSIGNED_BYTE, // type
// new ArrayBufferView([0, 0, 255, 128])
// );
// set some parameters // 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.TEXTURE_2D, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST);
this.gl.texParameteri(this.gl, this.gl.TEXTURE_MAG_FILTER, this.gl.NEAREST); this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST);
this.gl.texParameteri(this.gl, this.gl.TEXTURE_MIN_FILTER, this.gl.NEAREST); this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_S, this.gl.CLAMP_TO_EDGE);
this.gl.texParameteri(this.gl.TEXTURE_2D, this.gl.TEXTURE_WRAP_T, this.gl.CLAMP_TO_EDGE);
// we need a rectangle. This is output data, not texture. This means that the size of the rectangle should be // 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 // [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) // 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); this.glSetRectangle(this.gl, this.settings.active.aard.sampleCols, cheight);
console.log("gl setup complete");
} }
drawScene() { drawScene() {
@ -475,7 +493,8 @@ class AardGl {
// run our program // run our program
this.gl.useProgram(this.glProgram); this.gl.useProgram(this.glProgram);
this.gl.drawElements(this.gl.TRIANGLES, ) // this.gl.drawElements(this.gl.TRIANGLES, 2, this.gl.UNSIGNED_BYTE, 0);
this.gl.drawArrays(this.gl.TRIANGLES, 0, 2)
// get the pixels back out: // get the pixels back out:
this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.pixelBuffer); this.gl.readPixels(0, 0, width, height, this.gl.RGBA, this.gl.UNSIGNED_BYTE, this.pixelBuffer);
@ -493,7 +512,7 @@ class AardGl {
// TODO: check if 'width' and 'height' mean the input gets resized // TODO: check if 'width' and 'height' mean the input gets resized
// this.gl.texImage2D(gl.TEXTURE_2D, level, internalformat, width, height, border, format, type, pixels) // this.gl.texImage2D(gl.TEXTURE_2D, level, internalformat, width, height, border, format, type, pixels)
// } else { // } else {
this.gl.texImage2D(gl.TEXTURE_2D, level, internalformat, sourceFormat, sourceType, this.video); this.gl.texImage2D(this.gl.TEXTURE_2D, level, internalFormat, sourceFormat, sourceType, this.video);
// } // }