21 ms·
Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
- ehsankia 7y agoIs 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.
- barrystaes 7y agoWhen the objects are tightly coupled, it makes sense to keep this logic internal. This way its short and self documenting, easyer to improve without breaking existing stuff, and likely has some implicit stability and performance gains because developers can make less mistakes.
- jmiskovic 7y agoThere is alternate option to use anchor.addChild(shape) [] https://zzz.dog/api#anchor-addchild https://zzz.dog/api#anchor-addchild
- dahart 7y agoThe name is non-standard, but the concept is absolutely normal for a 2D or 3D rendering API. You can think of the ‘addTo’ property as the item’s parent. In 3D APIs this is normally called an instance or transform node, and here the transform is combined with the shape type. Sometimes those are separate things, and they would each have a parent attribute. Some APIs do the assignment the other way, by adding children to the parent. Either way, my short answer is no, this doesn’t feel strange.
- ehsankia 7y agoThat makes sense, I'm just not used to constructors having side-effect, though I can imagine wanting to skip the extra step of adding it to the illustration. But wouldn't something like illustration.addRect({}) look better?
- dahart 7y agoDon't constructors always have side effects? That's the only reason to have them. I wouldn't think of this as a side-effect though, think of it as a graph property. addTo is setting up a tree structure, the same way you might setup a linked list. Think of the addTo property as a pointer to the parent, rather than a side-effect. A doubly-linked list has two pointers per node, one for next node and one for previous. A tree node in a scene graph also has two pointers per node, one for parent and one for child. A parent can have multiple children, and so might arrange the children in an array. A child, however, can have only one parent. This makes setting the parent simpler than setting a child, considering corner cases like duplicate children. Your suggestion is pointing at the addChild() form rather than addParent(). One of the other comments said that kind of call is available in Zdog, so maybe you can just use that instead. But, I wouldn't use addRect() I would prefer addChild(). A call like addRect() is binding the type of shape and scene graph setup unnecessarily, so you'd have to provide separate calls for each shape type.
- ehsankia 7y ago> Don't constructors always have side effects? The only side effect they should have is creating a new instance, no playing around with some other object's hierarchy. > think of it as a graph property. addTo is setting up a tree structure The problem is that the hierarchy here is backwards. You usually add children to the parent, not parent to the children. Having a link back to your parent does help with navigating, but it shouldn't be how you "build" the tree. When building a tree, do you think of it as building from children up to the parent? I did see that addChild was a thing, and that makes much more sense to me.
- dahart 7y ago> The only side effect they should have is creating a new instance, no playing around with some other object’s hierarchy. You might be making assumptions. The ‘addTo’ property does not imply the constructor is touching any other object. You might be getting confused because the name is a verb. Again, addTo isn’t very standard naming, but what it represents is the parent property. You should think of it as a property that can define the graph, not assume that the name implies anything about the implementation. Even if the constructor does do something external to the node, the implementation can change. > The problem is that the hierarchy here is backwards. You usually add children to the parent... it shouldn’t be how you “build” the tree. No, it’s bottom-up, not backwards. And bottom-up builders are common in graphics, so I disagree with your assumption about how trees should be built. I think of building trees from child to parent all the time, because, as I mentioned before, it’s a simpler operation: all nodes have one and only one parent, where nodes can have any number of children and complications managing those children.
- tomglynch 7y agoPop 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!
- oplav 7y agoI hadn't thought about Dogz in ages. This video brought back some nostalgic memories. https://www.youtube.com/watch?v=6lKSn_cHw5k https://www.youtube.com/watch?v=6lKSn_cHw5k
- manfredo 7y agoI remember playing its successor Petz: https://www.youtube.com/watch?v=Qw2tJj5IX5k https://www.youtube.com/watch?v=Qw2tJj5IX5k Definitely have memories from 90s childhood gaming.
- Impossible 7y agoIt reminded me of Ecstatica (https://en.wikipedia.org/wiki/Ecstatica https://en.wikipedia.org/wiki/Ecstatica), an early 90s game that rendered character with sorted ellipsoids. It also reminds me of Ballz 3D, which also used sorted circles for rendering. Some Pico-8 demos also use sorted circles for a 3D effect (https://www.lexaloffle.com/bbs/?tid=4050 https://www.lexaloffle.com/bbs/?tid=4050) and (http://www.pouet.net/prod.php?which=66974 http://www.pouet.net/prod.php?which=66974)
- echeese 7y agoWhen I was looking at this and seeing the z-sorting pop I was instantly reminded of Catz, a similar product. Cool to see that was the inspiration
- andrei_says_ 7y agoFeels light and fast. Thank you for creating and sharing. I’m wondering what are some useful applications?
- maccam912 7y agoI'd love to see the old tensorflow logo built with this.
- overgard 7y agoI 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/distfunctions.htm https://www.iquilezles.org/www/articles/distfunctions/distfu... (Demo at the bottom of the page)
- ClassyJacket 7y agoI wonder if some sort of progressive dither or fade is practical to implement and fast enough (and visually useful)? If I wasn't at work right now I would have a look at the code. I have some experience with Canvas rendering but, like this, just in straightforward layers. I don't think a dither would be practical, a fade might be using a mask and setting the alpha, but you'd still have to detect all the overlap. I'd say the answer to my question is a 'nope'.
- Wowfunhappy 7y agoYeah, if possible, I really think replacing the pop with a fade would help a ton.
- overgard 7y agoYeah, you could do it in a shader, but in SVG not so much
- myfonj 7y agoIt is addressed in https://zzz.dog/extras#z-fighting https://zzz.dog/extras#z-fighting as a feature: > Z-fighting in Zdog is the natural result of its pseudo-3D engine. Zdog’s 3D shapes are actually 2D projections, rendered without any accounting for collisions with other shapes. > Rather than fighting against this effect, the best course is to accept it. Z-fighting is one of Zdog’s charms. Embrace it.
- reuben_scratton 7y agoThis is such a glorious project. I wonder if intersecting shapes could be detected and automatically decomposed into a set of non-intersecting shapes that render separately...
- anonu 7y agoAre there similar libraries for charting and plotting data? That would be super useful for visualizing complex datasets - in a 3d space.
- kejaed 7y agoI found vpython extremely helpful for visualizing an aerodynamic model of one of our parachute systems at work https://vpython.org/ https://vpython.org/
- knolan 7y agoIs this something I can use locally or in Jupyter or do I have to use GlowScript?
- kejaed 7y agoThis is a great question, the whole GlowScript vs. VPython thing is really confusing and I feel presented in a complicated way on their site. It works great in plain old Jupyter and also from plain old python. If you use it in non-Jupyter Python, it'll launch a web server and browser to play the animation.
- knolan 7y agoThank you, it really wasn’t clear.
- jacobolus 7y agoYou could just use Zdog for it... https://observablehq.com/@jrus/munsell-spin https://observablehq.com/@jrus/munsell-spin
- tambourine_man 7y agoThis is amazing. The examples are great and feel amost too easy. I hope I get the chance to use it.
- cstrat 7y agoSame. I kind of wish I had a need for this sort of thing. Without this sort of library I would have zero chance of building this myself. Amazing.
- hombre_fatal 7y ago> I kind of wish I had a need for this sort of thing. Just Do It. Over some coffee instead of loading HN. Make a snowman. Three spheres. Progressively smaller. Make two eyes, then get the snowman to rotate. Then add a carrot nose. Maybe two arms as extra credit. Doesn't take long, you've dabbled enough to at least think of it if you do ever need it. And best of all, you've replaced idle consumption with creation which always is a more fulfilling use of time.
- pencillr 7y agoYou are the man. Took the advice. :D
- onemoresoop 7y agoThis is delightful
- ww520 7y agoWow. This is a nice execution of an idea. Very well done.
- ymow 7y agoIt's awesome
- dheera 7y agoSuper-crude STL file reader I whipped up in 10 minutes: https://codepen.io/dheera/pen/zQJBrx https://codepen.io/dheera/pen/zQJBrx
- ramon 7y agonice stuff man!
- JoeSloth 7y agoBeen 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.
- jmiskovic 7y agoVery clean and fast. The API also looks good, I like hierarchical translation and scaling. Is there anything preventing animation?
- anentropic 7y agoSeems like there shouldn't be since the examples are interactive (can rotate the move the shapes in 3D space with the mouse), but perhaps animation is a DIY exercise on top of this library
- airstrike 7y agoThis 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
- The_Amp_Walrus 7y agoDoes 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?
- jmiskovic 7y agoDid you try to call updateGraph() after adding elements? It seems like it should do the trick. [] https://zzz.dog/api#anchor-updategraph https://zzz.dog/api#anchor-updategraph
- The_Amp_Walrus 7y agoThis was my initial attempt using an Illustration https://codepen.io/anon/pen/NVORrZ https://codepen.io/anon/pen/NVORrZ This is my 2nd attempt using the docs you linked https://codepen.io/anon/pen/QRZKxy?editors=0010 https://codepen.io/anon/pen/QRZKxy?editors=0010 What do you think - is updateGraph + render supposed to work more than once?
- falsedan 7y agoNo, the underlying flatgraph (which is used to generate the drawing commands) is cached and only updated on first call. Reset it by calling scene.updateFlatGraph(); after adding new shapes, before updating the graph & rendering (see https://github.com/metafizzy/zdog/blob/master/js/anchor.js#L126 https://github.com/metafizzy/zdog/blob/master/js/anchor.js#L...) edit: made an issue https://github.com/metafizzy/zdog/issues/21 https://github.com/metafizzy/zdog/issues/21
- The_Amp_Walrus 7y agoCheers!
- dawhizkid 7y agoNice. 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.
- Impossible 7y agoThe answer is always start with Three.js. Especially if you have no 3D graphics experience and just want to render basic shapes. Drawing a textured cube is relatively straight forward (https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_cube.html https://github.com/mrdoob/three.js/blob/master/examples/webg...).
- nikkwong 7y agoSo 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.
- luminati 7y agoN00b question - why is it called pseudo-3d? It looks and feels very much 3d like a three.js output.
- yunyu 7y ago> Its geometries exist in 3D space, but are rendered as flat shapes.
- Crinus 7y agoSo does pretty much every single 3D engine that renders to a flat surface, like a monitor. I think it is just a misconception stemming from the 90s (notice the influence of this engine) when anything non-polygonal (and sometimes, non-GPU accelerated, depending on who you asked and how misinformed they were) was considered as "pseudo 3D". But there is nothing pseudo here, if your scene data structures use three dimensions, you are doing 3D.
- gnode 7y agoIn conventional 3D graphics each pixel is painted in 3D and a depth test applied. Here, 2D shapes are ordered discretely to create a 3D effect. Instead of the per-pixel z-fighting you conventionally see in 3D graphics, here we see entire shapes cross each other. This method cannot correctly paint intersecting, or cyclically occluding shapes (without breaking them into smaller components). I think "pseudo" could refer to the lack of generality in the system's ability to render 3D geometry.
- Crinus 7y agoA depth buffer is something that you find common nowadays, especially with the GPUs providing it essentially for free, but again it is not what makes 3D graphics and a lot of otherwise full 3D polygonal games were made without it nor it is necessary to create 3D graphics. With other approaches to 3D rendering you do not even need a depth buffer to get correct results for penetrating objects (e.g. classic raytracing). What is happening here is called "painter's algorithm" and was a very common approach for realtime graphics before depth buffers became hardware accelerated. Actually it is still often used even today for transparencies since those often cannot be rendered in arbitrary order and you need to depth sort them. One common approach to solve these issues - both then and now - is to subdivide/preprocess geometry so that wrong overlaps are not or rarely happening.
- chrisweekly 7y agoWow! This looks fantastic! Kudos / bravo / thank you for creating and sharing this!! :)
- playpause 7y agoI love this. I think "pseudo-2D" might be more accurate.
- swah 7y agoDoes it work on IE11?
- duncans 7y agoJust tried it. No it doesn't.
- rhengles 7y agoAwesome, 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 http://jsquest.net/chagas/shift.html
- needle0 7y agoRemembering 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 https://en.wikipedia.org/wiki/PF_Magic [2]: https://en.wikipedia.org/wiki/Ballz https://en.wikipedia.org/wiki/Ballz [3]: https://en.wikipedia.org/wiki/Fa%C3%A7ade_(video_game) https://en.wikipedia.org/wiki/Fa%C3%A7ade_(video_game)
- herbcso 7y agoWhy wasn't the last one named Facadez?
- daveheq 7y agoBut when will we get ray-tracing Electron apps for Windows Home tablets?
- brunoff 7y agoWow. 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://www.youtube.com/watch?v=qoxmyH7GezE https://github.com/s0lly/Pseudo3DEngineInExcel https://github.com/s0lly/Pseudo3DEngineInExcel
- mlsarecmg 7y agoReact bindings are ready for testing: https://github.com/drcmda/react-zdog https://github.com/drcmda/react-zdog :-)