Creating 'folds' in the plane

[grahambates-sp]

I am trying to achieve this effect on a google map style canvas:

https://sachabarbs.wordpress.com/2014/09/11/paper-effect-google-maps/

As someone who is not so experienced in webGL, can anyone give me any pointers as to whether curtains js is a suitable tool for this, and any pointers as to the approach?

[23d1]

You could probably achieve it with shaders, but the purpose of Curtains is to apply effects to multiple elements on a page. If you need finer control, you might be better off using something else. I could be wrong, but that's my take.

[martinlaxenaire]

Hi @grahambates-sp,

As @23d1 said implementing a fold effect on a plane should be pretty straigthforward. You'd have to update the vertices Z positions based on their X positions using a mod() function in your vertex shader for example.

However as far as I know, embedded google maps only work within iframes and you won't be able to you use that as a plane texture. You could use a jpg of that map, but then you'll lose the ability to interact with the map.

To sum up: the fold effect is definitely doable but I don't think there's any way to use a google map as a plane texture.

Hope I've been helpful there.

Cheers,

[grahambates-sp]

Luckily its not google maps I am going to use - it will be one of ESRI or Deckgl canvas based libraries.

[martinlaxenaire]

Well then, if you're map is rendered in a canvas (preferably offscreen), then you should be able to use it as a plane texture.

Two things that comes to my mind however:

• You might have some trouble computing the right mouse coordinates on the map since you're gonna displace the vertices of the plane.
• With 2 separate webgl contexts and a canvas texture that will need to be constantly updated, I won't be surprised if you encounter some performance issues.