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?
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.
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:
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).
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.
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.