From 5f473325fc35d6f221659ef7f0015672a9b7896a Mon Sep 17 00:00:00 2001 From: ad044 Date: Fri, 18 Sep 2020 20:49:11 +0400 Subject: [PATCH] working on procedurally generated gray ring, still wip. --- public/models/ring2.glb | Bin 4836 -> 0 bytes src/components/GrayRing.tsx | 154 +++++++++++++++---- src/components/HUD/HUDElement.tsx | 2 +- src/components/Hub.tsx | 38 ++--- src/components/LevelSprite/LevelSprite.tsx | 1 + src/components/MiddleRing/MiddleRing.tsx | 37 ++--- src/components/MiddleRing/MiddleRingAtom.tsx | 2 +- src/resources/level_sprites.json | 7 + 8 files changed, 165 insertions(+), 76 deletions(-) delete mode 100644 public/models/ring2.glb diff --git a/public/models/ring2.glb b/public/models/ring2.glb deleted file mode 100644 index 4a14450e60aa21fd8c724bfb415c18ebe47e0f12..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4836 zcmb7|OKe=KcWhDBc9BQm{EncXz1tybJNN}I-N+=!EEyO|gziYWf?e=kBX4ZPNvqauz}POB##Y{FEhB(YGJDiAN>?_GMs*E3 zV?piZjYe}N=7yQKu5Df0dG8xez&@!We9~-J+baGQv*5a(>zJk+IDr!uEkAD-ik1^V z=Z9thz2*7&<7NSyrt4clvFQ4~AA}AJJ<~Bm%k(VEa&4~|B5OOTHd^&Gyi+h8$9Fs* zu7PRV%FDLBz%|`4H1V{pz|C6)%L+Wl_WYu4`LrS%&(;^bm2 z{+*7|0hUTMcOabvZOduCZa21!lj#trq|nmgV9AJ+8$ z7zaNQM`4sPd9u{rQ%P z^W(n`mC3XxvnJZ3M$S;_$$Bom2G&G-)EJQ&hs@m6qn2$l^<8v^r0RxI%I0e$ffjm zx_Om8W!iIQw4ptjcb$5C2N9WiGS^;SRRiDIH@_L`@eM^}YRPH8$i?_&>dCy*w8tHf z$kdbRLp@@Y$<&k6+^9t{ZO9ZdzgIHt$-KMN<1X_XRPo8oO+9-h)1J)S)T0)DgDNkX zcaeJB5yiA8@4nFe7Jl`&s~w$xG}XPUAO7~Gj?QoWu=`DgcSa+fU)Caq< zv90sp|JeO@4!rg1w$AjYeJ@U*kxOxSSLN+9>!3Yr(V6{F&z}AVcQn238)jA%=NS2Y`Z<)QTBb-bLp(ju&gs|)Ev0#tet73GiIW4p)Ss+ z&;NR_d&h>uePx|7D;2*t|32%vbjEqByNwznoiQtwt9MWO%x{wCh`-x9vpy?-+foboZI)aZJn8q_B<<{sq6kd_`AgWN)s zRbwx&>M3QdHlCNV=ghPo8NW<>o{u&Y-m7#zkv3=EPn8ex%GyjGVC{@pvx?8&wR7k9 zqT=(;YIkE>XPlGDg5kLx3l5fJJ1TkeyPQYUfQk1ep@F+t(IVq=LbrMpNahZVC zIAlyFY%aD1wD%a4>RY)M$<#~8qhb-b$ icfn&fuC 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 ( +