James Shaw – Blog

As well as the original movie that we were all wowed by (found here http://vimeo.com/7809605 or here http://www.jamesshaw.co.nz/blog/?p=285 with teasers), by Jorge Seva, aka Alex Roman I found some of the making off which have some interesting shot breakdowns including compositing below and the 2nd, more interestingly, the original sourcing, modeling, texturing, lighting and finals etc on his Kahn’s Exeter short film.

Very interesting stuff. I love the comments online that he must be doing something amazing technically, and am pleased to see he likes to keep things simple. So less about the technicality of it all and more on the artistry. The approach of visualization as a photographer is one I can relate to, but one that is all to often forgotten in archviz work.

Compositing Breakdown (T&S) from Alex Roman on Vimeo.

Exeter Shot — Making Of from Alex Roman on Vimeo.

Granted this is an existing building he visualizes so easier to identify compositions that work, as these are the ones that have already been photographed by professional photographers. Often it is hard given a sketch by architects to visualize where the good compositions might lie.

We have some great debates at work whether this type of work is creative given it is an existing space and it is a facsimile of what already exists, or whether creativity lies in visualizing the non-built to this level. Is it a technical exercise in bringing archviz work in line with photography? Many architectural colleagues I have shown it to fail to see the point with the comment “why wouldn’t you just go there and photograph it?”, which is a good point. The technical brilliance is lost on them.

To this end there is a really interesting aspect of CG work evolving that we will see juxtaposed over the coming years (although has run through many creative industries over many centuries). Creativity and technical brilliance working hand in hand, and splitting of some awards in this manner (Avatar and 2012 spring to mind; dubious stories, but awarded technical marvels). I’m going to sit on the fence on this one as I can see valid points for either side. Needless to say I find Alex Roman’s work inspiring on a number of fronts, which is surely a part of artistry in itself?

This is quite a good rundown of how 3D is done… for dummies. I would love to show this to many of our clients! So funny!

Originally sourced from www.cgchannel.com/2010/03/what-you-dont-understand-about-3d/

Here is a tutorial on how to make grass within Max, based of Peter Guthrie’s excellent example (www.peterguthrie.net/blog/2009/03/vray-grass-tutorial-part-1/), but taking it a little further and applying this idea in bulk with Max’s built in tools.

The basic work flow is to model a very simple grass blade, make a cluster of grass and scatter across any object. Here is a example we (www.squintopera.com)used this technique in to give you an idea of the finished effect; www.jamesshaw.co.nz/#/content/Film/Cairo.flv/

Here is a couple of base CG beauty passes to give you an idea of the raw result before any post work has been done on it;

MAKING GRASS STRANDS

As previously mentioned this is based off Peter Guthrie’s tutorial with a few variations or notes to expand on this idea.

Firstly make a plane with 1 segment across and several in the length direction. Then add a length-ways UVW mapping, taper and using an edit mesh above this with soft select on vertex warp to a shape you like or several variations you can make into a group.

MATERIALS

Collapse the stack into an edit mesh. Then rotate the 4 strands into different directions by selecting and rotating the different elements. Then randomly set 4 id’s for them. This is so you can subtly change the colour with a colour correction within you multi-sub material.

Then make a multi-sub object material with 4 vray materials.

And within each multi sub make a VRay2SidedMtl like the following. You can also use the following grass textures by clicking on them and right click and save image. There’s a black and white one that you can use as an option for the translucency channel. But you can just leave this blank if the grass is at a distance and leave it grey.

The VRay2SidedMtl really is one of the most important things to use to get the light illuminating through the blades. Otherwise your grass will tend to look very flat.

Inside this VRay2SidedMtl sits a pretty simple vray material with the above grass blade in the diffuse channel (thank you Peter Guthrie for originally making this), with reflect set to white and Fresnel checked so it doesn’t look like chrome. Then adjust the Hilight glossiness to 0.6 which will help to spread the specular light you get off the grass. Again this is another very important part to make the grass look convincing. And unlike Refl. glossiness it will not be costly in render time and look almost identical, especially at typical grass distance.

To get variation in the grass tone change the bitmap diffuse channel to “Colour Correction” with the grass blade jpeg as the map, then shift the hue and saturation as follows differently for each of the 4 material id’s.

MAKING AN AREA OF GRASS

Now you have your clump of grass you can use this to populate surface. I found using individual strands was difficult, as the scatter we will use only really does up to around 70,000 instances before becoming a bit unstable. So if you use a clump of grass then you can spread further with less. Other options of scattering grass include pFlow and vray scatter; which I’ll go over later.

So now make a plane or use splines to create a free form extruded shape, or even detach a polygon from a surface to make a start. Remember when you extrude though to extrude 0 amount and only cap one end otherwise the grass will go underground as well. Also watch with way your normals go.

To make a scatter object of grass do the following:

• Make a compound object (on the create tab) with the grass selected and choose scatter.
• Then pick the plane as the distribution object.
• Change the duplicates to 1000
• Distribute using area
• Change rotation to 360 in the Z to mix up the direction. You can just limit this to 180 or 90 to simulate wind in a particular direction depending on the way your grass clump faces.
• Change scaling to 25% for all XYZ to give some variation
• Show Mesh with 100% to see exactly what will render, and when happy with the result change this to 10% and proxy to speed up your viewport.

Now you have a grass patch. The following is an example of how you can change the grass size on the sub-object scale and even add other simple plane flowers etc to add detail (click on it to enlarge). You can even mix grasses and flowers by using the same distribution object. Simple and no money spent… apart from Max of course.

ALTERNATIVES TO SCATTER

There are other ways of distributing grass. Peter Guthrie mentions the excellent VRay Scatter (www.rendering.ru/index.php/plugins/vrayscatter/), which has the advantage of varying colours more randomly then a multi-sub will do, and also varies the scale by a greyscale bitmap. The scatter method above has no method like this for varying and blending heights. The only problem is it’s a bit buggy (as if Max isn’t!), and it costs.

You could also use PFlow. I’ve had a quick go with this, but haven’t managed to vary the scale by a bitmap yet like VRay Scatter will do, just done density by material.

You will need a group of different grasses and some type of mesh as a distribution object. And obviously create a PF source and click on Particle View to get the following image.

Here’s how you might do this…

• Birth 3000
• Add a Position object, and add distribution object and you can use a greyscale image on a standard material to drive the density of the plants. You will have to view this standard material in a shaded viewport then activate. Weird I know.
• Rotation random horizontal, divergence at 180 and tick restrict diverg. to axis Z (1.0)
• Add Shape Instance and pick the group and tick “group members”. Scale variation 50%, and if animated tick animated shape and offset the timing by random 7 frames or whatever suits your animation.

Hope that may help someone out there! Enjoy.

Being an academic at heart I thought I could put pen to paper, so to speak, and share how we made these images. The image I’ll talk about is the St Pauls image as this is the image I’ve spent the most time with, in fact about 100 hours all up.

Of course credit goes out to the talented Squint Opera team, in this case Nick Taylor, Nic Hamilton and Kuba Roth who worked on these images also. (check out the other images here: www.jamesshaw.co.nz/blog/?p=140)

MODELLING

The only thing that isn’t modelled in this image is of course the picture of Chris jumping off the Whispering Gallery. So to start with a model like this you need to do some research. Most of the research was done off the web, but it is difficult finding resources on a building like this (believe it or not) as most of the drawings are very old, non-electronic and/ or in books. However there are always sources out there and within a day we had a good pool of information including the all important sections.

The modelling was done in 3ds Max and rendered in VRay. Reference images were inserted to scale and then traced in section and all elements either lathed (revolved) or copied around the origin point (0,0,0) which of course makes it a lot easier to repeatedly copy elements.

TEXTURING

Almost all of the textures used in this model are custom made. The easiest way of making these is screen grabs of sections and then using the dividion of geometry to paint bitmap images together. As this screen grab is just a reference I upscaled these to a decent resolution of about 4-6k to handle the final output of 6k to print. This is important as without this, in the final print your textures themselves will look pixellated depending on what you’re painting of course.

In photoshop I used a combination of custom masks and mold/ rundown textures to form the diffuse channels, another layer group to form the bump and specular and yet another black and white map to make a custom displacement map to use with vray displacement.

ceiling tiles across underside of arch. Tiled more accurately using unwrapUVW

main wall diffuse (RGB) channel

main wall bump map

main wall specular

gold band displacement

Arches panel diffuse (RGB) map

Arches panel displacement

ceiling diffuse with simple paint peeling bump

I tried at various stages to use procedural textures, but they just look too clinical and patterned. The vray dirt texture can be used in a blend material in the mask channel for instance to get mold in cracks (see first coat material in image below), or a paint splats mask used to give general mold stains (2nd coat in image below), but it is sometimes quicker to do this in Photoshop.

I’ve had this debate with my workmates Nic and Nick about procedural vs bitmap, and I used to be a procedural fan but now seem to be converted, simply because of the specific control you have over them in Pshop. For this random flakes of gold texture though it worked well.

Needless to say a lot of time was spend flicking between Photoshop and Max to get the correct look.

RENDERING VRAY PASSES

We used to output just the basic render and then work on that in Photoshop for stills. The only problem with that is a lot of time is spent masking things for adjustment layers etc; so why not use the outputs in the many render elements through vray.

In the Vray rendering dialog box goto render elements and add whatever you need. Personally I generally add lighting, shadows, gi, bump normals and a couple of extratex, which is something new and very useful in the latest version of vray. So not only do you get Vray rendering the “beauty” pass but you also get all the aforementioned outputted to the same directory. The following are examples of the extra passes you get in checking this:

Bump normals on left can allow you to use the RGB channels to cast light in post through a program like fusion- very cool!

ExtraTex can be used with Vray Dirt texture to give similiar to ambient occulsion pass

Global Illumination passes can be used to lighten dark areas

Lighting pass can be used to boost lighting. Normal and raw passes are shown here

Shadow passes, normal and raw respectively. I usually invert these in Pshop and use as a multiply or screen. Add a black mask to these layers and then you can white brush in shadows. A lot more accurate than freehanding it.

Reflection and Specular passes can be used to boost both, or cancel them out depending on the blend mode you use. Subtle differences, but these little bits really add to an image.

This is again an ExtraTex pass with falloff in the material slot. If you set it to a distance blend you get a way better result than the standard zdepth through vray. You can use this for huge amounts of stuff including lens blur, fog and lighting gradients.

These can be used in Photoshop using different blending modes, mostly screen, multiple and linear dodge quite easily. Or you can use the RGB values to mask areas for adjustment layers etc.

Ultimate control over your images/ animations!

RENDERING OTHER PASSES

Of course VRay cannot do all the passes present in this render alone. The light rays and windows presented special problems. The windows were easier to do in a seperate file, and this had the added bonus of controlling exposure with the vray physcial camera, as a photo taken inside a space like this would just show the windows as white not as they are in the final.

As a side note the windows were smashed with an excellent plugin called rayfire (www.mirvadim.com) which uses the very un-user friendly reactor within max (physical dynamics simulations) and gives it a brilliant one that easily accesses these features and adds a few more. Select, smash randomly, and smash parts again and hey presto, done. Or almost that easy.

Light rays, or volume light are still not supported by VRay so these were done in a seperate file using a standard directional light with volume lighting set to very high quality. Fairly quick to render as you don’t need any gi for this.

PHOTOSHOP OR POST PRODUCTION

As previously mentioned the beauty pass (standard pass out of rendering) is first with all the above passes on top with blend modes set to various screen, multiply etc depending on what they are and what works best. Personally I then add masks to these so I can add and take away the effect of these layers.

Fog is added with a solid colour with a copy of the zdepth alpha used as the layer mask. Cheers to Kristian for that tip!

Other elements that were too difficult or time consuming to model were added in Photoshop as you can see in the video below.

I generally use many sets of curves that can adjust colour and overall RGB intensities on each element. Curves are amazingly versatile for this. If you pull the levels right down or up you can then use this to paint shadows and highlights using it’s mask.

Get the latest Flash Player to see this player.

THOUGHTS

So that’s it. If you have any thoughts or questions feel free to comment below and I’ll try my best to answer. Happy modelling!

Here are the five images we have just completed for the “Flooded London” Exhibition. I am hoping to get the making of and a few notes behind these shortly. It is part of London Architecture week and explores the concept of a Flooded London many years after the event in 2090.

Squint Opera depicts living in ‘Flooded London’ in 2090

There will be an evening event held at Medcalf Gallery with Squint/opera on Fri 20th July 08 or Wed 25th July 08 to celebrate the exhibition (please contact Squint to confirm this date www.squintopera.com), and is being shown for one month after. www.lfa2008.com
The exhibition is listed in the events section on the LFA web site (www.lfa2008.org) at the top of events for July.

Flooded London exhibition is held at Medcalf Gallery in Clerkenwell presenting a series of images depicting Squint Opera’s long-term view of how London’s population has adapted to raised sea levels. The general scenario is set 80 or so years into the future, long after the sea levels have risen. The catastrophe side of the sea coming in has long since past and the five images are snapshots of people going about their lives, long since having adapted to the worlds new circumstance. The scenes shown through light boxes present London as a tranquil utopia with the architecture of the distant rat race suspended below the water.

The people in each scene appear to be relaxed and happy in their environment and in the first we see a man who has rowed into St Pauls and is preparing to dive off the ledge of the whispering gallery into the dimly lit ‘swimming pool’. Another sees the upper reaches of a once famous art gallery where people have collected pre flood artifacts and are rigging them up to get makeshift machinery going to power a light bulb. We assume that the world is a much less complicated and that there is not much in the way of industrialized manufacture. The original City is shown as the now abandoned Canary Wharf where two women are fishing out of the side of an office and the sail of a boat going down the street.

The installations are optimistic and reveal that far from being a tragedy, the floods have brought about a much-improved way of life to the capital city.
Squint has used photography, 3d modelling and digital manipulation to imitate some of the techniques of the super-idealistic Victorian landscape painters. Details are exaggerated and play with scale to present images that belie their composition.

St Pauls- A late afternoon plunge from the Whispering Gallery

Gallery- Resurrection experiments

Canary Wharf- Day in town for a spot of fishing

Honor Oak- Suburban Bucolia

St Mary Woolnath- Rich Pickings from Bank

UPDATE: I have an alternative to this post here: www.jamesshaw.co.nz/blog/?p=542 if you would like to learn more in depth about what each setting does within VRay, with examples. If you’re after just some quick settings though then read on…

Here is what we’ve (www.squintopera.com) have found works for rendering settings using vray. There are many stories on various forums on what makes a difference, but I hope these settings will get people started and able to use vray for production output; which are primarily what these settings are for. However if you need more information as always visit the chaos forums. (www.chaosgroup.com/forums/vbulletin/).

There are 2 other key methods, adaptive and using pure brute force for animation passes which I’m hoping to put in another post… watch this space and I’ll put a link to it when I get 5mins off the work computer!

So the following goes through the 2 all important tabs within the vray renderer, “vray” and “indirect illumination” tabs. The common tab you should know from a basic knowledge of max, of which I will not go into here.

So firstly there is the vray tab which is broken into the key elements as follows:

1. When using the vray displacement modifier (will increase rendering times) you may want to use this global checkbox to turn on and off displacement.

2. You don’t need default lights- just confuses things in a lit scene.

3. Adaptive subdivision is suitable for most. If you have really fine framing/ lines or shadow detail you may want to use Adaptive DMC (we use this generally now).

4. I use area to give a slight blur to fit with our background plates so it looks less CG, but depends on the type of sharpness you want for your image. Experiment and read the descriptions of each.

5. These 2 values alter your lines and edge definition. Think antialiasing. -1 to 2 will give you pretty sharp edges, much more and you’ll boost your render time quite a lot.
If using DMC 1 to 5 is pretty good quality. I use 1 to 3 for a lot of animation because you’ll never see a difference. Region render test and see whether you notice the difference, if not then go for th quicker render times.
Also check object outline.

General tips for 6, 7 and 8 are try turning your lights off, then adjust individually . This can be easier to see what is having what effect on the scene…
Also remember if you have a material in the slot it makes the colour swatch and multiplier obsolete. The material slot tick must be unchecked for these to come into effect.

6. In your material browser either grab a spherical bitmap, vray sky or HDRI map.
This slot controls the Global illumination on your model. If it’s a bright red sunset then your model will appear red or pink from the light this map will give off. If using a vray sky the angle and intensity of your sun will come into effect through use in this slot, unless the vray sky is manually overridden.
You can then click and drag from the mat editor to this slot and make an instance this means you can control GI from your mat browser easily.

7. This is what will be reflected in your glass etc. You can make an instance of the GI above this, but I like to have more control over reflection, and associated brightness of each.

8. Refraction is important if say viewing the corner of a glass building, where you will see through to alpha. This slot determines what you will see through to. If it’s black then it’ll be pure alpha (generally what you want), but if you are using the GI map as a background then you should copy this background here, otherwise your glass will appear black.

9. Usually leave as reinhard where a brightness multiplier of 1 will give you a result like linear or contrasty result and lower values will flatten the image and can help to bring back blown highlights. Run it as high as you can without blowing areas to full white to give you options in post-production.

10. If you find very sharp white blocks of light on your renders ticking sub-pixel mapping and/ or clamp output can help to remedy this. There is a really good section on this in the Vray manual that explains it better and generally, in a roundabout way, recommends ticking these. If using linear workflow don’t worry about clamping the output; despite popular belief white is white and there is no range past this.

11. This motion blur doesn’t come into effect if using a Vray physical camera, it’s all in the camera modifier settings using the shutter speed.

1. This is what happens on the first light bounce (primary). Set to irradiance map. The “show samples” checkbox will show you what it is sampling.

2. Set to light cache for the secondary light bounces. If you want to see the product of each of these 2 types of bounces turn each on individually and test.

3. Low for testing, medium generally, medium animation for animation. The difference in animation is in the “dist thresh” which will smooth things out if you get the dreaded flicker in your animations. Run higher if your render times are acceptable, but visually test a range and if you don’t notice a difference then go for the quicker option always.

4. 20 is low, 50 very high. Generally 20-40 is fine depending on testing or production.
Run this on low 15 20 for production high res stills, remember this is resolution dependant so the smaller the image the higher the subdivs must be to sample the detail. If you run 50 subdivs on a 5k image your wasting your time.

5. Interp samples just evens blotchiness caused by the samples. 20 is fairly sharp and generally what you would keep it on, but you might notice some blotches on some large surfaces. A value of 100 will smooth these out, but will make the render “soft” or undefined and will increase render times.

6. This can increase corner etc details as (if I remember correctly) it uses brute force in the more heavily sampled areas. This will significantly increase render times.

7. Single frame for stills and some animation. If you have problems with flicker and nothing’s animated moving in the scene it’s better to set to multiframe incremental and “bake” the GI to a seperate GI file (the differences are explained well in the vray manual)

8. 500 for quick, 1000-3000 production. Will send your RAM through the roof on complex scenes so watch your task manager and test a good value.

9. 0.02-0.01 for scene, and 10-100mm for world (depending on what you chose in 10 next)

10. Scene is good for stills, but can show as a moire pattern that doesn’t move on large surfaces. So for animation sometimes world is better, but alas sometimes gives you a more blotchy result.

11. Pre-filter can be used to smooth out the light-cache result, but can add to render times, so leave it off if you can get away with it. Definitely tick light-cache for glossy rays this saves huge amounts of time on scenes using glossy materials.

12. Single frame, but again (like 7) can be set to fly-through to “bake” the GI to reduce flicker. But of course if you have moving objects in the scene you would have to use single frame, or separate these objects as a separate pass and combine in post-production.

13. Tick both.

14. Tick both. However, you may want to uncheck show calc phase when sending off to render. There is a little bug in Vray were this occasionally sends the RAM through the roof when show calc phase is checked.

As I said this will get you started and give a general feel for the settings in Vray. We actually use the adaptive method now as this gives you finer shadow detail and bake all static scenes, and brute force on animated objects only and combine in post, but that’s another post when I get a spare 5 mins! Enjoy!

Here are some basic settings that will get you 90% of the way with vray materials. For more detailed information check out the banter on the chaos forums (www.chaosgroup.com/forums/vbulletin/).

Only use vray materials with vray as it only adds to your rendering time to use standard mats. Feel free to stack them up into multi-sub object materials etc once you’ve made them.

This example is for making glass, but just replace various slots and slides and you have unlimited.

1. Firstly enable checkerboard so we can see the result of reflections.

2. Name materials or the next person will hate you!

3. The diffuse channel can be a bitmap or procedural texture. Roughness doesn’t do too much apart from add to rendering time. Keep bitmaps to 2000 pixels max in any direction. Never use 255 (max) values in the colour slot as you’ll get random pops of colour everywhere. 250 absolute max.

4. Reflect colour should be at say 10-20 for a polished floor and in this case (glass) 255 to fully reflect.

5. Fresnel gives more realistic reflections that depend on the angle of incidence, i.e. a shallower angle of reflection (sides of sphere) will reflect more than looking straight on.
For something like chrome you wouldn’t use fresnel.
If you tick lock and boost the Fresnel IOR number it’ll reflect more, or increase the angle of reflection.

6. Refl. glossiness will either give you total crisp reflections in the mat or will fuzz them at lower values. Less than 1 will increase render times.

7. If you click the lock Hilight glossiness will alter the specular level. 0.9 is around gloss paint, 0.5 is around the matt material level. This doesn’t affect rendering times much.

8. Leave max depth at 5 unless you want more reflections of reflections of reflections, like rendering a glass bottle. Again more= more render time. Watch setting getting too low, as you will run out of reflection bounces, i.e if set to 1 bounce, a reflection will not reflect another reflection, and will show black.

9. Refract set to 255 (white) is fully transparent. Obviously you would leave this at 0 (black) for solid materials.

10. The IOR then alters the index of refraction or how much a mat refracts light. 1 is nothing, 1.333 is water, for more google search refractive index

11. Tick shadows and affect alpha, otherwise you’ll find all your glass is black when cutting through to alpha channel in compositing. Not necessary to tick for other solid materials.

12. Fog colour is the colour your glass will be tinted. Get the right colour and then use the saturation as how “dense” the colour is. Under this is the multiplier to then control how strong this effect is. Saturation and fog do similiar things so set one ten alter the other.

13. Click the squares to add bitmap specific controls for these values. This is part of building a nice material, specifying how exactly a material reflects or specular highlights etc through black and white mattes.
Remember white will do this fully and black not at all. If using a bitmap in these slots remember the normal numeric slider will be superseded with the percentage slider in the maps tab.

14. Bump map should also be added as well as opacity (if required) in the maps channel tab.

Examples of student work from 2006 DESN205. Above is a clip from the exhibition of student work. More information will be posted shortly.

Or download mp4 version for your iPod here

AIMS AND APPROACHES

The central aim of the course is to introduce students to 3D digital design tools to conceptualise, generate, define, compare, refine and resolve both form and space.This course aims to give students the opportunity to gain knowledge and skill in this specific area of computer use as it applies to the three-dimensional design disciplines of Industrial, Interior, Landscape and Architecture.

Examples of student work from 3rd and final project DMDN201. Utilising processing (www.processing.org) students were able to take a live camera feed and use movement/ interaction within the space in order to change the projection. Students responded to creating a persona with architectural elements, in this case a blank wall that responded in certain ways towards inhabitation.

This project was a continuation of similiar processing examples driven off mouse inputs, and was a result of research into how to utilise processing in order to change projections in real time using a number of open source software and 3rd party plugins.

Examples using mouseXY instead of camera inputs:
Pip Tanner
Michael Gunn
Ezra Keddell

Coordinater: James Shaw
Tutor: Matt Fraser and James Jordan
Tech Help: Dan DeWaal

AIMS & APPROACH

Dynamic Web Design is a radical step in the fusion of programming and design. This Dynamic Web course offers students the opportunity to explore their own ‘research’ methods for developing unique interactive experiences through the manipulation of open source software.

Can software respond to environmental changes such as temperature, oxygen, and light? Can animations be made to change with user input while drawing information from an online database or from a human heartbeat? How do you develop your own unique identity through creating your own personal software program?

These and other investigative experiments using principles of open sourcing, global collaboration and unique programming combinations encompass the field of responsive visual forms designed to communicate and engage the new global audience.

Gaming environments offer massive potential in terms of collaborative and spatial environments for designing. The use of ‘in-game’ modelling tools allows designers to quickly put together and test scenarios and designs, and critque in real-time. The use of physics and material properties for each element or ‘building block’ used presents designers with further possibilites as objects take on materialistic and force dependent constructs.