WebGL integration

Design help Custom code
1

What’s up Webflowers!

I’d like to point out that I only have one preview link for the bottom example.

I’ve been trying to do some sort of a WebGL shader or hover effect for a while now. I’ve seen a couple of webflowers managing this in Webflow but for me there’s always some issue that comes up. I’ve tried two projects in a normal editor and everything worked out.

The first one is even cloneable https://webflow.com/website/WebGL-Hover-Effect and by not even changing a single thing and only publishing the project all of the canvases were dark. Here’s a tutorial by Dev Ed Liquid Image Transition With Javascript Tutorial - YouTube it’s super easy but still something doesn’t let it run with Webflow (not when I’m doing it).

The second one is from https://www.curtainsjs.com/ and the Webflow project by Niccolo Miranda http://webgl-shader-effect.webflow.io/, the tutorial is - YouTube . The way Niccolo did this is by pasting the link of an image inside of an tag into an embed element in Webflow. Nothing at all was displayed and the image icon in the embed was broken so I’ve tried it with setting up all the elements ( the canvas, the plane and the image ) with webflow and let the custom CSS do it’s thing. Then the canvas appeared in a dark brownish color so I went back to doing it like Niccolo but still nothing.

Here’s the link: https://preview.webflow.com/preview/webgl-1136c1?utm_medium=preview_link&utm_source=designer&utm_content=webgl-1136c1&preview=dd2d12b4338fa6861d0c6f4b64c6df24&mode=preview

Here’s the published page: https://webgl-1136c1.webflow.io/

Sorry for the long ramble. Has anyone of you pulled this off in Webflow successfully? What might I be doing wrong?

Cheers!

1 Like
2

Hello! I messed around with this myself a couple of weeks ago and had some issues. I can’t remember exactly what i did to fix it but I can tell you that I cloned the project and had to spend some time inspecting the published page on the live version to get mine to function like theirs. Looking at your link (and comparing it to theirs) I cant see the js referenced in your script?

In the one I have working I have 3 js links - three.js, webgl hover and tweenmax (its the second tab on their demo) and then links to 2 images and the displacement image.

3

hey DrNinjamonkey,

what script do you mean? I added all the code from the curtain js docs that is necessary for a basic shader effect. It worked in vs code, although I might have forgotten something. may I see your preview link? If that’s not too much to ask.

Cheers

4

I can’t share my link right now but will try to tomorrow.

In your live link If I inspect the page I can’t see any of the webgl js files used in the example you linked to. I’m a bit new to this so maybe I’m missing something?

5

In the console it says that s is not function, which refers to some bug in the compressed jquery inside webflow.

So my last hope of getting an effect of this kind into webflow is the tweenmax version.

Thanks for sharing the link DrNinjamonkey!

update: Errors gone by adding data-sampler=“thumbTexture” crossorigin=“anonymous” alt="cone-left.png to the img tag. Still nothing displayed

6

Hello @DanApro,

I was able to do the WebGL hover effect. Let me know if you still need help implementing it.

3 Likes
7

What’s up Pablo,

Thanks for the response. I still wasn’t able to manage it, so yeah I’d be eternally grateful if you’d show me/the forum how you’ve made it.

Cheers!

8

Hello @DanApro,

Ok so here we go, this is the page I made to test it out gym-grid-tes. First you need to upload the images you want to use into webflow and get the source url for each one, you can get the url on the assets panel
36%20PM
After that you need to create a container, a div block, with a class of “inner-wrap” inside that div block you have to place another div block with a class of canvas with a width and a height of 100%. Make sure your containers are the same size as the pictures you intent to use.
then on your before </body> tag code section paste the following code

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/webgl-hover_min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/TweenMax.min.js"></script>

<script>
new hoverEffect({
  parent: document.querySelector('.inner-wrap'),
  intensity1: 0.1,
  intensity2: 0.1,
  angle2: Math.PI / 2,
  image1: 'https://uploads-ssl.webflow.com/5d4b104ecf90308025174bfa/5d927897d3e06c21cfc37b9f_Screen%20Shot%202019-09-30%20at%205.49.47%20PM.png?',
  image2: 'https://uploads-ssl.webflow.com/5d4b104ecf90308025174bfa/5d92c78fe2a4d90affaa9dab_Screen%20Shot%202019-09-30%20at%2011.07.55%20PM.png?',
  displacementImage: 'https://uploads-ssl.webflow.com/5b367b755b093e453cec2141/5bdf09eb8f67b72ef0a90867_fluid.jpg?'
});
</script>

You have to replace the URLs of image1 and image 2 with your own urls. displacement image is the wave effect so you keep that the same. After that you cross your fingers and hit publish. I hope this helps, let me know how it goes.

1 Like
9

Hi Pablo,

sorry I didn’t have the time to get back to you. I have no words man, thank you for putting in the time and posting your solution. I tried it before with the same code, but I might have messed up back then, so I’m just gonna test it out with your solution. Either way dude, you’re awesome! Thanks again! :raised_hand_with_fingers_splayed:

1 Like
10

hey agian,

it worked here it is haha :slight_smile: the key was giving the innner-wrap a fixed height and a width.
I appreciate the help Pablo!

If someone see’s this I’m here to help as well!

https://hoverfx.webflow.io/

https://preview.webflow.com/preview/hoverfx?utm_medium=preview_link&utm_source=designer&utm_content=hoverfx&preview=28b2d921456de3ab048d7a005fc3e99d&mode=preview

1 Like
11

No worries @DanApro, I’m glad I was able to help you. Great job!

1 Like
12

Hi @DanApro
Any chance you know how to take a 3d model (3d file?) and integrate it into webflow?
using the same mouse movement effect seen here https://webgl-1136c1.webflow.io

I’ve been trying to do this for a while without any success.
similar to this concept - https://news.microsoft.com/bythenumbers/en/homepage

13

Hi Nir,

Sorry i wasn’t so active on the forums lately.
Bringing in 3d models is my greatest wish that I still haven’t figured out since you cannot upload them as assets so I’m guessing must be hosted somewhere else. Do you want to animate them or just sort of have them as static objects?
I tried once Vectary. It’s a 3d webapp similar to webflow. I’m not sure but I think you can upload 3d models that were made elsewhere and then just render them in Vectary. After that you could embed their html into webflow.

14
15

Hi Nir,
I think this article on how to get Vectary WebAR viewer to Webflow would be useful for you. It brings 3D models into the embeddable viewer automatically in the online 3D editor + there is an Augmented Reality preview on smartphones included.

The mouse follow movement is integrated into the viewer automatically (however you can turn it on or off in the settings as well as other parameters such as rotation) You can test it out on the Vectary homepage (scroll to the bottom)

Let me know if you need any more info. I work for Vectary. I’m happy to help.

1 Like
16

Thank you, Dan!
That’s exactly how Vectary works (disclaim: I work here:). You embed an iframe of the 3D viewer to Webflow and add custom parameters to the 3D model just as mouse follow(default), rotation, Augmented Reality, or make a custom Web App with the API.

Our homepage was made in Webflow, and there is a nice example of how such a WebAR viewer with a 3D model works. More info here.

1 Like
17

Hey Mirka, do you think there’s a way to target the vectary iframe and have custom mousemove interactions? Not just turning but also zooming in while hovering over the iframe. This would of course occur natively in vectary. Or even animating just like in cinema 4d? Any chance to have an embedded canvas element instead of an iframe? So we can build something interactive with Javascript ? Like these sites https://alessandrazanghi.studio/ Behind the Corn Revolution | Pioneer® Seeds

I’m sorry for all the questions but I’m super desperate. Thanks for the response :slight_smile:

Cheers

18

Hey Dan,
you can do all kinds of interactions, and you can embed two ways:

  • iFrame <iframe>
  • web-component <vctr-viewer>

Both work the same way, and both have the same interactions achieved via our ViewerAPI.

A demo says a thousand words (it was 100% done in Webflow):

It would be great if you could have a call with our WebAR expert, you can book one here.

1 Like
19

@Pablo_Cortes Do you know how you would retrieve CMS Collection Images to replace “Image 1, Image 2” etc. I have tried to use a dynamic content item with custom code, but I’m not having any luck making this work within a Collection List. Any advice is appreciated!

   <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/webgl-hover_min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1295275/TweenMax.min.js"></script>

<script>
new hoverEffect({
  parent: document.querySelector('.inner-wrap'),
  intensity1: 0.1,
  intensity2: 0.1,
  angle2: Math.PI / 2,
  image1: <img src="INSERT Dynamic Image URL">,
  image2: <img src=""INSERT Dynamic Image URL">,
  displacementImage: 'https://uploads-ssl.webflow.com/5b367b755b093e453cec2141/5bc9486cdc837c82711dfb73_displacement-4.png?'
});
</script>
21

Hello @MGAVIOLI66,

So what you have to do is to go to your CMS collection page’s settings. Once you are there you have to paste the code that you have on the before end of body tag, without the source images, and instead of the source code images, you are going to add those images as a collection field item. Then you are going to call those items in the following way Loom | Free Screen & Video Recording Software | Loom I hope that works, let me know how it goes.