Visual Composition in Digital Worlds
In this article, REWIND’s Director of Art, Erol Kentli, waxes lyrical on one of his favourite hobby-horses: Visual Composition — what it is, why it is relevant in authoring digital content, and how it can be put to practical use.
Amongst the ever-accelerating pace of technological progress — the constant pursuit of new techniques, tools, and technologies to make incremental gains in visual quality — it can be easy to overlook artistic fundamentals. At REWIND we look to combine progressive technologies and traditional artistic methodologies to create stunning virtual content.
This article specifically focuses on traditional compositional methodologies and how they might be applied to contemporary 2D and 3D Art to potentially achieve easier wins, importantly at virtually no extra technical or financial cost.
So What Is Composition Anyhow?
Without going into too much detail, these paintings all show the same scene, The Fall of Icarus.
Visual Composition is effectively a means of influencing how a user’s view travels across an image (or screen in our case), the formal definition is “The organisation of the Elements of Art according to the Principles of Art.”
Broadly speaking, the Elements and Principles break down into:
Elements of Art
- Line
- Shape
- Form
- Space
- Texture
- Colour
- Value / Tone
Principles of Art
- Balance
- Emphasis
- Movement
- Repetition
- Proportion
- Rhythm
- Variety
- Unity
Just cherry-picking a couple of these, we can see how these can be used to good effect.
Lines and Shape can be used to directly lead the eye, but also generate and reinforce specific emotional responses in the viewer.
In the images here from PlayStation VR Worlds’ Ocean Descent experience, we can see how the shape-language and tonal values evolve from the friendly, sunlit coral reef, becoming increasingly oblique and threatening as the player descends into the Stygian depths.
Balance is arguably the most important of the principles and particularly relevant to real-time content. Ensuring one’s imagery is not getting too visually noisy is a prime concern, especially when user motion, blistering combat, UI, and half a dozen other things may all be competing for the user’s attention.
Symmetrical Balance
Elements are arranged on either side of the centre in an equally weighted manner, as we can see here in The Arnolfini Wedding by Van Eyck (left).
Asymmetrical Balance
A more difficult form of balance, achieved through the arrangement of dissimilar elements, as seen here in Hooch’s A Dutch Courtyard (right). If the little girl was not present, the image would feel lopsided.
Also of interest is the Steelyard Principal, whereby larger elements placed a short distance from the centre, will be balanced by a much smaller and further away element on the other side (so, balance through depth if you will), as we can see in Gainsborough’s Mr. and Mrs. Andrews below.
Compositional Theory
So, this is where things get interesting!
Let’s first talk about the Phi / Fibonacci ratio, as it underpins many of the tools here. Without going into too much detail on the magic numbers that underpin THE WHOLE UNIVERSE, there is a ratio present in just about everything in nature…
…yes I did say everything (where the A to B proportion is 1.61803398874989484820).
Programmed For Structure?
Again, there is considerable debate around this, but it would appear that people generally find the Phi ratio pleasing (possibly because it is so prevalent that we are conditioned to it) and have used it in art, sculpture, architecture, and the like down through the millennia.
Rudolf Arnheim wrote a series of books on the Psychology of Perception and developed what he called the Structural Net, effectively a structural skeleton behind every canvas.
The very short version of his decades of research was that he believed that humans are all hard-wired to search for structure from visual imagery, which possibly explains why the compositional tools below can work so effectively.
Compositional Tools
OK, let’s start taking a look at the various methodologies…
The Rule Of Thirds
First up, we have The Rule of Thirds. As the name implies, a grid is aligned along the ‘third’ divisions of an image, with important compositional elements being placed along these lines or their intersections.
Although sometimes derided as being overly simplistic, it can provide some striking results and has made it onto just about every smartphone ever made under the cunning disguise of that handy targeting grid you can turn on in the camera settings.
The Golden Rectangle
This is effectively the direct application of the previously mentioned Phi ratio and has apparently been put to good use in some fairly high-profile artiness.
And it’s not just relegated to antiquity, the Golden/Phi ratio can be found in just about every major corporate identity of modern times. Here are just a few, but you can add Google, Apple, Mercedes, and dozens more to the list.
The Golden Spiral
Next up we have The Golden Spiral (there’s quite a bit of gold knocking about in this list…), which is effectively an arc drawn through the intersection points of the Golden Rectangle.
This has been used in some inarguably splendid masterpieces. And Sonic the Hedgehog. Who knew?
The Golden Triangle
The Golden Triangle is excellent for diagonal or dynamic compositions — a line bisects the image from corner to corner, with 90-degree lines joining this from the opposite corners.
Rabatment of the Rectangle
This is the positioning of major features at the point at which the short edge would align if rotated against the long edge. Put simply, it’s the perfect square found inside any rectangular composition.
Dynamic Symmetry
Things really start to get interesting now as we’re on to Dynamic Symmetry, this is a highly sophisticated form of grid-based composition. There are many different layered combinations to these, but the base proportions are derived from the aspect ratio of the image itself.
Michel Jacob enthusiastically championed its historical use and modern relevance in “The Art of Composition” (the clue was in the name) originally published in 1926.
Annie Leibovitz, possibly Vanity Fair’s most famous photographer, appears to be a fan of its use.
Tool Up!
Luckily, most of the tools mentioned above are available via Photoshop’s Crop tool.
However, I heartily recommend you talk to your friendly, neighbourhood code team and look to get the various grids available in-engine. I can tell you from painful personal experience, trying to line up shots with strips of tape crisscrossing one’s monitor is far from convenient…
And What About 3D, Huh?
Quite so, this is all well and good for static images, but most of us are working in real-time 3D. How can any of this be of possible use with new compositions being generated at a blistering 60 fps?
Probably the best way to think about real-time composition is being analogous to 3D sculpture. Our compositional, ‘magic moments’ come when all the elements align as with the Channel 4 logo or Marco Cianfanelli’s Nelson Mandela memorial, shown below.
We can’t directly control where the user is looking all the time (particularly in VR or AR), but we can make some informed guesses. Apply your key compositional efforts where they will have the maximum impact and focus on level starts, big reveals, choke points, cut-scenes, and the like.
Cramping My Style Daddio!
Some artists may feel that Art should be entirely intuitive, never being tied down to rigid systems or structures. I couldn’t agree more that expression or instinct should not be restricted. However, what I would espouse, is that we do not ignore the tools developed by people who didn’t have the benefit of an undo key. They had to get it right first time and over the course of centuries or in some cases, millennia, developed a range of systems to, quite simply, make better Art.
Whether we are consciously aware of it or not, there is a rule system in play during the process of creating Art, as advances in Machine Learning are showing us through their increasing ability to generate the style of even the most intuitive and expressive types of Art.
Off Trend?
Many of the traditional compositional techniques mentioned in this article fell out of favour in the last century and a half (although with something of a resurgence as we have seen with Dynamic Symmetry). As with many things to do with art, there is, of course, some debate about the reasons for this — was it society and technology moving on, or was something else afoot?
I won’t delve too deeply into it here but will direct you to an interesting take on how Art skills have eroded, and the centuries-establish Universal Standards abandoned, as a knock-on result of the Impressionist movement in Robert Florzak’s charmingly titled “Why is Modern Art so Bad?”.
In Summary
Why not try these methodologies out? One does not have to be slavish to them but combined with the other compositional considerations of colour, balance, lighting, et al, the cost is negligible in comparison to that of actually authoring assets, developing new tools or technologies, and (IMHO) can help finesse visuals from simply good, to stunning.
XRLO: eXtended Reality Lowdown is brought to you by REWIND, an immersive design and innovation company. If you want to talk tech, ideas, and the future, get in touch here.
Your claps and follows help us understand what our readers like. If you liked our articles, show them some love! ❤️
We’d also love to hear from you. If you’re passionate about all things XR, you can apply to contribute to XRLO here. ✍️
