Model: card ripping animation

[avaer]

I need a model of a card being ripped down the middle with a morph. The intent is to be able to rip cards in VR. If I have an animated card morph with certain specifications, I can handle the avatar kinematics while twiddling the morph.

Pseudo-Spec

Card horizonatal, facing towards the camera (pov perspective), rips down the middle as if ripped from the top, with left hand shoved forward and right hand shoved back.

At the end position of the morph, you would have the two sections of the card separated by 90 degrees (pitched +90deg up around X axis) and no longer connected. The rip should be exactly in the middle of the card. The origin should be the starting point of the rip, the center-top point. This is for easy math.

No need to model the hands, only the card performing the rip. It should look natural; there is some amount of flexing in a rip.

The card should have four (4) image placeholder panels, each exactly half of the card in size, two halves per side, front and back sides, UV'd so that only two textures are needed (front and back). I can set these panels with a texture in the engine if they have descriptive names. The rip textures in the middle (on each side) covers up the seam. The cards should have the typical bevel, and should be z-distant enough that there is no fighting at personal distance.

The measures can be the physical Pokemon card dimensions, 2.5 inches by 3.5 inches.

There is a rip texture available here which might work if stuck on both sides: https://www.behance.net/gallery/89362471/Free-Download-Ripped-Paper-Texture-Set

[plankatron]

I am wondering if you have any specific concepts or expectations of fidelity on this one.

• Z-fighting will be the biggest problem here
• doing some kind of physics sim and baking that is out of the question since we do not support alembic or anything like that
• manually modelling the rip is possible but may end up looking cartoony / lowpoly?
• can try the rip overlap concept, but again z-fighting
• have a rip state in code so you can immediately switch to the 'ripped' version of the card model and perform the ripping animation

once i understand what you want a little more precisely i can probably get this done pretty fast, just want to be on the same page first.

any concept images / animations / examples would be helpful!

[avaer]

I think we can separate the card by even 1mm and then Z fighting shouldn't be a problem.

A baked rip sounds fine.

have a rip state in code so you can immediately switch to the 'ripped' version of the card model and perform the ripping animation

Yes, that is why we can get away with slight Z difference. I think it won't be noticeable.

Keep in mind that the rip would not be animated, but lerped from the users's hand motions.

[avaer]

[plankatron]

current progress , i need to find a way to fix this one specific issue , have a few ideas

[avaer]

This looks like a good start. Btw, the ripping direction is preferably horizonal, but I imagine that to be just a scale + uv change.

Is the issue that the front/back layers don't play nice and need to be simultaneously ripped?

[plankatron]

does webaverse support multiple uv channels ? would be ideal for this situation one set of uvcoords handles this base texturing and then for the actual card design we could have another , if you look at the top whiter area you can see that sharp angle, that is because only the front / back faces are uv'ed with that tear not the top area, but i might be able to fudge that.

sorry i was looking at card stock ripping and this rip pattern seemed to look good but i must have seen the wrong reference , can you post quick example of what you mean ?

[plankatron]

update , just using some simple deform to mess with the model a bit

[plankatron]

one more update, having issues with transparency , went from alpha blend to alpha clipped, still need to mess with it a bit more .. anyway here is the result so far.

https://user-images.githubusercontent.com/5592454/119048487-48edbf80-b98d-11eb-8b13-a8bc210cdb51.mp4

[avaer]

I can write any shader so we can have as many uvs as needed.

But my thinking on this is that the rip can just be a separate geometry/mesh.

[plankatron]

removed the taper that i had so that everything would fit together nicely , it sort of looks better but i also tweaked the animation so maybe i can just fix this in the animation hmm

the tradeoff is now you can see a clear difference between the tear geo and the card geo

https://user-images.githubusercontent.com/5592454/119051803-a421b100-b991-11eb-9087-62b13e8d1de6.mp4

[plankatron]

a bit better

https://user-images.githubusercontent.com/5592454/119052911-4bebae80-b993-11eb-8703-b237c18c9f0d.mp4

[avaer]

Looks like progress!

the tradeoff is now you can see a clear difference between the tear geo and the card geo

Can we just make sure the top and the bottom of the rip mesh aligns correctly with the card image mesh? This should be possible to do pixel perfect.

One thing with the current animation is that it isn't a progressive rip. There should be a distinct line you can draw from v=0 to v=1 that progressively goes down and unzips the card. The rip shouldn't "run ahead" of the users' hand forces. If I were to describe it this rip is like ripping tissue paper, and it should be like ripping cardboard.

Also the final angle in that video doesn't match the requirements.

[plankatron]

a bit of an update, having camera angle issues atm , but probably if you go orthagraphic or if its further away might be closer to your concept.

https://user-images.githubusercontent.com/5592454/119170707-a3405c00-ba31-11eb-811a-fc53fb56bb81.mp4

[madjin]

[plankatron]

oops , i misunderstood part of this assignment, fixed the card ratio!

https://user-images.githubusercontent.com/5592454/119193881-4bfdb400-ba50-11eb-97d2-0b7ab2de8e57.mp4

[avaer]

Great! Looks like it's worth testing! I want to check out how the rip feels on a real card.

Can we put the asset in the assets repo?

[plankatron]

https://user-images.githubusercontent.com/5592454/119197376-a0eff900-ba55-11eb-9627-46a0005a2213.mp4

yeah i will commit what i have soon, no guarantee it will work as expected. its using two uvmap channels and two materials rip and rip_back

[plankatron]

http://7rnx.net/fleeky-pub/webaverse/card/card4.glb i tested this in babylon.js and it did not come out looking correctly, but i did re-import into blender and the extra uv channel is at least exporting.

[plankatron]

ok comitted card-rip.glb to assets repo