Many people have asked us, "How did you create the 3D Tarot Cards in Kismet?"
It's an important question because, like Kismet the character, the Tarot Cards in our experience have a lot more going on than you could ever observe from the outside.
Each Tarot Card appears to be a three-dimensional diorama, with an animated papercraft sequence contained within. However, if you turn the card on its side, or move your head around behind the card, it appears to be as flat and thin as a piece of paper.
Here is the Death card, viewed straight on, and then grabbed an manipulated by an HTC Vive user with motion controls.
As you can see, when the player rotates the card, the scene within it takes on a three-dimensional appearance, with the relative motion of objects in the foreground and background causing parallax.
However, when he turns the card... the depth seems to disappear! From the side, the card appears completely flat and ordinary, like any other card might.
Let's start at the beginning.
Here is a page from the original pitch for Kismet, courtesy of Writer & Director David Chontos.
While some things have changed over the course of Kismet's design and production, the experience is still quite similar to how it was initially envisioned. Though we scaled back from the "Fortune, Love, or the Future" prompt, we stuck with the three-card notion, instead arranging for users to receive a "Past, Present, Future" reading. Once you've asked your question, whatever it may be, Kismet will offer you three cards, and then weave together a unique reading based on the order of your cards. Different cards have different implications depending on not only the order they arrive, but which cards they sit beside.
Each card is its own work of art.
Artist Edmund Liang, a frequent collaborator of Psyop and incredible artist, was brought on to design a custom deck featuring the 22 Cards of the Major Arcana.
Edmund's art envisioned Death, for example, as a proud horseman carrying his banner through a graveyard.
Each card is meant to resemble a paper doll in a 3D diorama, and will feature subtle animations in its final form. The many circles throughout the drawing indicate joints.
Here, Edmund's sketch of Death is placed in a generic frame--later to be replaced by a custom frame from Psyop artist Joe Ball, who provided the experience's UI.
Below, we can see the original digital painting Edmund created for Death. At this point in the production, there are gold tacks incorporated into the design, carrying the paper doll aesthetic forward. The final design will incorporate additional texturing and shading to assist in the 3D visualization to come.
Once the card is finished, it is separated into pieces and prepared for animation.
Here, in the first image, you can see all the elements of the Death card, separated out from each other to be used later within the experience. (Also pictured here are the separated elements of the Fool card.) In the second image, you can see how these pieces will lay out, and where joints will hold them together. While the gold tacks from the original painting have been removed, the principles of paper doll animation are still present.
Now it's time to give this 2D card 3D depth
Vince Stimpson, the member of the Kismet dev team who developed the Tarot Cards, explained how he created the visual effect of a 3d scene within a seemingly flat object. Like much of Kismet's content, the roots reach back to ancient philosophy -- in this case, rooted in the teachings of Euclid and all that followed.
The cards are not strictly any one size. They are actually in a constant state of transformation that allows them to maintain the appearance that you see inside the experience.
Each card in the game knows where the player is looking. The card compares the player’s location to its own, as well as to its relative rotation. Using that information, the card calculates something called a Dot Product.
The Dot Product drives a constantly updating physical transformation of the cards themselves. If a player is looking at a Tarot Card straight on, the card stretches to its maximum depth, making it look more 3D. As the card turns to it's side, or the player moves their head around it, the Dot Product shrinks, as does the stretching. The more the player looks at the card on its side, the flatter the card becomes. Up until it's as thin as a piece of paper.
The calculation happens to every card, on every frame, ninety frames a second.
The transformation happens so fast, it's almost hard to believe.
Here is that GIF from the top of the page, so that you can try and spot the Dot Product in action, if you dare. When Death is in front of you, the card's geometry is stretching backward, casting shadows within the picture, adding depth. As the card turns, it is transforming in real time.
Now try and explain that to your friends who try Kismet on your Rift or Vive and see if they believe you.