So for a little background, I utilize Ignition heavily for my regular job. With the addition of the maker’s gateway, I had the perfect idea…a DND campaign led completely through Ignition. There’s still a lot to work out, but one of the things I have managed to get working is Bee’s Dice Roller through the web dev module. The last thing I am trying to workout is how to get the background to be Opaque when the user rolls so I can overlay it on to my perspective views. By changing line 33 in the ‘main.js’ section to ‘rgba()’ I can change the color of the desktop…but not the opacity. Attached is the project where I have the dice roller working in the WebDev module. I have tried searching through some forums but what most be people do is put a chromakey overlay on with OBS and use the original dice roller URL.
DiceRoll.zip (138.6 KB)
dont the last 2 values in rgba() change the opacity? if not you can jsut add “opacity:0.5” or something to the styles too.
Also interesting project 
Let me know when you start a campaign… My dwarf’s hammer is gathering cobwebs.
3 Likes
I added the opacity class to the “main.css” I believe. However I have no clue where to stick it in either the html or the JavaScript in order to get what I need. That’s where my “noob”ness shines through lol.
its not a class, its a property in a class xd
Fair enough. Let me rephrase, I added the opacity properties to a class I called “opclass” 
. Still doesn’t help with my conundrum of where to stick that at though.
Ahh i see, you want only the background to be transparent?
because the thing is the color you put there alone isnt what is the problem, there are still things behind it that prevent it to go transparent
i see some light
Yep! So I can use an iframe as an overlay on my container that has toggled visibility. I may have to play around with the z-order but luckily I’m well versed in that.
That colored backgorund isnt the problem it isnt transparent. something else gets drawn.
i dont think its going to be fixed by a “simple” css style. unless you also make the dices have opacity
Here is what I found out from the docs you linked above:
Available parameters: (all hexcodes are without the #)
...
chromahex - hexcode - sets background colour
If I add the lines 73 and 74 (effectively removing the condition check at line 68), I get a clear background. Where is params coming from?
if (params.chromahex) {
$t.dice.desk_color = '#00000000'; // + params.chromahex;
$t.dice.selector_back_colors = { color: '#' + params.chromahex, shininess: 0, emissive: '#' + params.chromahex };
}
$t.dice.desk_color = '#00000000'; // + params.chromahex;
$t.dice.selector_back_colors = { color: '#' + params.chromahex, shininess: 0, emissive: '#' + params.chromahex };
Here is what it looks like when I don’t check for params.chromahex:
Hopefully we can figure this out…
Oh I know the answer to that one. Params is coming from the URL. If you look at the docs for bee’s dice roller you should notice under “customization and URL parameters” that those mostly line up with the params.(xxxxx); originally if you were to put ?chromahex=(some hexadecimal color value) at the end of your url it’ll change the background color. That’s where I started with modifying, but could never find a way to change the opacity.
Ok that makes sense… So what happens when you pass in ?chromahex=00000000? That, by the way, is the hex version of rgba(0, 0, 0, 0.0).
Last I remembered it didn’t change the opacity. I’m at work now and would not be able to test again till later. However, to victors point i wonder if something is being drawn over the top that also needs to be removed, or just made opaque. I know there’s some ambient lighting effects, because you can also toggle shadows through the parameters as well.
Were you ever able to get a non-yellow background? As I said above, when I don’t check whether params.chromahex is passed in and just set the chromahex manually, I get a background that is transparent, like in the screenshot above. Like you said, there are shadows behind the dice because of the lights.
I don’t know what you are trying to display behind the dice scene, so I can’t test whether it is truly transparent.
Yes there is a ton of stuff being drawn in a three.js world.
One is… Light and shadows.
If you remove the light source you’ll notice everything is black, not transparent.
Im not sure if there is a way to change that. Its been a while i used three.js and never went that deep into it.
You may have to change the material opacity of the desk and stuff…
But even then im not sure the shadow renderer will allow that.
Or seems you can turn on the alpha in the renderer
