search

polotno-project / polotno-board

Roadmap and bug-tracker for the Polotno project.
https://polotno.dev/
9 stars 1 forks source link

A direct access to the Canvas with useCanvas() hook #21

Closed iamsterdam800 closed 1 year ago

iamsterdam800 commented 2 years ago

In my project I do a preview of the design made with Polotno SDK applied to the 3D model of the final product. It currently takes 0,5-2 seconds to update the preview after each Store change.

As I understood, Polotno is powered by Konva, that is an "HTML5 2d canvas js library". And what I'm using for the 3D preview is ThreeJs framework, that supports the textures backed by the HTML canvas. So if Polotno could expose the Canvas being used, I could use it as a texture for real-time 3D preview.

Check how it works with InstaBox3d, when they edit the artwork: https://www.instabox3d.com

lavrton commented 2 years ago

For now, polotno can't simply stream canvas element. On the canvas element there are many other additional components (page background, selection tool, etc). And it doesn't make sense to draw them into 3d view.

So "delayed" updates is the only solution for now.

I can try to think about a solution when a canvas with just content is exported. But it is not trivial, and I am not sure if it provides much value.

iamsterdam800 commented 2 years ago

Hi Anton, thanks very much for your response and the great SDK you're building!

I understand the challenge with exposing a "cleaned" canvas. However, if that's not as hard to expose the "dirty" canvas (maybe as an experimental/hidden API), it would be really valuable to have! In fact, I DO need the background. And I don't mind that much the selection tool on the texture and other artifacts. It is not a big problem as compared to slow feedback. I also think I can remove the selection, when the user starts to interract with the 3D preview. That would make the canvas clear :)

lavrton commented 2 years ago

To get dirty canvas, you can just do this:

let canvas = Konva.stages[0].children[0].getNativeCanvasElement();
// or
let canvas = document.querySelector('.konvajs-content canvas');
iamsterdam800 commented 2 years ago

Thanks! Exactly what's needed!

iamsterdam800 commented 2 years ago

I have tried with canvas texture. And it works pretty smooth. But unfortunately, the canvas is bigger than the page, it includes some gray area around. That shifts and squeezes the texture resulting in incorrect mapping to the 3d model.. :(

https://youtu.be/iUnV_B0rDk0

I don't know if it's possible for you, but it would be great to have the canvas for only the page area. And just ideal, if the selection tool was rendered on a seperate (transparent) canvas on top. :)

lavrton commented 1 year ago

The only solution for now is to do real-time export of the store and using it as a texture.