Live data from Hacker News

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

zzz.dog

81–90 of 96 posts

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

#81
post #79

Earlier quoted context omitted.

> Zdog is a vector drawing library, it's resolution independent. When you render to SVG, you can later rasterize that SVG at any resolution. This lets you do things like print at large sizes or high DPI. Signed distance fields and ray marching are completely resolution independent... The only limit is your canvas size. You can emulate the exact same effects, plus some additional ones since you can blend the shapes. T…

> Signed distance fields and ray marching are completely resolution independent That’s not what I meant. I expect you knew that. The output of ray marching is a resolution-dependent raster. The output of Zdog is a vector format image. Ray marching doesn’t make sense in Zdog, because the output SVG is rasterized later, on demand, by your browser or printer, not by Zdog. You can’t do that with ray-marching, and that’s…

That's kinda a weirdly accusatory tone dude. If the output is the screen, which it probably would be 99.9% of the time since this is a javascript library creating a 3d object in a browser, then the distinction is entirely academic. Just set the canvas size to whatever you want. After all the output of displaying an SVG on a screen is also a resolution dependent raster, as is the output of plotting ink on a piece of paper.

Also I wasn't like saying this was a useless library, just that if z-fighting was a concern there's an alternative using GPU shaders that can get you a very similar effect. Geez.

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

#82
post #67

Earlier quoted context omitted.

Don'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…

> 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,…

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

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

#83
post #79

Earlier quoted context omitted.

> Signed distance fields and ray marching are completely resolution independent That’s not what I meant. I expect you knew that. The output of ray marching is a resolution-dependent raster. The output of Zdog is a vector format image. Ray marching doesn’t make sense in Zdog, because the output SVG is rasterized later, on demand, by your browser or printer, not by Zdog. You can’t do that with ray-marching, and that’s…

That's kinda a weirdly accusatory tone dude. If the output is the screen, which it probably would be 99.9% of the time since this is a javascript library creating a 3d object in a browser, then the distinction is entirely academic. Just set the canvas size to whatever you want. After all the output of displaying an SVG on a screen is also a resolution dependent raster, as is the output of plotting ink on a piece of p…

I’m sorry, I didn’t mean to accuse you of anything, my intention was to give you the benefit of the doubt that you understand all the issues here; you sound like you know what you’re talking about with SVG & ray marching.

This distinction is very much practical and not academic. SVG exists for a reason. I use (and write) SVG renderers in practice precisely for their resolution-independent, rasterize-on-demand functionality.

> Just set the canvas size to whatever you want.

This is missing the point that an SVG output can rasterize to multiple different resolutions, when it’s viewed, where a ray-marching output is baked at one size.

> If the output is the screen, which is probably would be 99.9% of the time

I would counter with most SVG on the web today is served as files, and a major use case of Zdog would be creating those files, not necessarily including Zdog in the js and rendering everything from scratch at display time. Rendering to files allows Zdog output to work on all browsers that support SVG, which from the comments appears to be more browsers than Zdog can run on.

I was thinking specifically of the case where I render files in Zdog and save them for display & print later. It’s restrictive to assume that you’re rendering & rasterizing at the same time, one of the benefits of rendering to SVG is being able to separate rendering from rasterizing.

That part of the discussion doesn’t change the fact that Zdog renders to SVG and ray marching renders to pixels, so they aren’t compatible rendering techniques unless you change Zdog to only rasterize it’s output and disable SVG.

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

#84
post #83

Earlier quoted context omitted.

That's kinda a weirdly accusatory tone dude. If the output is the screen, which it probably would be 99.9% of the time since this is a javascript library creating a 3d object in a browser, then the distinction is entirely academic. Just set the canvas size to whatever you want. After all the output of displaying an SVG on a screen is also a resolution dependent raster, as is the output of plotting ink on a piece of p…

I’m sorry, I didn’t mean to accuse you of anything, my intention was to give you the benefit of the doubt that you understand all the issues here; you sound like you know what you’re talking about with SVG & ray marching. This distinction is very much practical and not academic. SVG exists for a reason. I use (and write) SVG renderers in practice precisely for their resolution-independent, rasterize-on-demand functio…

Ray marching isn't baked at all, it's a webgl canvas. It's a real time effect. If you resize it the resolution changes and you re-render. The shapes that are used as a source for the rendering are all mathematical objects that can be combined and used at any scale, just like paths and curves in an SVG. The only time it would be "baked" is if you're exporting it out of the browser.

> This distinction is very much practical and not academic. SVG exists for a reason. I use (and write) SVG renderers in practice precisely for their resolution-independent, rasterize-on-demand functionality.

I wrote an SVG renderer: https://github.com/fathat/glsvg

> I was thinking specifically of the case where I render files in Zdog and save them for display & print later.

If you lose the interactive 3d component, Z-Dog doesn't really give you anything over just drawing it in a vector art program. Actually it gives you less, because you have less control and you have to type out your shapes instead of just drawing them. And it's not like it's easy to export out of the browser. In chrome at least, if it renders to a canvas and you right click on the element to save it you get a png, and if it renders into an SVG you get the option to save the entire web page.

Anyway all I was suggesting is that if you want a similar rendering effect (IE, 3D objects without triangulation) and z-fighting is an issue for you then you can consider signed depth fields. That's all. If z-dog works for your purposes use it instead.

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

#85
post #83

Earlier quoted context omitted.

I’m sorry, I didn’t mean to accuse you of anything, my intention was to give you the benefit of the doubt that you understand all the issues here; you sound like you know what you’re talking about with SVG & ray marching. This distinction is very much practical and not academic. SVG exists for a reason. I use (and write) SVG renderers in practice precisely for their resolution-independent, rasterize-on-demand functio…

Ray marching isn't baked at all, it's a webgl canvas. It's a real time effect. If you resize it the resolution changes and you re-render. The shapes that are used as a source for the rendering are all mathematical objects that can be combined and used at any scale, just like paths and curves in an SVG. The only time it would be "baked" is if you're exporting it out of the browser. > This distinction is very much prac…

> I wrote an SVG renderer

So, clearly you do understand the issues here.

Which is why I’m a bit puzzled by your push-back here. When I said “baked” I was talking about ray-marching spitting out pixels at a certain resolution. Once you render, you can’t change the resolution without re-rendering, so the resolution is “baked” into the raster output. If I save it to a file, my only choice is to save an image file at the resolution that I rendered at. If I want to display that file at a different resolution later, and I don’t have the renderer, my only choice is to resample the image.

> It’s a real time effect

I don’t know what you mean here. Ray marching is a rendering technique, you can choose to do it in real time, or you can choose to take hours. This has no bearing on whether it renders to pixels or vector art. Zdog can also be real-time, or offline batch.

> If you resize it the resolution changes and you re-render

Yes, exactly. You have to re-render a ray-marched image if you change the resolution. That is unlike SVG, which you can re-rasterize without re-rendering.

> The shapes that are used as a source for the rendering are all mathematical objects that can be combined an used at any scale, just like paths and curves in an SVG

I feel like we’re regressing a bit here, we already covered this. Yes, the input SDF & scene certainly are resolution independent. You have to compare that to the input of Zdog, which is not SVG, it’s the 3d shape description.

The output of ray marching is a raster. Zdog’s SVG output is, well, resolution independent SVG.

> If you lose the interactive 3d component, Z-Dog doesn’t really give you anything over just drawing it in a vector art program.

Your straw man hypothetical eliminated all of Zdog’s functionality there. You can use Zdog with 3d but without interactive, right? That’s one specific use case I’m interested in. What Zdog buys is a conversion from a 3d scene description to a 2d scene description, that’s the value for me, and the very thing that ray marching does not do.

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

#86
post #85

Earlier quoted context omitted.

Ray marching isn't baked at all, it's a webgl canvas. It's a real time effect. If you resize it the resolution changes and you re-render. The shapes that are used as a source for the rendering are all mathematical objects that can be combined and used at any scale, just like paths and curves in an SVG. The only time it would be "baked" is if you're exporting it out of the browser. > This distinction is very much prac…

> I wrote an SVG renderer So, clearly you do understand the issues here. Which is why I’m a bit puzzled by your push-back here. When I said “baked” I was talking about ray-marching spitting out pixels at a certain resolution. Once you render, you can’t change the resolution without re-rendering, so the resolution is “baked” into the raster output. If I save it to a file, my only choice is to save an image file at the…

I think our fundamental disagreement here is that I think the main use for this is interactive graphics, and that's how it seems to be marketed, and you seem to think its main utility is as an art tool for generating SVGs. I personally think it would be a pretty awkward way to generate an SVG compared to the alternatives, since pulling the data out of the browser requires using dev tools or saving the entire pages' HTML, and if you don't care about being able to move a camera around then it's probably quicker just to draw what you want in inkscape. But if you want an interactive 3d thing and you don't care about self-intersecting objects than this is fine.

> I don’t know what you mean here. Ray marching is a rendering technique, you can choose to do it in real time, or you can choose to take hours.

Hours is really misrepresenting things. It's not ray tracing. It takes milliseconds. You can do it hundreds of times per second, with scenes that are vastly more rich and complicated than this can do.

> Yes, exactly. You have to re-render a ray-marched image if you change the resolution. That is unlike SVG, which you can re-rasterize without re-rendering.

Huh? That's a really weird distinction to make. Unless you mean "rendering" in the sense that web-devs often use it for writing tags, rasterizing and rendering are essentially the same thing. You have data and you need to convert it into pixels or blotches of ink.

If you insist on thinking of "rendering" as having a definition of the scene, then the shader you would have which defines the shapes would essentially be the "rendering". In fact it'd look very similar to the javascript, other than being written in glsl.

If I needed a ray marched scene on very fancy glossy printed paper I'd just rasterize it on a really big canvas and print that. It would take about ten milliseconds to generate that image.

> Your straw man hypothetical eliminated all of Zdog’s functionality there.

Not at all. It's perfectly fine if you want pseudo 3d in a browser. But a lot of people don't like depth sorting artifacts (I am among them). Not being able to intersect objects creates a very strict limit on what you can do. That's fine, but if you want something more flexible I was just mentioning that there's an alternative. I don't know why you're pushing back so hard on my suggestion that, specifically, if you want a 3d scene in a browser that has fewer limitations you can do that in an alternative way. You don't HAVE to. There are trade-offs. I just suggested the possibility. Signed distance fields aren't as well known as svgs are so I thought people would be interested in the concept.

> What Zdog buys is a conversion from a 3d scene description to a 2d scene description, that’s the value for me, and the very thing that ray marching does not do.

I mean, if it provides value for you to create art in that way that's great, do whatever you want. But I'm pretty sure if I polled 99/100 artists that wanted to create a static SVG file, the last thing they'd want to do is write javascript to place each object and then use the browser's dev tools to pull their data out of the SVG tag. (Most of them wouldn't even know how to do that). I mean if you don't want an interactive scene then there's much more flexible ways to create an SVG. (+ You'll notice in most of their examples, they're rendering to a canvas anyway, kind of making my point)

I guess my overall point is that if you're making something for print or you need a content authoring tool, you're probably using an entirely different set of tools, and if you're making something to be consumed in a browser, then whether you use SVG or a webgl canvas, you can achieve the same effect to the person viewing your content.

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

#87
post #85

Earlier quoted context omitted.

> I wrote an SVG renderer So, clearly you do understand the issues here. Which is why I’m a bit puzzled by your push-back here. When I said “baked” I was talking about ray-marching spitting out pixels at a certain resolution. Once you render, you can’t change the resolution without re-rendering, so the resolution is “baked” into the raster output. If I save it to a file, my only choice is to save an image file at the…

I think our fundamental disagreement here is that I think the main use for this is interactive graphics, and that's how it seems to be marketed, and you seem to think its main utility is as an art tool for generating SVGs. I personally think it would be a pretty awkward way to generate an SVG compared to the alternatives, since pulling the data out of the browser requires using dev tools or saving the entire pages' H…

Yes, I am including both interactive and non-interactive use cases in my argument. You are assuming Zdog is limited and can only be used interactively in practice. I do disagree with your assumption.

> Hours is really misrepresenting things. It's not ray tracing. It takes milliseconds. You can do it hundreds of times per second, with scenes that are vastly more rich and complicated than this can do.

This is still irrelevant, and just not true in general, you're making assumptions and overstating ray-marching's generality. The time depends completely on what you choose to do, in all cases: with ray marching, with ray tracing, and with SVG rendering. Ray marching is usually fast and commonly used in interactive renderers, but plenty of ShaderToy shaders run much slower than hundreds of times per second. And while there are some very rich scenes, ray marching doesn't do meshes, and it isn't all that fast to render a large hand-drawn set of 2d curves (I and others have tried.)

> Huh? [...] rasterizing and rendering are essentially the same thing. You have data and you need to convert it into pixels or blotches of ink.

In the case of Zdog generating SVG, rendering and rasterizing are not the same thing. It is confusing me that you're refusing to acknowledge the utility of vector graphics, when I know you know the difference and the benefits.

Let's try saying it another way. A ray-marching shader turns an SDF in to pixels directly in one step. Zdog turns the scene description into SVG. Later, the browser or printer turns the SVG into pixels, not Zdog.

If you don't want to call it rendering vs rasterizing, then we can call it two-pass rendering. Ray marching is one pass, and there's no intermediate representation. Zdog & SVG is two-pass and there's an intermediate 2d resolution independent representation.

On the contrary to your claim that this distinction is somehow weird, the one and only singular benefit to the 2d intermediate representation is that you can change the resolution without having to re-generate the 2d description. This is the whole reason why formats like SVG and PDF even exist.

> I don't know why you're pushing back so hard on my suggestion that, specifically, if you want a 3d scene in a browser that has fewer limitations you can do that in an alternative way.

It seems like you've made some assumptions and/or misunderstood me, because I don't believe I did any such thing. I stated that ray marching (rendering to pixels) is incompatible with rendering to a vector representation. I still stand by that. To be clear, I'm not saying anything about the validity of using SDFs in a different context. I love ray marching and use it all the time. It's still not compatible with vector rendering, and I don't use ray marching for the same things I would use Zdog for.

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

#88
post #54
post #52

Earlier quoted context omitted.

Is this something I can use locally or in Jupyter or do I have to use GlowScript?

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

Thank you, it really wasn’t clear.

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

#89

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

Submitted a clarifying description: https://github.com/metafizzy/zdog-docs/issues/4 > Zdog is a pseudo-3D Vector Art engine. You define your geometry using 3D splines and blobs, which render as 2D SVG shapes for any arbitrary perspective. > For nerds—this simple translation is made possible by assuming an orthographic projection (where drawing 3D splines becomes trivially reducible to flat 2D splines—not so with pers…

Thanks so much!

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

#90

Earlier quoted context omitted.

Did you try to call updateGraph() after adding elements? It seems like it should do the trick. [] https://zzz.dog/api#anchor-updategraph

This was my initial attempt using an Illustration https://codepen.io/anon/pen/NVORrZ This is my 2nd attempt using the docs you linked https://codepen.io/anon/pen/QRZKxy?editors=0010 What do you think - is updateGraph + render supposed to work more than once?

No, 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#L...)

edit: made an issue https://github.com/metafizzy/zdog/issues/21

Post reply on HN