10 ms·
Voxel.css
- dvcrn 11y agoThis is really cool! I don't know what I could do with it but definitely a fun project to play around with.
- aandon 11y agoGoogle 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 11y agoSketchUp[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/
- deleted 11y ago[deleted]
- viraptor 11y agoThe demo page has some serious z-order issues. (FF 43)
- hDeraj 11y agoThis is actually a bug with CSS3D transforms in general with Firefox: http://jsfiddle.net/yNfQX/21/ http://jsfiddle.net/yNfQX/21/
- robin_reala 11y agoThis is being tracked at https://bugzilla.mozilla.org/show_bug.cgi?id=1187209 https://bugzilla.mozilla.org/show_bug.cgi?id=1187209
- thenomad 11y agoThat's depressing. This is a really neat bit of tech that I'd never consider using whilst it doesn't work in FF...
- nothis 11y agoLooks like this jsfiddle just doesn't do per-pixel z-sorting (which I wouldn't have expected from browser 3D effects) but in my brain that shouldn't be an issue with cubes (no polygons overlapping).
- fowl2 11y agoIt's beautiful and flat in IE11 ;P
- melted 11y agoSomeone should make a Minecraft clone out of this.
- DennisAleynikov 11y agoTridiv [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
- phodo 11y agoCool. Making this stereoscopic would lead to using this to experiment with a VR type of use case - even for a non-interactive flavor.
- djabatt 11y agoAs soon as I saw this I was thinking VR tests. really cool
- callahad 11y agoMozilla'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 11y agoJust learned about this..great project. Thanks for sharing.
- deleted 11y ago[deleted]
- nodivbyzero 11y agoCrazy demo!!!
- pacomerh 11y agoNice demo. The .css in the name gave me the impression that this was a pure CSS library.
- voltagex_ 11y agoI 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.
- greggman 11y agoCool 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
- LukeSolomon 11y agoWell then make a pull request Mr. Fancypants
- yincrash 11y agoNo pull request can make a project that is meant to implement voxels in CSS overcome the hindrance of implementing voxels in CSS.
- ccvannorman 11y agoUnity3D also has WebGL support, and is surprisingly quick for having a full physics and high quality rendering engine where you can build in C#. That would allow you to make a MineCraft clone that runs natively in the browser, and because it's Unity (a fully grown game dev environment) you will not have to reinvent any wheels or worry about many edge cases. The really hard part about MineCraft isn't rendering, though; it's multiplayer.
- cbsmith 11y agoGiven its execution model, I'm not sure I'd agree that multiplayer is terribly hard in MineCraft. What is challenging about it?
- EGreg 11y agoThis 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 11y agoCongratulations 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.
- lawnchair_larry 11y agoThis is not a useful submission title.
- ferrari8608 11y agoIt seemed pretty straight forward to me. How did you not find it useful?
- digitalpacman 11y agoNeat, but it's laggy.
- suyash 11y agoWhy is it called CSS when it's a JS library for 3D? Totally confusing name that breaks convention.
- beyti 11y agoThought css support for webgl ):
- annnnd 11y agoAnyone had any luck finding the license?
- TwoFx 11y agoLooks like it's MIT-licensed: https://github.com/HunterLarco/voxel.css/blob/master/package.json#L31 https://github.com/HunterLarco/voxel.css/blob/master/package...
- cousin_it 11y agoVoxels 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 11y agoI 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 11y agoZero 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 11y agoBullshit 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.
- TazeTSchnitzel 11y agoDoes 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.
- TheTravCav 11y agoSimmer 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.
- bananaoomarang 11y agoDon'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'.
- Chirael 11y agoLocked 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.
- DonHopkins 11y agoHere'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/
- sdabdoub 11y agoVery interesting, but needs gimbal lock correction.
- odbol_ 11y agoAwesome! Dragging doesn't work on mobile though
- paulddraper 11y agoThe 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%.