Forest stream BG

Started by Snarky, Fri 25/04/2014 19:07:50

Previous topic - Next topic

Snarky

[IMGzoom]http://i.imgur.com/8rLYolV.gif[/IMGzoom]

Putting this here because...

Quote from: Andail on Fri 25/04/2014 15:39:54
If you put this on the critics lounge, I'd only have a couple of suggestions.

I'd appreciate any feedback!

Here's a view of the drawing process, by the way:

[imgzoom]http://i.cubeupload.com/xqzbFa.gif[/imgzoom]

Also, I thought I'd experiment with keeping the reference images I use on Pinterest: https://www.pinterest.com/snarkibartfast/forest-river-ref/

Mouth for war

Make a game with these graphics...NOW!!! :D Looks great man!
mass genocide is the most exhausting activity one can engage in, next to soccer

Gribbler

Holy crap! This water is photorealistic! 8-0

Andail

Right, let's see.

Just a few things really.
* highlights are a precious commodity, so use them sparsely. They give your image focus points. Even in broad daylight, you'll always get really dark areas. Brightness only exists in contrast to something - that's why we don't think of a completely blank paper as a really bright scene; we just see whiteness.
* Google trees or forest and sample the colour of the trunks - 90% of the samples won't have brown in them. They'll have shades of grey and green.
* Squint your eyes and look at a picture - it needs a clear focus. We both have the same focal points in our pictures - where the light hits that center tree - but in your image it's distracted by many other bright fragments of light.
* Adjacent objects that are hit by light equally shouldn't have vastly different lighting. Look at the roots to the bottom left in your image - the roots are dark but the grass really bright. That's highly disturbing for your eye! Your eyes need rest. Rest and guidance!

[IMGzoom]http://www.esseb.com/andail/graphics/snarkyforest.png[/IMGzoom]

Pixel control gone haywire here, but I just wanted to illustrate my points. Still really impressed by your original painting!

Snarky

#4
Thanks Andail! Really great useful stuff there. There's a lot to like in your edit (though I don't entirely agree with making the left side of the image so dark, composition- or realism-wise), and if I can rustle up the will to keep working on it I'll try to apply a version of it.

Quote from: Andail on Fri 25/04/2014 22:06:14
* Google trees or forest and sample the colour of the trunks - 90% of the samples won't have brown in them. They'll have shades of grey and green.

Yes, I know that, but I love what I think of as "Asterix-trees": these really warm, golden-brown extravagant trunks in a lush, ancient forest.

Spoiler
So that's what I was going for. I did want to play around with the hues here a bit, but there were so many other things to address, I never got around to it.

Quote* Adjacent objects that are hit by light equally shouldn't have vastly different lighting. Look at the roots to the bottom left in your image - the roots are dark but the grass really bright. That's highly disturbing for your eye! Your eyes need rest. Rest and guidance!

Yes, the roots and mound are a total mess. I struggled a lot with this, because I didn't want the roots to just sit on top of the ground, but to have grass and other vegetation overgrowing them (I actually wanted it to look like the mounds here: http://www.wikipaintings.org/en/ivan-shishkin/marsh-polissia-1890). But everything I tried along those lines looked like crap, so eventually I just gave up. Some shading also got lost when I warped the shape of the tree, and I never bothered to apply it again because I wanted to redo the whole section anyway.

dactylopus

Quote from: Mouth for war on Fri 25/04/2014 20:11:06
Make a game with these graphics...NOW!!! :D Looks great man!
+1!

ThreeOhFour

Andail covered a lot of good points and so I am trying to cover different points because I think there are a few areas he glossed over/didn't cover. I really like the picture! I don't think I've seen you paint a scene as nice as this before, and that's why I am going to pick on this one now when I didn't pick on the others, I guess? :=

Paintover thing:



Some notes which aren't all covered in the paintover:

Firstly, to me the biggest problem is that the image is a series of very linear, explicitly defined zones, and that ruins the unity somewhat. You've got water zone, front trees, back trees, grass, sky, and you don't let them mix a great deal. Why do the trees change colour halfway back? If it's for atmospheric perspective, the shift in hue is a bit much - it'd have looked much more varied and dynamic if you mixed the two hues of wood together. Also with the grass and the roots, Andail pointed out - I tried tweaking this in the paintover.

I also think the general composition is pretty flat. The stream goes straight back and never really does anything. The foreground objects feel like a flat thing laid on top, rather than an arrangement designed to frame anything important in the image. I'd have put the shrub more to the left side, open up a space there to let some of the middle ground stretch out rather than cutting it all off with a linear wall of foreground.

Lighting is something Andail talked about, and I'll repeat because consistency is important. You've used rim lighting on your foremost tree, but foregone it for the most of the rest of it. Those little bright gaps in the foliage are great, and they're light sources, so let them spread a little bit. Let the light bounce, diffuse - that's what light does.

Also, trees shade themselves, and I never thought about this until Ilyich - who is way better at painting forests than I am - told me, and he proved it with Ivan Shishkin - who is better at painting forests than pretty much anyone. See that big old branch blocking the sun from the other branch to it's lower left? That needs to cast a shadow. This is super hard to do, and I never remember to do it, but I may as well point it out because it's useful knowledge.

Let your water meander a bit, make it interesting. Put stuff in it, give it more shape than a direct route. Water moves around rocks and elevations, so let it wander some. Yep, I know this makes it harder to do your reflections, but it makes for a much more natural composition.

Maybe there's some useful stuff in there, sorry it took so much writing to try and explain my ideas, good luck!

Andail

Hehe, my paintover did turn out awfully dark, didn't it :)
I painted it in the middle of the light and with my desktop monitor, so now in daylight and on my ipad I can hardly see it... Might return to it later, hope some points came across still!

Snarky

Thanks Ben, that's super helpful! (As were Andail's paintover/comments.) Some of these things I was already aware of and either didn't have time/skill to fix, while others I wouldn't have thought of.

I did want to break up the regularity of the water a bit, but I was also mindful that it should work as an adventure game bg, so I wanted to define a clear walkable (paddlable) area and definite exits.

Interesting that you bring up Shishkin, since as I mentioned in the previous post I tried to use one of his paintings as a reference, but was completely unable to replicate the grass-tuft effect I was attempting.

I'm not sure whether I'll try to fix some of the problems in this picture or just apply the lessons in future work. But thanks!

ThreeOhFour

Quote from: Snarky on Sat 26/04/2014 14:01:31
Interesting that you bring up Shishkin, since as I mentioned in the previous post I tried to use one of his paintings as a reference, but was completely unable to replicate the grass-tuft effect I was attempting.

I need to pay more attention. :smiley:

Snarky

#10
BTW Ben, yesterday when I was looking for sample images for the next Blitz, I came across this post on your old blog, and just wanted to ask how you did the water animation.

ThreeOhFour

That particular scene was done using one of those free "YAY WATER EFFECTS" gif makers online, which meant I had to split the image in half, render them separately, stitch them carefully together and then merge them with the final image. It was an awful method, not recommended. I take it you used software of some sort to render yours?

Snarky

Yes, Sqirlz. It's a bit more powerful than those online tools, but it's still limited (you can't have a rock in the middle of the water, for example), and it's fiddly and time-consuming to work with. Plus what are you gonna do when you have stuff happening on the water, like someone paddling a barge across? It'll be like a vampire boat: no reflection. It'd have to be handled dynamically via a plugin or something.

ThreeOhFour

Squirlz is good, but not perfect, but I've used it a fair bit.

Something you can do to make it better: create a dummy image, with the reflection you want for rocks and stuff upside-down, so squirlz reflects things to where they should be in terms of depth - if that makes sense. So, for a program that reflects things on a flat horizon, you displace reflections manually yourself, so that when the program reflects it everything lines up perfectly. A nice way of doing this is to leave your water as an alpha, take the top half of your image and flip it to where the water should be. Then paint in where the reflections of rocks, more forward bits, etc need to be on that reflection. Flip that back, sit it on the opposite side of the horizon line, and then stick that in the program. It's extra work, but it results in a perfect reflection, as long as you're only using a static scene.

Hope that makes sense!

selmiak

you can always animate the boat reflection under the boat and have it alway repeat the animation and have the character's x & y coordinates + offset. Some more code and it can also turn around. Or use a character for the boat, this makes turning in 4 directions easier with less code, but there the animation will probably look jumpy between 'walking' and idle reflection frames.

Snarky

Quote from: ThreeOhFour on Sat 26/04/2014 15:44:17
Something you can do to make it better

Yeah, I'm exactly nitpicky enough to do that. In fact, I did something like it for this screen. (If you look at the second-to-last step in the wip animation, that's an initial "naive" reflection before I moved stuff around so they'd reflect more realistically.)

But I'm afraid it does NOT give perfect results, at least if there's any kind of overlap between the water region and the "things being reflected" regions (i.e. if any of the things being reflected are below the horizon). The artifacts depend a bit on your Sqirlz settings: if you just use the horizon as the reflection baseline for the whole area, like you suggest, the "wobble" on reflections of close things (e.g. the foreground trees in my screen) will be too great, and on the edge of the water it'll be as if those foreground objects were sometimes transparent, because the wave is reflecting "under" them. While if you draw the reflection baseline to follow the top edge of the water (as I have done here), the reflections will be displaced along any of the diagonal parts, and if it's too steep there will be a visible "edge" where the reflections don't line up. I don't think it's super-noticeable in this animation at this resolution, but at the original size there are some clear artifacts.

I'm pretty sure that it's impossible to do in 2D even in principle, because the program doesn't know the distance to the different parts. If you just have a flat mirror it doesn't matter: you can just project your scene from the "below the water" POV; but as soon as you introduce waves, which are all at different angles and different distances, you don't have a single plane of reflection any more, and 3D position starts to make a big difference.

It's all a question of how complex the interface between the water and real world is, and how picky you are about the accuracy of the reflections. For my version I think it's good enough, but for your paintover I think you would get noticeable artifacts e.g. for that stick in the water.

Quote from: selmiak on Sat 26/04/2014 16:13:13
you can always animate the boat reflection under the boat

Yes, but the ripples won't necessarily "fit" the background ripples. Though I supppose at low resolutions like this, that might be completely unnoticeable, and you might want to add in a wake from the boat anyway. I'd have to try it to see.

ThreeOhFour

QuoteYeah, I'm exactly nitpicky enough to do that.

Me too, and I've done this plenty. You can adjust the "perspective" setting in Squirlz to change how much the ripple variance changes from foreground to background, iirc, and this can help.

A lot of the time, something I will do with have a layer of dark, transparent colour that fades to invisible between the water layers and the top layer that represents where the land will cast shadows on the water. While this doesn't do a perfect job of hiding it, it can mask some of the little errors that are mostly noticeable along edges. I'm very picky about this sort of thing.

Grundislav

Also very picky about that sort of thing, and also use Sqirlz.  Not to hijack the thread, but this is a recent example I did which implements both having to manually move elements in the background for reflection purposes and having things in the water.  It's by no means perfect, but it gets the idea across in a satisfactory enough way for my taste.


Snarky

That's the Venetian Pool, isn't it? (It was closed and drained when I visited Coral Gables, unfortunately.) Man I look forward to A Golden Wake! ;-D

Grundislav

It is, indeed.

Out of curiosity, what paint program did you use for your background?  I'm extremely impressed by how you manage to convey the individual leaves with pixels.

SMF spam blocked by CleanTalk