Hacker News Reader

Comment by skybrian | Hacker News Reader

It sounds like this allows you to draw to a WebGL surface as if it were Canvas?

It means you can now include Chrome's Skia vector graphics rendering engine as part of your custom code in WebAssembly (skia/wasm in Chrome or elsewhere).

See the Slug thread from earlier today for context...

Slug: Dynamic GPU Font Rendering and Advanced Text Layout https://news.ycombinator.com/item?id=20475111

https://en.wikipedia.org/wiki/Skia_Graphics_Engine

Would be terrible if a browser decides to "optimize" the Wasm and upon detection of code that it has natively, directly runs the native version and completely bypasses any security benefits. (If you work on Skia and are reading this, please DON'T compromise on security. We already have too many vulnerabilities on the hardware level thanks to relentless optimizations that was not or unable to be proved correct.)

No browser would ever do this. It's a pain in the ass to do to begin with but it's also an absurdly complex optimization for a specific use case that would barely pay off in practice. It wouldn't work unless you were shipping the same version of skia as the embedded application and you'd have to do all sorts of weird stuff to make the ABIs match up (the native C/C++ ABI is not the same as the one wasm uses at runtime)

Knowing Google, they might be willing to go through the effort so that Skia sites only work in Chrome.

Right, but I'm wondering if it runs entirely on the CPU or uses GPU-based acceleration via WebGL.

The docs say it uses WebGL [1]. And I found a "fixed" pull-request saying it too [2].

   WebGL context encapsulated as an SkSurface, 
   allowing for direct drawing to an HTML canvas.

However, I just discovered this project a few hours ago so I don't know if there's any "gotchas" -- hopefully someone more knowledgeable or on the chrome/skia team will chime in.

[1] https://skia.org/user/modules/canvaskit

[2] https://bugs.chromium.org/p/skia/issues/detail?id=8378

It is certainly a WebGL Context.

Running this on one of the examples.

let c=document.querySelector("#canvas");

c.getContext("2d"); >>>> null

c.getContext("webgl"); >>>> WebGLRenderingContext { vertexAttribDivisor: vertexAttribDivisor(), drawArraysInstanced: drawArraysInstanced(), drawElementsInstanced: drawElementsInstanced(), createVertexArray: createVertexArray(), deleteVertexArray: deleteVertexArray(), bindVertexArray: bindVertexArray(), isVertexArray: isVertexArray(), drawBuffers: drawBuffers(), Yu: null, canvas: canvas#canvas }

c.getContext("webgl2"); >>>> null

Of course that doesn't stop it from using any amount of software rendering layers before it hits the canvas, but it's a good sign.

As far as I'm aware, browsers have been making use of any available GPU acceleration for rendering 2d contexts since 2012[1]? The example supplied by Google[2] (on the first link) definitely requests a 2d context for the canvas.

[1] - https://developers.google.com/web/updates/2012/07/Taking-adv... [2] - http://fhtr.org/gravityring/sprites.html

Reply on news.ycombinator.com