machankura/mempool
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More robust webgl handling

Browse Source
This commit is contained in:
Mononaut 2023-08-22 00:05:22 +09:00
parent ead32a4a65
commit 9ba7ab9975
No known key found for this signature in database
GPG Key ID: A3F058E41374C04E
2 changed files with 19 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/app/components/block-overview-graph/block-overview-graph.component.ts
View File

@ -70,9 +70,11 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false); this.canvas.nativeElement.addEventListener('webglcontextlost', this.handleContextLost, false);
this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false); this.canvas.nativeElement.addEventListener('webglcontextrestored', this.handleContextRestored, false);
this.gl = this.canvas.nativeElement.getContext('webgl'); this.gl = this.canvas.nativeElement.getContext('webgl');
this.initCanvas();
this.resizeCanvas(); if (this.gl) {
this.initCanvas();
this.resizeCanvas();
}
} }
ngOnChanges(changes): void { ngOnChanges(changes): void {
@ -195,10 +197,16 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
cancelAnimationFrame(this.animationFrameRequest); cancelAnimationFrame(this.animationFrameRequest);
this.animationFrameRequest = null; this.animationFrameRequest = null;
this.running = false; this.running = false;
this.gl = null;
} }
handleContextRestored(event): void { handleContextRestored(event): void {
this.initCanvas(); if (this.canvas?.nativeElement) {
this.gl = this.canvas.nativeElement.getContext('webgl');
if (this.gl) {
this.initCanvas();
}
}
} }
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
@ -224,6 +232,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
compileShader(src, type): WebGLShader { compileShader(src, type): WebGLShader {
if (!this.gl) {
return;
}
const shader = this.gl.createShader(type); const shader = this.gl.createShader(type);
this.gl.shaderSource(shader, src); this.gl.shaderSource(shader, src);
@ -237,6 +248,9 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
} }
buildShaderProgram(shaderInfo): WebGLProgram { buildShaderProgram(shaderInfo): WebGLProgram {
if (!this.gl) {
return;
}
const program = this.gl.createProgram(); const program = this.gl.createProgram();
shaderInfo.forEach((desc) => { shaderInfo.forEach((desc) => {
@ -273,7 +287,7 @@ export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, On
now = performance.now(); now = performance.now();
} }
// skip re-render if there's no change to the scene // skip re-render if there's no change to the scene
if (this.scene) { if (this.scene && this.gl) {
/* SET UP SHADER UNIFORMS */ /* SET UP SHADER UNIFORMS */
// screen dimensions // screen dimensions
this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight); this.gl.uniform2f(this.gl.getUniformLocation(this.shaderProgram, 'screenSize'), this.displayWidth, this.displayHeight);

2
frontend/src/app/shared/graphs.utils.ts
View File

@ -90,7 +90,7 @@ export const download = (href, name) => {
export function detectWebGL(): boolean { export function detectWebGL(): boolean {
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl'); const gl = canvas.getContext('webgl');
return !!(gl && gl instanceof WebGLRenderingContext); return !!(gl && gl instanceof WebGLRenderingContext);
} }