diff --git a/src/components/Level.tsx b/src/components/Level.tsx
index af436c0..13e183d 100644
--- a/src/components/Level.tsx
+++ b/src/components/Level.tsx
@@ -6,12 +6,13 @@ import CyanCrystal from "./CyanCrystal";
//constructor for levels
type LevelProps = {
levelPosY: number;
+ level: string;
};
const Level = (props: LevelProps) => {
return (
-
+
diff --git a/src/components/MiddleRing/MiddleRing.tsx b/src/components/MiddleRing/MiddleRing.tsx
index 32fe80e..f1a5797 100644
--- a/src/components/MiddleRing/MiddleRing.tsx
+++ b/src/components/MiddleRing/MiddleRing.tsx
@@ -225,7 +225,7 @@ const MiddleRing = () => {
rotation-x={middleRingRotState.middleRingRotX}
>
{
- const siteA = useLoader(THREE.TextureLoader, siteATex);
- const siteB = useLoader(THREE.TextureLoader, siteBTex);
+ const siteA = useLoader(THREE.TextureLoader, siteATex);
+ const siteB = useLoader(THREE.TextureLoader, siteBTex);
+ const siteLevels = useLoader(THREE.TextureLoader, siteLevelTex);
- const purpleRingRef = useRef();
+ const purpleRingRef = useRef();
- // const uniforms = useMemo(
- // () => ({
- // siteA: { type: "t", value: siteA },
- // siteB: { type: "t", value: siteB },
- // }),
- // [siteA, siteB]
- // );
+ console.log(props.level);
+ const dispatchSiteLevelTextureOffset = (level: string) => {
+ return ({
+ "9": 0.035,
+ "8": 0.039,
+ "7": 0.001,
+ "6": 0.005,
+ "5": 0.009,
+ "4": 0.0131,
+ "3": 0.0176,
+ "2": 0.0218,
+ "1": 0.026,
+ "0": 0.031,
+ } as SiteTextureDispatcher)[level];
+ };
- const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
+ const uniforms = THREE.UniformsUtils.merge([THREE.UniformsLib["lights"]]);
- uniforms.siteA = { type: "t", value: siteA };
- uniforms.siteB = { type: "t", value: siteB };
+ const formattedLevel =
+ props.level.length < 2 ? "0" + props.level : props.level;
- const vertexShader = `
+ uniforms.siteA = { type: "t", value: siteA };
+ uniforms.siteB = { type: "t", value: siteB };
+ uniforms.siteLevels = { type: "t", value: siteLevels };
+ uniforms.siteLevelFirstCharacterOffset = {
+ value: dispatchSiteLevelTextureOffset(formattedLevel.charAt(0)),
+ };
+ uniforms.siteLevelSecondCharacterOffset = {
+ value: dispatchSiteLevelTextureOffset(formattedLevel.charAt(1)),
+ };
+
+ const vertexShader = `
varying vec2 vUv;
varying vec3 vPos;
@@ -44,10 +68,13 @@ const PurpleRing = memo((props: PurpleRingProps) => {
}
`;
- const fragmentShader = `
+ const fragmentShader = `
varying vec2 vUv;
uniform sampler2D siteA;
uniform sampler2D siteB;
+ uniform sampler2D siteLevels;
+ uniform float siteLevelFirstCharacterOffset;
+ uniform float siteLevelSecondCharacterOffset;
// lights
varying vec3 vPos;
@@ -90,7 +117,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
if (!textureexists) {
return vec4(0.325,0.325,0.698, 1);
} else {
- float dist = 1.0-tolocal(0.5 - mod(vUv.x, 0.5), 6, step);
+ float dist = 1.0-tolocal(0.5 - mod(vUv.x+0.172, 0.5), 12, step);
return texture2D(siteA, vec2(dist, vUv.y)) ;
}
}
@@ -112,16 +139,16 @@ const PurpleRing = memo((props: PurpleRingProps) => {
}
// number of segments
- float step = 128.0;
- float thin = 0.25;
+ float step = 256.0;
+ float thin = 0.2;
float thick = 1.0;
- float slopefactor = 1.0;
+ float slopefactor = 2.0;
uint halfc = uint(step)/uint(2);
// segment within circle
uint segment = uint(floor(vUv.x * step));
- uint thinperiod = halfc-uint(8);
+ uint thinperiod = halfc-uint(16);
uint halfel = segment % halfc;
@@ -137,7 +164,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
} else {
gl_FragColor = vec4(0, 0, 0, 0);
}
- } else if (halfel == thinperiod) {
+ } else if (halfel > thinperiod-uint(2) && halfel < thinperiod+uint(1)) {
// slope down
float dist = tolocal(vUv.x, 1, step);
float val = 1.0-slope(dist, thin);
@@ -146,30 +173,38 @@ const PurpleRing = memo((props: PurpleRingProps) => {
} else {
gl_FragColor = vec4(0, 0, 0, 0);
}
- } else if (halfel == thinperiod+uint(1) && isbottom(vUv.y, thin)) {
+ } else if (halfel > thinperiod && halfel < thinperiod+uint(4) && isbottom(vUv.y, thin)) {
// thin line bottom
gl_FragColor = vec4(0.325,0.325,0.698, 1) * addedLights;
- } else if (halfel == thinperiod + uint(2)) {
+ } else if (halfel > thinperiod + uint(3) && halfel < thinperiod + uint(6)) {
// slope up
- float dist = tolocal(vUv.x, 1, step);
+ float dist = tolocal(vUv.x, 2, step);
float val = 1.0-slope(1.0-dist, thin);
if ((isbottom(vUv.y, thin) && dist < thin*slopefactor) || (vUv.y < val)) {
gl_FragColor = color(vUv, step, true) * addedLights;
} else {
gl_FragColor = vec4(0, 0, 0, 0);
}
- } else if (halfel > thinperiod + uint(2) && halfel < thinperiod+uint(7)) {
+ } else if (halfel > thinperiod + uint(5) && halfel < thinperiod+uint(12)) {
// thick part
- gl_FragColor = color(vUv, step, true) * addedLights ;
- } else if (halfel == thinperiod+uint(7)) {
+ gl_FragColor = color(vUv, step, true) * addedLights;
+ } else if (halfel == thinperiod + uint(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)){
+ // 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)) {
// slope up
- float dist = tolocal(vUv.x, 1, step);
+ float dist = tolocal(vUv.x, 2, step);
float val = slope(dist, thin);
if (vUv.y > val) {
gl_FragColor = color(vUv, step, true) * addedLights;
} else {
gl_FragColor = vec4(0, 0, 0, 0);
- }
+ }
} else {
// transparent
gl_FragColor = vec4(0, 0, 0, 0);
@@ -177,32 +212,32 @@ const PurpleRing = memo((props: PurpleRingProps) => {
}
`;
- useFrame(() => {
- purpleRingRef.current!.rotation.y += 0.005;
- });
+ useFrame(() => {
+ purpleRingRef.current!.rotation.y += 0.005;
+ });
- return (
-
-
-
-
- );
+ return (
+
+
+
+
+ );
});
export default PurpleRing;
diff --git a/src/components/Site/Site.tsx b/src/components/Site/Site.tsx
index 3b47744..08a4118 100644
--- a/src/components/Site/Site.tsx
+++ b/src/components/Site/Site.tsx
@@ -56,8 +56,10 @@ const Site = memo(() => {
<>
loading...>}>
{/*distance between LEVELS is 1.5*/}
- {Object.values(level_y_values).map((yVal) => {
- return ;
+ {Object.entries(level_y_values).map((level: [string, number]) => {
+ return (
+
+ );
})}
{Object.entries(site_a).map((blueOrb) => {