Hacker News Reader

Comment by laszlokorte | Hacker News Reader

Very cool! Just just implemented an SVG 3D renderer a few weeks ago [1]. But I did not implement texturing yet and wondered how one could do this.

[1]: https://youtu.be/kCNHQkG1Q24?si=3VxfVFtG2MiEEmlX

View on HN

Your renderer looks awesome! I was surprised there wasn't an "off the shelf" SVG renderer in native TS/JS, it's a big deal to be able to create 3D models without a heavy engine for visual snapshot testing!

When you loaded Suzanne, my eye could detect framerate drop when moving the model. What is the hot path in the calculations?

The implementation shown in the video is actually particularly slow because all the geometric transformations are implemented in terms of lenses/optics ([1]) and ramdajs ([2]). So the whole mess is a gigantic stack of nested, composed and curried functions, instead of raw linear algebra (just becaus I could).

I later optimized the hotpath and it is significantly faster (still miles behind webgl/webgpu obviously). You can try yourself if you scroll alll the way to the veeeerrrry bottom here [3].

[1]: https://github.com/calmm-js/partial.lenses [2]: https://ramdajs.com/ [3]: https://static.laszlokorte.de/svatom/

An other approach would be to apply the transformation to SVG elements separately. Inkscape has a perspective transformation tool, which you can apply to paths (and paths only). It probably needs to do approximation and subdivision on the path itself though, which is possibly more complex.

Reply on news.ycombinator.com