So I’m (essentially) trying to implement, within a shader, a fairly common digital art trick in which you:
- Clone a source image, flip it vertically, increase the canvas size, then move the clone to align on the bottom of the source
- Apply a linear gradient fade where the bottom image fades from X opacity to 0 (in my case I’m fading to black, and overlaying black over the reflection so that I can have more legible text atop it)
Which looks like the image is sitting atop a reflective surface.
The tricky part is I’m trying to do it w a custom instance friendly sprite shader – And trying to do it all in the fragment shader, ideally, so that I can layer it up with a couple other textures, to consolidate draw calls. (Actual use case is card game, because I still don’t like my card wrapper designs.) So I’m trying to use the artwork itself as the backdrop to the card wrappers, with square card images, so by having the reflected art below it, I can overlay the card details on top of it.
I started a playground, but am on the struggle bus today (not unlike most days I have to do anything involving math). – One thing I can’t seem to get working is making the texture wrapU/wrapV have any affect on the output (which might make it easier, but trying to do it all manually below, but see this http://wiki.polycount.com/w/images/2/2c/Opengl_clamping.png / GL Mirrored repeat is what seems like I maybe should be doing ). Do those params have no affect on textures passed to shader materials or, is plane space always within 0,1 or something I’m missing?
https://playground.babylonjs.com/#UH5ZA0#2
At any rate, anyone have any idea how to do this, and whether it’s possible to do all in the fragment shader or not? (in reality, I’m hoping to be able to pass 2/3 additional sprite textures to the shader for elements that are overlaid on top of the artwork, which is why I’m trying to do it all in the fragment shader).
(in pg example there’s a numbers sprite, I’m trying to demonstrate on individual numbers, i.e. 1 with a flipped 1 below it, as a first step).
