Merge pull request #7 from timhagn/add-threejs-wormhole-animation

(bridge) Added experimental wormhole background
2021-02-17 08:20:54 -06:00 · 2021-02-17 08:20:54 -06:00 · 90c237d830
parent 752f342781 44517b4eb7
commit 90c237d830
9 changed files with 446 additions and 14 deletions
--- a/packages/bridge/package.json
+++ b/packages/bridge/package.json
@ -5,6 +5,7 @@
    "@ant-design/icons": "^4.4.0",
    "@babel/preset-typescript": "^7.12.13",
    "@craco/craco": "^5.7.0",
+    "@react-three/drei": "^3.8.0",
    "@oyster/common": "0.0.1",
    "@project-serum/serum": "^0.13.11",
    "@project-serum/sol-wallet-adapter": "^0.1.4",
@ -40,6 +41,8 @@
    "react-intl": "^5.10.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
+    "react-three-fiber": "^5.3.18",
+    "three": "^0.125.2",
    "typescript": "^4.1.3",
    "web3": "^1.3.0"
  },
--- a/packages/bridge/src/components/Layout/index.tsx
+++ b/packages/bridge/src/components/Layout/index.tsx
@ -5,7 +5,7 @@ import { Link, useLocation } from 'react-router-dom';

 import { LABELS } from '../../constants';
 import { contexts, AppBar } from '@oyster/common';
-
+import Wormhole from "../Wormhole";

 const { Header, Content } = Layout;
 const { useConnectionConfig } = contexts.Connection;
@ -23,17 +23,19 @@ export const AppLayout = React.memo((props: any) => {
    '';
  return (
    <div className="App wormhole-bg">
-      <Layout
-        title={LABELS.APP_TITLE}
-      >
-        {location.pathname !== '/' && <Header className="App-Bar">
-          <div className="app-title"><h2>WORMHOLE</h2></div>
+      <Wormhole>
+        <Layout title={LABELS.APP_TITLE}>
+          {location.pathname !== '/' && (
+            <Header className="App-Bar">
+              <div className="app-title">
+                <h2>WORMHOLE</h2>
+              </div>
              <AppBar />
-        </Header>}
-        <Content style={{ padding: '0 50px' }}>
-          {props.children}
-        </Content>
+            </Header>
+          )}
+          <Content style={{ padding: '0 50px' }}>{props.children}</Content>
        </Layout>
+      </Wormhole>
    </div>
  );
 });
--- a/packages/bridge/src/components/Wormhole/Camera.tsx
+++ b/packages/bridge/src/components/Wormhole/Camera.tsx
@ -0,0 +1,26 @@
+import * as React from "react";
+import { PerspectiveCamera } from "@react-three/drei";
+import { hasWindow } from "./Utils";
+
+/**
+ * Creates the perspective Camera for our WormholeCanvas.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const Camera = () => {
+  const cameraAspect = hasWindow ? window.innerWidth / window.innerHeight : 1;
+  return (
+    <PerspectiveCamera
+      // Registers it as the default camera system-wide (default=false)
+      makeDefault
+      fov={45}
+      aspect={cameraAspect}
+      near={1}
+      far={10000}
+      position={[0, 0, 100]}
+    />
+  );
+};
+
+export default Camera;
--- a/packages/bridge/src/components/Wormhole/Utils.ts
+++ b/packages/bridge/src/components/Wormhole/Utils.ts
@ -0,0 +1,78 @@
+import {
+  BufferAttribute,
+  BufferGeometry,
+  Color,
+  InterleavedBufferAttribute,
+  TorusGeometry,
+} from 'three';
+import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils';
+
+/**
+ * Tests if we are in a browser and have a window object.
+ * @type {boolean}
+ */
+export const hasWindow =
+  typeof window !== `undefined` && typeof window.document !== `undefined`;
+
+/**
+ * Takes a TorusGeometry and calculates positions & colors of individual particles.
+ *
+ * @param particleSize
+ * @returns {[]}
+ */
+export const calculateTorusProperties = (particleSize: number): any => {
+  let bufferGeometry: BufferGeometry = new TorusGeometry(60, 45, 160, 160);
+
+  // if normal and uv attributes are not removed,
+  // mergeVertices() can't consolidate identical vertices
+  // with different normal/uv data
+
+  bufferGeometry.deleteAttribute('normal');
+  bufferGeometry.deleteAttribute('uv');
+
+  bufferGeometry = BufferGeometryUtils.mergeVertices(bufferGeometry);
+
+  const positionAttribute:
+    | BufferAttribute
+    | InterleavedBufferAttribute = bufferGeometry.getAttribute('position');
+
+  const colors: number[] | undefined = [];
+  const sizes = [];
+
+  const color = new Color();
+
+  for (let i = 0, l = positionAttribute.count; i < l; i++) {
+    color.setHSL(0.01 + 0.1 * (i / l), 0.5, 1.0);
+    color.toArray(colors, i * 3);
+    sizes[i] = particleSize * 0.3;
+  }
+
+  return [positionAttribute, colors, sizes];
+};
+
+export const vertexShader = `
+      attribute float size;
+      attribute vec3 customColor;
+
+      varying vec3 vColor;
+
+      void main() {
+      	vColor = customColor;
+      	vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
+      	gl_PointSize = size * ( 300.0 / -mvPosition.z );
+      	gl_Position = projectionMatrix * mvPosition;
+      }
+`;
+
+export const fragmentShader = `
+      uniform vec3 color;
+      uniform sampler2D pointTexture;
+
+      varying vec3 vColor;
+
+      void main() {
+      	gl_FragColor = vec4( color * vColor, 1.0 );
+      	gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
+      	if ( gl_FragColor.a < ALPHATEST ) discard;
+      }
+`;
--- a/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx
+++ b/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx
@ -0,0 +1,23 @@
+import * as React from "react";
+import { Canvas } from "react-three-fiber";
+import Camera from "./Camera";
+import WormholeGeometry from "./WormholeGeometry";
+
+/**
+ * Three.js wormhole component.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const WormholeCanvas = () => {
+  return (
+    <Canvas>
+      <Camera />
+      <React.Suspense fallback={null}>
+        <WormholeGeometry />
+      </React.Suspense>
+    </Canvas>
+  );
+};
+
+export default WormholeCanvas;
--- a/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx
+++ b/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx
@ -0,0 +1,78 @@
+import * as React from "react";
+import { Color, Float32BufferAttribute } from "three";
+import type { Mesh, BufferGeometry } from "three";
+import { useTexture } from "@react-three/drei";
+import { useFrame, useUpdate } from "react-three-fiber";
+
+import {
+  calculateTorusProperties,
+  fragmentShader,
+  vertexShader,
+} from "./Utils";
+import disc from "./disc.png";
+
+// The individual "particle size".
+const PARTICLE_SIZE = 15;
+
+/**
+ * Three JS Point Geometry calculating points around a Torus.
+ *
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const WormholeGeometry = () => {
+  const mesh = React.useRef<Mesh>();
+  const pointTexture = useTexture(disc);
+
+  // The uniforms for the shaderMaterial.
+  const uniforms = React.useMemo(
+    () => ({
+      // Adapt the color of the WormholeCanvas here.
+      color: { value: new Color("gray") },
+      pointTexture: {
+        value: pointTexture,
+      },
+    }),
+    [pointTexture]
+  );
+
+  // The calculated torus properties.
+  const [positionAttribute, colors, sizes] = React.useMemo(
+    () => calculateTorusProperties(PARTICLE_SIZE),
+    []
+  );
+
+  // Rotate mesh around the y axis every frame.
+  useFrame(() => {
+    if (mesh.current) {
+      // x-Axis defines the "top" we're looking at, try e.g. 30.5
+      mesh.current.rotation.x = 30;
+      mesh.current.rotation.z += 0.001;
+    }
+  });
+
+  // Calculate the geometry.
+  const geometry = useUpdate((geo: BufferGeometry) => {
+    geo.setAttribute("position", positionAttribute);
+    geo.setAttribute("customColor", new Float32BufferAttribute(colors, 3));
+    geo.setAttribute("size", new Float32BufferAttribute(sizes, 1));
+  }, []);
+
+  return (
+    <points ref={mesh}>
+      <bufferGeometry ref={geometry} attach="geometry" />
+      <shaderMaterial
+        attach="material"
+        uniforms={uniforms}
+        fragmentShader={fragmentShader}
+        vertexShader={vertexShader}
+        // The lower this value, the "harder" the discs' borders.
+        alphaTest={0.9}
+        // blending={THREE.AdditiveBlending}
+        // transparent
+      />
+    </points>
+  );
+};
+
+export default WormholeGeometry;
--- a/packages/bridge/src/components/Wormhole/disc.png
+++ b/packages/bridge/src/components/Wormhole/disc.png
--- a/packages/bridge/src/components/Wormhole/index.tsx
+++ b/packages/bridge/src/components/Wormhole/index.tsx
@ -0,0 +1,18 @@
+import * as React from "react";
+import WormholeCanvas from "./WormholeCanvas";
+import "./wormhole.css";
+
+/**
+ * Wormhole encapsulation component.
+ *
+ * @param children  {React.ReactNode}   Elements to show above the Wormhole.
+ * @constructor
+ */
+const Wormhole = ({ children }: { children: React.ReactNode }) => (
+  <>
+    <WormholeCanvas />
+    <div className="wormhole-overlay">{children}</div>
+  </>
+);
+
+export default Wormhole;
--- a/yarn.lock
+++ b/yarn.lock
@ -11,6 +11,11 @@
    deep-eql "^0.1.3"
    keypather "^1.10.2"

+"@alloc/types@^1.2.1":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@alloc/types/-/types-1.3.0.tgz#904245b8d3260a4b7d8a801c12501968f64fac08"
+  integrity sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g==
+
 "@ant-design/colors@^6.0.0":
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-6.0.0.tgz#9b9366257cffcc47db42b9d0203bb592c13c0298"
@ -2777,6 +2782,64 @@
  resolved "https://registry.yarnpkg.com/@qixian.cs/path-to-regexp/-/path-to-regexp-6.1.0.tgz#6b84ad01596332aba95fa29d2e70104698cd5c45"
  integrity sha512-2jIiLiVZB1jnY7IIRQKtoV8Gnr7XIhk4mC88ONGunZE3hYt5IHUG4BE/6+JiTBjjEWQLBeWnZB8hGpppkufiVw==

+"@react-spring/animated@9.0.0-rc.3":
+  version "9.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/animated/-/animated-9.0.0-rc.3.tgz#e792cb76aacecfc78db2be6020ac11ce96503eb5"
+  integrity sha512-dAvgtKhkYpzzr+EkmZ4ZuJ5CujxCW0LaT109DvO/2MQNk3EWIxcgl+ik4tSulSbgau1GN8RlkRKyDp0wISdQ3Q==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "@react-spring/shared" "9.0.0-rc.3"
+    react-layout-effect "^1.0.1"
+
+"@react-spring/core@9.0.0-rc.3":
+  version "9.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/core/-/core-9.0.0-rc.3.tgz#c8e697573936c525bd0f6ca0c0869f75c86e8a83"
+  integrity sha512-3OzsVFxpfMJNkkQj8TwAH3NhUAX76AXu6WkslQF4EgBeEoG5eY3m+VvM9RsAsGWDuBKpscZ/wBpFt5Ih6KdGHA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "@react-spring/animated" "9.0.0-rc.3"
+    "@react-spring/shared" "9.0.0-rc.3"
+    react-layout-effect "^1.0.1"
+    use-memo-one "^1.1.0"
+
+"@react-spring/shared@9.0.0-rc.3":
+  version "9.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/shared/-/shared-9.0.0-rc.3.tgz#3f4c9d90accc20fef51a283a7806d78390b84161"
+  integrity sha512-dd50TxwwMWd+dSB0InjndUN9w17cbnMCPy+0sag6zRxxKIo7eOyWSliOtLKxvufgmdC8Prm4M3GT5dmB1yxKEQ==
+  dependencies:
+    "@alloc/types" "^1.2.1"
+    "@babel/runtime" "^7.3.1"
+    fluids "^0.1.6"
+    tslib "^1.11.1"
+
+"@react-spring/web@^9.0.0-rc.3":
+  version "9.0.0-rc.3"
+  resolved "https://registry.yarnpkg.com/@react-spring/web/-/web-9.0.0-rc.3.tgz#da977382f91d9af4c400e4aa7dc37d3db07b87e0"
+  integrity sha512-rEvipblmihiz8+Eo01zDp5dqWn6XfYk8q2rlN9c18YIOL4o6nuY/VplDoocUMHYfH4liurpO4o1QudKOO1nAiQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "@react-spring/animated" "9.0.0-rc.3"
+    "@react-spring/core" "9.0.0-rc.3"
+    "@react-spring/shared" "9.0.0-rc.3"
+
+"@react-three/drei@^3.8.0":
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/@react-three/drei/-/drei-3.8.0.tgz#fe57e21b29cbf489d694a2ed7964466762a8da53"
+  integrity sha512-pMNr59xCXhGjNGOR9SJKdKKkrEEMI7znHDT3/vUIBfVLZ7bF0LaUtn3YERFqtaL7Uy41ttjvXICXWQhzcFwoWQ==
+  dependencies:
+    "@babel/runtime" "^7.11.2"
+    "@react-spring/web" "^9.0.0-rc.3"
+    blob-polyfill "^4.0.20200601"
+    detect-gpu "^3.0.0"
+    glsl-noise "^0.0.0"
+    lodash.omit "^4.5.0"
+    lodash.pick "^4.4.0"
+    react-merge-refs "^1.0.0"
+    stats.js "^0.17.0"
+    troika-three-text "^0.38.1"
+    utility-types "^3.10.0"
+    zustand "^3.0.3"
+
 "@sheerun/mutationobserver-shim@^0.3.2":
  version "0.3.3"
  resolved "https://registry.yarnpkg.com/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz#5405ee8e444ed212db44e79351f0c70a582aae25"
@ -4580,6 +4643,11 @@ blakejs@^1.1.0:
  resolved "https://registry.yarnpkg.com/blakejs/-/blakejs-1.1.0.tgz#69df92ef953aa88ca51a32df6ab1c54a155fc7a5"
  integrity sha1-ad+S75U6qIylGjLfarHFShVfx6U=

+blob-polyfill@^4.0.20200601:
+  version "4.0.20200601"
+  resolved "https://registry.yarnpkg.com/blob-polyfill/-/blob-polyfill-4.0.20200601.tgz#16430e9e50d63e122c6aac18b31f5f0bc8c0bf92"
+  integrity sha512-1jB6WOIp6IDxNyng5+9A8g/f0uiphib2ELCN+XAnlssinsW8s1k4VYG9b1TxIUd3pdm9RJSLQuBh6iohYmD4hA==
+
 bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
  version "3.7.2"
  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
@ -6285,6 +6353,11 @@ dateformat@^3.0.0:
  resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
  integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==

+debounce@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
+  integrity sha512-mYtLl1xfZLi1m4RtQYlZgJUNQjl4ZxVnHzIR8nLLgi4q1YT8o/WM+MK/f8yfcc9s5Ir5zRaPZyZU6xs1Syoocg==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
  version "2.6.9"
  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@ -6474,6 +6547,13 @@ destroy@~1.0.4:
  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=

+detect-gpu@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/detect-gpu/-/detect-gpu-3.0.0.tgz#d1ced721581c27fec29e24aee8c3eadf45450b5a"
+  integrity sha512-D/uxvKWDqhy7XoHHdC7By1Bzxuv0t8OwccsiW1DbRPsqOr0rTAjxdO//bSck6QS54jc9QHbaQoRczAy5KbCOCQ==
+  dependencies:
+    webgl-constants "^1.1.1"
+
 detect-indent@^5.0.0:
  version "5.0.0"
  resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-5.0.0.tgz#3871cc0a6a002e8c3e5b3cf7f336264675f06b9d"
@ -8078,6 +8158,11 @@ flatten@^1.0.2:
  resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b"
  integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg==

+fluids@^0.1.6:
+  version "0.1.10"
+  resolved "https://registry.yarnpkg.com/fluids/-/fluids-0.1.10.tgz#0517e7a53dbce1db011dddec301b75178518ba0e"
+  integrity sha512-66FLmUJOrkvEHIsRVeM+88MG0bjd2TOBuR0BkM0hzyCb68W9drzqeX/AHDNp3ouZALQN7JvBvmKdVhHI+PZsdg==
+
 flush-write-stream@^1.0.0:
  version "1.1.1"
  resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@ -8579,6 +8664,11 @@ globby@^9.2.0:
    pify "^4.0.1"
    slash "^2.0.0"

+glsl-noise@^0.0.0:
+  version "0.0.0"
+  resolved "https://registry.yarnpkg.com/glsl-noise/-/glsl-noise-0.0.0.tgz#367745f3a33382c0eeec4cb54b7e99cfc1d7670b"
+  integrity sha1-NndF86MzgsDu7Ey1S36Zz8HXZws=
+
 got@9.6.0:
  version "9.6.0"
  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@ -10987,7 +11077,12 @@ lodash.merge@^4.4.0:
  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==

-lodash.pick@^4.2.1:
+lodash.omit@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
+  integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
+
+lodash.pick@^4.2.1, lodash.pick@^4.4.0:
  version "4.4.0"
  resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"
  integrity sha1-UvBWEP/53tQiYRRB7R/BI6AwAbM=
@ -14373,6 +14468,25 @@ react-is@^17.0.1:
  resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
  integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==

+react-layout-effect@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/react-layout-effect/-/react-layout-effect-1.0.5.tgz#0dc4e24452aee5de66c93c166f0ec512dfb1be80"
+  integrity sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA==
+
+react-merge-refs@^1.0.0, react-merge-refs@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/react-merge-refs/-/react-merge-refs-1.1.0.tgz#73d88b892c6c68cbb7a66e0800faa374f4c38b06"
+  integrity sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==
+
+react-reconciler@0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.26.1.tgz#860952dd359fd870f94895c254271e3a9de3b2d6"
+  integrity sha512-6E/CvH9zcDmHjhiNJlP0qJ8+3ufnY2b5RWs774Uy8XKWN0l6qfnlkz0XnDacxqj2rbJdq76w9dlFXjPPOQrmqA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.1"
+
 react-router-dom@^5.2.0:
  version "5.2.0"
  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@ -14462,6 +14576,28 @@ react-scripts@3.4.3:
  optionalDependencies:
    fsevents "2.1.2"

+react-three-fiber@^5.3.18:
+  version "5.3.18"
+  resolved "https://registry.yarnpkg.com/react-three-fiber/-/react-three-fiber-5.3.18.tgz#50a37d344b631bc932ec0b22ddc8e678e5c9590b"
+  integrity sha512-5OHh2/Dq/V+5CeFSthVFADoN9S0Y7P5TMRtVg57eJSsJsL5BEO/rLhuS0xb7lHJn674jCdLnAAn3nMcsNU0HXA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    react-merge-refs "^1.1.0"
+    react-reconciler "0.26.1"
+    react-use-measure "^2.0.3"
+    resize-observer-polyfill "^1.5.1"
+    scheduler "0.20.1"
+    tiny-emitter "^2.1.0"
+    use-asset "^1.0.2"
+    utility-types "^3.10.0"
+
+react-use-measure@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/react-use-measure/-/react-use-measure-2.0.3.tgz#7b56ae3ca19ccf62326933678625a8ff6b3f90a3"
+  integrity sha512-57O8Os9MbgFEHuOHOXNdPmBHhXjCBIwtB3YxyrM/MgaX44a1o97Mu9YqiOA6cAF8kXIw4fO3XK0r2Taa4SqaqQ==
+  dependencies:
+    debounce "^1.2.0"
+
 react@16.13.1:
  version "16.13.1"
  resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
@ -15194,6 +15330,14 @@ saxes@^3.1.9:
  dependencies:
    xmlchars "^2.1.1"

+scheduler@0.20.1, scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 scheduler@^0.19.1:
  version "0.19.1"
  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@ -15834,6 +15978,11 @@ static-extend@^0.1.1:
    define-property "^0.2.5"
    object-copy "^0.1.0"

+stats.js@^0.17.0:
+  version "0.17.0"
+  resolved "https://registry.yarnpkg.com/stats.js/-/stats.js-0.17.0.tgz#b1c3dc46d94498b578b7fd3985b81ace7131cc7d"
+  integrity sha1-scPcRtlEmLV4t/05hbgaznExzH0=
+
 "statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
  version "1.5.0"
  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
@ -16338,6 +16487,11 @@ thenify-all@^1.0.0:
  dependencies:
    any-promise "^1.0.0"

+three@^0.125.2:
+  version "0.125.2"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.125.2.tgz#dcba12749a2eb41522e15212b919cd3fbf729b12"
+  integrity sha512-7rIRO23jVKWcAPFdW/HREU2NZMGWPBZ4XwEMt0Ak0jwLUKVJhcKM55eCBWyGZq/KiQbeo1IeuAoo/9l2dzhTXA==
+
 throat@^4.0.0:
  version "4.1.0"
  resolved "https://registry.yarnpkg.com/throat/-/throat-4.1.0.tgz#89037cbc92c56ab18926e6ba4cbb200e15672a6a"
@ -16393,6 +16547,11 @@ timsort@^0.3.0:
  resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
  integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=

+tiny-emitter@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tiny-emitter/-/tiny-emitter-2.1.0.tgz#1d1a56edfc51c43e863cbb5382a72330e3555423"
+  integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
+
 tiny-invariant@^1.0.2, tiny-invariant@^1.0.6:
  version "1.1.0"
  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
@ -16514,6 +16673,24 @@ trim-repeated@^1.0.0:
  dependencies:
    escape-string-regexp "^1.0.2"

+troika-three-text@^0.38.1:
+  version "0.38.1"
+  resolved "https://registry.yarnpkg.com/troika-three-text/-/troika-three-text-0.38.1.tgz#c0661d78485831b75008e518b4ba3f8ac2faa0c5"
+  integrity sha512-nf4zLsdFc+u1P7UDaVvODclmtmYLXnRs9w43ZC0iiPTZT+iequ7+Vmbd0s3DOYhgEzIeACDXBdX9bSW/PRjXhA==
+  dependencies:
+    troika-three-utils "^0.38.1"
+    troika-worker-utils "^0.38.1"
+
+troika-three-utils@^0.38.1:
+  version "0.38.1"
+  resolved "https://registry.yarnpkg.com/troika-three-utils/-/troika-three-utils-0.38.1.tgz#99c91cca4fbf215adf5782382962ca9c969b052f"
+  integrity sha512-uJM1K219B/q3q7SNnWzthSWHzE80JGNPqP4yBKPGqZ0RaXLhzTBtFuKvSQlVYYrqb/RK21iCOf13vtGyPhwM2A==
+
+troika-worker-utils@^0.38.1:
+  version "0.38.1"
+  resolved "https://registry.yarnpkg.com/troika-worker-utils/-/troika-worker-utils-0.38.1.tgz#e4e928691390a315cd22877a38ffabf1a118a0a0"
+  integrity sha512-Ish/wxrTG2fzody/E7cAjluTHbM7bn5hGmqOCUr33Ig5wleTj5B6miVOlxc6tUskf1ZXhC9Z35d0zyHzWJrwww==
+
 ts-jest@^24.0.0:
  version "24.3.0"
  resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-24.3.0.tgz#b97814e3eab359ea840a1ac112deae68aa440869"
@ -16552,7 +16729,7 @@ ts-pnp@^1.1.6:
  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==

-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.11.1, tslib@^1.8.1, tslib@^1.9.0:
  version "1.14.1"
  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@ -16856,6 +17033,13 @@ url@^0.11.0:
    punycode "1.3.2"
    querystring "0.2.0"

+use-asset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/use-asset/-/use-asset-1.0.2.tgz#d98a506ba480d113639de60631f89907794ead84"
+  integrity sha512-ewqcm1+SmRIpIhanbP2Kdt03u7IQfxGixi3dq2AP90GK5J0fFXBeSp4hO43tx3HG5AXvh6U4hQ00x4JXr5Dhiw==
+  dependencies:
+    fast-deep-equal "^3.1.3"
+
 use-json-comparison@^1.0.3:
  version "1.0.5"
  resolved "https://registry.yarnpkg.com/use-json-comparison/-/use-json-comparison-1.0.5.tgz#d41a72d65fcf4cf72acc85c8f3980e2173809d63"
@ -16866,6 +17050,11 @@ use-media-antd-query@^1.0.3:
  resolved "https://registry.yarnpkg.com/use-media-antd-query/-/use-media-antd-query-1.0.6.tgz#2395fc52a9bc810fa7360bff43eb84609eee1b2f"
  integrity sha512-uEP116w7LH2z4MatYM0UMKD0lI4awPtXh2WrbeUfG5mCS1UD9D7lZVz9QsRThTIButxNnx9LjPSBEBD8G3Z5BA==

+use-memo-one@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20"
+  integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ==
+
 use-url-search-params@^2.3.13:
  version "2.3.13"
  resolved "https://registry.yarnpkg.com/use-url-search-params/-/use-url-search-params-2.3.13.tgz#016009c8879fc7f631a58cdea572c5ded821bf35"
@ -16960,6 +17149,11 @@ utila@~0.4:
  resolved "https://registry.yarnpkg.com/utila/-/utila-0.4.0.tgz#8a16a05d445657a3aea5eecc5b12a4fa5379772c"
  integrity sha1-ihagXURWV6Oupe7MWxKk+lN5dyw=

+utility-types@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/utility-types/-/utility-types-3.10.0.tgz#ea4148f9a741015f05ed74fd615e1d20e6bed82b"
+  integrity sha512-O11mqxmi7wMKCo6HKFt5AhO4BwY3VV68YU07tgxfz8zJTIxr4BpsezN49Ffwy9j3ZpwwJp4fkRwjRzq3uWE6Rg==
+
 utils-merge@1.0.1:
  version "1.0.1"
  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
@ -17374,6 +17568,11 @@ web3@^1.3.0:
    web3-shh "1.3.4"
    web3-utils "1.3.4"

+webgl-constants@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/webgl-constants/-/webgl-constants-1.1.1.tgz#f9633ee87fea56647a60b9ce735cbdfb891c6855"
+  integrity sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg==
+
 webidl-conversions@^4.0.2:
  version "4.0.2"
  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@ -18062,3 +18261,8 @@ zrender@4.3.2:
  version "4.3.2"
  resolved "https://registry.yarnpkg.com/zrender/-/zrender-4.3.2.tgz#ec7432f9415c82c73584b6b7b8c47e1b016209c6"
  integrity sha512-bIusJLS8c4DkIcdiK+s13HiQ/zjQQVgpNohtd8d94Y2DnJqgM1yjh/jpDb8DoL6hd7r8Awagw8e3qK/oLaWr3g==
+
+zustand@^3.0.3:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-3.3.1.tgz#de5c4b51112b84e0f819d8b3f336fbfbc087d758"
+  integrity sha512-o0rgrBsi29nCkPHdhtkAHisCIlmRUoXOV+1AmDMeCgkGG0i5edFSpGU0KiZYBvFmBYycnck4Z07JsLYDjSET9g==