N00b question - why is it called pseudo-3d?
It looks and feels very much 3d like a three.js output.
Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
31–40 of 96 posts
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#32N00b question - why is it called pseudo-3d? It looks and feels very much 3d like a three.js output.
> Its geometries exist in 3D space, but are rendered as flat shapes.
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#33I 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)
Are you suggesting ray marching the object instead of drawing 2D shapes?
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#34I 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)
If you've got a shader engine you could render real 3D. This is a very different approach.
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#35I 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)
It is addressed in 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.
This 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...
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#36N00b question - why is it called pseudo-3d? It looks and feels very much 3d like a three.js output.
> Its geometries exist in 3D space, but are rendered as flat shapes.
So 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.
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#37Is 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.
There is alternate option to use anchor.addChild(shape)
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#38Does 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?
Did you try to call updateGraph() after adding elements? It seems like it should do the trick.
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#39Earlier quoted context omitted.
> Its geometries exist in 3D space, but are rendered as flat shapes.
So 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 dimens…
In 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.
Re: Zdog – Pseudo-3D JavaScript engine for Canvas and SVG
#40Wow! This looks fantastic! Kudos / bravo / thank you for creating and sharing this!! :)