Adding proof of concept page for OpenGL support

Author: ProgrammingByPermutation

src/src/app/app.routes.ts

@@ -8,7 +8,6 @@ import {LoginComponent} from './view/login/login.component';
 import {TwitchBotIndexComponent} from './view/twitch/twitch-bot-index/twitch-bot-index.component';
 import {TwitchBotConfigComponent} from './view/twitch/twitch-bot-config/twitch-bot-config.component';
 import {ImdbSearchComponent} from './view/imdb-search/imdb-search.component';
-import {BackgroundWebglComponent} from "./view/background-webgl/background-webgl.component";
 import {BackgroundWebglExampleComponent} from "./view/background-webgl-example/background-webgl-example.component";
 
 export const routes: Routes = [

src/src/app/common/components/standard-banner/standard-banner.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { LogoComponent } from '../logo/logo.component';
 import { environment } from '../../../../environments/environment';
-import { Router } from '@angular/router';
 import { MatButton } from '@angular/material/button';
 
 @Component({

src/src/app/view/background-webgl-example/background-webgl-example.component.html

@@ -1,3 +1,14 @@
-<app-background-webgl></app-background-webgl>
+@if(enum === OpenGlBackgrounds.BOX) {
+  <app-background-webgl></app-background-webgl>
+} @else {
+
+}
 
 <app-standard-banner />
+<div class="floating-button">
+  <button mat-stroked-button color="primary" [matMenuTriggerFor]="menu">Menu</button>
+  <mat-menu #menu="matMenu">
+    <button mat-menu-item (click)="this.enum = OpenGlBackgrounds.BOX">Box</button>
+    <button mat-menu-item (click)="this.enum = OpenGlBackgrounds.TEXTURE">Texture</button>
+  </mat-menu>
+</div>

src/src/app/view/background-webgl-example/background-webgl-example.component.scss

@@ -0,0 +1,5 @@
+.floating-button {
+  position: absolute;
+  bottom: 0px;
+  right: 50px;
+}

src/src/app/view/background-webgl-example/background-webgl-example.component.ts

@@ -1,17 +1,25 @@
 import { Component } from '@angular/core';
 import {BackgroundWebglComponent} from "../background-webgl/background-webgl.component";
 import {StandardBannerComponent} from "../../common/components/standard-banner/standard-banner.component";
+import {MatButton} from "@angular/material/button";
+import {MatMenu, MatMenuItem, MatMenuTrigger} from "@angular/material/menu";
+import {OpenGlBackgrounds} from "./backgrounds";
 
 @Component({
   selector: 'app-background-webgl-example',
   standalone: true,
   imports: [
     BackgroundWebglComponent,
-    StandardBannerComponent
+    StandardBannerComponent,
+    MatButton,
+    MatMenu,
+    MatMenuItem,
+    MatMenuTrigger
   ],
   templateUrl: './background-webgl-example.component.html',
   styleUrl: './background-webgl-example.component.scss'
 })
 export class BackgroundWebglExampleComponent {
-
+  public enum: OpenGlBackgrounds = OpenGlBackgrounds.BOX;
+  protected readonly OpenGlBackgrounds = OpenGlBackgrounds;
 }

src/src/app/view/background-webgl-example/backgrounds.ts

@@ -0,0 +1,4 @@
+export enum OpenGlBackgrounds {
+  BOX,
+  TEXTURE
+}

src/src/app/view/background-webgl/background-webgl.component.ts

@@ -36,6 +36,11 @@ void main() {
 }`;
   animate: () => void = () => {};
   dispose = false;
+  private disposableBuffers: WebGLBuffer[] = [];
+  private disposableArrayObjects: WebGLVertexArrayObject[] = [];
+  private disposablePrograms: WebGLProgram[] = [];
+  private disposableShaders: WebGLShader[] = [];
+  private gl: WebGL2RenderingContext | null = null;
 
   ngOnInit(): void {
     window.addEventListener('resize', this.resize.bind(this), false);
@@ -45,11 +50,27 @@ void main() {
   ngOnDestroy(): void {
     this.dispose = true;
     window.removeEventListener('resize', this.resize.bind(this));
+
+    // Release the OpenGL resources we allocated
+    if (null !== this.gl) {
+      for (let i = this.disposableBuffers.length - 1; i >= 0; i--) {
+        this.gl.deleteBuffer(this.disposableBuffers[i]);
+      }
+      for (let i = this.disposableArrayObjects.length - 1; i >= 0; i--) {
+        this.gl.deleteVertexArray(this.disposableArrayObjects[i]);
+      }
+      for (let i = this.disposablePrograms.length - 1; i >= 0; i--) {
+        this.gl.deleteProgram(this.disposablePrograms[i]);
+      }
+      for (let i = this.disposableShaders.length - 1; i >= 0; i--) {
+        this.gl.deleteShader(this.disposableShaders[i]);
+      }
+    }
   }
 
   ngAfterViewInit(): void {
-    const stuff = this.init();
-    if (!stuff) {
+    const init = this.init();
+    if (!init) {
       return;
     }
 
@@ -58,7 +79,7 @@ void main() {
         return;
       }
 
-      this.render(stuff[0], stuff[1]);
+      this.render(init[0], init[1]);
       requestAnimationFrame(this.animate);
     };
 
@@ -86,6 +107,7 @@ void main() {
     gl.compileShader(shader);
     const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
     if (success) {
+      this.disposableShaders.push(shader);
       return shader;
     }
 
@@ -105,6 +127,7 @@ void main() {
     gl.linkProgram(program);
     const success = gl.getProgramParameter(program, gl.LINK_STATUS);
     if (success) {
+      this.disposablePrograms.push(program);
       return program;
     }
 
@@ -140,6 +163,10 @@ void main() {
       return null;
     }
 
+    // Save for disposing of resources later
+    this.disposableArrayObjects.push(VAO)
+    this.disposableBuffers.push(...[VBO, EBO]);
+
     // bind the Vertex Array Object first, then bind and set vertex buffer(s), and then configure vertex attributes(s).
     gl.bindVertexArray(VAO);
 
@@ -179,18 +206,21 @@ void main() {
       return;
     }
 
+    // Save the reference for when we dispose
+    this.gl = gl;
+
     // Tell WebGL how to convert from clip space to pixels
     gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
 
     // Clear the canvas
-    gl.clearColor(0.2, 0.3, 0.3, 1.0);
+    gl.clearColor(0.10, 0.09, 0.09, 1.0);
     gl.clear(gl.COLOR_BUFFER_BIT);
 
     // draw our first triangle
     gl.useProgram(program);
 
     const uniformLocation = gl.getUniformLocation(program, "ourColor");
-    gl.uniform4fv(uniformLocation, new Float32Array([1, 0.5, 0.2, 1]))
+    gl.uniform4fv(uniformLocation, new Float32Array([0.2, 0.18, 0.18, 1]))
 
     gl.bindVertexArray(VAO);
     gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_INT, 0);