TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Zdog – Pseudo-3D JavaScript engine for Canvas and SVG

686 pointsby tomek_zemlaalmost 6 years ago

25 comments

dheeraalmost 6 years ago
Super-crude STL file reader I whipped up in 10 minutes: <a href="https:&#x2F;&#x2F;codepen.io&#x2F;dheera&#x2F;pen&#x2F;zQJBrx" rel="nofollow">https:&#x2F;&#x2F;codepen.io&#x2F;dheera&#x2F;pen&#x2F;zQJBrx</a>
评论 #20040174 未加载
nikkwongalmost 6 years ago
So cool. I looked at a few projects and was turned off by how much code was needed to render each result. However, when I looked closer I realized that most of the code was simply to define the shapes in the illustration, which, is nice, because it&#x27;s not very logic heavy and means these scenes could be whipped up relatively quickly without confusing the hell out of me. Nice! To the author: you said you wanted to make it for a video game, would love to hear if that idea is going anywhere because I could imagine something like this as a game engine being super useful.
needle0almost 6 years ago
Remembering Dogz and digging through the Wikipedia rabbit hole, I just learned that PF Magic [1], the developer for Dogz&#x2F;Catz, were also responsible for the SNES 3D fighting game Ballz [2], and its programmer later went on to develop the open-ended experimental adventure game Facade [3]. I knew of the existence of all of them but didn&#x27;t knew they were all connected!<p>[1]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;PF_Magic" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;PF_Magic</a><p>[2]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Ballz" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Ballz</a><p>[3]: <a href="https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Fa%C3%A7ade_(video_game)" rel="nofollow">https:&#x2F;&#x2F;en.wikipedia.org&#x2F;wiki&#x2F;Fa%C3%A7ade_(video_game)</a>
评论 #20045917 未加载
overgardalmost 6 years ago
I notice that there are some issues with depth sorting (which I guess would be expected). It&#x27;d be complicated, but one way you could do the same effect without that issue is to use signed distance fields in a shader:<p><a href="https:&#x2F;&#x2F;www.iquilezles.org&#x2F;www&#x2F;articles&#x2F;distfunctions&#x2F;distfunctions.htm" rel="nofollow">https:&#x2F;&#x2F;www.iquilezles.org&#x2F;www&#x2F;articles&#x2F;distfunctions&#x2F;distfu...</a><p>(Demo at the bottom of the page)
评论 #20036811 未加载
评论 #20036492 未加载
评论 #20038046 未加载
评论 #20042538 未加载
评论 #20037920 未加载
ehsankiaalmost 6 years ago
Is it me, or that `addTo` api feels very strange. Creating new objects with no assignments, with the side effects of adding it to an illustration.
评论 #20041598 未加载
评论 #20037363 未加载
评论 #20038737 未加载
The_Amp_Walrusalmost 6 years ago
Does this library support dynamic rendering? I tried to add extra elements to the illustration after rendering it to the canvas and it doesn&#x27;t appear to work. I might be using the API incorrectly though - is the idea that you can use this library to produce a static model which can then be transformed (eg. rotated), but can&#x27;t be extended after the first render?
评论 #20038744 未加载
anonualmost 6 years ago
Are there similar libraries for charting and plotting data? That would be super useful for visualizing complex datasets - in a 3d space.
评论 #20036486 未加载
评论 #20046209 未加载
tambourine_manalmost 6 years ago
This is amazing. The examples are great and feel amost too easy.<p>I hope I get the chance to use it.
评论 #20036534 未加载
JoeSlothalmost 6 years ago
Been following this project on Twitter for a while through the creators (Dave DeSandro). Looks great.. Used to use masonry all the time in projects, glad to see he is still creating cool shit.
luminatialmost 6 years ago
N00b question - why is it called pseudo-3d? It looks and feels very much 3d like a three.js output.
评论 #20046414 未加载
评论 #20037558 未加载
mlsarecmgalmost 6 years ago
React bindings are ready for testing: <a href="https:&#x2F;&#x2F;github.com&#x2F;drcmda&#x2F;react-zdog" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;drcmda&#x2F;react-zdog</a> :-)
airstrikealmost 6 years ago
This is really nifty. Bonus points for suggesting tau rather than pi across the whole set of examples. Use cases like this make it entirely obvious pi is Just Bad
brunoffalmost 6 years ago
Wow. Nice! I can imagine a plethora of things being built over this. Less applicable in real life, but also fun: <a href="https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=qoxmyH7GezE" rel="nofollow">https:&#x2F;&#x2F;www.youtube.com&#x2F;watch?v=qoxmyH7GezE</a> <a href="https:&#x2F;&#x2F;github.com&#x2F;s0lly&#x2F;Pseudo3DEngineInExcel" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;s0lly&#x2F;Pseudo3DEngineInExcel</a>
dawhizkidalmost 6 years ago
Nice. I&#x27;ve been playing around with 2D Canvas for audio visualizations and looked into WebGL but was mortified by how complicated it was to render basic 3D shapes and just gave up.
评论 #20041718 未加载
maccam912almost 6 years ago
I&#x27;d love to see the old tensorflow logo built with this.
评论 #20036423 未加载
评论 #20037277 未加载
ww520almost 6 years ago
Wow. This is a nice execution of an idea. Very well done.
jmiskovicalmost 6 years ago
Very clean and fast. The API also looks good, I like hierarchical translation and scaling. Is there anything preventing animation?
评论 #20040306 未加载
andrei_says_almost 6 years ago
Feels light and fast. Thank you for creating and sharing. I’m wondering what are some useful applications?
chrisweeklyalmost 6 years ago
Wow! This looks fantastic! Kudos &#x2F; bravo &#x2F; thank you for creating and sharing this!! :)
rhenglesalmost 6 years ago
Awesome, congratulations to the creator! I started doing something a little similar, to render pseudo 3d shapes to canvas, here is an example[0]. Try clicking on the page and moving the mouse.<p>[0] <a href="http:&#x2F;&#x2F;jsquest.net&#x2F;chagas&#x2F;shift.html" rel="nofollow">http:&#x2F;&#x2F;jsquest.net&#x2F;chagas&#x2F;shift.html</a>
daveheqalmost 6 years ago
But when will we get ray-tracing Electron apps for Windows Home tablets?
playpausealmost 6 years ago
I love this. I think &quot;pseudo-2D&quot; might be more accurate.
swahalmost 6 years ago
Does it work on IE11?
评论 #20040422 未加载
onemoresoopalmost 6 years ago
This is delightful
tomglynchalmost 6 years ago
Pop this on product hunt, you&#x27;ll get your first few thousand users in no time.<p>&gt; Zdog is directly inspired by Dogz, a virtual pet game by P.F. Magic released in 1995. It used flat 2D circle sprites to render the Dogz’ models, but in a 3D scene. See Dogz playthrough video here. Dogz were fully animated in real time, running, flopping, scratching (on Windows 3.1!). It was remarkable.<p>The new repeating the old. Love when someone looks historically, finds a great idea and re-implements it for a new usecase!
评论 #20036648 未加载
评论 #20037312 未加载
评论 #20039962 未加载