Subtitle: "How I made that "dangling cloth-like mesh with a photo on it" that you see on my "Manifesto" page"
This goes out to anyone who might be struggling to integrate PIXI graphics into a regular web page. I will address two main issues: (1.) getting your graphic into your DOM, and (2.) figuring out the transparency and z-index stuff. I will also include all the code for making my version of the "un-tearable photo cloth." It's not anything I can take credit for, please give a shout-at to the original makers.
According to Wikipedia, "Pixi.js is an open source, cross browser JavaScript 2D WebGL graphics library with canvas fallback."
Translation: "PIXI is a Javascript thing that helps you make online video games that other people can play right in their web browsers."
Making video games is NOT anything I find even remotely interesting. I'm too busy gnashing my teeth at the memory of all the money I spent on my kids' Gameboy, Gameboy Advanced, Nintendo 64, GameCube, Nintendo DS, Xbox 360, Wii, PS3, and PS4 gaming systems. I had to call one of them to get that list -- it was even longer than I remembered, and doesn't include the PC games like Winnie the Pooh, PlaySkool, Myst, Barbie Detective, Lemonade Tycoon, and all that. Every game between $30 and $60 a pop, in 'aught' dollars.
All right, I'm not interested in games, but I am interested in becoming a programmer, so there I was, admiring this masterpiece of Javascript programming on Codepen. If you haven't see it, you should, even though it is five years old. It has over 3 million views. To see the best part, drag over it with your RIGHT mouse button.
My main learning method is to copy cool things that other people made and try to get it running myself, so I copied his code and made a little demo on my own web page. But, when I tried to show it to someone, I discovered that it didn't work on "finger touch" devices, a.k.a. phones. So I went back to Codepen to read the comments, to see if there was a solution, and sure enough, I found this guy, who had not only adapted it for touch devices, but also figured out how to overlay a photo on the fabric. Try it out yourself.
Isn't that coolio? Of course, his version is not "tearable." The physics of ripping fabric apart is quite challenging, apparently, which is why the original has 3.5M views. But this guy's addition of a PHOTO made my future-blogger senses tingle. I mean, that's actually useful. You have to display photos anyway, so why not show them dangling on fabric?
Of course, I assumed I could just copy it, change the photo, and give credit to both brilliant guys, but, as always, nothing is every easy, especially when you have no idea what you are doing.
From full screen object to wee little node
PIXI is for game creators, and games usually take over the whole screen. A game is literally a giant canvas, with little objects that go around doing things. All I wanted was the dangling photo mesh, so I could include it in a blog post. To pop it into a div, so to speak.
I took my one Javascript class two years ago, so it took me two full days of trying to understand PIXI and "renderers" and "textures" and "nodes" to get it to work. Basically, I just created a div in my HTML document called "canvas-parent," and I figured out how to get the renderer to plop the new canvas inside of that div. Here is where my code deviates from the master:
let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
var canvasContainer = document.getElementById('canvas-parent');
canvasContainer.appendChild(canvas);
...THEN LATER ...
let stage = new PIXI.Container();
let renderer = PIXI.autoDetectRenderer(350, 500, {transparent: true });
canvasContainer.insertBefore(renderer.view, canvas);
renderer.render(stage);
Two things are different:
(1.) instead of appending the canvas to the body element with (document.body.appendChild(canvas);, which puts the fabric-photo at the way bottom of your page, I appended it to my "canvas-parent" div, and
(2.) instead of let renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight... which creates a full-screen container, I forced it to create a smaller 350x500 rectangle, similar to the size of a typical photo on a blog post.
When that finally worked (oh, the glory!), I thought I was scott free, but it turns out the hardest part was actually managing the CSS. If you look closely at the demo, you will see that he is actually creating TWO canvases. One seems to have the "mesh" and the other seems to have the photo -- also known as the "texture" -- and one lays on top of the other and they move in perfect synchronicity, like pair skaters.
That leads to two issues: positioning, and transparency.
To precisely position something in CSS, you have to use the dreaded position:absolute, which means you have to re-learn the lesson you have undoubtedly learned before, but forgotten about:
But let's say you manage to get them to land in the exact same spot, instead of side-by-side, like mine was doing. That's the 2-D positioning. But then you also have to worry about the 3-D positioning. We have two canvases, one of top of the other, and I wanted to layer them on top of a sky and a mountain range, so there's no way around it, we have to learn about z-index.
The basic concept is not too hard. First of all...
So, you have this thing called a "stacking order" or "stacking context". You put a LOW z-index on the things that should go in the "back," and a HIGH z-index on things that should go in the "front."
I get it!
But did I mention that my PIXI canvases are partially transparent? They have to be, for you to see both the photo and the mesh... and the background.
So what?
Well, it turns out that there is an incestuous relationship between Z-INDEX and OPACITY. It will make your brain hurt (Read this article for an explanation, or you can just think about it.
There's no such thing as a transparent background, because then it wouldn't be a background, would it? It would be revealing something else that is more backer.
And, if something in the foreground is transparent, that means it reveals things that are in the back. So the things that are "in back" are actually, from the point of view of the browser doing the rendering, "in front."
And it's not just visibility that is the problem. Obviously, I don't want my mountains to appear in front of my PIXI canvas, and I don't want the backgrounds of my pixi frames to cover up my cool little meshy thing. And I don't want my mountains to show through my photo. But there's another issue. I need you, the reader, to be able to "grab" my mesh with your mouse and yank it around. Once I got things layered and looking OK, I discovered that my cloth was no longer grabbable. It needs to be -- technically speaking -- WAY WAY on top. But with two canvases that interact, one on top of the other, which one should be more way-way on top, and how do you get it there?
In other words, can z-index counteract the effect of things being ordered in a particular way in your HTML document? Can you use it to bring "forward" something that "comes after"? And where do transparent things fit into this equation?
Answer: I HAVE NO IDEA. Read the article. I just tried and tried different numbers until suddenly it worked. Then I saved the file as PIXI_v978_ohmygoditactuallyworkedFINALLY.html.
And then you have the question: if I build a scene inside of a ROW, and I am forced to set a low z-index on that row so that the stuff will be "in back," and so that I can use absolute positioning, can I then override the z-index of the parent for a child that resides in that very row?
In other words, is z-index inherited?
Luckily, the answer is No, it not inherited, and yes, you can override it. So, without further ado, here is how I got this stupid thing working.
Therefore, z-index is not technically inherited, but z-index of ancestors does affect z-position.
19
down vote
z-index only applies to elements that have been given an explicit position.
Those two canvases have to land on your page exactly on top of each other.
Once you get it looking right, you will discover that your mesh is no longer grabbable.
I put everything inside of a Bootstrap ROW (which is just a div) and that ROW has:
style="height:550px; background-color:#83C4DB;position:relative;"
Inside the row, I created a container
In the container I put my background mountains image which has z-index: -9
There, I abolute:positioned my stuff
A sun which has -8
Left space for more junk
My canvas-parent div has z-index -5
As you can see, we are working our way from back to front. This is where it gets complicate:
On my CSS for the canvas element, I put z-index: -2 !important
It must be LOWER than the next thing
I have NO background... if you do, it covers up the fabric
But then on my canvas+canvas css, I put z-index: -1 !important
and I put a floralwhite background with opacity: 0.8
Opacity of 1 will cover up the photo, but less and the mountains show through
MORE IMPORTANTLY:
a positive z-index puts the background in front of the photo! So leave it at -1
I have notes to myself:
OK, this is where
IN THE END I COULD NOT POSITION MY DAT-GUI CONTROLLER INSIDE THE ROW WITH THE MOUNTAINS. RATHER I HAD TO PUT OUTSIDE THE ROW AND THEN MANUALLY POSITION IT. I WANTED IT TO WRAP IN SECOND SET OF COLUMSN AND IT WAS BEAUTIFUL EXCEPT THE Z-CONTENT MADE IT UNREACHABLE. DAMMIT!
how does opacity and z-index relate to interactivity with the mouse? i can put the flagpole in front, which is actually a giant transparent png that you think might cover up the photo flag, but it still works if i set its z-index at 5 to bring in front of the flag which has -1.
and setting flag to anything positive at all puts it in BACK of the of the background. ... i think
THE STACKING CONTEXT:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
THE ORIGINAL TEARABLE CLOTH WITH 3.5 MILLION VIEWS
https://codepen.io/dissimulate/pen/KrAwx
THE GUY WHO FIGURED OUT TO PUT A PHOTO ON A MESH... BUT NO MORE 'TEARABLE"-NESS
https://codepen.io/shshaw/pen/JbrQrW
