Sakura Crossing is a browser-based 3D exploration of a Japanese suburban neighborhood in blossom season, built with Three.js and rendered to mimic a hand-painted 2D animation background using runtime shaders and no pre-made image assets.

Stars

113

7-day growth

No data

Forks

22

Open issues

0

License

MIT

Last updated

2026-07-29

AI repository intelligence
FR-AI / ANALYSIS

Why it is worth attention

It achieves a complete 2D cel-shaded look entirely through real-time rendering techniques (toon material, screen-space ink, post-processing) without any sprite or texture assets, and features a spherical world with a seamless railway loop, interactive e-bike, and 22 interactable objects.

Who it is for

  • WebGL / Three.js developers and technical artists
  • Game developers interested in non-photorealistic rendering
  • Anime fans who enjoy explorable virtual environments
  • Students learning procedural content generation and shader programming

Use cases

  • Studying advanced Three.js rendering techniques for stylized graphics
  • Inspiration for creating 'anime background' style real-time scenes
  • Interactive storytelling or nostalgic virtual tourism in a Japanese setting
  • Educational demo for procedural geometry, post-processing, and shader work

Strengths

  • All visual elements (signs, lanterns, price strips) are drawn at runtime with Canvas2D – zero image assets in the source
  • Sophisticated toon shading with hue-shifted shadows and screen-space ink using second difference of depth for clean silhouettes
  • Full spherical world with an exact 1005 m great‑circle railway, bent via equirectangular projection with no seam
  • Rich interactive features: 22 interactables, drivable e‑bike, train with crossing gates, and a music playlist system

Considerations

  • Requires Node 18+ and an HTTP server (cannot run as file:// due to ES modules)
  • Only one music track ships with the repo; additional tracks must be provided by the user and are commercial‑license dependent
  • The world is intentionally empty of people, which may feel sparse for some users

README quick start

Sakura Crossing — 桜踏切

An explorable Japanese suburban neighbourhood in blossom season, built as a real 3D scene in Three.js and rendered to look like a hand-painted 2D animation background.

Every sign, fascia, lantern and price strip above is drawn at runtime with Canvas2D — there is not one image asset in src/. The lines are a screen-space second difference of depth, not an edge filter. See How the 3D-to-2D look is built.

It starts at a level crossing and grows outward from there: a shopping street, a community shrine up a flight of stone steps, a high school on the rise behind the station, a pedestrian overbridge, a branch library, a residential lane, two back alleys, a summer-festival ground caught mid-preparation, a community-bus turnaround at the far corner where the estate runs into a hillside, and the housing in between — with a drainage channel running the width of the town between two arms of a range of low hills, and a railway that goes the whole way round the planet and through the hills twice on its way. There are no people anywhere in it, and there are not meant to be — everything the place has to say about itself is said by what has been left out, pinned up, parked or forgotten.

Needs Node 18 or newer, and nothing else — three.js and Vite are the only two dependencies.

npm install
npm run play     # build + serve the production bundle, port 5179 — just want to play
npm run dev      # dev server with HMR, port 5178 — for working on it

Then open the printed URL and click to explore. Keep the terminal open; closing it stops the server. A plain file:// open will not work — the project is ES modules, so it needs to be served over HTTP.

key
W A S Dwalk
Shiftrun
mouselook
Einteract — and get on / off the e-bike
Vcall up the e-bike (again to send it away, or to call it back to you)
Porbit out and look at the whole planet
Mmusic on / off
Cshow coordinates (flat x/z/y, yaw, and a ready-made camera line)
Shift+Ccopy that line to the clipboard (or click the readout)
Rreturn to the opening view
Hhide / show the hint line
Escrelease the cursor
O / Gtoggle the ink pass / the colour grade (to see what they do)

The background-music

Description

An explorable Japanese suburban railway-crossing neighbourhood on a small planet, rendered 3D-to-2D as a cel-shaded anime background. Three.js, no image assets.

Related repositories

Similar projects matched by category, topics, and programming language.

react
Featured
react GitHub avatar

react

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.

Web DevelopmentFrontend Frameworks
246,741
tandpfun
Featured
tandpfun GitHub avatar

wardrobe

A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.

JavaScript
1,570
mshumer
Featured
mshumer GitHub avatar

Claude-of-Duty

A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.

AI & Machine LearningAI Agents
1,234