From d1b1c8f3737b456fe5bbd6b77aaa3e0c27e5cc11 Mon Sep 17 00:00:00 2001 From: Tim Hagn Date: Tue, 16 Feb 2021 04:59:39 +0100 Subject: [PATCH 1/2] (bridge) add experimental wormhole background --- packages/bridge/package.json | 3 + .../bridge/src/components/Layout/index.tsx | 26 ++- .../bridge/src/components/Wormhole/Camera.tsx | 26 +++ .../bridge/src/components/Wormhole/Utils.ts | 80 +++++++ .../components/Wormhole/WormholeCanvas.tsx | 23 ++ .../components/Wormhole/WormholeGeometry.tsx | 78 +++++++ .../bridge/src/components/Wormhole/disc.png | Bin 0 -> 1399 bytes .../bridge/src/components/Wormhole/index.tsx | 18 ++ yarn.lock | 208 +++++++++++++++++- 9 files changed, 448 insertions(+), 14 deletions(-) create mode 100644 packages/bridge/src/components/Wormhole/Camera.tsx create mode 100644 packages/bridge/src/components/Wormhole/Utils.ts create mode 100644 packages/bridge/src/components/Wormhole/WormholeCanvas.tsx create mode 100644 packages/bridge/src/components/Wormhole/WormholeGeometry.tsx create mode 100644 packages/bridge/src/components/Wormhole/disc.png create mode 100644 packages/bridge/src/components/Wormhole/index.tsx diff --git a/packages/bridge/package.json b/packages/bridge/package.json index 5bee9e0..89abf02 100644 --- 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" }, diff --git a/packages/bridge/src/components/Layout/index.tsx b/packages/bridge/src/components/Layout/index.tsx index 83f5bff..43ca2f8 100644 --- 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 (
- - {location.pathname !== '/' &&
-

WORMHOLE

- -
} - - {props.children} - - + + + {location.pathname !== '/' && ( +
+
+

WORMHOLE

+
+ +
+ )} + {props.children} + +
); }); diff --git a/packages/bridge/src/components/Wormhole/Camera.tsx b/packages/bridge/src/components/Wormhole/Camera.tsx new file mode 100644 index 0000000..101ee98 --- /dev/null +++ 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 ( + + ); +}; + +export default Camera; diff --git a/packages/bridge/src/components/Wormhole/Utils.ts b/packages/bridge/src/components/Wormhole/Utils.ts new file mode 100644 index 0000000..fbb7e20 --- /dev/null +++ b/packages/bridge/src/components/Wormhole/Utils.ts @@ -0,0 +1,80 @@ +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, +): [BufferAttribute | InterleavedBufferAttribute, any, 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; + } +`; diff --git a/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx b/packages/bridge/src/components/Wormhole/WormholeCanvas.tsx new file mode 100644 index 0000000..2173c6a --- /dev/null +++ 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 ( + + + + + + + ); +}; + +export default WormholeCanvas; diff --git a/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx b/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx new file mode 100644 index 0000000..1b09918 --- /dev/null +++ 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(); + const pointTexture = useTexture(disc); + + // The uniforms for the shaderMaterial. + const uniforms = React.useMemo( + () => ({ + // Adapt the color of the WormholeCanvas here. + color: { value: new Color("white") }, + 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 ( + + + + + ); +}; + +export default WormholeGeometry; diff --git a/packages/bridge/src/components/Wormhole/disc.png b/packages/bridge/src/components/Wormhole/disc.png new file mode 100644 index 0000000000000000000000000000000000000000..92572c6221f356e3541815873e48b8b8373a19a9 GIT binary patch literal 1399 zcmV--1&I2IP)Px#24YJ`L;wH)0002_L%V+f000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipe@ z3<40qNoMT;0013nR9JLFZ*6U5Zgc_CX>@2HM@dakWG-a~000Ee zNklQSQbJ?t+H#?ZrC6yRFy?n`2lSB z0c`jIM2Zk7WtU%2C4`rdK(2&bY#uQo#3m;AHHI;sM;E<=CaxO;F;}{>G&Ax!_ulW` z?_3M6Z%mbE+ExF=at%P{5(Ko%65=iiY&d6f1^`Rn=me%zc+JdkmjrGA&$*jj<#HmC z*pEh|uU@`<8J(Y>j{-O$F90YK5zXWuC18Lz0+hgB5CTMWZkS5{WibSMp1jqYJ9>mCk=+lGgSe;ynh{N*~}7tvTOa5x;i z$K!EtZEcA(-_>4>AG$qP~JQZ zKLE^Tv!|(4>V3Vzi^Zb8ySrQULSjr0l%u1gLL!lPdlLjAk%$D~+%yUG$_yx}R4NmX z$6wt50c~wgv|>=g%YcB5-_stUi7EG?mNcjsT>IgrN<}P2f#Lf*8s94-&D4;Wi?G>4-O8><#L(t?d|nDolfg@Q@^mV zP@I^Uh^5o%Z2)lqI{=b&7RqJt+}zym z-rnBd1RMjfPiMfWzgkU{nq`>_KpVp_9bT{Zn?NAYIWRDAKM)AGySloX{C>aH0Nvc& zlp~SI+4}l=etCKM-J3UWQn_62HGl-A{WS^HLWM&9UsY_7a00juz{_!5yW8#Va5|ly z=H})WK@gfWP2*KnwdC{p^FpB@Wipv;Hk(ZYI0A4;{uaRdYT&i@0*;hR6J ( + <> + +
{children}
+ +); + +export default Wormhole; diff --git a/yarn.lock b/yarn.lock index 249b237..da518e3 100644 --- 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== From 44517b4eb77ccb3673e561ecc7221173996dc871 Mon Sep 17 00:00:00 2001 From: Tim Hagn Date: Tue, 16 Feb 2021 05:56:41 +0100 Subject: [PATCH 2/2] fix TS error in Utils.ts --- packages/bridge/src/components/Wormhole/Utils.ts | 4 +--- packages/bridge/src/components/Wormhole/WormholeGeometry.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/bridge/src/components/Wormhole/Utils.ts b/packages/bridge/src/components/Wormhole/Utils.ts index fbb7e20..861cfcd 100644 --- a/packages/bridge/src/components/Wormhole/Utils.ts +++ b/packages/bridge/src/components/Wormhole/Utils.ts @@ -20,9 +20,7 @@ export const hasWindow = * @param particleSize * @returns {[]} */ -export const calculateTorusProperties = ( - particleSize: number, -): [BufferAttribute | InterleavedBufferAttribute, any, any] => { +export const calculateTorusProperties = (particleSize: number): any => { let bufferGeometry: BufferGeometry = new TorusGeometry(60, 45, 160, 160); // if normal and uv attributes are not removed, diff --git a/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx b/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx index 1b09918..67d55a5 100644 --- a/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx +++ b/packages/bridge/src/components/Wormhole/WormholeGeometry.tsx @@ -28,7 +28,7 @@ const WormholeGeometry = () => { const uniforms = React.useMemo( () => ({ // Adapt the color of the WormholeCanvas here. - color: { value: new Color("white") }, + color: { value: new Color("gray") }, pointTexture: { value: pointTexture, },