I took the png file and did some testing, you can see what I did at http://coinfire.com/javascript_challenge/test_image.html. That does not look good. The red flame (all of it’s gradients or levels) needs to be present with the (I’m probably calling this the wrong thing) contrast color (before I mentioned dark reds, browns and almost black) set to transparent. I really am not sure what is needed to address this. Basically, I need a realistic flaming coin that I can place against any background (within reason of course, fire-red is probably not going to look very good no matter what we do.) Let me know.
Disregard all of this, check my latest post.
Attachments
It’s impossible to do with just plain alpha blending and a single image. Fire (like light) will behave additively towards a background - when you are blending it linearly with a background image, it will behave more like transparent glass.
The math you need is:
BackgroundColor + ForegroundAlpha*ForegroundColor
The math you get with regular alpha blending:
(1-ForegroundAlpha)BackgroundColor + ForegroundAlphaForegroundColor
This is one reason there are different blending modes in programs like Photoshop, browser don’t support them yet, as far as I know.
Here is a final update:- the flame is now so bright that it has now no transparency, try this in your website.
This is the brightest flame i could make:-
Ok, the britest images is looking better. Can the dime be the same size as the quarter? They won’t be used next to each other ever so the size should be the same for both, sorry I didn’t mention that earlier. Now concerning the reply starting with “It’s impossible.” I kind of understand what you are saying. Is there anything we can do about it? Would I need it rendered 5 times? with the following backgrounds: white, black, red, blue, green? or something like that? or is my thinking too simplistic with that approach. I have created the following to test images that you can upload and then see with different backgrounds.http://coinfire.com/javascript_challenge/test_coin.php I need some kind of solution for a realistic flaming coin. Let me know what your thoughts are. Maybe open this up to others in the forum? Only if you want. Maybe test the animation on the test page and see how it looks. It’s looking great.
DavCorn
Sure, just wait for 30 mins.
Here you go,
I’d probably do it like this:
- Render the flame out separately against a black background
- Render the coin out with alpha channel (use premultiplied alpha for best results)
Then, in your favourite compositer or image editor (such as photoshop), have the following layers (top to bottom)
- Flame (additive blending)
- Coin (regular alpha blending)
- Background Color
This way you’re flexible as to which background to use, at least from a preprocessing point of view. As far as current browsers go, it would have to still be one image per background color.
EDIT: Of course, you can just have your guy render it out five times for you, that would be the simplest solution
Just use alcohol.
i tried what he said but now the flame is now too bright.(I’m using GIMP BTW)
Even with the dullest flame, the image is too bright. Opacity doesn’t help either. I’m using GIMP BTW.
vviikkrraanntt, could you place watermark or words on what you have and test the animated image on the test_coin link given above? See what it looks like.
Gif file are limited to 256 color palette, but rendering to a black background does not sharply decrease image quality unlike the transparent flame one which looks like a cartoon flame, the best idea might be to render to 5 different backgrounds.
Blenderartist is not allowing me to post gif so here http://imgur.com/a/IpN7d are the gif files, the first file has transparent background (try open image in new tab) and second one has a black background.
Update:- Here is the same gif rendered in 4 different backgrounds:- Green,Red,White and Blue.
Ok, those look good, but not as good as the animation/image you posted 06-Mar-13, 02:51. That was a good looking flame and I believe you were able to render it against a black background with the transparency. The png image with transparence looked great when shown with a dark background. I had issues with the dark artifacts (browns and blacks) when the image was shown on a lighter (white) background. Tell me if I’m wrong, the brown to black artifacts (which showed when against a white background) came from rendering it with a black background (or some kind of assigned contrast color?)? Any way to render that way with the 5 different backgrounds (assigned contrast color) (white, black, red, green, blue?) Is that too much work or just computational work? Let me know if this makes sense. Anyone else who can help please throw in a good word.
DavCorn
On second thought: I was wrong, additive blending isn’t in general the right answer (a flame is not just light, it’s still a translucent, but emissive, body). You’re probably better off rendering a brighter flame with less transparency (or just render 5 colors separately).
EDIT: Indeed that is your only choice if you want to use GIF (as opposed to MNG, for instance)
I do need transparancy and animation (and a good still or two of course.) I’ve been led to believe I can get those with a .png file. Am I right in thinking that rendering with a particular background (or contrast color) will give a good illusion or rendition of flame with background colors similar to the rendered contrast color (background.) (Please tell me the correct term I should be using to call that.)
The image earlier was rendered only with transparency, there is no such thing called as rendering black background with the transparency.
You didn’t specified first which version of the flame you wanted to animate and as you liked the brightest flame before, that’s why i had animated that version.I also forgot to tell that there are 23 frames not 22 as i earlier said.
The version you asked for:-
Here are the gifs of this version with 5 backgrounds http://imgur.com/a/HjiyF
This version has the flame brighten and more shades of red are present.(Looks best IMO)
Here are the gifs of the above version with 5 backgrounds http://imgur.com/a/vbtIG
This version has more shades of yellow, so it serves as a bright yellow flame.
Here are the gifs of the yellow version above with 5 backgrounds http://imgur.com/a/mgDu7
Don’t worry about the computational or work time, just select what you want now.I also have the transparent PNG’s if you want them too as well as individual PNG’s of each background gif. My paypal is also now activated, just ask for what you want now.
Hum, I can tell you’re getting frustrated with me (this process.) I am sorry, but at some point things started looking worse rather than better; probably due to my own lack or knowledge and trying to ask things the wrong way.
- The .gif images are not looking very good, the flame is not realistic. 2) I cannot use a non-transparent background, I know I asked for them (5 colors,) but as contrasting colors in the flames (here is my asking the wrong thing due to know knowing the right way to ask.) I need transparency in the background.
Look back on March 4th when I was concerned about the Brown’s & Black in the flames when the transparent image was placed against a lighter background. Tthis is the key issue from here on out. Where did the Browns & Blacks come from? The image looked great against very dark backgrounds. Is was then that I called the black background a contrasting color, I think the Browns & Blacks presented themselves during rendering due to some setting of what I called a contrasting color. Is there any way to identify where the Browns & Blacks came from and change that color/setting during rendering so it would look better against other lighter or different backgrounds.
I was most impressed with the animation / image back then. Between March 4th and March 6th the flame got weak looking and hasn’t looked quite right since.
I’ll offer you $25 more, $100 total, if you can look into the “Browns & Blacks” issue and see if the images/process of March 4th can be manipulated to work against dark as well as light backgrounds (Two sets of images probably.) With transparent background, reaslistic looking fire, and the quarter and dime versions (with the modification of the pointer flame at the bottom corners of the flame.) A Note here, extremes are probably not our friends at this point, slight adjustments will help thngs like what happened betwween the 4th and the 6th.
Now, when it’s looking good (and this might cost me more due to added work, hopefully not though,) take a look as an artist / rendering engineer, and see if there is anything that you would/couldl do to improve the result, it might take some input from the forum.
I thank you for all your work thus far and for putting up with my lack of knowledge, and exactness in my needs.
DavCorn (It says post quick reply, really???) :rolleyes:
P.S. One more thing, could you make the flame about 2/3 as high as it is now, still as wide, just not as tall. I was testing against web usage and it was too tall in most instances.
Another Note: This link refers to someone talking about the coontrasting color/background when rendering a transparent image when working with fire. (https://bugzilla.mozilla.org/show_bug.cgi?id=713230) It might help some, or be off all-together. Let me know.
I am sorry if i sounded rude earlier.
That’s because gifs are limited to a 256 color palette whereas the image here has 16 bit color which is more than 16.7 million colors.No matter how we render it is always gonna look faker than the PNG image.
Use the word clashing instead of contrasting.it did confused me earlier
Back then, i did rendered with a black background then just used the magic wand and removed the black background.I could do something like this
to every frame.(No Browns or black in this image. isn’t that what you wanted?)
For all your other problems,Give me at least 2 days I’ll study and reply back to you, this time with positive results.I’ll change the height of the flame too.
Just answer my few questions:-
Do you still want gif or PNG images?
Flames have edges.So do you want the image from 4th of march with just the yellow flame or with the brownish and black edges?
Does the above image looks better (Don’t worry about the edges, this is just an eg.) with dark as well as Bright background to you?
And one more thing, ask anything that does not looks right, I’ll repair them.
Awaiting your earliest reply,
vviikkrraanntt