diff --git a/public/models/ring2.glb b/public/models/ring2.glb deleted file mode 100644 index 4a14450..0000000 Binary files a/public/models/ring2.glb and /dev/null differ diff --git a/src/components/GrayRing.tsx b/src/components/GrayRing.tsx index 6bf561e..25d2829 100644 --- a/src/components/GrayRing.tsx +++ b/src/components/GrayRing.tsx @@ -1,42 +1,142 @@ -import { draco } from "drei"; -import React, { memo } from "react"; -import { useLoader } from "react-three-fiber"; +import React, { memo, useMemo } from "react"; import * as THREE from "three"; -import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; +import lofTexture from "../static/sprites/lof.png"; +import holeTexture from "../static/sprites/hole.png"; +import lifeTexture from "../static/sprites/life.png"; +import { useLoader } from "react-three-fiber"; type GrayRingProps = { grayRingPosY: number; }; -type GLTFResult = GLTF & { - nodes: { - LainRing: THREE.Mesh; - }; - materials: { - RingTexture: THREE.MeshStandardMaterial; - }; -}; - const GrayRing = memo((props: GrayRingProps) => { - const { nodes, materials } = useLoader( - GLTFLoader, - "/models/ring0.glb", - draco("/draco-gltf/") + const lofTex = useLoader(THREE.TextureLoader, lofTexture); + const holeTex = useLoader(THREE.TextureLoader, holeTexture); + const lifeTex = useLoader(THREE.TextureLoader, lifeTexture); + + const uniforms = useMemo( + () => ({ + lof: { type: "t", value: lofTex }, + hole: { type: "t", value: holeTex }, + life: { type: "t", value: lifeTex }, + }), + [lofTex, holeTex, lifeTex] ); - // -0.27 + const vertexShader = ` + varying vec2 vUv; + + + void main() { + vUv = uv; + + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.); + } + `; + + const fragmentShader = ` + varying vec2 vUv; + uniform sampler2D lof; + uniform sampler2D hole; + uniform sampler2D life; + + // transform coordinates to uniform within segment + float tolocal(float x, int segments, float step) { + float period = 1.0/step*float(segments); + return mod(x, period) / period; + } + + // check if coordinate is within the given height + bool isheight(float y, float thin) { + return y > 0.5-thin/2.0 && y < 0.5+thin/2.0; + } + + // sloping function + float slope(float x, float thin) { + return x*(1.0-thin)/2.0; + } + + // frag color / texture + // #424252 hex in original textures + 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 (quadnum % 2 == 1) { + return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y)); + } else if (quadnum == 0) { + return texture2D(lof, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y)); + } else { + return texture2D(life, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y)); + } + } + + void main() { + // number of segments + float step = 64.0; + float thin = 0.3; + + // segment within circle + int segment = int(floor(vUv.x * step)); + + int quadlen = int(step)/4; + + // segment within circle's quad + int quadel = int(segment) % quadlen; + + // which quad + int quadnum = int(segment) / quadlen; + + // how big thin part is + int thinperiod = 12; + + if (quadel < thinperiod && isheight(vUv.y, thin)) { + // thin line + gl_FragColor = color(vUv, quadnum, false, thinperiod, quadlen, step); + } 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)) { + gl_FragColor = color(vUv, quadnum, true, thinperiod, quadlen, step); + } else { + gl_FragColor = vec4(0, 0, 0, 0); + } + } 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)) { + gl_FragColor = color(vUv, quadnum, true, thinperiod, quadlen, step); + } else { + gl_FragColor = vec4(0, 0, 0, 0); + } + } else if (quadel > thinperiod) { + gl_FragColor = color(vUv, quadnum, true, thinperiod, quadlen, step); + } else { + // transparent + gl_FragColor = vec4(0, 0, 0, 0); + } + } + `; + return ( - - - + + + ); }); diff --git a/src/components/HUD/HUDElement.tsx b/src/components/HUD/HUDElement.tsx index c409ced..940987a 100644 --- a/src/components/HUD/HUDElement.tsx +++ b/src/components/HUD/HUDElement.tsx @@ -119,7 +119,7 @@ const HUDElement = memo((props: HUDElementProps) => { ); return ( - + { - {Object.values(level_sprites).map((sprite) => { - return ( - - ); - })} + {/*{Object.values(level_sprites).map((sprite) => {*/} + {/* return (*/} + {/* */} + {/* );*/} + {/*})}*/} ); diff --git a/src/components/LevelSprite/LevelSprite.tsx b/src/components/LevelSprite/LevelSprite.tsx index 5389d34..9ebd962 100644 --- a/src/components/LevelSprite/LevelSprite.tsx +++ b/src/components/LevelSprite/LevelSprite.tsx @@ -92,6 +92,7 @@ const LevelSprite = memo((props: LevelSpriteConstructorProps) => { position={props.position} scale={props.scale} rotation={props.rotation} + renderOrder={1} > {props.active ? ( diff --git a/src/components/MiddleRing/MiddleRing.tsx b/src/components/MiddleRing/MiddleRing.tsx index ec898fa..3d48980 100644 --- a/src/components/MiddleRing/MiddleRing.tsx +++ b/src/components/MiddleRing/MiddleRing.tsx @@ -1,11 +1,8 @@ -import React, { useMemo, useRef } from "react"; -import { useFrame, useLoader } from "react-three-fiber"; -import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js"; +import React, {useMemo, useRef} from "react"; +import {useFrame, useLoader} from "react-three-fiber"; import middleRingTexture from "../../static/sprites/middle_ring_tex.png"; - -import { draco } from "drei"; import * as THREE from "three"; -import { a, useSpring } from "@react-spring/three"; +import {a, useSpring} from "@react-spring/three"; import { middleRingNoiseAtom, middleRingPosYAtom, @@ -13,24 +10,9 @@ import { middleRingRotXAtom, middleRingWobbleStrengthAtom, } from "./MiddleRingAtom"; -import { useRecoilValue } from "recoil"; - -type GLTFResult = GLTF & { - nodes: { - BezierCircle: THREE.Mesh; - }; - materials: { - ["Material.001"]: THREE.MeshStandardMaterial; - }; -}; +import {useRecoilValue} from "recoil"; const MiddleRing = () => { - const { nodes, materials } = useLoader( - GLTFLoader, - "/models/ring2.glb", - draco("/draco-gltf/") - ); - const middleRingTex = useLoader(THREE.TextureLoader, middleRingTexture); const middleRingWobbleStrength = useRecoilValue(middleRingWobbleStrengthAtom); @@ -205,8 +187,7 @@ const MiddleRing = () => { varying vec2 vUv; void main() { - gl_FragColor = texture2D(tex, vUv); - gl_FragColor.a = 0.4; + gl_FragColor = texture2D( tex, vUv); } `; @@ -227,18 +208,18 @@ const MiddleRing = () => { return ( +