WebGL Experiments: Illyriad’s 3d Town

What can WebGL do? Can it do what we want? We were wondering.. and so decided to put it to the test…

To test the upper bounds of WebGL we put together a rough and ready demo [caution – it’s bandwidth hungry].  It’s very rough, not optimized and currently only runs on Chrome [working in all browsers that support WebGL is our priority]; but that’s kind of the point – its a technology tester to ensure we weren’t making a mistake.

The results speak of themselves – it definitely proves itself!  Sure it needs a bit more polish, but we are now confident that the actual in-game libraries we are building have a lot of head room to use. Below are a couple screenshots of the town during the day:

And another at night:

Of course there were many trials along the way and things that didn’t quite work as we’d planned as can seen below:


We learnt the importance of GPU compressed textures and had to write a pixel shader decompressor of our own, as WebGL doesn’t currently support them natively – but with a cost.  The loss of mip-maping this causes it can clearly be seen; and we will have to work around this if they are not supported soon.

Overall we are very pleased with the result, which you can check out here.  Remember to press space to unlock your mouse to look around – if you aren’t fond of reading on-screen instructions ūüėČ

Naturally this is just a taster of what we have waiting in the wings. We’ll look to provide some follow-up blog posts about the techniques and tools being used in this early experiment including:

  • Web Audio API
  • Pixel shader texture decompression
  • Deferred shading

3rd Party Libraries in use

Letting Go

As Illyriad’s players have doubtless noticed, the game’s art evolves slowly. There is no industrial production line. Each piece is allowed the time it needs to mature, with no great rush.

This is probably clearest in the character art.

Here, we start with a single page narrative on the character, who he or she is – background, attitudes, etc. Then we assemble a mood board. Then step by step the character takes shape. And by the end, we have thought about it way too much.

For example, let me tell you about my daughter. She is lovely. Such a sweet girl. Of course, she has always had things her own way, and Her Majesty (my wife), says that I’ve spoiled her, but nothing’s too good for my little girl! And such an imagination! Most of her time is spent in the cellar, where she says she’s playing with her friends. How sweet! Heaven only knows what she gets up do down there, since she doesn’t ever take her friends down there – though I think there used to be some prisoners in the dungeon down there – but her games keep her occupied for hours and she’s always so happy when she comes up for dinner…

But in reality this character, about whom we have built up a whole back story (the spoiled sadistic serial killer, with her overly-doting father) is going to have to head out into the world of Illyria as a player avatar, to be imbued with a whole range of personalities and hopes, with a new persona for every player who selects her.

At some stage, however much thought and love we have put in to each piece of work, there comes a point where it stops being ours and belongs to the players. And that’s the whole reason for us doing this. We knew that that day would come, and that’s what makes it all worth while. At some point, she won’t be my little girl any more. But as every parent knows, it can be tough to let go.

Culture: Continuity and Variety

When we’re depicting cultures in Illyriad, there is a tension between the need to make each seem coherent and consistent with itself, and also the need to allow for a variety of¬†interpretation. That all sounds a bit obscure, so let me explain.

Players in Illyriad can pick any one of several races. In all of these cases, players might be coming to them with a range of expectations. For the Dwarves, Tolkien’s Dwarves are the obvious reference, but they might also be thinking of the Dwarves of Norse myth, or the Mostali of RuneQuest, or the insular Dwarves of Dragon Age. For Elves, they might be thinking of the superior and distant Elves of the Lord of the Rings movies, or they might be thinking of the spindly wood elves in illustrated editions of The Hobbit, or they might think of the dangerous and otherworldly creatures who kidnapped Tamlane in the legend. And so on.

The challenge in each case is to allow players to bring their own preconceptions into the world of Illyriad, while maintaining a sense of continuity and coherence.

This is easiest to do with the written Faction descriptions. So, if we are looking at Orcs, then people always assume mindless violence – but as Illyriad is about building cities and kingdoms, this begs the question of how Orcs might run a society. Simply, we don’t have to answer that question – we can propose different options, one per faction, and the players can gravitate towards, focus on, whichever suits their sense of what is Orc-ish. So, we have the ritualized violence of the Blood Reavers, the desperate attempts of the Pax Orcana to adopt ‘civilized’ habits, the measured confrontations of the Crimson Skulls… all offering a different view, a different treatment, of the same subject.

When we create art for the different races, however, there is a different challenge. The example of our Elves, above, demonstrates this. Here we have to bring together wisdom and compassion, with cruelty; the superiority of the “high” elf, with the roughness of the woodland dweller; the sexual fantasy view, with a more realistic depiction. There are a lot of different views of ‘what Elves are like’ coming together here, and the challenge has been to bring them into a single, visually coherent depiction.

Extreme Perspective: Organized Vector Layering and Modular Graphics

One of the most important aspects of a design, aside from the look and feel of the design itself, is proper organization and labeling of layers.

Having organized layers is paramount to the ease of re-editing a finished product after it has been published.  A good example of this is work I have done recently on image phasing.  Here is the original image:

My layering on this image is very simple: ¬†Each object has its own individual set of layers that I follow nearly every time. ¬†The individual stones have a contour, color, shading, and effects layer. ¬†The background is placed behind the stones with a contour, color, shading, and effects layers of its own. ¬†While working, I like to label what each layer is (this avoids the mess of “Layer 1”, “Layer 2”, “Layer 3”, etc.) so that I may quickly navigate the illustration if changes need to be made. ¬†What all this extra effort going into the illustration provides is an easy-to-modify, modular, and flexible illustration.

When I first made this illustration I had no idea that it would be needed for another project; however, with my methodology I was able to make the following changes without any additional effort. ¬†The project I was tasked with was to “phase” the illustration from full detail all the way down to wire frame.¬†¬†Here is change one for the ¬†new project:

Very easy change, this was as simple as hiding the effects layer of each of the stones and then saving the image as is.  Change two was a bit more dramatic:

Through simply drawing over each of my stones with white lines, tweaking them a bit, and adding a minor green glow effect I was able to give the stones the look and feel of a wire frame.  After the wire frame was illustrated I simply hid the contour, color, and shading layers and saved the image as is.

Having organized vector layers allowed me to complete this project quickly and effectively without having to resort to a lot of extra legwork.

Illyriad: HTML5 WebGL Preview

We’ve done a bit of bloging about the “now”, but what about the future?

Well here at Illyriad we’ve been¬†experimenting¬†with WebGL and I can tell you we are impressed with how its shaping up.

Here’s a little taster of what we’ve been trying:


Its slightly shaky – but that’s my mouse movement not any lag from WebGL. Looks like I might never be a brain¬†surgeon… haha

Better Than It Needs To Be

The strength of Illyriad’s character art is that it isn’t as good as it needs to be. It’s deliberately much better than it needs to be.

It’s the Abba theory. Abba, the theory goes, may be at heart mere Pop music, but it has stood the test of time and is still well loved, because it is much better than it needs to be. Abba may be inconsequential Pop, but it’s so wonderfully crafted that decades later the songs can still delight.

The character art for Illyriad has been broadly praised, and many of the individual portraits have a quality that brings a smile to the face. The key to this, I think, is that we didn’t set out to make the characters good enough, appropriate, acceptable. We set out to make them brilliant, and then poured love into them. It’s easy to say, but hard to do – and requires a much greater focus on the details. Look, for example, at this close-up of our male Dwarf – at his pauldron and the buckle on his breast-plate:

No-one ever needs to see the character this close up. Players will see this piece of armor at between 10% and 30% of this size. We never said to ourselves “do we need to show scratches and chips on his armor? do we need that much subtlety in the texture on the metal?” We just put the detail in without questioning it, because we were determined to make the portrait brilliant. But having lavished love on each inch of a character, the overall effect, when you stand back and look at him or her from a distance, is that the quality shines through.