But, for those thinking they're going to make a minecraft clone with this it's not going to work. Making games is all about drawing as little as possible and making as few draw calls as possible. Since CSS only supports planes (3d rectangles oriented in space) that means every cube is 6 draw calls and worse, if you want the browser to draw them correctly they have to be sorted. So let's say you had a 16x16x16 voxel area, that's potentially 24000 planes+ and 24000+ draw calls. That assumes worst case, all cubes with transparent bits like tree leaf blocks. For comparison many AAA games do little than 5000 draw calls per frame, possibly less.
Compare to a functional minecraft clone all of that would be condensed into a single mesh representing a 16x16x16 area. One draw call.
So yea, neat demo but you're going to quickly hit the limits past a few boxy logos
If you're looking for something that actually does do the optimizations necessary for a minecraft clone in the browser see http://voxeljs.com
The really hard part about MineCraft isn't rendering, though; it's multiplayer.
Only good desktop or laptop machines can run it well. Runs like shit on average machines (lets not even mention mobile). This is after several months of dedicated optimization time to reduce resource usage and minimize build size.
Overall, you are faaaar better off writing it in JavaScript with one of the pure js engines if you are going to go this route.
There are other actively developed Web-friendly WebGL frameworks, like Goo Create, PlayCanvas, BabylonJS and many more.
Imagine using a stack of divs like this: https://hcgilje.files.wordpress.com/2011/01/stack.png
If each of those stacked divs represents the faces of all the 16x16 cubes in that plane, then you'd only need 48 draw calls in total. The hard part would be baking the cube textures in to a giant 'megatexture' the first place, but that could be prerendered if you didn't need animation. You'd actually need 96 images because each 'layer' would need 2 sides, but I don't see why it wouldn't work.
Heck, I'd even go so far as to venture that Java webapps run better than WebGL+JS. Perhaps I'm just biased/bitter because the open source radeon driver does nothing good by way of 3D acceleration.
I upload a WebGL demo to github-pages, and publish the URL.
I don't have to worry about code-signing, app-review-process, and don't need to wait days or weeks until the code is 'up'. For iOS this is the only way to get simple demos out.
Users only need to know a URL, they don't need to download or install stuff, they don't need to find the executable after installing, there are no scare-dialogs about installing unsafe executables, no virus scanner warnings, etc...
Web is an amazing distribution channel. The whole world is a click away from using whatever you build. Think about how technology distribution evolved in the last few years.. We used to buy Encarta/encyclopedia from a retailer. Now, with the web, you get the whole encarta (and more) with a click.
Seriously, I just wasted an hour trying to get Hetzner's KVM java web app to run on my Mac, because after having a couple of tickets closed and finally calling support directly, I was told firmly that the applet was from a third party vendor over whom they had no control, there was no other alternative, and they had no plans to support a better way to access the KVM.
I had to use Safari instead of Chrome, then CAREFULLY upgrade Java making sure Oracle didn't trick me into installing any toolbars, then find the Java control panel in the system preferences, which was just too awesome to be constrained by the limited confines of the Mac system preferences windows, so I had to read about how "The Java Control Panel opens in a separate window" because obviously it is so much more important than all other control panels, so I then pressed the "Reopen the Java Control Panel" button, which did what it promised after a half second pause, then I had to click around to the Security tab to find the Exception Site List, press the "Edit Site List..." button to bring up the "Exception Site List" dialog in all its glory and splendor, then press the "Add" button, then type an https url with a numeric ip address and port number into the field, then click a long series of "OK" buttons window close icons, then go back to the web browser, refresh the page, click through another series of threatening warning dialogs, to finally get a bottom of the barrel KVM applet.
And it was convinced I was using a German keyboard, so I couldn't find the punctuation characters I needed to type shell commands, and the Z and Y keys were switched. I had to press and shift-press every key to make a little table of substitutions, and then punch each character in carefully instead of touch typing.
One new thing I found during my Java adventure: the system Java control panel has an "Advanced" tab, and if you scroll way down to the bottom, there is a checkbox labeled "Suppress sponsor offers when installing or updating Java". It was un-checked by default of course. I suspect it's not actually hooked up, it's just a placebo, and exists to make me lower my guard next time I install a Java update. I'm not falling for it.
Also as long as you use `backface-visibility: hidden`, then any cube faces that are turned away from the viewport get passed over after a very initial fast check.
[1] It's now owned/developed by Trimble, Google sold it to them ~4 years ago
Web tech isn't "going backwards" any more than a flag-ship phone is "going backwards" because it's not as powerful as a high end desktop PC.
They solve different problems.
A browser based program is sandboxed, can be instantly "downloaded and installed", runs on all architectures, runs on all major platforms, runs on both desktops, laptops, phones, tvs, and anything else that you can run a browser on.
And even if it was verifiably worse in every single technical way, it could STILL be "progress" if it's easier to use than the alternative.
It's not the same, stop acting like it is.
We just celebrated our 4 millionth user with a 3D visualization of all our users. It uses canvas to draw instead of css, but I think it is one of the best ways to convey a feeling of our global userbase actually using the app. I'm curious what you think of its "3d performance":
http://qbix.com/blog -- it loads in the first post
2) If you click on a country that doesn't have a review, it produces a blank, instead of the country name and flag with no reviews.
It's even sadder that even in Chrome the FPS is noticeably low. This isn't a gaming rig, it's just an Intel card, but it can run plenty of games (at 40+ FPS) from the past five years that are drawing far more than this demo, and reacting to far more inputs.
In principle I love the idea that we could write everything to be portable across OSs and form factors by writing for 'the browser', but still at this point, on this modern computer, the performance is noticeably worse, and ultimately lackluster.
It's the same story on mobile, and not just limited to GPU-bound applications, despite the prevalence of web tech in that space. At the end of the day all of this 'write it for the browser' just translates to using far more CPU cycles than putting in the effort for 'native'.
I love 3D transforms, they're great. I wish I could practically make stuff with them. But they're so slow and there's bugs in every implementation.
So WebGL is all that is practical for anything beyond a few spinning cubes.
In the video at the top of the page, Max Ogden's presentation is fantastic and well worth watching! He did a survey of many other similar projects on github, and built on top of the best ideas from them all.
I'm watching just the three cubes at the bottom of the page.
GPU is holding steady at 97-99% for several minutes now. voxel.css is 80-90%.
