Procedural Road

A highway that never ends can't be stored. No file is big enough, and no memory is either. So our road is not a thing we keep. It is a question we ask: what is at this spot?

This course builds on the free Up to Speed with Arcade ECS course, so entities, components, systems and the scene JSON are used here without being explained again.

Make the project

Open a terminal in the folder where you keep projects. Log in, make a game that Babylon.js draws, and download what this lesson needs:

bjs login
bjs create endlessrampage --kind game --renderer babylon
cd endlessrampage
npm install
bjs use .
bjs download HighwayRoad
bjs download RoadCamera
bjs download vehiclecombat-interceptor
bjs download vehiclecombat-textures-road
bjs download vehiclecombat-skies

bjs create makes the folder and points downloads at it. If you switch to another project and come back, bjs use . points them here again (the . means this folder).

Components land in src/components/<Name>/. RoadCamera reads the car's speed off CarDriveComponent every frame, so it brings CarDrive along, and CarDrive brings KeyboardInput, which turns key presses into events. Until CarDrive is on the car, the speed reads 0. The assets land in public/vehiclecombat/: the car model, four asphalt texture maps, and four HDR sky photos (lesson 1.4 uses all four; today the afternoon one lights the scene). The lights, Mesh, MeshPrimitive, Shadow and EnvironmentTexture come built into @babylonjsmarket/arcade.