
Show HN: SVG 3D Builder – Build 3D Models with SVG - captainwz
https://github.com/captainwz/svg-3d-builder
======
hardwaresofton
If you think this is cool you might think AFrame is cool:

[https://aframe.io/docs/0.8.0/introduction/](https://aframe.io/docs/0.8.0/introduction/)

~~~
jonplackett
Aframe is awesome.

------
xigma
It's unbelievably slow. I'm confident it's not the developer's fault. It
serves as a good warning. It just goes to show that Web technology still has a
long way to go.

SVG (and to a lesser extent Canvas) are trainwrecks in terms of performance.
It's really a sad story that HTML5 has been evangelized so strongly, yet even
ten years later it can't hold a candle to Flash in many regards.

~~~
kowdermeister
It's slow because it's abusing what SVG can deliver. It's only a good warning
in regards to avoid using the wrong tool for the job. If you want want 3D in
the browser, then go WebGL.

> It's really a sad story that HTML5 has been evangelized so strongly, yet
> even ten years later it can't hold a candle to Flash in many regards.

Not sad at all. It needs to be evangelized more since it's clear that other
solutions did not work. By other solutions I mean a private company design
something and forces it on the world. (Flash, Java applets, Real Player,
Shockwave...)

We have all the features flash had now (and had it for many years now)

~~~
goatlover
Java was open source and Sun wanted Netscape to embed Java in their browser.
According to Brendan Eich, Netscape considered having both JS and Java along
with a canvas element both could draw on, but time constraints dictated
otherwise. So Java ended up being used as a plugin.

~~~
colordrops
Was java ever truly free though? Oracle's shenanigans indicate otherwise.

~~~
microcolonel
> _Was java ever truly free though? Oracle 's shenanigans indicate otherwise._

It probably could have been, pre-Oracle.

~~~
BrendanEich
No, Sun was not looking to open it up and even got in a spat with Microsoft
over Java. MS responded by pulling Java out of Windows, which broke Outlook
Web Access and required fast work to implement the first XMLHttpRequest Active
X implementation of that now-standard XHR (=> Fetch) API as replacement for
the Java async-io class that OWA used while Java was in Windows.

~~~
microcolonel
I meant that Oracle is less amenable to fixing the social issues they create
surrounding their products, which hamper their usefulness.

------
accnumnplus1
I'm reminded of vrml. That was in the 90s. Back then I expected more by now.

~~~
specialist
We did get more. And less. Many of the innovations of VRML-97 have been
forgotten, ready to be rediscovered. But progress on other fronts has been
amazing.

Mostly the notion of treating your entire app as a simulation, just like games
do. VRML-97's event loop, warts and all, made things a lot easier.

VRML-97 also had a true prototype/instance class system, way more like David
Unger's Self language than what we have today. (Ironically, JavaScript is
moving away from prototypes and more towards classes each iteration. Too bad.)

Scene graphs, of course. Really just a DSL for describing object graphs. Very
succinct & powerful.

A few things deflected VRML-97.

Sun placed their bets on Java3D and ignored OpenGL. In addition to scene
graphs, Java3D had the notion of live (active) objects, sending messages to
each other. It was the 90s, people still bought into OO. It was an idea worth
exploring that didn't pan out. No shame in trying.

The bigger mistake was the VRML steering committee went all in for XML and
switched to Web3D. Completely stopped all the hard earned momentum. Classic
example of Joel Spolsky's "Don't Rewrite" rule. This idea was not worth
exploring.

Source: Implemented VRML-97 browser, wrote some games and authoring tools,
coauthored the original JavaGL bindings with "Alligator Descartes", lobbied
Sun & SGI for years to drop Java3D and promote JavaGL (which they eventually
did, but too late).

------
onion2k
three.js has an SVG renderer that does a decent job -
[https://threejs.org/examples/#svg_sandbox](https://threejs.org/examples/#svg_sandbox)

~~~
xigma
Dude, this is the kind of stuff I could run in realtime on an Amiga. Maybe not
at the same resolution, but the resolution isn't the bottleneck in this demo
either, I'm struggling to hit 40Hz at any scale.

~~~
microcolonel
On the Amiga, you didn't go the stupid way around and represent your object as
a series of text path strings which need to be parsed into objects and _then_
finally displayed for each frame.

You can get your Amiga performance with canvas; and you can get way better
with WebGL. This is just a case of wrong-tool-for-wrong-job.

~~~
xigma
Do you realize that in Canvas colors are represented as a "series of text
strings" that need to be parsed?

Did you know that drawing paths requires a ton of pretty expensive Javascript
calls or _alternatively_ passing "a series of text strings"? Maybe the string
way is actually faster, I haven't tested it because it isn't supported
everywhere.

Were you aware that vector rendering is not usually done on GPUs, mainly
because of the high overhead of state changes when using a graphics API,
especially one like WebGL?

I guess you could do all your rendering in software in Javascript (which for
these purposes is nowhere close to what you can get with C/C++) to a byte
buffer and then do the final transfer to Canvas. Even in that case, you might
be surprised how much overhead that final transfer has...

~~~
jancsika
> Were you aware that vector rendering is not usually done on GPUs, mainly
> because of the high overhead of state changes when using a graphics API,
> especially one like WebGL?

But it's actually worse than that, isn't it? It's not only that I can't render
a complex SVG path on the GPU, but I can't even apply a GPU accelerated
transform on existing child nodes of an SVG.

Why is it that <div> can get a GPU-accelerated transform but <g> can't?

~~~
microcolonel
> _Why is it that <div> can get a GPU-accelerated transform but <g> can't?_

Something that could either be called laziness or difficulty, depending on
your perspective.

------
shaftway
So, I actually built this exact thing, a long long time ago, for Adobe when
they were building their browser plugin. Mine was a 3D molecule viewer.

I had almost the exact same math in there and it performed about the same
until I showed it to an old-school guy I worked with who used to do game
programming at sega. He goes "try this" and proceeds to replace a couple
screens of trig with:

    
    
        d = 0.001;
        x = x + d * y;
        y = y - d * x;
    

This rotates an object around the z axis with enough fidelity to spin on the
screen for days. Making d smaller makes it turn less, but is more accurate.
You can repeat this with x and z to rotate around y, or y and z to go around
x.

It took me a lot longer than I'd care to admit to understand why that works,
but it does. Maybe this will help you. I also tried doing solid models, but
the layering was difficult enough that I lost interest and focused on
wireframes. If you'd like I can try to find my old source for this.

------
donatj
Would it be possible to embed the JS within the SVG itself?

