This is a much heavier rebuild of my signature card system. The original was built entirely in one JavaScript file so it was as lite as possible.
This version is built using Godot and as a result is much heavier. The trade off for this extra size is easy access to shader effects like reflection, shadows, and participial systems.
Assets are still loaded remotely, meaning the card can be configured with any combination of texts, images and colours. This version also supports a shiny card edge.
The card effect itself is simple enough to set up. I create multiple background layers, each one applies the stencil buffer as a mask using the built-in comparison setting.
Text boxes are quads with a shader applied to create the rounded corners and the text is all Lable3D objects. The one problem I had was making sure the description box was pushed down by the tag box as it expands.
The problem was Godot not calculating the bounding box of Lable3D objects at ready. I solved this by waiting for the frame to process on first load and again after modifying the Lable3D's content to give me the distance my tag box had expanded.
I create a portal object that is otherwise invisible but writes to the stencil buffer. This creates the mask that we use for the background layers.
Now our background layers are only drawn when they overlap with our portal object. Because they are still drawn in 3D space with depth the portal object looks like a doorway that we can see our background objects though. A more complex version of this effect can be used to create doorways into other scenes.
We can enhance this effect by adding the card frame and foreground elements. The card frame emphases and hides the seam of the portal while the foreground elements emphases the perspective and cast shadows into the art.
One drawback of this method is it only uses one render pass. Objects outside the card art can interfere with the card art and vise versa. As a result this particular implementation only really works for display voids like this one.
I can then populate the card with any data I like by assigning the information I want to a window property.
When the card client finishes loading, it will apply the data it has and then populate the background layers from the provided URLs. Currently this version only supports a maximum of 6 layers and it expects background layers to be 1024x1024 PNGs.
Each layer is loaded in sequentially over a fallback environment to avoid total failure states and because I honestly think it looks neat.
