WebGL integration

Thanks @Pablo_Cortes, I haven’t had any success.

Here is my read-only link MG Webflow

I draw your attention to the “Homes Collection Template” linking to the “Home page”.
Thanks again for your time.

Matt

Hello @MGAVIOLI66,

I took a look and everything looks fine. Could you also send me your published site link too. Have you try taking the animation trigger off from your inner-wrap? Try to take the interaction out and then publish it again to see if that works.

@Pablo_Cortes I removed the triggers and this works when linking directly to external URL’s.
No success when linking to collection images. Thanks for your patience with me.

Here is the published link site: https://this-edition.webflow.io/
Pages in Focus: “Home” and “Projects Template”

Webflow Share

Hello @MGAVIOLI66,

It didn’t show when I clicked on the link. I will test your code and the cms option on a personal project and I will let you know if I can get it to work.

I’ve managed to get the web gl working, but is there a way to implement this in a collection? I’ve tried pasting the code in the cms setting, but there is no option to place it.

Any ideas?

1 Like

Hi All,

Stumbled upon this thread while trying to find some solutions for working with webgl.

I’m a great fan of vectary and new fan of webflow!

I wanted to ask if something like the 3D interactions on this page would be possible with vectary and webflow? : www.meowwolf.com

I’ve managed to paste vectary content onto my page, but would love to know about this kind of interaction looking at the mouse. Possible?

Also, is it possible to ignore the background of the iframe, so it’s transparent?

Thx

Hello @dataDRVN,

It is possible. All you have to do is go to interactions and select mouse move in viewport. You will have to export your images from vectary as PNGs and eliminate the background from there. Good luck.

thx @Pablo_Cortes I already have that working with the png’s exported from bodymovin’

what I’m looking for is true webgl which would allow the objects to be fully interactive, rather than a series of pre-rendered images.

I’m looking in to A-frame since it works on mobile also. Thx for taking the time to reply though. Will share an knowledge I learn to this thread for others if they need.

Got it @dataDRVN . I was confused with your question because the example that you showed was just a PNG with a mouse position interaction. If you are trying WebGL for 3D interactions, take a look at three.js, it is more simple that WebGL(based on it) and with more documentation.

Look at this tutorial it can helps. For more understanding better ti watch the full tutorial series.

2 Likes

In case someone in this thread is still looking for tools to create WebGL for Webflow, I’ve created Polygonjs ( https://polygonjs.com ), which is a WebGL design tool. No coding needed to have interactive 3D experiences.

And here is also a tutorial on how to add those 3D scenes to webflow:

1 Like

@gui thank you so much for sharing this!

1 Like

my pleasure, glad that’s interesting

2 Likes

Bonjour, j’ai une animation webgl clonable webflow mais impossible de l’intégrer à mon projet quelqu’un pourrait m’aider s’il vous plaît ?