bg web

public/img1.shader.fragment.glsl

@@ -116,7 +116,7 @@ void mainImage(out vec4 fragColor, in vec2 fragCoord)
   vec2 timeF = vec2(0.1, 0);
   vec2 timeOffset = iTime * timeF;
   vec2 uvTiled;
-  Unity_TilingAndOffset_float(uv, vec2 (1, 1), timeOffset, uvTiled);
+  Unity_TilingAndOffset_float(uv, vec2 (1, 1) , timeOffset, uvTiled);
 
   float gradientNoise;
   Unity_GradientNoise_float(uvTiled, 9., gradientNoise);

src/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="images">
+<!--<div class="images">
   <app-image  *ngFor="let image of images"
     [id]="image.id"
     [active]="image.active"
@@ -9,7 +9,11 @@
     [channelo0TexturePath]="image.channelo0TexturePath"
     [channelo1TexturePath]="image.channelo1TexturePath">
   </app-image>
-</div>
+</div>-->
 <div class="canvas-wrapper" id="rg-canvas-wrapper" [class.rocketed-somewhere]="!visibleCanvas">
   <rg-image #rgImage></rg-image>
 </div>
+
+<div class="bg-canvas-wrapper">
+  <bg-pro-plus #bgproplus></bg-pro-plus>
+</div>

src/app/app.component.scss

@@ -18,3 +18,17 @@
   }
   display: block;
 }
+
+.bg-canvas {
+  width: 100%;
+  height: 100%;
+}
+.bg-canvas-wrapper {
+  position: fixed;
+  top:0;
+  left:0;
+  z-index: -1;
+  width: 100vw;
+  height: 100vh;
+  touch-action: none;
+}

src/app/app.component.ts

@@ -2,9 +2,11 @@ import {AfterViewInit, Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, OnI
 import { RouterOutlet } from '@angular/router';
 import {ImageComponent} from "./image/image.component";
 import {CommonModule} from "@angular/common";
-import {RgWebComponent} from "../lib/rg-web-component";
+import {defineRgImage, RgWebComponent} from "../lib/rg-web-component";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
+import {BackgroundWebComponent, defineBgWeb, ProPlusShaderEngine} from "../lib/bg-web-component";
 
+defineBgWeb()
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -15,6 +17,7 @@ import {HttpClient, HttpClientModule} from "@angular/common/http";
 })
 export class AppComponent implements AfterViewInit{
   @ViewChild('rgImage') rgImage!: ElementRef<HTMLElement>;
+  @ViewChild('bgproplus') bgproplus!: ElementRef<HTMLElement>;
 
   private shaderFragmentContent!: string;
   private vertexShaderContent!: string;
@@ -69,9 +72,25 @@ export class AppComponent implements AfterViewInit{
   }
 
   ngAfterViewInit(): void {
-    this.initFuckingCanvas();
+    //this.initFuckingCanvas();
+    this.initFuckingBgCanvas();
   }
 
+  private async initFuckingBgCanvas() {
+    const base = window.origin.includes('localhost') ? '' : '/images-portfolio';
+    console.log('Bejs',{base})
+    this.shaderFragmentContent = this.shaderFragmentContent || await this.http.get(base+'/img1.shader.fragment.glsl', { responseType: 'text' }).toPromise() as any;
+    this.vertexShaderContent = this.vertexShaderContent || await this.http.get(base+'/vertex.glsl', { responseType: 'text' }).toPromise() as any;
+    let webel = this.bgproplus.nativeElement as BackgroundWebComponent;
+    const engine = new ProPlusShaderEngine();
+    await engine.init({
+      shaderFragmentContent: this.shaderFragmentContent,
+      vertexShaderContent: this.vertexShaderContent,
+      webElement: webel
+    })
+  }
+
+/*
   private async initFuckingCanvas() {
     const base = window.origin.includes('localhost') ? '' : '/images-portfolio';
     console.log('Bejs',{base})
@@ -86,6 +105,7 @@ export class AppComponent implements AfterViewInit{
     const toPreloadC1 = this.images.map(textureInfo => textureInfo.channelo1TexturePath);
     await RgWebComponent.preloadImages([...toPreloadC0, ...toPreloadC1]);
   }
+*/
 
 /*
   deactivate(id: string) {

src/app/image/image.component.ts

@@ -9,10 +9,10 @@ import {
 } from '@angular/core';
 import {CommonModule} from "@angular/common";
 import {HttpClient, HttpClientModule} from "@angular/common/http";
-import {define, RgWebComponent} from "../../lib/rg-web-component";
+import {defineRgImage, RgWebComponent} from "../../lib/rg-web-component";
 import {Vector3} from "@babylonjs/core";
 
-define();
+defineRgImage();
 @Component({
   selector: 'app-image',
   standalone: true,