
Voxel.css - notdarkyet
http://voxelcss.com/
======
greggman
Cool demo.

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](http://voxeljs.com)

~~~
roddux
Honestly I don't understand the craze of wanting to put EVERYTHING in a
browser. I'm sure in many cases (for game development at least) it's _easier_
to do it native, not to mention a tonne faster and less resource-intensive.

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.

~~~
sleepychu
If your game is in the browser then I run it in a sandbox which I trust (if
you're using native web technologies as opposed to a java 'webapp'). I don't
need any storage on my local machine and when you make a change I just
'update' by refreshing my page.

~~~
Klathmon
And it doesn't matter if i'm running it on a phone, tv, desktop, laptop, x86,
ARM, windows, linux, mac, etc...

It removes all of those from the equation, web tech will be available on most
platforms i want to use, so i'm free to choose the best for what i want
without worrying if a ton of my software is supported.

~~~
ascagnel_
Except all of those have vastly different methods of interacting with your web
app. A responsive website can handle the more similar methods of interaction
that a desktop, laptop, and mobile devices rely on with slight tweaks to
account for a fingertip vs a mouse, but trying to run a similar application on
a TV will be an exercise in user frustration.

~~~
Klathmon
I'm not saying you get magical interaction for free, but i've written a toy
web app that works fine on my tv.

The arrow buttons on the remote act as up/down/left/right and the "OK" button
acts as enter. It actually ended up needing very little in the way of custom
code to work, but like i said this was a pretty small toy app.

Still, if you want an example of a real "web app" that runs on all of those
platforms, just look at netflix.

~~~
kenbellows
Though in fairness, Netflix hasn't historically bee based on native web tech;
it used to be Microsoft Silverlight for web browsers (I think they've gone/are
going HTML5 now), and even now it's native apps for mobile devices/smart
tvs/etc.

------
bananaoomarang
Don't get me wrong: this is cool. It just makes me sad the performance is so
night vs day on Firefox vs Chrome (Nightly and Dev branch on Linux). The
former is glitchy (some planes are rendered when they should be hidden behind
other geometry?) and stutters.

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'.

------
TheTravCav
Simmer down comment section. So what if it's not the most perfect thing ever.
This is neat. Good job by all that worked on it. I'll bet they learned a lot
in the process and had fun doing it. thanks for sharing it with us.

------
DennisAleynikov
Tridiv [1] is something cool to check out as well, really cool concept taken
to a crazy complex level. It's an actual editor for making complete 3D models
in the browser. I wonder if something of the complexity of the X-wing model
[2] could be used with voxel css to make a flexible game engine.

[1] [http://tridiv.com/](http://tridiv.com/) [2]
[http://goo.gl/sn7Y30](http://goo.gl/sn7Y30)

------
viraptor
The demo page has some serious z-order issues. (FF 43)

~~~
hDeraj
This is actually a bug with CSS3D transforms in general with Firefox:

[http://jsfiddle.net/yNfQX/21/](http://jsfiddle.net/yNfQX/21/)

~~~
robin_reala
This is being tracked at
[https://bugzilla.mozilla.org/show_bug.cgi?id=1187209](https://bugzilla.mozilla.org/show_bug.cgi?id=1187209)

------
Chirael
Locked up my iPhone 4 when I scrolled down to the spinning cubes (in Safari).
Eventually after about 10 minutes of being completely unresponsive, it
rebooted. No judgment, just reporting what happened when viewing on a phone.

~~~
odbol_
To be fair, you're using a 3 year old iPhone, with Safari. My HTC One M8 runs
it pretty fast with Chrome.

~~~
strmpnk
I think the iPhone 4 is from 2011 so roughly 4+ years old. With safari though,
I'd also be interested in knowing the iOS version.

------
pacomerh
Nice demo. The .css in the name gave me the impression that this was a pure
CSS library.

------
EGreg
This is definitely an impressive demo. I wonder if 3D will begin to be used a
lot more in websites and mobile sites in the next few years.

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](http://qbix.com/blog) \-- it loads in the first post

~~~
samwiseg
Congratulations on 4 million users! The visualization works really well, IMO.
A couple thoughts on its implementation: 1) The dropdown list of countries is
not alphabetized. Makes it difficult to find reviews from a given country,
although it does make you use the map:)

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.

------
TazeTSchnitzel
Does this work around broken 3D transform depth sorting? To see what I mean,
look at this in Firefox:
[https://ajf.me/demos/200blocks/](https://ajf.me/demos/200blocks/)

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.

------
DonHopkins
Here's a cool project to efficiently and flexibly implement minecraft-like
games in the browser in JavaScript/WebGL. It's built out of a bunch of NPM
Node modules with browserify.

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.

[http://voxeljs.com/](http://voxeljs.com/)

------
dvcrn
This is really cool! I don't know what I could do with it but definitely a fun
project to play around with.

~~~
aandon
Google Sketchup is an unsophisticated but good quick-and-dirty modeling app.
It wouldn't be a huge leap to see it built in a CSS framework like this.

~~~
zurn
SketchUp[1] is built for ease of use for in mind for people who are not 3D
pros but there's actually quite a lot of clever things going on under the
hood[2] so it would not be a weekend project to reimplement. But yes, a web
based clone would be awesome.

[1] It's now owned/developed by Trimble, Google sold it to them ~4 years ago

[2] [http://mastersketchup.com/sketchup-
inference/](http://mastersketchup.com/sketchup-inference/)

------
annnnd
Anyone had any luck finding the license?

~~~
TwoFx
Looks like it's MIT-licensed:
[https://github.com/HunterLarco/voxel.css/blob/master/package...](https://github.com/HunterLarco/voxel.css/blob/master/package.json#L31)

~~~
annnnd
Thanks for the link! Looks like author added it too, it is indeed MIT:
[https://github.com/HunterLarco/voxel.css/blob/master/license...](https://github.com/HunterLarco/voxel.css/blob/master/license.md)

------
paulddraper
The page process and the GPU process are duking it out in Chrome to see which
one can most fully peg a CPU core.

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%.

------
phodo
Cool. Making this stereoscopic would lead to using this to experiment with a
VR type of use case - even for a non-interactive flavor.

~~~
callahad
Mozilla's been working on declarative, VR-enabled markup under the A-Frame
project ([https://aframe.io/](https://aframe.io/)), which might be of interest
to you.

~~~
suyash
Just learned about this..great project. Thanks for sharing.

------
voltagex_
I wonder how hard it would be to get a Leaflet.js map rendering as a mesh -
would be a cool little toy to flip between lots of maps.

------
digitalpacman
Neat, but it's laggy.

------
odbol_
Awesome! Dragging doesn't work on mobile though

------
sdabdoub
Very interesting, but needs gimbal lock correction.

------
beyti
Thought css support for webgl ):

------
nodivbyzero
Crazy demo!!!

------
lawnchair_larry
This is not a useful submission title.

~~~
ferrari8608
It seemed pretty straight forward to me. How did you not find it useful?

------
melted
Someone should make a Minecraft clone out of this.

------
suyash
Why is it called CSS when it's a JS library for 3D? Totally confusing name
that breaks convention.

~~~
cmaher92
It's all rendered in CSS

------
cousin_it
Voxels are the most expensive way to model a 3D shape, and browser CSS is the
slowest way to render a 3D shape. These two were made for each other. The next
step is to reimplement the Mars DOS demo [1] using voxels in the browser, and
marvel at the slowdown compared to 1993. It's discouraging that we're supposed
to cheer for progress even when it's headed backwards.

[1]
[https://www.youtube.com/watch?v=_zSjpIyMt0k](https://www.youtube.com/watch?v=_zSjpIyMt0k)

~~~
Klathmon
I love when you guys come into a thread about web tech and dump on it.

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.

~~~
cousin_it
Zero installation at the cost of 10x worse performance is a worthwhile
tradeoff for websites, but not for games or other 3D-heavy applications. That
won't change as computers get faster, because native apps get faster too. Web
3D won't be widely adopted until it can close the performance gap. The OP
makes that problem worse, not better. Hence my negativity.

~~~
Klathmon
Bullshit that web 3d won't be adopted. It already is! Google maps uses web 3d
pretty heavily already, and it's a perfect example of this.

But even if i concede that point, i still don't agree. Who are you to say that
this doesn't solve any problems?

Say for example a website that wants to include something so you can view a
product in 3d and be able to move it around and inspect it.

That's not something i want to have to download a full desktop program for and
give it access to god knows what on my machine for, but it's something i'd
love to have to see a 3d render of something to get an idea for it's
size/shape/other features.

OP isn't even marketing it as a library for "games or other 3D-heavy
applications", he's marketing it as a really easy way to get some 3D rendering
in the browser.

~~~
cousin_it
For what it's worth, I agree that the web needs something like WebGL to cover
the Flash use cases (animated ads and casual games).

Not sure why you need voxel.css, though. When would you use it instead of
[http://www.marmoset.co/viewer](http://www.marmoset.co/viewer) ?

~~~
f33fa240
No one's claiming it has any practical use case, this is really just a toy.

Though, one use case might be to have a 3D environment where in-game menus are
made with the DOM. Maybe in a virtual reality thing, or a rotating cube
interface: [http://ux.stackexchange.com/questions/11229/is-this-
rotating...](http://ux.stackexchange.com/questions/11229/is-this-rotating-
cube-interface-user-friendly)

