Skia WebAssembly

[sha...@infograph.com]

In an earlier thread, it was pointed out that the Skia team had setup a continuous build bot that compiled Skia to WASM, though nobody used it or tests it.  I don't see anything in Skia's source that looks like a ninja script for building such a thing.  Could the scripts or makefiles for compiling to WebAssembly be external to the Skia git repository?  

[Mike Klein]

I think `git grep -i wasm` is the way to what you're looking for?  The most developed parts of Skia targeting WASM are the bits you see labeled Pathkit, a subset of Skia that's able to do logical operations on vector paths.

On Mon, Oct 1, 2018 at 1:42 PM <sha...@infograph.com> wrote:

In an earlier thread, it was pointed out that the Skia team had setup a continuous build bot that compiled Skia to WASM, though nobody used it or tests it.  I don't see anything in Skia's source that looks like a ninja script for building such a thing.  Could the scripts or makefiles for compiling to WebAssembly be external to the Skia git repository?  

--
You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.
To post to this group, send email to skia-d...@googlegroups.com.
Visit this group at https://groups.google.com/group/skia-discuss.
For more options, visit https://groups.google.com/d/optout.

[sha...@infograph.com]

Ah. The results of that command revealed:

BUILD.gn:  if (target_cpu != "wasm")

So, the idea is to run the existing ninja scripts but set the target cpu to wasm, instead of x64 or whatever.  That is how you build webassmbly?

Will that also create some kind of HelloWorld.js / .html file(s) that show how to use it?

[Mike Klein]

No, wasm is not really well integrated at all with GN.  At the moment we have a ton of side scripts to handle those builds.

[sha...@infograph.com]

Ok.  Is there a way to see what those scripts do?  Do they call Emscripten?  Which Skia source files do they compile? Do they reference backend source files defined outside skia?  etc...

[Mike Klein]

Yes, they're checked into the Skia repo, and you should be able to find them by looking for those files with "wasm" in them.

[sha...@infograph.com]

So, the automated build bots are only making pathOps into a wasm module?

Not all of Skia.  Just pathOps?

[Mike Reed]

We have a separate experiment to put all of skia into wasm -- called canvaskit

[sha...@infograph.com]

Any chance of seeing that project?

[Florin Malita]

Initial commit here: https://skia-review.googlesource.com/c/skia/+/153882.

[Kevin Lubick]

If you check out Skia at ToT, you'll find $SKIA_ROOT/experimental/canvaskit

Assuming you have followed the emscripten getting started guide and set that install location to the environment variable $EMSDK, you should be able to run

make release && make local-example

and then navigate to http://localhost:8000/canvas-kit/example.html to see it in action.

You can also check out https://jsfiddle.skia.org/canvaskit for a live-editor of the CanvasKit library (you'll want to look experimental/canvaskit/canvaskit_bindings.cpp and experimental/canvaskit/interface.js to see what's been exposed thus far.  It's still very new, so we haven't exposed everything we want to yet, nor documented it sufficiently).

[sha...@infograph.com]

Great!   Was canvaskit added to experimental after m70?

Because it isn't in my copy.

[Heather Miller]

Correct, it landed it a couple weeks after M70 cut.

[sha...@infograph.com]

Does the build process need clang?  compile.sh gives me this error:

/c/CDL_Development/ThirdPartyLibs/skia_master /c/CDL_Development/ThirdPartyLibs/skia_master/experimental/canvaskit

Compiling bitcode

ERROR at //gn/BUILDCONFIG.gn:85:14: Script returned non-zero exit code.

  is_clang = exec_script("gn/is_clang.py",

             ^----------

Current dir: C:/CDL_Development/ThirdPartyLibs/skia_master/out/canvaskit_wasm/

Command: C:/emsdk/python/2.7.13.1_64bit/python-2.7.13.amd64/python.exe -- C:/CDL_Development/ThirdPartyLibs/skia_master/gn/is_clang.py /c/emsdk/emscripten/1.38.12/emcc /c/emsdk/emscripten/1.38.12/em++

Returned 1.

On Tuesday, October 2, 2018 at 6:36:41 AM UTC-7, Kevin Lubick wrote:

[Mike Klein]

Can you run gn/is_clang.py yourself?

[sha...@infograph.com]

Yeah.  

C:/emsdk/python/2.7.13.1_64bit/python-2.7.13.amd64/python.exe -- C:/CDL_Development/ThirdPartyLibs/skia_master/gn/is_clang.py /c/emsdk/emscripten/1.38.12/emcc /c/emsdk/emscripten/1.38.12/em++

puts "true" out to the concole.

[Mike Klein]

Weird!  Can you try replacing is_clang.py's contents with

   print 'true'

and see how that goes?  Worst case, you can always just remove that call to is_clang.py entirely.  One of either false or true ought to work for you there with emcc.

[sha...@infograph.com]

I hard-coded is_clang = true in BUILDCONFIG.gn

Now it errors when it tries to compile each file.  In this pattern:

[1/666] compile ../../src/effects/SkOverdrawColorFilter.cpp

FAILED: obj/src/effects/effects.SkOverdrawColorFilter.o 

/c/emsdk/emscripten/1.38.12/em++ -MMD -MF obj/src/effects/effects.SkOverdrawColorFilter.o.d -DNDEBUG -DSK_GAMMA_APPLY_TO_A8 -DSK_ALLOW_STATIC_GLOBAL_INITIALIZERS=0 -DSK_ENABLE_DISCRETE_GPU -DSKIA_IMPLEMENTATION=1 -I../../include/android -I../../include/c -I../../include/codec -I../../include/config -I../../include/core -I../../include/docs -I../../include/effects -I../../include/encode -I../../include/gpu -I../../include/atlastext -I../../include/pathops -I../../include/ports -I../../include/svg -I../../include/utils -I../../include/utils/mac -I../../include/private -I../../src/c -I../../src/codec -I../../src/core -I../../src/effects -I../../src/fonts -I../../src/image -I../../src/images -I../../src/lazy -I../../src/opts -I../../src/pathops -I../../src/pdf -I../../src/ports -I../../src/sfnt -I../../src/shaders -I../../src/shaders/gradients -I../../src/sksl -I../../src/utils -I../../src/utils/win -I../../src/xml -I../../third_party/gif -I../../src/gpu -fstrict-aliasing -fPIC -O3 -fdata-sections -ffunction-sections -Wno-unused-parameter -s USE_FREETYPE=1 -s USE_LIBPNG=1 -DIS_WEBGL=1 -DSK_RELEASE -std=c++14 -fno-exceptions -fno-rtti -frtti -c ../../src/effects/SkOverdrawColorFilter.cpp -o obj/src/effects/effects.SkOverdrawColorFilter.o

CreateProcess failed: The system cannot find the file specified.

[Mike Klein]

That's weird.  Try again?  Is your disk ok?

[sha...@infograph.com]

Yeah. Results don't change.

I am running the compile.sh from Git Bash.

Since it is the only shell console I have on Windows.

Is there a way to run a shell file from the a developers console?

Should I try cygwin?  I hear it is expensive.

[Mike Klein]

Does the compile command work if you run it yourself?  Any idea what file "The system cannot find the file specified." is referring to?

You should keep in mind you're probably the first person to attempt to build like this on Windows.

[sha...@infograph.com]

When I run the em++ command myself, it says:

error: unable to open output file 'obj/src/effects/effects.SkColorMatrix.o': 'no such file or directory'

Should I give up and go try to make a linux vm?

[Mike Klein]

Possibly, yeah.  Do all those directories exist?  Do you have space on your disk?

[sha...@infograph.com]

There is no obj directory under canvaskit.  Disk has plenty of space.

[Mike Klein]

maybe try making one?

[sha...@infograph.com]

Yeah, if I make the obj/src/effecrts/ folders, and run the compiler manually it works.

When I run the shell script, it still fails.

I am going to stop and switch to linux.  Cent OS

[Matthew Leibowitz]

It will be interesting to see what you had to do to get skia working nicely.

I am working on SkiaSharp and I would really like to get that working in the browser as well.

[Jesse Luo]

I was using this project today but I could not get the text to render in the examples i.e "Try moving your mouse" does not show up. Any advice?

[Jesse]

Ah, my mistake, noticed in commit log that drawtext has issues, will try checking out a more recent commit.

maybe try making one?

<div class=

maybe try making one?

<div class=

maybe try making one?

<div class=

[sha...@infograph.com]

The interface.js and externs.js seem to pay special attention to SkPath, but not to canvas, image or any other types.

Is that because they were important for the example?  Or is that to fix an issue with path?

On Tuesday, October 2, 2018 at 6:36:41 AM UTC-7, Kevin Lubick wrote:

[Shawn Riordan]

Also, consider the following:

I am working on a project where the WASM interface isn't Skia's interface. Instead, the interface is a wrapper.  I am looking at exposing a more simple interface.  Where the javascript doesn't need to know about things like SkPath, SkCanvas, SkBlendMode or SkImage.  I have a C++ library that will understand all those things, but the javascript layer doesn't need to know about them.

I know that this sort of interface is not what you are targeting.  Your goal of exposing all the primary components of Skia makes sense and should not stop, by any means.  

Maybe it would help if I explained my use case in more detail.

The company I work for has a universal viewer application.  It can view (almost) any file format type.  From office documents to CAD drawings and raster blueprints.  Almost anything... In our current situation, we have native applications that use Skia for the task of rendering to the screen.  For our HTML client, we convert to SVG.  (not using your code, but ours)  

We have found SVG to suck.  There are a lot of things it cannot do. And even more things it cannot do well. We spend an unreasonable amount of time trying to get SVG to do what we want it to.  

Then came the question:  What if the HTML client could use the same rendering code base as the native clients?

Which lead to this foray into Skia-WASM town.  Our native applications have multiple layers.  The GUI layer has no knowledge of the rendering layer that uses Skia.  Because that isn't his job.  A lower "draw()" layer knows about that sort of stuff.  We are trying to come up with a similar set of layers in our WASM implementation. Where the javascript layer doesn't need to understand things like Skia.  Or file format reading.  Or whatever. It only knows the minimalist interface we expose to native clients.

On Tuesday, October 2, 2018 at 6:36:41 AM UTC-7, Kevin Lubick wrote:

[Kevin Lubick]

The reason for that is because this is new and we haven't really had time to do it for other types (yet).  Much of the SkPath things came from https://skia.org/user/modules/pathkit and was more or less copy-paste, to allow for chaining w/o leaking of SkPath objects.

[sha...@infograph.com]

Does CanvasKit not support blendmodes?

[Kevin Lubick]

Not yet, but it's on the roadmap.  

[sha...@infograph.com]

Even the CPU renderer?

[sha...@infograph.com]

When I use the standard canvaskit.js and canvaskit.wasm in the example.html, everything is fine.

But I was given a React-flavor of node.js and used:

const CKInit = require('../bin/canvaskit.js')

In the example, everything worked fine.

In the React / Node case, I got hundreds of error messages, when parsing the canvaskit.js file.  Things like:

'read' is not defined

'readbuffer' is not defined

'scriptArgs' is not defined 

'quit' is not defined

'printErr' is not defined

'tempI64' is not defined

'tempDouble' is not defined

Is there some aspect of js that I need to include, before canvaskit.js?  There is nothing in my example.html case.  He has no troubles.

I don't know left from right, when it comes to javascript.  let alone node.js or react.

[Kevin Lubick]

We have an example that works for me on Node 8.9+ https://github.com/google/skia/blob/master/experimental/canvaskit/canvaskit/node.example.js

One small thing, I have to tell node that it is dealing with WebAssembly:

node ./canvaskit/node.example.js --expose-wasm

[JongChan Choi]

Hello, is there any plans for pdf backend support on canvaskit?

[Mike Reed]

Should be very easy -- just grows the code-size.

--

You received this message because you are subscribed to the Google Groups "skia-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to skia-discuss...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/feb4e42f-97ea-462e-b6f2-c7151ec48970n%40googlegroups.com.

[JongChan Choi]

Then how about creating a separate package? (e.g. canvaskit-with-pdf-wasm)

I want to make custom builds for personal use, but I don't have much knowledge in c++ and skia codebase. 😭
Can you please guide me how to fix it if I want to add a pdf support?

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAERTzqwA4E%2BSTYkQjj70P0y99ahCkR1Amt4KdmC0WQ5QLgRYmg%40mail.gmail.com.

[Peter Verswyvelen]

I think you just need to enable use_skia_pdf in 

https://source.chromium.org/chromium/chromium/src/+/master:third_party/skia/modules/canvaskit/compile.sh

Are you able to run this script on your machine? First follow the instructions on the skia.org website on how to build the standard packages.

PS: One thing that would be really handy is a cloud build system, with a web front end where you can tick use_skia_xxx checkboxes, and select targets, and have a custom version of Skia build in the cloud. It could do caching to avoid rebuilding common configs. It could require you to login with your GCP account :-)

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAF9VwM8ndXKqi185hWPNNjAe5nm4YYEXZnTyREJuxt6m_jDvdA%40mail.gmail.com.

[JongChan Choi]

I've already just turned on that flag and built it, but the size of the wasm and js files did not change.

Probably it seems that the canvaskit_bindings.cpp file should be fixed as well. (maybe adding some js runtime code too)

The code to write the binding looks like DSL. I think I'll need somebody's mentoring to fix this. 🙏

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAOo4A__TgbNmLqKVF5ebYJpvOrzg6smY-bAHzgJchs-8J_bobQ%40mail.gmail.com.

[Nathaniel Nifong]

How are you planning to use the PDF support? There's currently no PDF related javascript bindings in canvaskit_bindings.cpp, you can't just turn it on with a flag. Are you asking for some? 

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAF9VwM-3uE4Un%2BWG%3Dbg3C6PNjbCNiVtu-wpUOVQ%3Dm_Hd4Tw_Zg%40mail.gmail.com.

[JongChan Choi]

I want to write a Hangul document pdf converter using hwp.js.

I looked for a few javascript pdf writers, but couldn't find an implementation that could embed fonts, expressive and freely compose the layout.

Skia is suitable because it provides a pdf backend while providing a low level api similar to canvas.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CANJyj8q9jaGhmjmR%3DVm%3DthVuFuAeKS400jjmEH1WyeXX-23Kvg%40mail.gmail.com.

[Nathaniel Nifong]

I'll work on adding some paragraph bindings. (basically to create a PDF surface, add pages, draw to them with ordinary SkCanvas methods, and save off the PDF file)

This is something that would be turned on at compile time, when the canvaskit wasm binary is built.

I do have some other tasks on my plate, but it shouldn't be too long.

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CAF9VwM_ThPwhZm2RjngPJ7EEoH9snp3vhjpqJ%3DpNVVFZfF%3DbLQ%40mail.gmail.com.

[JongChan Choi]

Oh that's good news. I'll look forward to it. 😊

To view this discussion on the web visit https://groups.google.com/d/msgid/skia-discuss/CANJyj8o2%2BvekSgnVZg80YGMPvovSDHZ7A7ga-4_DSHbhtqte9w%40mail.gmail.com.