Genshin

Genshin Impact's continent is being rebuilt in the app as a fan work, walkable at the game's own scale and in its anime look. /genshin plays it as the game does: the opening, then the world full screen, with nothing over it (the agent console is hidden from it until it is rebuilt in the game's style). The world is drawn by genshin-engine, a published package of plain TypeScript and TSL modules that knows no place by name. The game's world on it is genshin-world, a published package holding the catalogue, each region's data (its heights, colours, landmarks and look) and the TresJS components that build it. The game's 2D interface is genshin-interface, a published package of presentational Vue components with no three.js in it, which the world's screens are built from. The app keeps only the game's two pieces: apps/web/app/components/Genshin/Index.vue, the opening over the world loading behind it, and Genshin/World.vue, the canvas, loaded lazily so the opening shows at once, which hands the world what only the app can: the terrain worker its bundler builds, the URL its server serves region data at, and whether the tuning panel shows.

flowchart LR
  E[genshin-engine: game-agnostic rendering and kits] --> W[genshin-world: the game's regions, scenes and screens]
  U[genshin-interface: the game's 2D interface] --> W
  U --> A[The app's interface-only pages]
  W --> A2[The app's canvas and opening]

• Three packages, split by what a page loads. A page that shows only interface loads genshin-interface and no three.js; the engine knows no place by name; the world is everything that is the game's own. A fourth package for assets was rejected: nothing taken from the game is committed, so it would hold nothing.

It is unofficial and non-commercial, and makes no claim to be HoYoverse's. No model, texture, sound or image file is taken from the game: every world asset is generated by our own code at measures taken off the game, and the interface's glyphs are traced from the game's marks into paths of our own (derived assets).

Key concepts

• Windrise is the first scene. Every scene starts in the Windrise the rendering style page describes, loaded at three in the afternoon. Every engine page is first shown there.
• Light is shared uniforms. Every material reads one set of light uniforms, and the fog one set of fog uniforms, so the hour and the weather will move the whole world by writing a few values.
• A quality tier removes cost, never the style. What a tier trims and what it keeps is set on the rendering style page.

The pages of this area

What is still to build is the Genshin proposal, and the open work on what is built is the roadmap. Decided ideas: deferred.

Shipped

• The rendering style, in the Windrise scene, replacing the console's voxel world.
• The sky and the game's day over it.
• The terrain, streamed and morphing, in place of Windrise's one fixed heightfield.
• Still water, first in the lake east of Windrise.
• The wind, and grass generated around the camera.
• The world map's catalogue, and Mondstadt's landmarks loaded by reach.
• The game's opening: its splashes, health notice, login screen with its flight to the door, and startup loading screen.
• The game's own words in its fifteen languages, served to the page in the reader's and to the persona plugin.

Key files