search

arch-inc / fabricjs-psbrush

Fabric.js用の感圧ブラシ実装 / A lightweight pressure-sensitive brush implementation for Fabric.js
https://arch-inc.github.io/fabricjs-psbrush/
Other
62 stars 24 forks source link

The demo is not working in the browser #11

Closed frankrousseau closed 3 years ago

frankrousseau commented 3 years ago

Hello there,

Thank you a lot for this plugin. It's something we are looking for for a while. I will see if I can contribute in any way.

The sad thing is that it seems to not work on a desktop computer. Is there any way we can help to add the compatibility with desktop browsers?

arcatdmz commented 3 years ago

Hi @frankrousseau, thank you for your interest in our project!

I've just checked the demo website with my Wacom One device on the latest release build of Microsoft Edge, which worked properly.

image

Our implementation uses either one of TouchEvent.touches[0].force or PointerEvent.pressure values, so please confirm that your web browser supports these APIs.

https://github.com/arch-inc/fabricjs-psbrush/blob/3a665a20d597a5156d9b2790610bc0af59ef34ab/lib/utils.ts#L28-L39

By the way, I've noticed you're working on helping Animation Studios. We (Arch Research) share the goal, though we are based in Japan and currently focus on Japanese anime production workflow. Glad to get to know fellows abroad!

frankrousseau commented 3 years ago

I use Firefox and Chrome. Can it work with the mouse? My friend who tried it with a pencil uses Google Chrome.

By the way, I've noticed you're working on helping Animation Studios. We (Arch Research) share the goal, though we are based in Japan and currently focus on Japanese anime production workflow. Glad to get to know fellows abroad!

Sounds great. I will see how to add your technologies to https://github.com/cgwire/awesome-cg-vfx-pipeline

arcatdmz commented 3 years ago

It should also work on Firefox and Chrome.

Adding support for mouse is another thing, because it usually doesn't have any pressure information (just 0 [up] or 1 [down]) and we need to somehow simulate the pressure. For instance, we could probably utilize stroke speed for the simulation.

Oh, and thank you for the information. The list itself is super useful.

We also had a similar article in our booklet called "Anime Technology" but it's written in Japanese. This video shows something relevant, if you're interested in how Japanese anime is made: https://www.youtube.com/watch?v=2DSnKa--aMM

arcatdmz commented 3 years ago

I believe this issue is resolved with the introduction of PressureManager and its fallback value.

I'm closing this issue, but please feel free to re-open, @frankrousseau.

frankrousseau commented 3 years ago

Thank you, I will try to integrate your tool again.