11 ms·
Infinitown – A WebGL Experiment
- taneq 9y agoThat'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? :)
- glandium 9y agoNice indeed. A few problems on my Firefox with shadows in the bottom left, and the question mark button does nothing.
- wiz21c 9y agousing FF 58 on Debian, works flawlessly
- alexcroox 9y agoI was pleasantly surprised to see vehicles stopping for each other!
- madez 9y agoThey don't always stop realistically. Sometimes they stop exactly right before crashing into another vehicle.
- tudorw 9y agome too, I wish people drove that calmly round here :)
- crottypeter 9y agoBut they stop on the zebra crossings! No regard for pedestrians ;-)
- guigui 9y agoThanks. Unfortunately, there's no way to rotate the camera (not because of technical limitations, but simply because it wasn't part of our vision). There is some car detection code but it's far from perfect and collisions happen from time to time.
- Geee 9y agoYou can tilt the camera by scrolling on your mouse.
- xamde 9y agoWow, this town has good cell phone coverage :-)
- trenpixster 9y agoThis is really neat, love how clean it looks. Any intention on a follow up post with a bit of behind the scenes information?
- rahulroy9202 9y agoJust 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.
- Boothroid 9y agoLovely work.
- ordu 9y agoDoesn't work without ajax.googleapis.com. Movements in this town are also tracked by Google.
- TekMol 9y agoAnd 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?
- deleted 9y ago[deleted]
- jlebrech 9y ago> Isn't google tag manager a tool to "click together" modules for people who cannot write html? or would rather not?
- guigui 9y agoWe just wanted to improve loading speed by serving a Google-hosted version of jQuery (which is most likely already in users' browser cache).
- frik 9y agoIs it a Unity app exported to HTML5 (w JS and WebGL)?
- shakna 9y ago> Made with: Three.js, Blender, Unity. Seems so.
- bhouston 9y agoIt 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 9y agoHi, 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.
- bhouston 9y agoThanks for the explanation. That makes sense. Neat stuff. Btw there is proprietary/coprighted unity shader code cut and pasted into this, someobe even copied the original comments from the unity shaders. For example search for "DecodeLightmapRGBM" in the below source code, which is from the demo - that code and others are copied: https://gist.github.com/bhouston/1c3c6835ca9766571f07ad0126d70f5a https://gist.github.com/bhouston/1c3c6835ca9766571f07ad0126d... Here is some unity source code to compare against: https://gist.github.com/nicloay/8d2ae254a77de58bb42b9009b4cfa1c3 https://gist.github.com/nicloay/8d2ae254a77de58bb42b9009b4cf...
- 9y ago
- hmexx 9y agoRuns 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.
- bufferoverflow 9y agoIt runs flawlessly on my cheap Nexus 5X. It's pretty low-poly, but I like the look.
- vultour 9y agoYeah I was really surprised how beautiful it is on my phone. Meanwhile my old i7 laptop barely gets 15fps...
- worldsayshi 9y agoSame 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-in-chrome-on-ubuntu https://askubuntu.com/questions/299345/how-to-enable-webgl-i...
- zingmars 9y agoThat's weird, because my ages old i5 laptop renders it just fine. What browser are you using? Are you maybe in power saving mode? Odd.
- hellofunk 9y agoCool, 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.
- MrGilbert 9y agoApparently, they are using three.js The examples for this lib are also pretty cool: https://threejs.org/examples/ https://threejs.org/examples/
- worldsayshi 9y agoAwesome! Makes me want to do 3d dev again. It even works runs really smoothly on my linux work-laptop(1). (1) - After doing this: https://askubuntu.com/a/299346/81166 https://askubuntu.com/a/299346/81166
- deleted 9y ago[deleted]
- johnvega 9y agoplayed around with threejs for fun http://3d.delavega.us http://3d.delavega.us what I realized is that this demo web app can probably run on over a billion devices: Windows, Mac, iOS, Android, Linux. try it.
- fenwick67 9y agoI 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 9y agoQuack!!!
- qualitytime 9y agoNice 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 9y agoYeah 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 9y agoYes, 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 9y agoamazing performance and great visual style. i'd love to see it become a playable simcity-like.
- sohkamyung 9y agoThat'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
- RandomInteger4 9y agoSeems like it's animation related, meaning they intended it to animate like that.
- guigui 9y agoIt's actually an intentional animation. We just thought it looked cute. Interesting to know that it can be interpreted as a bug though.
- sohkamyung 9y agoOh, 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.
- etaioinshrdlu 9y agoHere 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.
- deleted 9y ago[deleted]
- hardwaresofton 9y agoThat'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 9y agoWhile 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 :)
- minicoolva 9y agoThis is my site https://aicochow.github.io/vpn/ https://aicochow.github.io/vpn/
- TeeWEE 9y agoDoesnt work in Firefox Quantum
- guigui 9y agoIt works for us. Which OS are you on? Also, any error message in the console? Thanks.
- deleted 9y ago[deleted]
- TeeWEE 9y agoI'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]
- pjmlp 9y agoIt surely works on Windows.
- agildehaus 9y agoI had similar problems and a Refresh fixed it for me: https://support.mozilla.org/en-US/kb/refresh-firefox-reset-add-ons-and-settings https://support.mozilla.org/en-US/kb/refresh-firefox-reset-a... (note this will wipe out some settings)
- deleted 9y ago[deleted]
- tobyhinloopen 9y agoWhere'd you get the assets?
- skocznymroczny 9y agoI don't know exactly where he got his assets (or if he made them himself), but this guy https://www.reddit.com/user/QuaterniusDev/submitted/ https://www.reddit.com/user/QuaterniusDev/submitted/ offers free assets in similar, colorful low-poly style
- pdubroy 9y agoLooks like it's from here: https://www.cgtrader.com/3d-models/exterior/cityscape/simplepoly-city-low-poly-assets https://www.cgtrader.com/3d-models/exterior/cityscape/simple...
- neonhomer 9y agoThe about page says "Models by SimplePoly". So that's probably it.
- tfeldmann 9y agoVery nice demo! Safari really seems to struggle with this (2014 MacBook Pro, High Sierra). Chrome and Firefox show much better performance.
- jayflux 9y agoPleasantly surprised to see this work smoothly on my iPhone 6s
- discordianfish 9y agoSurprised it runs well on my linux laptop - except that here I can't click the ? which worked fine on my iPhone.
- ryaanwells 9y agoThe cloud shadows look like they are in a different direction to the other shadows? Does anyone else see this?
- pagnol 9y agoI find myself wanting to do something similar... thanks for the inspiration!
- PostOnce 9y agoLittle 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
- vortico 9y agoOn mobile, that game runs better than any native game I've seen!
- guigui 9y agoThanks, 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
- softawre 9y agoOh man, Grimrock I miss you.
- Spoom 9y agoStylistically this reminds me of Onett from Earthbound.
- luckystarr 9y agoThe cars sometimes drive through one another.
- jonasenordin 9y agoNoticed a weird shadow on the heli landing pad. And lo, there's a cloud up there!
- vafilor 9y agoVery neat! I really like the visuals.
- 0wl3x 9y agoDoes 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.
- diegomacario 9y agoThis 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.
- sambeau 9y agoI'm blown away by your README!
- diegomacario 9y agoThank you :-)! Writing it was by far the hardest part of the project.
- AlphaSite 9y agoHave 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 9y agoThat bunny is stunning! Thank you for the link, it looks like a great resource. Refraction, here I come!
- marcusjt 9y agoUnlike 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!
- xtrimsky1234 9y agoThis 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.