search

jnsmalm / pixi3d

The 3D renderer for PixiJS. Seamless integration with 2D applications.
https://pixi3d.org
MIT License
759 stars 44 forks source link

General Question: 3D GUI Generator #65

Closed inglesuniversal closed 2 years ago

inglesuniversal commented 2 years ago

Hello @jnsmalm

AWESOME project of yours... One of my biggest dreams and challenges of 3D has always been to build a 3D user interface that combines the power of pixi.js, the beauty of 3D (like this library of yours) and combining HTML5 elements that can be brought to life and animated under these set of tools.

Is there a way to achieve this as of today?

Can you make this happen or recommend additional libraries that can allow me to put this all together?

Thanks and Congrats on your project!

inglesuniversal commented 2 years ago

PS. Is there a way to animate HTML => TABLE DIV BUTTON IFRAME elements using WebGL now?

jnsmalm commented 2 years ago

Hi, Thank you! Not exactly sure what you mean... Do you simply mean combining Pixi.js, Pixi3D and HTML elements? If so, then yes this can be done. Pixi.js and Pixi3D (everything using WebGL actually) is rendered using the HTML canvas element. Other HTML elements, like button or table can either be below or above this canvas. Regular HTML elements (ie button or table) can not be rendered inside this canvas, if you know what I mean.

Did this answer your question?

inglesuniversal commented 2 years ago

Thanks for your answer... yes... pretty much this is my idea:

Can regular HTML5 elements be animated using webgl at 60 fps ? That is the magic of webgl right? the performance

I have built some mobile apps that use JS frameworks but when moved into the app store, they show some lagging on the interface interaction. I know that webgl would be the perfect solution, but is there a way to add that speed to iframes or tables using libraries like yours? or there is no way until now of visualizing a table or iframe inside canvas?

That's where I am so far.

jnsmalm commented 2 years ago

HTML elements and WebGL is two different worlds and can't be combined in that sense, it's a limitation of HTML/WebGL. If you want to animate HTML elements at 60 fps, you can do that by using "requestAnimationFrame" function.

inglesuniversal commented 2 years ago

I just recalled something I want to share with you....

How about this library....

https://github.com/PixelsCommander/HTML-GL

Can it be combined into your project and make my dream come true... LOL

Hope you get some ideas with my findings...

Regards

jnsmalm commented 2 years ago

To be honest, I don't see any reason to use that lib other than to maybe add full screen effects to an entire page. That lib you linked to render HTML elements to a texture which is then rendered using PixiJS, can't see how this is faster - it's just an additional step in the rendering process.

inglesuniversal commented 2 years ago

I appreciate your feedback. I just tossed the idea thinking it "could" be useful. Now that you explained the overall process. I'll just keep reading your docs to see how to adapt your script to fit my project in the best possible way.

Thanks for your valuable time.