7 ms·

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

by xigma 8y ago

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.

philjohn 8y ago
which is why both WebGL and Web Assembly exist This could be an interesting "worst case" polyfill.
- xigma 8y ago
  Those don't fill the same void at all, you need tons of code to do something useful with those, all of which needs to be downloaded, compiled and executed. Show me the library using WASM/WebGL that loads as quickly as SVG or Canvas content.
  - kowdermeister 8y ago
    http://www.adultswim.com/etcetera/elastic-man/ http://www.adultswim.com/etcetera/elastic-man/ 619KB in total, 362KB wasm binary Edit: Three.js is such a library with qualities you described: https://threejs.org/examples/#webgl_postprocessing_dof https://threejs.org/examples/#webgl_postprocessing_dof
    - xigma 8y ago
      That's not a library, that's a demo and it takes several seconds to load, just like a flash applet would. I'm aware of minimalist things that can put stuff on-screen instantly, but not of something that's a fleshed out solution like SVG or Canvas that still loads instantly (like SVG or Canvas). Edit: I'm sorry, my brain was still in 2d/Canvas/SVG/Flash land, you were talking about 3D stuff all along. You're right threejs stuff can load quickly, shaders can become a bottleneck though. I was thinking of a library that basically does "Flash Lite" with good performance and yet remains competitive with Canvas/SVG content in terms of load time. I'm not aware of such a solution, but I'd be glad to learn whether it now exists.
      - roywiggins 8y ago
        The haxe ecosystem is pretty great. http://haxeflixel.com/demos/ http://haxeflixel.com/demos/
GijsjanB 8y ago
Euh... Yeah? Shoehorning SVG into 3D models ought to be slow. Manipulating DOM nodes for animation has it's limits. If you want 3D perf in the browser, use WebGL. The canvas can be quite fast if used right, but again, it's not the right tool for every job.
- xigma 8y ago
  The problem is, the right tool does not exist on the Web. WebGL doesn't have very good support, especially on mobile. That's why one would choose to use SVG. Also, just to get it to do something requires a lot more expertise and code. Would this project have worked out better on Canvas? Yes, most certainly, but some people have to find out the hard way.
  - kowdermeister 8y ago
    Padorn? Yeah, poor Opera mini users will suffer. https://caniuse.com/#search=webgl https://caniuse.com/#search=webgl
    - xigma 8y ago
      The fact that a browser supports WebGL tells you nothing about which devices support it. It all depends on the GPU and its drivers, browsers have blacklists of GPUs, but even if your device is not blacklisted, it may simply screw up, especially on mobile.
      - kowdermeister 8y ago
        If you rely on WebGL on mobile then I would feel insecure too, but progressive enhancement is a thing. I got recently asked to do a project in WegGL and the target audience has the latest gadgets so it will fly on mobile as well. A transaction will cost around $50k so it's a safe assumption, but I'll do more research.
      - deleted 8y ago
        [deleted]
sbarre 8y ago
I dunno, WebGL and other open browser standards have come a long way and do things now that I don't think were ever possible in Flash. When done right (for example: http://awards.paris/new-micra-experience/ http://awards.paris/new-micra-experience/ ) 3D in the browser can be impressive.
- xigma 8y ago
  Flash had a 3D API (Stage3D) seven years ago, which was quite similar to WebGL. It wasn't used much, because Flash was already on its way out.
  - sbarre 8y ago
    I remember seeing 3D in Flash, but it never had the equivalent performance of WebGL.. Although maybe that's just a result of computing power and GPU progress.. Also WebGL has been around at least that long, if not longer..
wongarsu 8y ago
SVG is HTML for arbitrary 2d shapes (yes, technically XML). Writing a 3d engine with it is akin to rendering PNG images by arranging colored divs. It is a hack with much better existing alternatives.
- xigma 8y ago
  It's not a "3D engine", it's basic line and shape drawing. With SVG, you will easily run into the same performance issues with any kind of dynamic content, 3D or not. With Canvas, you may or may not run into them, depending on how much content you have. In either case, performance is terrible compared to what you can do in a native application.
kowdermeister 8y ago
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 8y ago
  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 8y ago
    Was java ever truly free though? Oracle's shenanigans indicate otherwise.
    - microcolonel 8y ago
      > Was java ever truly free though? Oracle's shenanigans indicate otherwise. It probably could have been, pre-Oracle.
      - BrendanEich 8y ago
        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.
scriptproof 8y ago
> It's really a sad story that HTML5 has been evangelized so strongly SVG is not a part of HTML 5, it is older, while Canvas actually is, and Canvas is as fast as the now defunct Flash. Maybe applying the right technology to a problem would solve the speed issue...
- xigma 8y ago
  > SVG is not a part of HTML 5, it is older Maybe not formally, but making that distinction makes no difference to my point. > Canvas is as fast as the now defunct Flash ...not even close.
- tannhaeuser 8y ago
  > SVG is not a part of HTML 5 https://html.spec.whatwg.org/multipage/embedded-content-other.html#svg-0 https://html.spec.whatwg.org/multipage/embedded-content-othe... begs to differ.
hnqwereader 8y ago
You have earned neither my respect nor sympathy in this matter. At the risk of sounding rude, your words are farts in the wind. You do not seem to possess the insight and experience required to pass good judgement; in fact, your position seems based on emotional rather than rational and educated grounds. You pursue a zealous agenda, and I shall have none of it.
artursapek 8y ago
How is canvas a "trainwreck" in performance? I've used it extensively and have found it a very well performing framework. https://cryptowat.ch/markets/kraken/btc/eur https://cryptowat.ch/markets/kraken/btc/eur https://ballpoint.io/files/examples/starbucks https://ballpoint.io/files/examples/starbucks
- xigma 8y ago
  The difference in performance with Flash is huge, modifying the context is quite expensive, resetting it is expensive, which is problematic because it is stateful. You have to compare it to non-Web technology to get an idea of how bad it really is. Compared to SVG/HTML, it's of course massively faster.

by xigma 8y ago

philjohn 8y ago

which is why both WebGL and Web Assembly exist This could be an interesting "worst case" polyfill.

xigma 8y ago
Those don't fill the same void at all, you need tons of code to do something useful with those, all of which needs to be downloaded, compiled and executed. Show me the library using WASM/WebGL that loads as quickly as SVG or Canvas content.
- kowdermeister 8y ago
  http://www.adultswim.com/etcetera/elastic-man/ http://www.adultswim.com/etcetera/elastic-man/ 619KB in total, 362KB wasm binary Edit: Three.js is such a library with qualities you described: https://threejs.org/examples/#webgl_postprocessing_dof https://threejs.org/examples/#webgl_postprocessing_dof
  - xigma 8y ago
    That's not a library, that's a demo and it takes several seconds to load, just like a flash applet would. I'm aware of minimalist things that can put stuff on-screen instantly, but not of something that's a fleshed out solution like SVG or Canvas that still loads instantly (like SVG or Canvas). Edit: I'm sorry, my brain was still in 2d/Canvas/SVG/Flash land, you were talking about 3D stuff all along. You're right threejs stuff can load quickly, shaders can become a bottleneck though. I was thinking of a library that basically does "Flash Lite" with good performance and yet remains competitive with Canvas/SVG content in terms of load time. I'm not aware of such a solution, but I'd be glad to learn whether it now exists.
    - roywiggins 8y ago
      The haxe ecosystem is pretty great. http://haxeflixel.com/demos/ http://haxeflixel.com/demos/

GijsjanB 8y ago

Euh... Yeah? Shoehorning SVG into 3D models ought to be slow. Manipulating DOM nodes for animation has it's limits. If you want 3D perf in the browser, use WebGL. The canvas can be quite fast if used right, but again, it's not the right tool for every job.

xigma 8y ago
The problem is, the right tool does not exist on the Web. WebGL doesn't have very good support, especially on mobile. That's why one would choose to use SVG. Also, just to get it to do something requires a lot more expertise and code. Would this project have worked out better on Canvas? Yes, most certainly, but some people have to find out the hard way.
- kowdermeister 8y ago
  Padorn? Yeah, poor Opera mini users will suffer. https://caniuse.com/#search=webgl https://caniuse.com/#search=webgl
  - xigma 8y ago
    The fact that a browser supports WebGL tells you nothing about which devices support it. It all depends on the GPU and its drivers, browsers have blacklists of GPUs, but even if your device is not blacklisted, it may simply screw up, especially on mobile.
    - kowdermeister 8y ago
      If you rely on WebGL on mobile then I would feel insecure too, but progressive enhancement is a thing. I got recently asked to do a project in WegGL and the target audience has the latest gadgets so it will fly on mobile as well. A transaction will cost around $50k so it's a safe assumption, but I'll do more research.
    - deleted 8y ago
      [deleted]

sbarre 8y ago

I dunno, WebGL and other open browser standards have come a long way and do things now that I don't think were ever possible in Flash. When done right (for example: http://awards.paris/new-micra-experience/ http://awards.paris/new-micra-experience/ ) 3D in the browser can be impressive.

xigma 8y ago
Flash had a 3D API (Stage3D) seven years ago, which was quite similar to WebGL. It wasn't used much, because Flash was already on its way out.
- sbarre 8y ago
  I remember seeing 3D in Flash, but it never had the equivalent performance of WebGL.. Although maybe that's just a result of computing power and GPU progress.. Also WebGL has been around at least that long, if not longer..

wongarsu 8y ago

SVG is HTML for arbitrary 2d shapes (yes, technically XML). Writing a 3d engine with it is akin to rendering PNG images by arranging colored divs. It is a hack with much better existing alternatives.

xigma 8y ago
It's not a "3D engine", it's basic line and shape drawing. With SVG, you will easily run into the same performance issues with any kind of dynamic content, 3D or not. With Canvas, you may or may not run into them, depending on how much content you have. In either case, performance is terrible compared to what you can do in a native application.

kowdermeister 8y ago

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 8y ago
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 8y ago
  Was java ever truly free though? Oracle's shenanigans indicate otherwise.
  - microcolonel 8y ago
    > Was java ever truly free though? Oracle's shenanigans indicate otherwise. It probably could have been, pre-Oracle.
    - BrendanEich 8y ago
      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.

scriptproof 8y ago

> It's really a sad story that HTML5 has been evangelized so strongly SVG is not a part of HTML 5, it is older, while Canvas actually is, and Canvas is as fast as the now defunct Flash. Maybe applying the right technology to a problem would solve the speed issue...

xigma 8y ago
> SVG is not a part of HTML 5, it is older Maybe not formally, but making that distinction makes no difference to my point. > Canvas is as fast as the now defunct Flash ...not even close.
tannhaeuser 8y ago
> SVG is not a part of HTML 5 https://html.spec.whatwg.org/multipage/embedded-content-other.html#svg-0 https://html.spec.whatwg.org/multipage/embedded-content-othe... begs to differ.

hnqwereader 8y ago

You have earned neither my respect nor sympathy in this matter. At the risk of sounding rude, your words are farts in the wind. You do not seem to possess the insight and experience required to pass good judgement; in fact, your position seems based on emotional rather than rational and educated grounds. You pursue a zealous agenda, and I shall have none of it.

artursapek 8y ago

How is canvas a "trainwreck" in performance? I've used it extensively and have found it a very well performing framework. https://cryptowat.ch/markets/kraken/btc/eur https://cryptowat.ch/markets/kraken/btc/eur https://ballpoint.io/files/examples/starbucks https://ballpoint.io/files/examples/starbucks

xigma 8y ago
The difference in performance with Flash is huge, modifying the context is quite expensive, resetting it is expensive, which is problematic because it is stateful. You have to compare it to non-Web technology to get an idea of how bad it really is. Compared to SVG/HTML, it's of course massively faster.