Doing cool things with AI and threejs.
Toronto, Ontario
Joined June 2008
- Tweets276
- Following175
- Followers248
- Likes136
Pinned Tweet
Toronto, golden hour, entirely in a browser tab.
Built on @mrdoob's Slop New York, three.js WebGPU + TSL, real city data, open source.
slop-toronto.cloud6711.worke…
Isometric Toronto: Now with traffic. Simulated cars on Toronto's real road network, from the Gardiner to Bloor.
Explore it: iso.sloptoronto.ca
nitter.cf/johnfewell/status/2117…
The whole downtown core of my isometric Toronto is drawn: Bathurst to the Don, Bloor to the harbour.
12.66 km² as one 256-megapixel image, about 2% of the city, made in one evening on my laptop.
Explore it: iso.sloptoronto.ca
What broke: drawn straight onto the map, the Gardiner's cars drove right across a condo tower. Now each car pixel is checked against a height mask from Google's depth, so cars go behind towers, roofs and trees. About 70% of downtown's street length is hidden from this angle.
There's traffic now too: little pixel cars and red TTC streetcars on the real streets, from OpenStreetMap and the City of Toronto's traffic counts.
They stop at the lights and drive behind buildings and trees. Light traffic for now, and no buses or ferries yet.
High Park in Slop Toronto now sits at the correct elevations, from Ontario's 2023 lidar: the plateau, the long slope down to Grenadier Pond, the Spring Creek and Wendigo ravines, and every pond at its own water level.
Golden hour. Live now at sloptoronto.ca
The whole downtown core of my isometric Toronto is drawn: Bathurst to the Don, Bloor to the harbour.
12.66 km² as one 256-megapixel image, about 2% of the city, made in one evening on my laptop.
Explore it: iso.sloptoronto.ca
What went wrong: drawn as one image, the map slowly came out darker than frames drawn alone (lightness 0.528 against 0.554).
One colour correction for the whole map fixes it (0.560). It changes every pixel the same way, so it can't make a seam. Shown on the first test block.
The map works on phones: pinch to zoom, Go to jumps to 9 places (here the CN Tower), and the share button gives a link to the view you're on. Downtown only for now.
How I got here: nitter.cf/johnfewell/status/2117…
I'm drawing Toronto as one big isometric illustration, a homage to SimCity 2000. This is the first block: King & Bay up to the Eaton Centre.
I'm using Tiny London's method (tiny.london/how): a big model draws examples, a small one learns from them and draws the city.
I'm drawing Toronto as one big isometric illustration, a homage to SimCity 2000. This is the first block: King & Bay up to the Eaton Centre.
I'm using Tiny London's method (tiny.london/how): a big model draws examples, a small one learns from them and draws the city.
Zoomed in on that first block: City Hall and Old City Hall, the bank towers with their signs, the top of the CN Tower, the Eaton Centre.
The block is 3,328 px square, about 0.8 × 1.5 km on the ground, and took 23 minutes on my laptop (M5 Pro).
