
Infinitown – A WebGL Experiment - edejong
http://demos.littleworkshop.fr/infinitown
======
etaioinshrdlu
Here is a another infinite city written in a WebGL shader.
[https://www.shadertoy.com/view/XsBSRG](https://www.shadertoy.com/view/XsBSRG)

All the calculations are done on a per-pixel basis, there are no polygons or
other objects created. The city is a 3d scalar field with effectively an
isosurface plotted.

The city is made infinite with a simple modulo operation in X-Y on the field.

Interesting to note in this technique there is no additional computational
load associated with more visible objects, and there can be as many objects as
pixels.

~~~
hardwaresofton
That's pretty impressive, but it didn't work in FF (Developer 57.0b1 64-bit)
for me, had to change to chrome and then it seemed to be getting 8fps (at
least that's what the readout on that page was).

The Infinitown posted here was (pretty much) buttery smooth though, and
relatively fast loading time (especially the second time with cache), and I
bet the codebase is a lot easier on the eyes, though it's likely nowhere near
as efficient as writing it all in the shader obviously.

Is the world just waiting for a no-dependency cross browser
MMO/shooter/whatever 3D game to take the world by storm? Why worry about Steam
when people can just go to a website, if the experience is good enough and the
game is simple enough? I must not know enough about the industry/how hard it
is to make a good game + how hard it is to make a truly good browser-only
game.

~~~
gilbetron
While there might be something, modern games take a massive amount of data,
and for a website, you'd have to load that before playing it. Plus it is
difficult to monetize. Demos are fun and easy, full games take a lot of work.
There are actually some cool web games already out there, but being in the
browser isn't particularly interesting, in the end.

Infinitown is just a set of objects repeated in different
orientations/combinations. The shader-city is awesome though. Very clever :)

~~~
hardwaresofton
If you're OK with handling a whole bucket of naivete, I'm going to really heap
it on:

\- the game monetization problem's always around (and always going to be
around) -- is there a reason one wouldn't pay for a game in their browser but
would pay for one on steam?

\- Some of the greatest games of all time made do with so much less -- Isn't
the resource problem just a matter of effort/ingenuity? Also isn't that
problem bound to go away as time goes on? (though of course the "modern game"
target will also move)

\- I must not understand enough of why/how the demos are so different. Isn't
shader city doing the exact same thing but insted drawing the visible pixels
in space (and from a different viewpoint) rather than rendering the higher
level polygons? I thought the key innovation/hard bit was the fact that it was
_inside_ a single shader.

~~~
gilbetron
Naivete is awesome when trying to not be it ;)

What does playing in the browser get you when you need to download 100MB+? You
use the browser to get access to the standard features and DOM, if you ditch
all that, add in a huge upfront download cost, then you might as well just
install. There are plenty of cross-platform ways to do it these days.
Additionally, browser games have an air (fair or not) about them of cheapness.

Then again, I'd be really happy if someone proved me wrong, and significant
webgames became a thing. And it is a great exercise to analyze why webgames
are bigger.

The infinite city is "just" tying a location to a randomly chosen and oriented
set of objects. All the rest is standard scene graph rendering pipeline. The
city shader does that for each "pixel" in the scene, and takes much less data
to get a far cooler effect. Imagine coming up with an algorithm that picks a
random lego object (a car, a police station, a boulder, etc) for each inch on
your floor. That's infinicity. Now imagine picking a single lego piece based
on your location and direction you are looking, and having that always match
up even if you move, and when doing so, the resultant "legoscape" is a cool
city. That's the city shader.

Sorta.

~~~
wyqydsyq
Being browser-based, you wouldn't be waiting to download 100MB+ if it's
correctly designed

You'd download a 1-2mb core script bundle that then dynamically lazy-loads
resources as required. For example, if Hearthstone were converted to a browser
game, you would initially only load the base client, all the metadata and
media (e.g. hero SFX, card data, effects, images) would be loaded on the fly
as they are required, or pre-loaded at determined points (e.g. load all the
data for both players' decks when beginning a match)

------
PostOnce
Little Workshop has done neat stuff, none of it rocket science, but all of it
very polished. My favorite is
[http://www.playkeepout.com/](http://www.playkeepout.com/)

Sadly they never seem to open source anything? It'd be nice to see how such
polished stuff is organized

~~~
guigui
Thanks, Keep Out is also my favorite project.

Our first web game,
[http://browserquest.mozilla.org](http://browserquest.mozilla.org), was
actually open source:
[https://github.com/mozilla/Browserquest](https://github.com/mozilla/Browserquest)

~~~
tootie
I'm evaluating some WebVR options right now and wondering what you think is
state of the art. Are things like a-frame and react-vr a step forward or a
crutch? Is Unity viable for web-first apps?

------
diegomacario
This is so cool! I'm always blown away by your projects Little Workshop. I
recently finished building my first ray-tracer
([https://github.com/diegomacario/Super-
Sunshine](https://github.com/diegomacario/Super-Sunshine)). I felt proud of
the images and animations I generated with it until I clicked this link - now
I just feel like a caveman :p.

~~~
AlphaSite
Have a look into implementing a glazed shader, it has some super nice results;
it can give some surprisingly nice results for a very simple shading model
[https://imgur.com/a/TcliH](https://imgur.com/a/TcliH) .

There are more details on:
[http://www.cs.cornell.edu/courses/cs4620/2017sp/](http://www.cs.cornell.edu/courses/cs4620/2017sp/)

~~~
diegomacario
That bunny is stunning! Thank you for the link, it looks like a great
resource. Refraction, here I come!

------
taneq
That's pretty cool. Is there any way to rotate the camera? Also just saw a car
and a truck crash into each other, but they both just drove off - next step
maybe proper vehicle interactions and emergency services? :)

~~~
alexcroox
I was pleasantly surprised to see vehicles stopping for each other!

~~~
crottypeter
But they stop on the zebra crossings! No regard for pedestrians ;-)

------
hmexx
Runs absolutely flawlessly on an iPhone 7. I’m not a game designer so no idea
if that’s to be expected but to a casual it looks impressive running in a
mobile browser.

~~~
vultour
Yeah I was really surprised how beautiful it is on my phone. Meanwhile my old
i7 laptop barely gets 15fps...

~~~
worldsayshi
Same for me on Chrome on Linux. I'm surprised I got anything on Linux since I
didn't think Chrome devs bothered with webgl support on Linux.

Edit: Oh, this did the trick: [https://askubuntu.com/questions/299345/how-to-
enable-webgl-i...](https://askubuntu.com/questions/299345/how-to-enable-webgl-
in-chrome-on-ubuntu)

------
MrGilbert
Apparently, they are using three.js

The examples for this lib are also pretty cool:

[https://threejs.org/examples/](https://threejs.org/examples/)

~~~
fenwick67
I love making little demos with Three.js. It's amazing what a web browser can
do these days.

The prettiest so far is
[https://fenwick.pizza/rentaduck](https://fenwick.pizza/rentaduck)

~~~
robertlagrant
Quack!!!

------
ordu
Doesn't work without ajax.googleapis.com. Movements in this town are also
tracked by Google.

~~~
TekMol
And it tries to load data from googletagmanager.com

I wonder why. Isn't google tag manager a tool to "click together" modules for
people who cannot write html?

~~~
jlebrech
> Isn't google tag manager a tool to "click together" modules for people who
> cannot write html?

or would rather not?

------
marcusjt
Unlike almost every other 3D WebGL (or Canvas) demo that gets posted on HN,
smartphones were clearly given due consideration and hence this demo works
beautifully in Chrome on my ageing Galaxy S6, including dragging around and
using a zoom gesture to toggle viewpoint. Very impressed!

------
jayflux
Pleasantly surprised to see this work smoothly on my iPhone 6s

~~~
discordianfish
Surprised it runs well on my linux laptop - except that here I can't click the
? which worked fine on my iPhone.

------
trenpixster
This is really neat, love how clean it looks. Any intention on a follow up
post with a bit of behind the scenes information?

------
xtrimsky1234
This is less of an infinite town, and more of a camera loop. You can see the
houses end up being a simple repetition, and if you find a place that repeats
a bit later, and you go very fast, you can see that the cars are also exactly
the same (colors) in the same area. So it's definitely a loop.

------
0wl3x
Does anyone have any good advice on getting started building things in 3D
using Unity and bringing it to the internet via ThreeJS? I've learned a little
bit about threeJS but I'm not sure how to take things out of Unity and into
ThreeJS and into my browser.

------
sohkamyung
That's weird: I'm seeing a cloud bounce up and down as it slowly floats over
the town.

Browser related? Here's my browser info for reference:

Build identifier: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0)
Gecko/20100101 Firefox/57.0

~~~
guigui
It's actually an intentional animation. We just thought it looked cute.
Interesting to know that it can be interpreted as a bug though.

~~~
sohkamyung
Oh, I wasn't aware of that. Thanks for the clarification.

Yes, it did look like a bug to me because I didn't expect clouds to act like
that in what I took to be a simulation of the real world.

------
tfeldmann
Very nice demo! Safari really seems to struggle with this (2014 MacBook Pro,
High Sierra). Chrome and Firefox show much better performance.

------
rahulroy9202
Just experienced the difference between Chrome and FireFox.

To be fair, I did have a lot of tabs open in chrome already. Like about 30.

Edit - 47 to be exact.

------
ryaanwells
The cloud shadows look like they are in a different direction to the other
shadows? Does anyone else see this?

------
qualitytime
Nice work!

I notice that the vehicles start and stop, whats the logic?

Is it doing collison testing?

Anyone seen any instances where it fails and vehicles collide?

~~~
Jare
Yeah they stop when another vehicle is crossing, but they don't seem to sync,
so two vehicles sometimes resume driving at the same time and go through each
other.

~~~
qualitytime
Yes, simple collison detection is available out of the box but I can imagine
many "corner" cases that would fail and getting ghost vehicles passing through
each other.

------
donpdonp
amazing performance and great visual style. i'd love to see it become a
playable simcity-like.

------
tobyhinloopen
Where'd you get the assets?

~~~
pdubroy
Looks like it's from here:
[https://www.cgtrader.com/3d-models/exterior/cityscape/simple...](https://www.cgtrader.com/3d-models/exterior/cityscape/simplepoly-
city-low-poly-assets)

~~~
neonhomer
The about page says "Models by SimplePoly". So that's probably it.

------
jonasenordin
Noticed a weird shadow on the heli landing pad. And lo, there's a cloud up
there!

------
pagnol
I find myself wanting to do something similar... thanks for the inspiration!

------
Spoom
Stylistically this reminds me of Onett from Earthbound.

------
xamde
Wow, this town has good cell phone coverage :-)

~~~
danellis
They look like radio towers, not cell towers.

~~~
infogulch
Wow this town has a lot of radio stations.

------
luckystarr
The cars sometimes drive through one another.

------
vafilor
Very neat! I really like the visuals.

------
TeeWEE
Doesnt work in Firefox Quantum

~~~
guigui
It works for us. Which OS are you on? Also, any error message in the console?
Thanks.

~~~
TeeWEE
I'm running FirefoxDeveloperEdition 58.0b5 (64-bit) on MacOS.

Now, after a refresh it worked. But then again a refresh: grey screen.
Refreshing with the screen open: It keeps working. But refreshing and then
switching tabs quickly, and switching back: grey screen. (however very
difficult to reproduce)

Logs only show this: unreachable code after return statement [Learn More]

------
frik
Is it a Unity app exported to HTML5 (w JS and WebGL)?

~~~
shakna
> Made with: Three.js, Blender, Unity.

Seems so.

~~~
bhouston
It is very strange. It seems to have a lot of Unity shader code in it. Much of
it verbatim from Unity's source code.

But the rest of it is Three.JS. Thus were the assets created in Unity and
someone copied the shader code to ensure that they render the same in ThreeJS
as in Unity? I am a little confused.

~~~
franck
Hi, I'm one of the developers. We use Unity as our main scene editor and
exporter. We don't use the official WebGL exporter but a custom script that we
wrote. In this project, we use it to assemble individual city blocks, that we
merge to a single geometry each. We actually don't use Unity shaders at all,
they are also custom made.

~~~
aedron
Just curious, why do you do it that way? (i.e. not just exporting from Unity)

~~~
skocznymroczny
Don't know about this specific usecase, but Unity exports are heavy. I mean,
it compiles C# scripts to C++ and then compiles it and Unity C++ runtime to
Javascript. I easily got download sizes in tens of megabytes when trying to
use Unity export for simple demos. Meanwhile Three.js is very lightweight and
more than enough for such projects.

------
Boothroid
Lovely work.

------
hellofunk
Cool, but a bit uncanny just how realistic it is. Makes me uncomfortable not
to know if I'm looking at a simulation or actually flying over a city, as if
in an airplane.

------
minicoolva
This is my site

[https://aicochow.github.io/vpn/](https://aicochow.github.io/vpn/)

