From 4f1ea774f7f1c42e6401ab904fa23cde5125be4a Mon Sep 17 00:00:00 2001 From: ad044 Date: Wed, 4 Nov 2020 22:33:20 +0400 Subject: [PATCH] gate scene intro done --- src/components/GateScene/GateMiddle.tsx | 69 ++-- src/components/GateScene/GateMiddleObject.tsx | 86 +++++ .../GateScene/GateMiddleObject/BlueOne.tsx | 78 ++++ .../GateScene/GateMiddleObject/BlueZero.tsx | 79 ++++ .../GateScene/GateMiddleObject/Mirror.tsx | 38 ++ src/components/GateScene/GateSide.tsx | 80 +++- src/components/MainScene/BlueOrb.tsx | 4 +- src/components/MainScene/Site.tsx | 22 +- .../StateManagers/GreenTextManager.tsx | 1 - .../StateManagers/MediaImageManager.tsx | 4 - .../StateManagers/YellowTextManager.tsx | 1 - src/components/TextRenderer/BigLetter.tsx | 2 +- src/resources/blue_digit_positions.json | 364 ++++++++++++++++++ src/scenes/MainScene.tsx | 2 +- 14 files changed, 755 insertions(+), 75 deletions(-) create mode 100644 src/components/GateScene/GateMiddleObject.tsx create mode 100644 src/components/GateScene/GateMiddleObject/BlueOne.tsx create mode 100644 src/components/GateScene/GateMiddleObject/BlueZero.tsx create mode 100644 src/components/GateScene/GateMiddleObject/Mirror.tsx create mode 100644 src/resources/blue_digit_positions.json diff --git a/src/components/GateScene/GateMiddle.tsx b/src/components/GateScene/GateMiddle.tsx index b0d0473..bb59311 100644 --- a/src/components/GateScene/GateMiddle.tsx +++ b/src/components/GateScene/GateMiddle.tsx @@ -1,54 +1,37 @@ -import React, { useMemo } from "react"; +import React from "react"; +import gateText from "../../static/sprite/gate_pass.png"; +import gateTextUnderline from "../../static/sprite/gate_pass_underline.png"; +import gateBlueBinarySingularOne from "../../static/sprite/blue_binary_singular_one.png"; +import gateBlueBinarySingularZero from "../../static/sprite/blue_binary_singular_zero.png"; +import { useLoader } from "react-three-fiber"; import * as THREE from "three"; +import GateMiddleObject from "./GateMiddleObject"; const GateMiddle = () => { - const uniforms = useMemo( - () => ({ - color1: { - value: new THREE.Color("white"), - }, - color2: { - value: new THREE.Color("red"), - }, - }), - [] - ); - - const vertexShader = ` - varying vec2 vUv; - - void main() { - vUv = uv; - gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); - } - `; - - const fragmentShader = ` - uniform vec3 color1; - uniform vec3 color2; - uniform float alpha; - - varying vec2 vUv; - - void main() { - float alpha = smoothstep(0.0, 1.0, vUv.y); - float colorMix = smoothstep(1.0, 2.0, 1.8); - - gl_FragColor = vec4(mix(color1, color2, colorMix), alpha); - } - `; + const gatePassTexture = useLoader(THREE.TextureLoader, gateText); + const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline); return ( <> - - - + - + + + + + + + ); }; diff --git a/src/components/GateScene/GateMiddleObject.tsx b/src/components/GateScene/GateMiddleObject.tsx new file mode 100644 index 0000000..b8d601f --- /dev/null +++ b/src/components/GateScene/GateMiddleObject.tsx @@ -0,0 +1,86 @@ +import React, { useEffect, useState } from "react"; +import BlueZero from "./GateMiddleObject/BlueZero"; +import BlueOne from "./GateMiddleObject/BlueOne"; +import { a, useSpring, useSprings } from "@react-spring/three"; +import blue_digit_positions from "../../resources/blue_digit_positions.json"; +import Mirror from "./GateMiddleObject/Mirror"; + +const GateMiddleObject = () => { + const [middleGroupPos, setMiddleGroupPos] = useState(); + + const [springs, set] = useSprings(44, (intIdx) => { + const idx = intIdx.toString(); + return { + type: blue_digit_positions[idx as keyof typeof blue_digit_positions].type, + posX: + blue_digit_positions[idx as keyof typeof blue_digit_positions] + .initial_x, + posY: + blue_digit_positions[idx as keyof typeof blue_digit_positions] + .initial_y, + visibility: false, + config: { duration: 150 }, + }; + }); + + useEffect(() => { + set((intIdx) => { + const idx = intIdx.toString(); + return { + posX: + blue_digit_positions[idx as keyof typeof blue_digit_positions] + .final_x, + posY: + blue_digit_positions[idx as keyof typeof blue_digit_positions] + .final_y, + delay: + blue_digit_positions[idx as keyof typeof blue_digit_positions].delay, + visibility: true, + }; + }); + + setTimeout(() => { + setMiddleGroupPos([-0.15, -0.2, -0.1]); + }, 1400); + }, [set]); + + const middleObjectGroupState = useSpring({ + posX: middleGroupPos ? middleGroupPos[0] : 0, + posY: middleGroupPos ? middleGroupPos[1] : 0, + posZ: middleGroupPos ? middleGroupPos[2] : 0, + config: { duration: 900 }, + }); + + return ( + <> + + {springs.map((item, idx) => { + if (item.type) { + return item.type.get() === 1 ? ( + + ) : ( + + ); + } + })} + + + + ); +}; + +export default GateMiddleObject; diff --git a/src/components/GateScene/GateMiddleObject/BlueOne.tsx b/src/components/GateScene/GateMiddleObject/BlueOne.tsx new file mode 100644 index 0000000..82d120f --- /dev/null +++ b/src/components/GateScene/GateMiddleObject/BlueOne.tsx @@ -0,0 +1,78 @@ +import React, {useEffect, useMemo, useRef} from "react"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import gateBlueBinarySingularOne from "../../../static/sprite/blue_binary_singular_one.png"; +import { a, SpringValue } from "@react-spring/three"; + +type BlueOneProps = { + posX: SpringValue; + posY: SpringValue; + visibility: SpringValue; +}; + +const BlueOne = (props: BlueOneProps) => { + const gateBlueBinarySingularOneTex = useLoader( + THREE.TextureLoader, + gateBlueBinarySingularOne + ); + + const matRef = useRef(); + + const uniforms = useMemo( + () => ({ + oneTex: { type: "t", value: gateBlueBinarySingularOneTex }, + brightnessMultiplier: { value: 1.5 }, + }), + [gateBlueBinarySingularOneTex] + ); + + const vertexShader = ` + varying vec2 vUv; + + void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } + `; + + const fragmentShaderOne = ` + uniform sampler2D oneTex; + uniform float brightnessMultiplier; + varying vec2 vUv; + + void main() { + gl_FragColor = texture2D(oneTex, vUv) * brightnessMultiplier; + } + `; + + useEffect(() => { + setTimeout(() => { + if (matRef.current) { + matRef.current.uniforms.brightnessMultiplier.value = 3.5; + } + }, 1400); + }, []); + + return ( + + + + + ); +}; + +export default BlueOne; diff --git a/src/components/GateScene/GateMiddleObject/BlueZero.tsx b/src/components/GateScene/GateMiddleObject/BlueZero.tsx new file mode 100644 index 0000000..f21c4c8 --- /dev/null +++ b/src/components/GateScene/GateMiddleObject/BlueZero.tsx @@ -0,0 +1,79 @@ +import React, { useEffect, useMemo, useRef } from "react"; +import { useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import gateBlueBinarySingularZero from "../../../static/sprite/blue_binary_singular_zero.png"; +import { a, SpringValue } from "@react-spring/three"; + +type BlueZeroProps = { + posX: SpringValue; + posY: SpringValue; + visibility: SpringValue; +}; + +const BlueZero = (props: BlueZeroProps) => { + const gateBlueBinarySingularZeroTex = useLoader( + THREE.TextureLoader, + gateBlueBinarySingularZero + ); + + const matRef = useRef(); + + const uniforms = useMemo( + () => ({ + zeroTex: { type: "t", value: gateBlueBinarySingularZeroTex }, + brightnessMultiplier: { value: 1.5 }, + }), + [gateBlueBinarySingularZeroTex] + ); + + const vertexShader = ` + varying vec2 vUv; + + void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } + `; + + const fragmentShaderZero = ` + uniform sampler2D zeroTex; + uniform float brightnessMultiplier; + + varying vec2 vUv; + + void main() { + gl_FragColor = texture2D(zeroTex, vUv) * brightnessMultiplier; + } + `; + + useEffect(() => { + setTimeout(() => { + if (matRef.current) { + matRef.current.uniforms.brightnessMultiplier.value = 3.5; + } + }, 1400); + }, []); + + return ( + + + + + ); +}; + +export default BlueZero; diff --git a/src/components/GateScene/GateMiddleObject/Mirror.tsx b/src/components/GateScene/GateMiddleObject/Mirror.tsx new file mode 100644 index 0000000..b26f14d --- /dev/null +++ b/src/components/GateScene/GateMiddleObject/Mirror.tsx @@ -0,0 +1,38 @@ +import React, { useMemo, useRef } from "react"; +import gateMirrorTexture from "../../../static/sprite/gate_object_texture.png"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; + +const Mirror = () => { + const gateMirrorTex = useLoader(THREE.TextureLoader, gateMirrorTexture); + const mirrorRef = useRef(); + + const textureMemo = useMemo(() => { + gateMirrorTex.wrapS = THREE.RepeatWrapping; + gateMirrorTex.wrapT = THREE.RepeatWrapping; + + return gateMirrorTex; + }, [gateMirrorTex]); + + useFrame(() => { + if (mirrorRef.current) { + mirrorRef.current.rotation.y += 0.03; + } + }); + + return ( + + + + + + + ); +}; + +export default Mirror; diff --git a/src/components/GateScene/GateSide.tsx b/src/components/GateScene/GateSide.tsx index fc0c1ee..d5cd895 100644 --- a/src/components/GateScene/GateSide.tsx +++ b/src/components/GateScene/GateSide.tsx @@ -2,49 +2,107 @@ import React, { useMemo, useRef } from "react"; import blueBinary from "../../static/sprite/blue_binary.png"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; +import { OrbitControls } from "drei"; const GateSide = () => { const blueBinaryTex = useLoader(THREE.TextureLoader, blueBinary); + // this is really fucking weird const texture = useMemo(() => { blueBinaryTex.wrapS = THREE.RepeatWrapping; blueBinaryTex.wrapT = THREE.RepeatWrapping; blueBinaryTex.repeat.set(5, 5); - return blueBinaryTex; }, [blueBinaryTex]); useFrame(() => { - if (Date.now() % 2 === 0) { - texture.offset.y += 0.5; + if (Date.now() % 2 === 0 && matRef.current) { + matRef.current.uniforms.offset.value += 0.5; } }); + + const matRef = useRef(); + + const uniforms = useMemo( + () => ({ + tex1: { type: "t", value: texture }, + offset: { value: 0 }, + }), + [texture] + ); + + const vertexShader = ` + varying vec2 vUv; + + void main() { + vUv = uv; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } + `; + + const fragmentShaderLeft = ` + uniform sampler2D tex1; + uniform float alpha; + uniform float offset; + + varying vec2 vUv; + + void main() { + float alpha = smoothstep(0.7, 1.0, vUv.x); + + vec4 t1 = texture2D(tex1,vUv * 5.0 + offset); + + gl_FragColor = mix(t1, vec4(0,0,0,0), alpha); + } + `; + + const fragmentShaderRight = ` + uniform sampler2D tex1; + uniform float alpha; + uniform float offset; + + varying vec2 vUv; + + void main() { + float alpha = smoothstep(0.3, 1.0, vUv.x); + + vec4 t1 = texture2D(tex1,vUv * 5.0 + offset); + + gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4; + } + `; + return ( <> + - - diff --git a/src/components/MainScene/BlueOrb.tsx b/src/components/MainScene/BlueOrb.tsx index e2dcf14..f5fb6f2 100644 --- a/src/components/MainScene/BlueOrb.tsx +++ b/src/components/MainScene/BlueOrb.tsx @@ -27,7 +27,7 @@ type BlueOrbContructorProps = { level: string; }; -const BlueOrb = memo((props: BlueOrbContructorProps) => { +const BlueOrb = (props: BlueOrbContructorProps) => { // the game only has a couple of sprite that it displays in the hub // dynamically importnig them would be worse for performance, // so we import all of them here and then use this function to @@ -216,6 +216,6 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => { )} ); -}); +}; export default BlueOrb; diff --git a/src/components/MainScene/Site.tsx b/src/components/MainScene/Site.tsx index 4f13683..d0b1c6e 100644 --- a/src/components/MainScene/Site.tsx +++ b/src/components/MainScene/Site.tsx @@ -39,24 +39,24 @@ const Site = memo(() => { {Object.entries(site_a).map((blueOrb) => { if ( // (blueOrb as any)[1]["unlocked_by"] === "-1" && - activeLevels.includes((blueOrb as any)[0].substr(0, 2)) + activeLevels.includes(blueOrb[0].substr(0, 2)) ) return ( ); })} diff --git a/src/components/StateManagers/GreenTextManager.tsx b/src/components/StateManagers/GreenTextManager.tsx index 549686d..d2bf19a 100644 --- a/src/components/StateManagers/GreenTextManager.tsx +++ b/src/components/StateManagers/GreenTextManager.tsx @@ -28,7 +28,6 @@ const GreenTextManager = (props: StateManagerProps) => { const toggleAndSetGreenText = useCallback( (newActiveBlueOrbId: string, newActiveHudId: string, delay: number) => { - console.log('s') const targetGreenText = site_a[newActiveBlueOrbId as keyof typeof site_a].title; diff --git a/src/components/StateManagers/MediaImageManager.tsx b/src/components/StateManagers/MediaImageManager.tsx index be443cb..c422b20 100644 --- a/src/components/StateManagers/MediaImageManager.tsx +++ b/src/components/StateManagers/MediaImageManager.tsx @@ -14,7 +14,6 @@ const MediaImageManager = (props: StateManagerProps) => { site_a[newActiveBlueOrbId as keyof typeof site_a].node_name; const images = image_table[node_name as keyof typeof image_table]; - console.log(newActiveBlueOrbId); Object.values(images).forEach((img) => { switch (img.substr(img.length - 1)) { case "0": @@ -64,9 +63,6 @@ const MediaImageManager = (props: StateManagerProps) => { if (props.eventState) { const eventAction = props.eventState.event; const newActiveBlueOrbId = props.eventState.newActiveBlueOrbId; - - console.log(eventAction); - console.log(newActiveBlueOrbId); const dispatchedObject = dispatchObject(eventAction, newActiveBlueOrbId); if (dispatchedObject) { diff --git a/src/components/StateManagers/YellowTextManager.tsx b/src/components/StateManagers/YellowTextManager.tsx index 6b02cff..6934d37 100644 --- a/src/components/StateManagers/YellowTextManager.tsx +++ b/src/components/StateManagers/YellowTextManager.tsx @@ -99,7 +99,6 @@ const YellowTextManager = (props: any) => { setTimeout(() => { // animate it to new pos x/y - console.log(newActiveHudId); setYellowTextPosX( blue_orb_huds[newActiveHudId as keyof typeof blue_orb_huds] .big_text[0] diff --git a/src/components/TextRenderer/BigLetter.tsx b/src/components/TextRenderer/BigLetter.tsx index d77392b..da88a4e 100644 --- a/src/components/TextRenderer/BigLetter.tsx +++ b/src/components/TextRenderer/BigLetter.tsx @@ -4,7 +4,7 @@ import * as THREE from "three"; import { useLoader } from "react-three-fiber"; import orange_font_json from "../../resources/font_data/big_font.json"; import { a, useSpring } from "@react-spring/three"; -import React, { useMemo } from "react"; +import React, {useEffect, useMemo} from "react"; import { LetterProps } from "./TextRenderer"; interface BigLetterProps extends LetterProps { diff --git a/src/resources/blue_digit_positions.json b/src/resources/blue_digit_positions.json new file mode 100644 index 0000000..dda4198 --- /dev/null +++ b/src/resources/blue_digit_positions.json @@ -0,0 +1,364 @@ +{ + "0": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.0, + "final_y": 0.7, + "delay": 50 + }, + "1": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.7, + "delay": 100 + }, + "2": { + "type": 1, + "initial_x": -1.0, + "initial_y": 0.8, + "final_x": 0.2, + "final_y": 0.7, + "delay": 1200 + }, + "3": { + "type": 0, + "initial_x": -1.0, + "initial_y": 0.8, + "final_x": 0.3, + "final_y": 0.7, + "delay": 150 + }, + + "4": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.0, + "final_y": 0.6, + "delay": 600 + }, + "5": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.6, + "delay": 500 + }, + "6": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.2, + "final_y": 0.6, + "delay": 400 + }, + "7": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.3, + "final_y": 0.6, + "delay": 300 + }, + + "8": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.0, + "final_y": 0.5, + "delay": 150 + }, + "9": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.5, + "delay": 900 + }, + "10": { + "type": 1, + "initial_x": -1.0, + "initial_y": 0.6, + "final_x": 0.2, + "final_y": 0.5, + "delay": 50 + }, + "11": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.3, + "final_y": 0.5, + "delay": 250 + }, + + "12": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.4, + "final_x": 0.0, + "final_y": 0.4, + "delay": 200 + }, + "13": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.4, + "delay": 200 + }, + "14": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.3, + "final_x": 0.2, + "final_y": 0.4, + "delay": 300 + }, + "15": { + "type": 0, + "initial_x": -1.0, + "initial_y": 0.8, + "final_x": 0.3, + "final_y": 0.4, + "delay": 400 + }, + + "16": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.4, + "final_x": 0.0, + "final_y": 0.3, + "delay": 650 + }, + "17": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.3, + "delay": 400 + }, + "18": { + "type": 0, + "initial_x": -1.0, + "initial_y": 0.4, + "final_x": 0.2, + "final_y": 0.3, + "delay": 300 + }, + "19": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.3, + "final_x": 0.3, + "final_y": 0.3, + "delay": 1000 + }, + + "20": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.4, + "final_x": 0.0, + "final_y": 0.2, + "delay": 800 + }, + "21": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.2, + "delay": 700 + }, + "22": { + "type": 1, + "initial_x": -1.0, + "initial_y": 0.4, + "final_x": 0.2, + "final_y": 0.2, + "delay": 600 + }, + "23": { + "type": 0, + "initial_x": 1.0, + "initial_y": -0.3, + "final_x": 0.3, + "final_y": 0.2, + "delay": 500 + }, + + "24": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.4, + "final_x": 0.0, + "final_y": 0.1, + "delay": 900 + }, + "25": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.1, + "delay": 800 + }, + "26": { + "type": 1, + "initial_x": -1.0, + "initial_y": -0.4, + "final_x": 0.2, + "final_y": 0.1, + "delay": 700 + }, + "27": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.3, + "final_x": 0.3, + "final_y": 0.1, + "delay": 600 + }, + + "28": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.4, + "final_x": 0.0, + "final_y": 0.0, + "delay": 300 + }, + "29": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": 0.0, + "delay": 1100 + }, + "30": { + "type": 1, + "initial_x": -1.0, + "initial_y": -0.4, + "final_x": 0.2, + "final_y": 0.0, + "delay": 700 + }, + "31": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.3, + "final_x": 0.3, + "final_y": 0.0, + "delay": 900 + }, + + "32": { + "type": 1, + "initial_x": -1.0, + "initial_y": 0.2, + "final_x": 0.0, + "final_y": -0.1, + "delay": 500 + }, + "33": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": -0.1, + "delay": 300 + }, + "34": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.2, + "final_y": -0.1, + "delay": 800 + }, + "35": { + "type": 1, + "initial_x": 1.0, + "initial_y": 0.3, + "final_x": 0.3, + "final_y": -0.1, + "delay": 900 + }, + + "36": { + "type": 0, + "initial_x": 1.0, + "initial_y": -0.4, + "final_x": 0.0, + "final_y": -0.2, + "delay": 1000 + }, + "37": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": -0.2, + "delay": 900 + }, + "38": { + "type": 1, + "initial_x": -1.0, + "initial_y": 0.8, + "final_x": 0.2, + "final_y": -0.2, + "delay": 400 + }, + "39": { + "type": 1, + "initial_x": -1.0, + "initial_y": -0.4, + "final_x": 0.3, + "final_y": -0.2, + "delay": 500 + }, + + "40": { + "type": 1, + "initial_x": 1.0, + "initial_y": -0.4, + "final_x": 0.0, + "final_y": -0.3, + "delay": 400 + }, + "41": { + "type": 0, + "initial_x": 1.0, + "initial_y": 0.8, + "final_x": 0.1, + "final_y": -0.3, + "delay": 1000 + }, + "42": { + "type": 0, + "initial_x": -1.0, + "initial_y": 0.8, + "final_x": 0.2, + "final_y": -0.3, + "delay": 900 + }, + "43": { + "type": 1, + "initial_x": -1.0, + "initial_y": -0.4, + "final_x": 0.3, + "final_y": -0.3, + "delay": 1100 + } +} diff --git a/src/scenes/MainScene.tsx b/src/scenes/MainScene.tsx index ee27a6b..4ef6c48 100644 --- a/src/scenes/MainScene.tsx +++ b/src/scenes/MainScene.tsx @@ -57,7 +57,7 @@ const MainScene = () => { - {/**/} +