TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Voxel.css

771 点作者 notdarkyet超过 9 年前

24 条评论

greggman超过 9 年前
Cool demo.<p>But, for those thinking they&#x27;re going to make a minecraft clone with this it&#x27;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&#x27;s say you had a 16x16x16 voxel area, that&#x27;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.<p>Compare to a functional minecraft clone all of that would be condensed into a single mesh representing a 16x16x16 area. One draw call.<p>So yea, neat demo but you&#x27;re going to quickly hit the limits past a few boxy logos<p>If you&#x27;re looking for something that actually does do the optimizations necessary for a minecraft clone in the browser see <a href="http:&#x2F;&#x2F;voxeljs.com" rel="nofollow">http:&#x2F;&#x2F;voxeljs.com</a>
评论 #10978355 未加载
评论 #10978899 未加载
评论 #10979565 未加载
评论 #10979102 未加载
评论 #10978345 未加载
评论 #10978931 未加载
bananaoomarang超过 9 年前
Don&#x27;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.<p>It&#x27;s even sadder that even in Chrome the FPS is noticeably low. This isn&#x27;t a gaming rig, it&#x27;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.<p>In principle I love the idea that we could write everything to be portable across OSs and form factors by writing for &#x27;the browser&#x27;, but still at this point, on this modern computer, the performance is noticeably worse, and ultimately lackluster.<p>It&#x27;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 &#x27;write it for the browser&#x27; just translates to using far more CPU cycles than putting in the effort for &#x27;native&#x27;.
TheTravCav超过 9 年前
Simmer down comment section. So what if it&#x27;s not the most perfect thing ever. This is neat. Good job by all that worked on it. I&#x27;ll bet they learned a lot in the process and had fun doing it. thanks for sharing it with us.
DennisAleynikov超过 9 年前
Tridiv [1] is something cool to check out as well, really cool concept taken to a crazy complex level. It&#x27;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.<p>[1] <a href="http:&#x2F;&#x2F;tridiv.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;tridiv.com&#x2F;</a> [2] <a href="http:&#x2F;&#x2F;goo.gl&#x2F;sn7Y30" rel="nofollow">http:&#x2F;&#x2F;goo.gl&#x2F;sn7Y30</a>
viraptor超过 9 年前
The demo page has some serious z-order issues. (FF 43)
评论 #10978195 未加载
评论 #10978621 未加载
Chirael超过 9 年前
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.
评论 #10981442 未加载
pacomerh超过 9 年前
Nice demo. The .css in the name gave me the impression that this was a pure CSS library.
EGreg超过 9 年前
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.<p>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&#x27;m curious what you think of its &quot;3d performance&quot;:<p><a href="http:&#x2F;&#x2F;qbix.com&#x2F;blog" rel="nofollow">http:&#x2F;&#x2F;qbix.com&#x2F;blog</a> -- it loads in the first post
评论 #10978477 未加载
TazeTSchnitzel超过 9 年前
Does this work around broken 3D transform depth sorting? To see what I mean, look at this in Firefox: <a href="https:&#x2F;&#x2F;ajf.me&#x2F;demos&#x2F;200blocks&#x2F;" rel="nofollow">https:&#x2F;&#x2F;ajf.me&#x2F;demos&#x2F;200blocks&#x2F;</a><p>I love 3D transforms, they&#x27;re great. I wish I could practically make stuff with them. But they&#x27;re so slow and there&#x27;s bugs in every implementation.<p>So WebGL is all that is practical for anything beyond a few spinning cubes.
DonHopkins超过 9 年前
Here&#x27;s a cool project to efficiently and flexibly implement minecraft-like games in the browser in JavaScript&#x2F;WebGL. It&#x27;s built out of a bunch of NPM Node modules with browserify.<p>In the video at the top of the page, Max Ogden&#x27;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.<p><a href="http:&#x2F;&#x2F;voxeljs.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;voxeljs.com&#x2F;</a>
dvcrn超过 9 年前
This is really cool! I don&#x27;t know what I could do with it but definitely a fun project to play around with.
评论 #10978005 未加载
annnnd超过 9 年前
Anyone had any luck finding the license?
评论 #10979266 未加载
paulddraper超过 9 年前
The page process and the GPU process are duking it out in Chrome to see which one can most fully peg a CPU core.<p>I&#x27;m watching just the three cubes at the bottom of the page.<p>GPU is holding steady at 97-99% for several minutes now. voxel.css is 80-90%.
phodo超过 9 年前
Cool. Making this stereoscopic would lead to using this to experiment with a VR type of use case - even for a non-interactive flavor.
评论 #10978354 未加载
评论 #10978263 未加载
voltagex_超过 9 年前
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超过 9 年前
Neat, but it&#x27;s laggy.
odbol_超过 9 年前
Awesome! Dragging doesn&#x27;t work on mobile though
sdabdoub超过 9 年前
Very interesting, but needs gimbal lock correction.
beyti超过 9 年前
Thought css support for webgl ):
lawnchair_larry超过 9 年前
This is not a useful submission title.
评论 #10978627 未加载
nodivbyzero超过 9 年前
Crazy demo!!!
melted超过 9 年前
Someone should make a Minecraft clone out of this.
suyash超过 9 年前
Why is it called CSS when it&#x27;s a JS library for 3D? Totally confusing name that breaks convention.
评论 #10978722 未加载
评论 #10978799 未加载
cousin_it超过 9 年前
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&#x27;s discouraging that we&#x27;re supposed to cheer for progress even when it&#x27;s headed backwards.<p>[1] <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=_zSjpIyMt0k" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=_zSjpIyMt0k</a>
评论 #10979874 未加载