Fix rendering with shaders

z4nr34l · Oct 25, 2023 · 4fb8320 · 4fb8320
1 parent e50f064
commit 4fb8320
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 24 deletions.
diff --git a/src/Scenes/Game/Singing/GameOverlay/Drawing/CanvasDrawing.ts b/src/Scenes/Game/Singing/GameOverlay/Drawing/CanvasDrawing.ts
@@ -6,7 +6,6 @@ import SungTriangle from 'Scenes/Game/Singing/GameOverlay/Drawing/Particles/Sung
 import { Shaders } from 'Scenes/Game/Singing/GameOverlay/Drawing/Shaders/Shaders';
 import { FPSCountSetting, GraphicSetting } from 'Scenes/Settings/SettingsState';
 import isNotesSection from 'Songs/utils/isNotesSection';
-import { getFirstNoteFromSection } from 'Songs/utils/notesSelectors';
 import { noDistanceNoteTypes } from 'consts';
 import { Note, NotesSection, PlayerNote } from 'interfaces';
 import { randomFloat } from 'utils/randomValue';
@@ -104,15 +103,17 @@ export default class CanvasDrawing {
   private drawPlayer = (playerNumber: number, ctx: CanvasRenderingContext2D) => {
     const drawingData = this.getDrawingData(playerNumber);
     const { currentSection } = calculateData(drawingData);
+
+    if (GraphicSetting.get() === 'high') {
+      this.setDistortionForce(drawingData);
+    }
+
     if (!isNotesSection(currentSection)) return;
 
     const displacements = this.calculateDisplacements(currentSection, drawingData);
 
     this.drawNotesToSing(ctx, drawingData, displacements);
     this.drawSungNotes(ctx, drawingData, displacements);
-    if (GraphicSetting.get() === 'high') {
-      this.setDistortionForce(drawingData);
-    }
 
     if (GraphicSetting.get() === 'high') {
       this.drawFlare(ctx, drawingData, displacements);
@@ -123,16 +124,30 @@ export default class CanvasDrawing {
 
   private setDistortionForce = (drawingData: DrawingData) => {
     const currentSection = drawingData.currentSection;
-    if (!isNotesSection(currentSection)) return;
-    const max = Math.max(getFirstNoteFromSection(currentSection).start, drawingData.currentBeat - MAX_LOOKUP_RANGE);
 
-    const sungNotes = drawingData.currentPlayerNotes
-      .filter((note) => note.note.start + note.note.length >= max)
-      .filter((note) => getPlayerNoteDistance(note) === 0)
-      .reduce((curr, note) => curr + note.length - Math.max(0, max - note.start), 0);
+    if (!isNotesSection(currentSection)) {
+      this.shaders?.updatePlayerForce(
+        drawingData.playerNumber,
+        (this.shaders?.getPlayerForce(drawingData.playerNumber) ?? 0) * 0.99,
+      );
+    } else {
+      const max = Math.max(0, drawingData.currentBeat - MAX_LOOKUP_RANGE);
+
+      const sungNotes = drawingData.currentPlayerNotes
+        .filter((note) => note.note.start + note.note.length >= max)
+        .filter((note) => getPlayerNoteDistance(note) === 0)
+        .reduce((curr, note) => curr + note.length - Math.max(0, max - note.start), 0);
 
-    const forcePercent = Math.min(Math.pow(sungNotes / MAX_LOOKUP_RANGE, 3), 0.99);
-    this.shaders?.updatePlayerForce(drawingData.playerNumber, forcePercent);
+      const lastPlayerNote = drawingData.currentPlayerNotes.at(-1);
+      const lastPlayerNoteEnd = (lastPlayerNote?.start ?? 0) + (lastPlayerNote?.length ?? 0);
+      const beatsSinceLastHit = drawingData.currentBeat - lastPlayerNoteEnd;
+
+      const forcePercent = Math.max(
+        Math.min(Math.pow((sungNotes - beatsSinceLastHit / 1.5) / MAX_LOOKUP_RANGE, 3), 0.99),
+        0,
+      );
+      this.shaders?.updatePlayerForce(drawingData.playerNumber, forcePercent);
+    }
   };
 
   private drawNotesToSing = (

diff --git a/src/Scenes/Game/Singing/GameOverlay/Drawing/Elements/debris.ts b/src/Scenes/Game/Singing/GameOverlay/Drawing/Elements/debris.ts
@@ -1,4 +1,3 @@
-import { captureMessage, setExtras } from '@sentry/react';
 import ray from './ray';
 
 export default function debris(
@@ -14,9 +13,6 @@ export default function debris(
 ) {
   if (width > 0) {
     ray(canvas, ctx, x, y, width, height, color, alpha);
-  } else {
-    setExtras({ x, y, width, height, angle, color, alpha });
-    captureMessage('Debris with negative width');
   }
 }
 

diff --git a/src/Scenes/Game/Singing/GameOverlay/Drawing/Shaders/Shaders.ts b/src/Scenes/Game/Singing/GameOverlay/Drawing/Shaders/Shaders.ts
@@ -6,6 +6,8 @@ export class Shaders {
   private plane: Plane;
   public constructor(private canvas: HTMLCanvasElement) {
     this.curtains = new Curtains({
+      pixelRatio: 1,
+      premultipliedAlpha: false,
       container: 'canvas',
     });
     const { gl } = this.curtains;
@@ -60,7 +62,10 @@ export class Shaders {
     this.plane.onRender(() => {
       // @ts-expect-error
       this.plane!.uniforms.time.value++;
+      // console.log(this.plane!.uniforms.p0force.value);
     });
+
+    this.canvas.style.visibility = 'hidden';
   }
 
   public updatePlayerCenter = (playerNumber: number, x: number, y: number) => {
@@ -71,6 +76,10 @@ export class Shaders {
     this.plane.uniforms[`p${playerNumber}force`].value = force;
   };
 
+  public getPlayerForce = (playerNumber: number) => {
+    return this.plane.uniforms[`p${playerNumber}force`].value as number;
+  };
+
   public cleanup = () => {
     this.plane?.remove();
     this.curtains?.dispose();

diff --git a/src/Scenes/Game/Singing/GameOverlay/Drawing/Shaders/shader.frag b/src/Scenes/Game/Singing/GameOverlay/Drawing/Shaders/shader.frag
@@ -28,7 +28,7 @@ void distort(vec2 center, float force, float zoom, float noise) {
     vec2 diff = (gl_FragCoord.xy - centerAbs.xy);
     float dist = length(diff);
 
-    vec4 newColor = texture2D(planeTexture, (centerAbs + (diff * zoom) + (noise * 50.0 * (1.0 - pow(zoom, 12.0)))) / uResolution);
+    vec4 newColor = texture2D(planeTexture, (centerAbs + (diff * zoom) + (noise * 20.0 * (1.0 - pow(zoom, 12.0)))) / uResolution);
     gl_FragColor = newColor;
 
 }

diff --git a/src/Scenes/Game/Singing/GameOverlay/GameOverlay.tsx b/src/Scenes/Game/Singing/GameOverlay/GameOverlay.tsx
@@ -108,13 +108,7 @@ function GameOverlay({
         </>
       )}
       <GameCanvas id="plane">
-        <canvas
-          ref={canvas}
-          width={overlayWidth}
-          height={overlayHeight}
-          data-sampler="planeTexture"
-          style={{ visibility: graphicLevel === 'high' ? 'hidden' : undefined }}
-        />
+        <canvas ref={canvas} width={overlayWidth} height={overlayHeight} data-sampler="planeTexture" />
       </GameCanvas>
       {effectsEnabled && (
         <>