Rendering Models With Transparency

[goro7]

For the current project I am working on, I need image icons for each pet in the game. I previously was trying to use ViewportFrames, but since they do not properly render Neon, I cannot use them. Now, I need to find a way to photograph/render every pet in the game while maintaining proper transparency with a transparent background. I cannot use 3D modeling software to do this, as that would not properly render the Neon effect.

Initially, I was thinking about doing a sort of “green screen” and then turning green to alpha (transparency). But, if the pet has any green, the final image would have incorrect transparency. I cannot think of any other strategy for generating a render, so how should I go about doing this? Is there a better way?

Here is an example of one of the pets:

[uJordy]

@goro7

I cannot use 3D modeling software to do this,

Is it not possible to recreate the “neon” effect? I’d imagine Blender and Cinema4D are advanced enough to try to get what you want.

@goro7

“green screen” and then turning green to alpha (transparency)

You can use another neon colour. Blue is commonly used if green isn’t an option.

[goro7]

@uJordy

Is it not possible to recreate the “neon” effect? I’d imagine Blender and Cinema4D are advanced enough to try to get what you want.

The way Roblox handles Neon with the bloom is fairly unique, and this still would not allow for us to include particles in the renders.

@uJordy

You can use another neon colour. Blue is commonly used if green isn’t an option.

Some of the pets in our game have rainbow textures on them, so it sadly isn’t that simple.

I know Bubble Gum Simulator has been able to pull this off, so there has got to be a way to do this:

[slothfulGuy]

The bubble gum simulator doesn’t look like it uses ViewportFrame, the rendering is way too nice for a ViewportFrame.

Based on the post ViewportFrame release, it has been mentioned that neon does still render on the lowest quality.

The only workaround I can think of are to add blurry layer to recreate the neon effect, or if you still want to use “green screen”, but changed to blue or red, as long as it’s contrast to the object. The limitation is that it will have hard time to properly render your cute rainbow creature.

[goro7]

@slothfulGuy

Based on the post ViewportFrame release , it has been mentioned that neon does still render on the lowest quality.

Neon in a ViewportFrame versus Neon in the Workspace look very different:

This is mainly due to Neon not carrying the “LightEmission” property when rendered in ViewportFrames.

@slothfulGuy

or if you still want to use “green screen”, but changed to blue or red, as long as it’s contrast to the object

Odds are this is the only way to do what I am wanting. ;(

[vibrantkoffing]

Question:

@goro7

For the current project I am working on, I need image icons for each pet in the game.

Answer:

To my understanding, you need an image transparent, although the sprite itself to not be transparent. So, render it without transparency and maybe create a new mesh with transparency?

Question:

@goro7

I previously was trying to use ViewportFrames, but since they do not properly render Neon, I cannot use them. Now, I need to find a way to photograph/render every pet in the game while maintaining proper transparency with a transparent background.

Answer:

Take everything one step at a time. Photograph it with/without transparency and render it in the game with/without transparency (whatever your goal is).

---

Other info:

@XAXA

If this was exported as an fbx, a quick way of getting rid of that is to export it as a obj instead. This works because the obj format doesn’t support vertex colors You can also reset the vertex colors yourself (if you’re using blender, then read this thread on blenderartists.org ) and export it like you normally would.

[Lbailey5127]

It may be because of the fact it was imported as .fbx, because you may need .obj to texture this.
.obj comes in handy in some situations because .fbx is for textures, editing the model is easier with .obj.
Maybe insert the decal/texture onto the object, and then try to go neon with it.

[goro7]

After some testing, I came up with a solution! I needed to take 3 separate photos, each with a different component color and a background color being the component color’s inverse:

R G B

I then loaded each photo into GIMP (image processing software) and converted the inverse color to alpha:

>

At this point, it was just a matter of setting up the merge mode to be “Addition” for each layer and merging them all together! Here was the result:

Thanks for the help guys!

---

EDIT: To anyone still referring to this post, I no longer recommend the above process for item/pet icons. ViewportFrame’s have come a long way since then, and neon renders in a more expected way nowadays (there is still no bloom, but this is very rarely an issue). In practice, the above process becomes very tedious very quickly (even with automation), particularly when you consider that ViewportFrame icons can be almost entirely automated within a game. Additionally, this results in a separate image that needs to be loaded for every pet/item, which adds up quickly. I would highly recommend investing the extra time into a ViewportFrame-based system; it will save you much more time down the road.

[Lbailey5127]

Happy to help, I’m always here if you need something if you have a weird problem like this.