3 ms·

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:/

• badmintonbaseba 1y ago
  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.
• seveibar 1y ago
  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!
• CrimsonCape 1y ago
  When you loaded Suzanne, my eye could detect framerate drop when moving the model. What is the hot path in the calculations?
  • laszlokorte 1y ago
    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 https://github.com/calmm-js/partial.lenses [2]: https://ramdajs.com/ https://ramdajs.com/ [3]: https://static.laszlokorte.de/svatom/ https://static.laszlokorte.de/svatom/