Login screen

The game opens on its login screen once the health notice has faded. The console's opening shows it at the same place, in the same stages and at the game's own timings.

How it plays

flowchart LR
  N[Health notice's white] --> A[Arriving: the scene fades up over 800 ms, the wait mark from 1.3 to 2 s]
  A --> T[Title: START GAME, the server and the account]
  T -->|a click| P[Preparing: the status steps, then the load's share and bar, the glide quickening]
  P -->|"flight flown and loading done"| D[Door: the glide comes to rest; once the door has formed, the four corner buttons, then CLICK TO BEGIN]
  D -->|a click| E[Entering: the door lights, the camera rushes to it, the screen whitens]
  E --> S[Startup loading screen]

• The stages are the game's current build's. The user's own recording of the Japanese client times them and shows which corner buttons each stage has (the title's notices and exit, the door's settings, repair, notices and exit). A 1080 high English recording of an older build gives the words and every size. The status says "Preparing to download resources", "Checking for updates...", "Loading game..." over the ornament's double diamond, then "Preparing to load data" over the progress bar, which folds into its diamond at 100%.
• The flight is the game's checks, and the door comes once they are done. The flight is the screen's own clock for the door, the share of the way to it flown. The bar under it is the game's own checks before it loads the world, which on the page have nothing left to wait on, so the opening hands the screen a finished load: the share shown sweeps toward it at no more than one full bar per tenth of a second, the flight goes the share of the way the English recording's does before its bar is full, about two thirds, no faster than its last stretch's pace, and once the bar is full the flight flies whatever is left in the half second the bar takes to fold into its diamond and the status row to fade. The glide then carries the door's copy to the walkway's far end at its own pace, so the door rises on average about as long after the bar fills as the recording's does, 3 seconds. The world itself loads after the door, under the startup loading screen, whose marks follow it.
• Mainland China's client marks its own screen. A Simplified Chinese reader, who plays mainland China's build, sees its CADPA age rating (12 and over) in the top right corner at every stage, and its build string under the CNREL prefix. The rating's box and colours are measured off a public recording of that client's launch, its age and notice traced from it (ageRating.json) and its CADPA set in a serif; the build string is the current build's, its revision numbers the global build's, since no source publishes the mainland's own.
• A click is the screen's unless it lands on a button. The screen asks checkIsNestedInteraction before it moves on, so a click on a corner button stays the button's.
• A host can pin a stage. The stage is a v-model, so the parity page and a test hold one still, and the opening leaves it free.
• The opening says when the door is opened. GameOpening emits begin as the screen hands on to the startup loading screen, so its host can act on the door rather than waiting for the world; for now the app's page opens it onto a rickroll.
• The words are the reader's language's. The title, the account label, the status lines, the door's prompt and the name a player who has not chosen one goes by are the game's own text in the language the host resolved, handed down as the gameText prop (game text). The account kit's welcome card, which drops in as the game's player signs in, is not shown until the page has an account to welcome; its greeting is already the kit's own in every language, with the name where each language puts it.

The scene

Every part's shape, place and stone is fitted from the game's own assets (derived assets), and whatever the blocks cannot hold is read off the captures and expressed over what they can:

flowchart TD
  DATA["Every fitted part, in genshin-world/src/data/login"] --> SCENE[Login/Scene builds them with the engine's kits]
  REF[Each hour's title frame, the door captures, the flight's frames] --> CAM["Camera: solved on the witness, one pose; the glide's pace off the paving"]
  REF --> BANDS[Each cloud band's heights and spread]
  REF --> LIGHT["Each time of day's colours, and its lights' strengths over the fitted stone"]
  CAM --> SCENE
  BANDS --> SCENE
  LIGHT --> SCENE
  SCENE --> SCORE{compare: shape and tone per time of day}

• The login screen is one arrangement of its meshes. The blocks lay the towers out more than once; the login screen is its own LoginScene, the towers, walkway and door its MonoLoginScene spawns into the anchors under SceneObj, at its tenth, which is the scene's unit (derived assets). In the static layout the door's anchor stands far from the walkway; at the flight's end the door stands on the walkway's far end, centred and on its top, as one frame's two poses place it. The arrangement's unit test holds the cross-ratio of the dais over the walkway along the door's foot, which no camera changes.
• The stone is lit physically, as the game's is. The game's stone shader is a specular, physically based one that draws no outline, so each family's stone is its materials' own: an albedo, a smoothness, a specular tint and a rim glow along its edges (createStoneMaterial), rather than the toon ramp and outline the rest of the world steps its light with. Its programs do not decompile, so its properties are read, not its code.
• Each part is built from its fit. Each tower is a lathe of its walls' radius band by band, built once per placement at its scale, turned as the game turns it and merged into one geometry, and the bridges and pillars are their hulls' boxes, merged the same way. The walkway is its 23 pieces, each its fitted outline extruded from the walkway's underside to its own top, every piece of every copy an instance of one batch, which rises on its own and is outlined as it stands.
• The towers carry the game's own surfaces. Each tower's finest mesh is unrolled round its axis the way its lathe turns, every cell keeping the face standing farthest out, its material's colour and metal there and how far it stands from the band's wall (fitLoginTowerFacades). What a lathe cannot carve is traced from that as loops: the tone of each run of its height, the paint darker and lighter than its band, what stands out from its wall, its recesses at two depths (the fluting, the windows and the arches) and its gilding, with where it stands open between its columns. The loops are drawn once into an atlas of every tower's facade (createLoginTowerFacade), each tile clipped to itself and run on into a gutter either side by its own surface carried round its axis, so a seam's filtering and the first mipmaps never read a neighbour's facade, and which each vertex reads where it stands round its tower and up it: the shade over the stone, a recess darkened by the light its depth keeps out, and an open colonnade letting the sky through. Every shade stands a quarter as far from the stone as its texels' colour does (LOGIN_TOWER_FACADE_CONTRAST): the game shows its carving by the light across its relief, and drawn beside its exports the towers score best by both measures there, the full traced contrast scoring under the bare stone. The gilding is the stone's colour rather than metal, and no bump tilts the light at a recess's edge: with no reflection of the sky to show it, metal read dark against the exports at every hour, and three's bump map over the atlas changed no frame. The lathe stands on the walls rather than on the columns' and the cornices' tips, so the facade lies on the face it was read off. A recording is too soft, and our light too far off, for its score to see any of this: drawn beside the exports, the towers are judged against them.
• The walkway is set with the game's own pockets. Its side lanes and its wings are set with pockets, each a step darker than its lane's stone with no line round it, as the game's own plan of its tops shows them. Each piece's tops are drawn into a plan of one copy of the walkway through their own texture coordinates and the textures their materials hold, a pocket read as the stone darker than its material's threshold between its two tones (fitLoginPaving). The pockets are filled once as smooth curves into a texture of the copy (createPlanCanvasNode, which the door's relief shares), and each piece reads it where its own geometry stands in the copy, so every copy and every rising piece carries its own pockets. Its middle lane's bricks are left as its stone: drawn as lines, at any darkness, their joints and the pockets' rims scored the walkway worse against the game's exports, which read them as faint changes of tone, and drawn beside the exports a pocket matches them best a twentieth darker than its lane, where the plan reads it at about 0.83.
• The camera holds one pose, and the world glides toward it. The eye looks straight down the walkway's middle along +z, as ModelCamera turns, at the pose solved on the English recording's door frame, on the walkway's and the door's silhouettes: 1.24 metres over the walkway's top and 10.68 short of the door, pitched 5.3 degrees up under a vertical field of view of 51.2 (parity). The glide's frames refine to the same height, pitch and field of view from every start along the walkway, so it never moves; what moves is MonoLoginScene's rows, each laid out ahead of its own place and wrapped by its length (login/scroll.json): the walkway's three copies 16 metres apart, its own length, the towers' with their bridges three 200 apart, and the cloud sea's billows and low clouds by its two 300 apart.
• The glide's pace is read off the paving. At the camera's pose every row of the ground is a distance, so the paving's column resampled into metres and correlated frame to frame is the distance the world moves (genshin:parity glide, off the English recording's frames that do not stall): 3.03 metres a second while the title waits, steady to a few hundredths, about 3.7 once the game prepares, gathering or losing speed at 0.55 metres a second each second, the slope of its last three seconds toward the door. At the door it keeps on to the first copy that both stands the door past the walkway's far end and can be stopped on at that rate, then slows to rest exactly there, so the door's copy stands where the pose has it (advanceLoginGlide).
• The door comes to rest with the towers' row 144 metres along its loop. Every door frame shows the big lantern tower close to the door's right and the colonnade low behind it, wherever the recording idled, and the towers moved as one land on both door references there (genshin:parity place), nine of the walkway's copies. A scene mounted at the door stands there, and the title opens about 49 metres short of it, the English recording's glide from the title to the door's rest, on the walkway's phase the dawn frame's first solve stood it at.
• Each hour is judged on a frame of the title at the glide's own camera. The dawn, the day and the night are public recordings of the PC client idling on the title with no interface, each held at the moment of the loop its towers stand at (the screen's heldScrolled), and the dusk is the door recording. The wiki's four stills fit no camera centred on them, their near wings, far wings and towers each asking a different field of view or pitch, so they are a crop or an older build's camera and no longer judge anything; the 2021 recordings stand their walkway's far end some 30 rows lower than the current build's, so they are another camera too.
• The towers' row stands off where the blocks lay it. Held at the door frame's pose, the row, its towers, bridges and pillars as one, stands 5 metres lower, 2.47 metres toward -x and 8.94 nearer: lowered, the colonnade behind the door lands on the recording's rows and the lantern tower's window band and gold rings on its own, and the bridge whose deck crosses the glide's path passes under the walkway, as the game's glide passes over it however long the title idles; moved across and nearer, the lantern tower's two edges land on the recording's, solved on them with only those two axes free. Laid where the blocks lay it, the glide drove into that bridge every loop and the lantern tower stood a ring too high and a third too narrow, which a rigid fit with its height held read as the towers moving one by one. A camera solved on the towers behind the door instead traded its own height for the bridges' and stood them higher still.
• The walkway assembles itself ahead. The recording's walkway ends a fixed distance ahead however far the world has moved, its far blocks stacked above its surface as they rise into place, as every piece's MonoBlockController moves it. Each piece rises from 3 metres down at 17.5 metres ahead, carries 0.45 metres past its place, and settles into it by 13.5, its span staggered by up to 2 metres of its neighbours': the rows where the recording's walkway settles and ends, read by eye, and its far blocks stacked over the surface in steps of about 15 centimetres. A piece past the rise does not stand at all, so neither it nor its shadow shows before its turn.
• The door's interface waits on the door. The scene says when its door has risen into place (doorFormed), and only then does a click open it and the door's interface come: the four corner buttons 0.3 seconds after, and the prompt's band fading in from 1 second over 0.3, as the English recording's door forms by 12.7 seconds, its buttons show at 13.0 and its prompt at 13.7 to 14.0.
• The door assembles itself at the walkway's far end. The title's frames show the walkway running on with no door on it. Once the door is due it rides on the walkway's copy the glide comes to rest on, nothing past it is built, and it rises as the glide carries it within the walkway's assembling end, as the last blocks settle. The walkway assembles only by its distance from the camera, so its blocks and the door move exactly as the glide does. Once the door is due the glide keeps its pace, never faster, until the first copy at least the walkway's far end away has come within it, where the door rises, then slows evenly to rest on that copy (advanceLoginGlide), so the door's copy stands where the camera's pose has it and the walkway never speeds up to meet a deadline. The opening's browser test holds the click to that: a door still rising misses it. Its frame and panel are each the face the game's mesh draws seen from the front, traced and extruded through the part's own depth, so its shouldered, pointed head is the game's. Its front is painted with the relief its texture carries, read through its own coordinates as its front faces the camera: the panel's raised bands, lighter than the stone round them, and its feet's gilding, each a set of smooth loops in its own colour over the stone (fitLoginDoor), drawn once and read on the frame's and the panel's faces turned to the camera. It rises into place from 5 metres below, easing out and settled by 800 ms, sampled from the game's Ani_LogginScene_Door01_Liftting. It lights from its middle: a bright line down its panel over a glow across the whole of it, raised over the door's light time.
• The click rushes the camera to the door. While the door lights and the screen whitens, the camera closes 41% of its distance to the door in the first third of a second, gathering speed with the square of the time, as the recording's door grows about 1.7 times, and stops short of it under the white.
• The clouds are the game's painted clouds. Each of the sky's three emitters, the cloud sea's billows and the middle and top cumulus, is a band of its own atlas's clouds, traced as shapes, each loop drawn as a smooth curve through its edges' midpoints and its edge softened, and drawn as billboards in the sky's cloud colours, so the hour recolours them without repainting, a band one instanced sprite (createCloudBandSprite) whose clouds are laid out farthest along the camera's view first before each draw, as three's sort would lay out sprites of their own, so the nearer always blends over the farther however the band scrolls. Each is coloured as the game's cloud particles are: its shade mixed toward its lit colour where its crown is, each blended from away from the sun to toward it, brightening toward the sun and fading out over its soft edge and below the horizon. The middle cumulus stands as a bank along the horizon behind the towers, from about 3 degrees under it to 7 over, where the door recording's golden clouds stand through its camera, and the top cumulus from 60 metres up, so the sky between them is not left bare. The cloud sea's billows scroll past with the world, so none stands where the walkway glides: each clears it to its side or stays under it. The sky itself draws no cloud layer of its own. The dusk's clouds take the colours solved on the door recording by matching our clouds' colours to its own by their spread (genshin:parity clouds), its shade a bright pink where the colours read by eye stood a dark mauve; how many there are is judged by eye and by their cover, since a score comparing pixels prices every cloud standing elsewhere than the recording's. Each hour draws its own share of each band's clouds (LoginCloudCoverMap), each cloud ranked by its place in its band's scatter so a thinner sky leaves the rest undrawn: the dawn's and the dusk's shares are solved on their frames by genshin:parity cover, the dawn clear overhead and the dusk clouded almost whole, as their recordings are. The day's and the night's keep the cover they had, since their clouds are not yet of the recordings' kind: the day's read grey where the recording's are white, and the night's dark where the recording's are pale, so more of them scored those frames worse.
• Each sky's light comes from its sun or its moon, placed where its reference shows it. A screen point measured off the reference (the dawn's and the dusk's suns just past the left edge a little over the horizon, the night's moon behind the lantern tower) becomes a direction through the login camera (getScreenDirection), and the light, the sun and the moon all take it, the other body opposite; the day's sun is off its frame, so its direction is measured from the faces it lights. The dusk's sunlight falls from 60 degrees left of the walkway and 15 up, apart from its glow just past the frame: so it lights the lantern tower's face toward the frame's left, leaves the door's and the near towers' faces dark and casts the dais's shadow aside rather than over the walkway, as the door recording shows, where a light from the glow laid that shadow over the walkway and needed a sky light five times too strong to lift it. The hemisphere's sky colour is the bright cloud colour and its ground the shade, so a face turned up is lit by the sky as the references show under a low sun, and the haze scatters the light toward the sun.
• The dusk's sky is solved as the game's sky shader draws it. Over the door recording's clear sky, its pixels standing brighter than the solved sky left out pass by pass as its clouds and the haze lit across it (genshin:parity sky), the dusk's top and bottom colours toward the sun and away, its halos and its own shape are solved together; a trim even both ways kept the clouds over half that sky and solved their mean. Both the recording and the wiki's dusk still score better under it.
• Colours are measured on the screen and inverted into the scene. The sky's, the haze's and the clouds' colours are display colours read off the references, written through the tone mapping's inverse (toSceneColor); the lights' strengths are each hour's scaled until its parts stand as bright as its title frame's over the parts' pixels (genshin:parity exposure), but the night's, which stood a third as bright as its frame and scores best one step toward it rather than at its median, and the dusk's, whose sun and sky light are solved apart channel by channel over the door recording's near faces facing up and turned from the sun (genshin:parity light, stepped by halves to its fixed point, the tone mapping bending each step).
• The haze is the cloud sea's. The haze rises off the cloud sea far under the walkway and thins up past it. It is dense enough 20 metres under the walkway that the towers' feet are white, as the references show, and thin enough at the eye that a tower half a kilometre out is still half seen. The day's is about seven times as dense, with its colour, solved on the phone's door frame over the parts' pixels banded by depth and angle (genshin:parity fog), its colour landing on the one read off the wiki's day still; the dusk's solve runs its density up until the towers drown, since our towers stand too dark at dusk before any haze, so the dusk's haze waits on its light.
• The light casts shadows and draws no god rays. The moon's and the sun's shadows fall across the walkway from a shadow camera over the walkway ahead of the camera. The door casts none: at dusk the sun stands low behind it and would lay its shadow down the walkway toward the camera, where the door recording's walkway and wings are lit, and the phone's door frame and the wiki's dusk still both score better without it. The god rays lit the whole sky in the light's colour, so the login's sky states turn them off.

Tests

• Game/Opening/Index.browser.test.ts plays the whole opening with timers and frames faked, through the login's title, flight and door, and checks every handoff and the finish.
• The walkway and the door have unit tests of their measures: the walkway's pieces span its underside to its surface, each about its own middle, and stand nowhere past its widest, and the door's frame stands round an opening its panel fills, recessed behind the frame's face. advanceLoginGlide's test holds the glide's pace changes to its acceleration, its rest to a whole number of the walkway's copies and the door to first standing past the walkway's far end. The row's test holds the camera's path, and a metre either side of it, open through the towers and the bridges' hulls from end to end. Each fit that builds the data has its own test in scripts/src/services/genshinAssets.
• Login/Interface is shot in each stage as fixture variants and held to its approved images; its references are the English recording's frames, over which it is compared.

Key files

Sources

• Login Menu, Genshin Impact Wiki: the four backgrounds, the hours each is shown at, and the door and platform.
• GENSHIN IMPACT | CELESTIA DOOR | LOADING SCREEN: the English client's login screen at 1080 high and 60 frames.