from Hacker News

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

by tomek_zemla on 5/29/19, 1:47 AM with 94 comments

  • by dheera on 5/29/19, 3:42 AM

    Super-crude STL file reader I whipped up in 10 minutes: https://codepen.io/dheera/pen/zQJBrx

  • by nikkwong on 5/29/19, 6:37 AM

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

  • by needle0 on 5/29/19, 4:10 PM

    Remembering Dogz and digging through the Wikipedia rabbit hole, I just learned that PF Magic [1], the developer for Dogz/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't knew they were all connected!

    [1]: https://en.wikipedia.org/wiki/PF_Magic

    [2]: https://en.wikipedia.org/wiki/Ballz

    [3]: https://en.wikipedia.org/wiki/Fa%C3%A7ade_(video_game)

  • by overgard on 5/29/19, 2:34 AM

    I notice that there are some issues with depth sorting (which I guess would be expected). It'd be complicated, but one way you could do the same effect without that issue is to use signed distance fields in a shader:

    https://www.iquilezles.org/www/articles/distfunctions/distfu...

    (Demo at the bottom of the page)

  • by ehsankia on 5/29/19, 2:19 AM

    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.

  • by The_Amp_Walrus on 5/29/19, 6:23 AM

    Does this library support dynamic rendering? I tried to add extra elements to the illustration after rendering it to the canvas and it doesn'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't be extended after the first render?

  • by anonu on 5/29/19, 2:41 AM

    Are there similar libraries for charting and plotting data? That would be super useful for visualizing complex datasets - in a 3d space.

  • by tambourine_man on 5/29/19, 2:48 AM

    This is amazing. The examples are great and feel amost too easy.

    I hope I get the chance to use it.

  • by JoeSloth on 5/29/19, 3:51 AM

    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.

  • by luminati on 5/29/19, 7:17 AM

    N00b question - why is it called pseudo-3d? It looks and feels very much 3d like a three.js output.

  • by mlsarecmg on 5/31/19, 2:09 PM

    React bindings are ready for testing: https://github.com/drcmda/react-zdog :-)

  • by airstrike on 5/29/19, 5:57 AM

    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

  • by brunoff on 5/30/19, 12:40 AM

    Wow. Nice! I can imagine a plethora of things being built over this. Less applicable in real life, but also fun: https://www.youtube.com/watch?v=qoxmyH7GezE https://github.com/s0lly/Pseudo3DEngineInExcel

  • by dawhizkid on 5/29/19, 6:36 AM

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

  • by maccam912 on 5/29/19, 2:33 AM

    I'd love to see the old tensorflow logo built with this.

  • by ww520 on 5/29/19, 3:05 AM

    Wow. This is a nice execution of an idea. Very well done.

  • by jmiskovic on 5/29/19, 5:54 AM

    Very clean and fast. The API also looks good, I like hierarchical translation and scaling. Is there anything preventing animation?

  • by andrei_says_ on 5/29/19, 2:23 AM

    Feels light and fast. Thank you for creating and sharing. I’m wondering what are some useful applications?

  • by chrisweekly on 5/29/19, 12:00 PM

    Wow! This looks fantastic! Kudos / bravo / thank you for creating and sharing this!! :)

  • by rhengles on 5/29/19, 2:57 PM

    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.

    [0] http://jsquest.net/chagas/shift.html

  • by daveheq on 5/29/19, 5:18 PM

    But when will we get ray-tracing Electron apps for Windows Home tablets?

  • by playpause on 5/29/19, 12:27 PM

    I love this. I think "pseudo-2D" might be more accurate.

  • by swah on 5/29/19, 1:48 PM

    Does it work on IE11?

  • by onemoresoop on 5/29/19, 2:59 AM

    This is delightful

  • by tomglynch on 5/29/19, 2:21 AM

    Pop this on product hunt, you'll get your first few thousand users in no time.

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

    The new repeating the old. Love when someone looks historically, finds a great idea and re-implements it for a new usecase!