custom shaders support webgl1 now, deleted swipe input handlers.

2024-10-22 23:19:06 +00:00 · 2021-03-21 19:11:42 +04:00 · 2021-03-21 19:11:42 +04:00 · a2ebca2e53
commit a2ebca2e53
parent 1ae8082076
8 changed files with 37 additions and 212 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -12474,11 +12474,6 @@
        "utility-types": "^3.10.0"
      }
    },
-    "react-use-gesture": {
-      "version": "9.1.2",
-      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.2.tgz",
-      "integrity": "sha512-C+h7l/S3TooZ11MF65Iqmnh59i+qWnnbwOlAxHW47SbSmEsFUyxQnmRh/Qq9DOKZLsxC4uZjWpoinMP5nSG9Xw=="
-    },
    "react-use-measure": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -18,7 +18,6 @@
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.0",
    "react-three-fiber": "^4.2.20",
-    "react-use-gesture": "^9.0.4",
    "three": "^0.125.0",
    "three-plain-animator": "^1.0.6",
    "typescript": "^3.7.5",
--- a/src/components/InputHandler.tsx
+++ b/src/components/InputHandler.tsx
@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { useCallback, useEffect, useRef, memo } from "react";
 import {
  getBootSceneContext,
  getEndSceneContext,
@ -15,30 +15,12 @@ import handleBootSceneInput from "../core/input-handlers/handleBootSceneInput";
 import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
 import handleEvent from "../core/handleEvent";
 import { GameEvent } from "../types/types";
-import { MouseEvent, useLoader } from "react-three-fiber";
-import circleButton from "../static/sprites/controller/circle.png";
-import triangleButton from "../static/sprites/controller/triangle.png";
-import crossButton from "../static/sprites/controller/cross.png";
-import startButton from "../static/sprites/controller/start.png";
-import l2Button from "../static/sprites/controller/l2.png";
-import * as THREE from "three";
-import { useGesture } from "react-use-gesture";
 import IdleManager from "./IdleManager";

-type InputHandlerProps = {
-  isMobile: boolean;
-};
-
-const InputHandler = (props: InputHandlerProps) => {
+const InputHandler = memo(() => {
  const scene = useStore((state) => state.currentScene);
  const inputCooldown = useStore((state) => state.inputCooldown);

-  const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
-  const crossButtonTex = useLoader(THREE.TextureLoader, crossButton);
-  const triangleButtonTex = useLoader(THREE.TextureLoader, triangleButton);
-  const startButtonTex = useLoader(THREE.TextureLoader, startButton);
-  const l2ButtonTex = useLoader(THREE.TextureLoader, l2Button);
-
  const timeSinceLastKeyPress = useRef(-1);

  const lainIdleTimerRef = useRef(-1);
@ -115,21 +97,6 @@ const InputHandler = (props: InputHandlerProps) => {
    [inputCooldown, scene]
  );

-  const bind = useGesture(
-    {
-      onDragEnd: ({ axis, direction: xy }) => {
-        if (axis === "x") {
-          if (xy[0] > 0) handleKeyPress("RIGHT");
-          else handleKeyPress("LEFT");
-        } else {
-          if (xy[1] > 0) handleKeyPress("DOWN");
-          else handleKeyPress("UP");
-        }
-      },
-    },
-    { drag: { delay: true } }
-  );
-
  const firedRef = useRef(false);

  const handleKeyBoardEvent = useCallback(
@ -144,13 +111,6 @@ const InputHandler = (props: InputHandlerProps) => {
    [handleKeyPress]
  );

-  const handleVirtualButtonPress = useCallback(
-    (event: MouseEvent) => {
-      handleKeyPress(event.object.name);
-    },
-    [handleKeyPress]
-  );
-
  useEffect(() => {
    window.addEventListener("keydown", handleKeyBoardEvent);

@ -167,96 +127,11 @@ const InputHandler = (props: InputHandlerProps) => {
  }, [handleKeyBoardEvent]);

  return (
-    <>
-      {props.isMobile && (
-        <>
-          <sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
-            <spriteMaterial attach="material" opacity={0} depthTest={false} />
-          </sprite>
-
-          <sprite
-            scale={[1.5, 1.5, 0]}
-            position={[-4, 3, 0]}
-            renderOrder={99999}
-            onClick={handleVirtualButtonPress}
-            name={"L2"}
-          >
-            <spriteMaterial
-              attach="material"
-              map={l2ButtonTex}
-              depthTest={false}
-              opacity={0.8}
-            />
-          </sprite>
-
-          <sprite
-            scale={[1.5, 1.5, 0]}
-            position={[4, 3, 0]}
-            renderOrder={99999}
-            onClick={handleVirtualButtonPress}
-            name={"START"}
-          >
-            <spriteMaterial
-              attach="material"
-              map={startButtonTex}
-              depthTest={false}
-              opacity={0.8}
-            />
-          </sprite>
-
-          <group
-            scale={[0.8, 0.8, 0]}
-            position={[3.5, -2.3, 0]}
-            renderOrder={9999}
-          >
-            <sprite
-              scale={[1.5, 1.5, 0]}
-              position={[1, 0, 0]}
-              onClick={handleVirtualButtonPress}
-              name={"CIRCLE"}
-            >
-              <spriteMaterial
-                attach="material"
-                map={circleButtonTex}
-                depthTest={false}
-                opacity={0.8}
-              />
-            </sprite>
-            <sprite
-              scale={[1.5, 1.5, 0]}
-              position={[0, -1, 0]}
-              onClick={handleVirtualButtonPress}
-              name={"CROSS"}
-            >
-              <spriteMaterial
-                attach="material"
-                map={crossButtonTex}
-                depthTest={false}
-                opacity={0.8}
-              />
-            </sprite>
-            <sprite
-              scale={[1.5, 1.5, 0]}
-              position={[0, 1, 0]}
-              onClick={handleVirtualButtonPress}
-              name={"TRIANGLE"}
-            >
-              <spriteMaterial
-                attach="material"
-                map={triangleButtonTex}
-                depthTest={false}
-                opacity={0.8}
-              />
-            </sprite>
-          </group>
-        </>
-      )}
-      <IdleManager
-        lainIdleTimerRef={lainIdleTimerRef}
-        idleSceneTimerRef={idleSceneTimerRef}
-      />
-    </>
+    <IdleManager
+      lainIdleTimerRef={lainIdleTimerRef}
+      idleSceneTimerRef={idleSceneTimerRef}
+    />
  );
-};
+});

 export default InputHandler;
--- a/src/components/MainScene/MiddleRing/MiddleRing.tsx
+++ b/src/components/MainScene/MiddleRing/MiddleRing.tsx
@ -124,7 +124,7 @@ const MiddleRing = () => {
      vUv = uv;

      // offset of the wobble when jumping
-      const float angleOffset = -0.8f;
+      const float angleOffset = -0.8;
      
      // compute world position of the vertex
      // (ie, position after model rotation and translation)
--- a/src/components/MainScene/Site/GrayRing.tsx
+++ b/src/components/MainScene/Site/GrayRing.tsx
@ -78,7 +78,7 @@ const GrayRing = memo((props: GrayRingProps) => {
    vec4 color(vec2 vUv, int quadnum, bool textureexists, int thinperiod, int quadlen, float step) {
      if (!textureexists) {
        return vec4(0.259,0.259,0.322, 1);
-      } else if (uint(quadnum) % uint(2) == uint(1)) {
+      } else if (mod(float(quadnum), 2.0) == 1.0) {
        return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
          // return vec4(tolocal(vUv.x, quadlen-thinperiod, step), 0, 0, 1);
      } else if (quadnum == 0) {
@ -118,18 +118,18 @@ const GrayRing = memo((props: GrayRingProps) => {
      int quadlen = int(step)/4;
      
      // segment within circle's quad
-      uint quadel = uint(segment) % uint(quadlen);
+      int quadel = int(mod(float(segment), float(quadlen)));
      
      // which quad
-      int quadnum = int(uint(segment) / uint(quadlen));
+      int quadnum = int(int(segment) / int(quadlen));
     
     // how big thin part is
     int thinperiod = 8;
     
-      if (quadel < uint(thinperiod) && isheight(vUv.y, thin)) {
+      if (quadel < thinperiod && isheight(vUv.y, thin)) {
          // thin line
          gl_FragColor = color(vUv, quadnum, false, thinperiod, quadlen, step) * addedLights;
-      } else if (quadel == uint(thinperiod)) {
+      } else if (quadel == thinperiod) {
          // slope up
          float dist = tolocal(vUv.x, 1, step);
          if (vUv.y > slope(1.0-dist, thin) && vUv.y < 1.0-slope(1.0-dist, thin)) {
@ -137,7 +137,7 @@ const GrayRing = memo((props: GrayRingProps) => {
          } else {
              gl_FragColor = vec4(0, 0, 0, 0);
          }
-      } else if (quadel == uint(quadlen-1)) {
+      } else if (quadel == quadlen-1) {
          // slope down
          float dist = tolocal(vUv.x, 1, step);
          if (vUv.y > slope(dist, thin) && vUv.y < 1.0-slope(dist, thin)) {
@ -145,7 +145,7 @@ const GrayRing = memo((props: GrayRingProps) => {
          } else {
              gl_FragColor = vec4(0, 0, 0, 0);
          }
-      } else if (quadel > uint(thinperiod)) {
+      } else if (quadel > thinperiod) {
            gl_FragColor = color(vUv, quadnum, true, thinperiod, quadlen, step) * addedLights;
      } else {
          // transparent
--- a/src/components/MainScene/Site/PurpleRing.tsx
+++ b/src/components/MainScene/Site/PurpleRing.tsx
@ -146,18 +146,18 @@ const PurpleRing = memo((props: PurpleRingProps) => {
      float thick = 1.0;
      float slopefactor = 2.0;
      
-      uint halfc = uint(step)/uint(2);
+      int halfc = int(step)/2;
      
      // segment within circle
-      uint segment = uint(floor(vUv.x * step));
-      uint thinperiod = halfc-uint(16);
+      int segment = int(floor(vUv.x * step));
+      int thinperiod = halfc-16;
     
-      uint halfel = segment % halfc;
+      int halfel = int(mod(float(segment), float(halfc)));
     
-      if (halfel < thinperiod-uint(1) && istop(vUv.y, thin)) {
+      if (halfel < thinperiod-1 && istop(vUv.y, thin)) {
          // thin line top
          gl_FragColor = color(vUv, step, false) * addedLights;
-      } else if (halfel == thinperiod - uint(1)) {
+      } else if (halfel == thinperiod - 1) {
          // thin line and corner
          float dist = tolocal(vUv.x, 1, step);
          float val = 1.0-slope(1.0-dist, thin);
@ -166,7 +166,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
          } else {
              gl_FragColor = vec4(0, 0, 0, 0);
          }
-      } else if (halfel > thinperiod-uint(2) && halfel < thinperiod+uint(1)) {
+      } else if (halfel > thinperiod-2 && halfel < thinperiod+1) {
          // slope down
          float dist = tolocal(vUv.x, 1, step);
          float val = 1.0-slope(dist, thin);
@ -175,10 +175,10 @@ const PurpleRing = memo((props: PurpleRingProps) => {
          } else {
              gl_FragColor = vec4(0, 0, 0, 0);
          }
-      } else if (halfel > thinperiod && halfel < thinperiod+uint(4) && isbottom(vUv.y, thin)) {
+      } else if (halfel > thinperiod && halfel < thinperiod+4 && isbottom(vUv.y, thin)) {
          // thin line bottom
          gl_FragColor = vec4(0.325,0.325,0.698, 1) * addedLights;
-      } else if (halfel > thinperiod + uint(3) && halfel < thinperiod + uint(6)) {
+      } else if (halfel > thinperiod + 3 && halfel < thinperiod + 6) {
          // slope up
          float dist = tolocal(vUv.x, 2, step);
          float val = 1.0-slope(1.0-dist, thin);
@ -187,18 +187,18 @@ const PurpleRing = memo((props: PurpleRingProps) => {
          } else {
              gl_FragColor = vec4(0, 0, 0, 0);
          }        
-      } else if (halfel > thinperiod + uint(5) && halfel < thinperiod+uint(12)) {
+      } else if (halfel > thinperiod + 5 && halfel < thinperiod+12) {
          // thick part
          gl_FragColor = color(vUv, step, true) * addedLights;
-      } else if (halfel == thinperiod + uint(12)){
+      } else if (halfel == thinperiod + 12){
          // level first char texture
          float dist = 1.0-tolocal(0.5 - mod(vUv.x-siteLevelFirstCharacterOffset +0.004, 0.5), 11, step);
          gl_FragColor = texture2D(siteLevels,  vec2(dist, vUv.y)) * addedLights;
-     } else if (halfel == thinperiod + uint(13)){
+     } else if (halfel == thinperiod + 13){
          // level second char texture
          float dist = 1.0-tolocal(0.5 - mod(vUv.x-siteLevelSecondCharacterOffset, 0.5), 11, step);
          gl_FragColor = texture2D(siteLevels,  vec2(dist, vUv.y)) * addedLights;
-      } else if (halfel > thinperiod + uint(13) && halfel < thinperiod + uint(16)) {
+      } else if (halfel > thinperiod + 13 && halfel < thinperiod + 16) {
          // slope up
          float dist = tolocal(vUv.x, 2, step);
          float val = slope(dist, thin);
--- a/src/dom-components/Game.tsx
+++ b/src/dom-components/Game.tsx
@ -16,7 +16,6 @@ import PolytanScene from "../scenes/PolytanScene";
 import TaKScene from "../scenes/TaKScene";
 import ChangeDiscScene from "../scenes/ChangeDiscScene";
 import EndScene from "../scenes/EndScene";
-import mobileAndTabletCheck from "../utils/mobileAndTabletCheck";
 import { Canvas } from "react-three-fiber";
 import Preloader from "../components/Preloader";
 import InputHandler from "../components/InputHandler";
@ -49,8 +48,6 @@ const Game = () => {
  const [width, setWidth] = useState((window.screen.height / 1.8) * 1.3);
  const [height, setHeight] = useState(window.screen.height / 1.8);

-  const [isMobile, setIsMobile] = useState(false);
-
  const handleGameResize = useCallback((event) => {
    switch (event.key) {
      case "k":
@ -63,26 +60,13 @@ const Game = () => {
    }
  }, []);

-  const handleScreenResize = useCallback(() => {
-    const isMobile = mobileAndTabletCheck();
-    if (isMobile) {
-      const h = window.screen.height / 1.05;
-      setHeight(h);
-      setWidth(h * 1.3);
-      setIsMobile(true);
-    }
-  }, []);
-
  useEffect(() => {
-    if (!isMobile) window.addEventListener("keydown", handleGameResize);
-
-    window.addEventListener("resize", handleScreenResize);
+    window.addEventListener("keydown", handleGameResize);

    return () => {
      window.removeEventListener("keydown", handleGameResize);
-      window.removeEventListener("resize", handleScreenResize);
    };
-  }, [handleGameResize, handleScreenResize, isMobile]);
+  }, [handleGameResize]);

  return (
    <div
@ -98,7 +82,7 @@ const Game = () => {
        <Suspense fallback={null}>
          <Preloader />
          {dispatchScene[currentScene as keyof typeof dispatchScene]}
-          <InputHandler isMobile={isMobile} />
+          <InputHandler />
        </Suspense>
      </Canvas>
      {["media", "idle_media", "tak", "end"].includes(currentScene) && (
--- a/src/dom-components/Notes.tsx
+++ b/src/dom-components/Notes.tsx
@ -43,7 +43,12 @@ const Notes = () => {
                . If it's not supported, this is most likely due to your
                browser. Try another one, preferably chromium/firefox-based,
                keeping in mind the notes written inside Performance. This could
-                also be caused by your drivers being outdated.
+                also be caused by your drivers being outdated. <br />
+                <br />
+                The game still runs on a setup with WebGL1, but some textures
+                will look extremely low-quality. This is because WebGL1 can't
+                generate mipmaps with non-POT (power of two) textures, so it has
+                to downscale each texture to be POT.
              </p>
            </td>
          </tr>
@ -144,39 +149,6 @@ const Notes = () => {
            </td>
          </tr>

-          <tr>
-            <td>
-              <p>Mobile/Tablet Controls</p>
-            </td>
-            <td>
-              <table className="control-table">
-                <tbody>
-                  <tr>
-                    <td>Swipe Down</td>
-                    <td>↓</td>
-                  </tr>
-                  <tr>
-                    <td>Swipe Left</td>
-                    <td>←</td>
-                  </tr>
-                  <tr>
-                    <td>Swipe Up</td>
-                    <td>↑</td>
-                  </tr>
-                  <tr>
-                    <td>Swipe Right</td>
-                    <td>→</td>
-                  </tr>
-                </tbody>
-              </table>
-              <p>
-                The rest of the buttons are layed out on the game screen itself.
-                <br />
-                Also, please rotate the phone horizontally when playing, I don't
-                want feature creep because of psychopaths.
-              </p>
-            </td>
-          </tr>
          <tr>
            <td>
              <p>Saving Progress</p>