AuthorTopic: Trouble with isometric shading  (Read 704 times)

Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Trouble with isometric shading

on: October 11, 2017, 03:53:41 am
Hello everyone, I have finally started experimenting with isometric tiles after avoiding it for a while. I surrendered to classic isometric 2/1 neat diagonals after feeling the recurrent urge of having diagonal rooms in my topdown prototype, instead of only rooms aligned to the xy axis. I naturally realized in shock that 2/1 regular diagonals do not match front facing 4:3 or 3:2 parallel perspectives tile-sets, and that raster diagonals that match those angles are jagged and bad for pixel art. You can see high school level geometry inst my forte, given that it took me so long to realize that.

Anyway, i think I got the basics covered, but I am struggling with properly shading isometric tiles when various ramps are involved. Specifically, I cant decide in a clear logical way which shade to put correctly in which face given the chosen light source, leading to neighbor faces with apparently to much contrast between each other (top right and bottom left diagonal faces of the "solids" being worst offenders), and I  also end up with a higher color count than I imagined to be necessary for such basic shapes.

Thank you all in advance for any pointers and tips which might help to improve this and correct the shading. This is what I came up with for a template:

Offline Darien

  • 0010
  • *
  • Posts: 431
  • Karma: +0/-0
  • ...nine...ten...draw!
    • View Profile

Re: Trouble with isometric shading

Reply #1 on: October 11, 2017, 05:52:47 am
Biggest thing is the bottom left face of the cube (and all corresponding faces) is way too light considering the light source.  I think it should be about the same shade as the top of the cube, but maybe just slightly darker to differentiate.  Overall I think it looks pretty good.

Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #2 on: October 11, 2017, 02:56:44 pm
Thank you, do you mean it is darker than it should be instead of lighter? Because the top is the second lighter shade. The reason I made it darker is because the light is supposed to come from an upper angle, slightly higher than 45 from the ground, so that the right ramp facing up is the brightest, but still not getting super light from glare.

The main error seems to come from the fact that I tried to reuse colors, when it should actually be one color for each specific angle of the faces. In any case there seems to be 9 visible angles, but 9 shades of every color ramp from dark to mid tones is way over what I am comfortable to work with. Even if I connect the color ramps and reuse the last two darks it would still demand a larger palette than I would like.That is why I tried to reuse the shades on faces that wouldn't touch each other, but as you can see, that is difficult to predict, there can always be a construction that would make them touch and break the sense of volume.

For instance, I know the top right ramp on the larger "dome" should be a lot darker considering the angle of light, but whenever I painted it darker, it didn't looked like a opaque prism anymore, and was implying some sort of crystal. The makeshift lighter tone seems to be acting like a back light or difuse light somehow, and adds to the shape, but it is incorrect and wasn't intentional.

Thanks again, I think I need references to study since instinct alone isn't making it.

Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #3 on: October 11, 2017, 03:40:35 pm


Let me illustrate the issue. Above is an early attempt to do all the faces with only 5 colors (good tier ramp for me). However, it immediately feels "crystalline" as if the darker faces were reflecting some other source of light, which might even be cool, but wasn't intended, and it totally fails with the different construction below, while using the same angles.

Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #4 on: October 11, 2017, 04:53:43 pm
Dear diary, today I learned Rhombicomboctahedrons are things, and everybody renders or take pictures of them with frontal, centered or uniform diffuse light to avoid serving as reference.







But not all is lost, and apparently the triangular faces can be darker than their neighbor slanted faces, if renders are to be trusted:


Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #5 on: October 11, 2017, 05:32:30 pm
So, I think that's all folks, I believe I have reached a compromise on 7 shades, which I cannot see how would they clash and break the sensation of volume, regardless of the construction.


I am not completely satisfied with it, but i will do for the time being as light map for any of the objects in the game. Thank you, and sorry to bother you guys with something as simple as a paint-bucket color filling :D.

Offline Cherno

  • 0010
  • *
  • Posts: 112
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #6 on: October 11, 2017, 10:43:43 pm
If you want to keep the color count down, you could also try dithering to get more shades out of less colors.

Offline Vinik

  • 0001
  • *
  • Posts: 50
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #7 on: October 12, 2017, 01:55:59 pm
True, with dither only 3 shades can cover all possible angles, although the problem would remain that should north-south slopes and top-right diagonal walls ever superimpose each other they would be indistinguishable without an outline:

 However, I am not a fan (or very competent with) dithering myself. I wouldn't dither large areas and full surfaces to represent an intermediate shade for instance, unless in order to give it a texture. On isometric tilesets, extensive 1x1 dithering would also worsen the readability of the borders of surfaces, I think, because it would interfere with clarity of the 2x1 diagonals with the alternation between single pixels of the two colors used to dither.

Offline eishiya

  • 0011
  • **
  • Posts: 717
  • Karma: +2/-0
    • DerpTree
    • http://pixeljoint.com/p/28889.htm
    • eishiya
    • View Profile
    • Webcomic: Black Dram

Re: Trouble with isometric shading

Reply #8 on: October 12, 2017, 04:02:40 pm
How will these be used? Have you made any mockups? Is using colour to distinguish different objects an option? I feel like you might be worrying too much about the colours being the same. Depending on how you use these surfaces, you might not even need to use different colours to distinguish adjacent surfaces on the same objects because other details and patterns could do the trick.

Offline Curly

  • 0010
  • *
  • Posts: 163
  • Karma: +0/-0
    • View Profile

Re: Trouble with isometric shading

Reply #9 on: October 12, 2017, 11:10:24 pm
It reminds me of Kirby's Dream Course. Give it a look, it might give you ideas.