Sunday, 10 November 2019

Stylized Waterfall FX with flow interruption

I have been experimenting a lot with UE4's material system recently, seeing if I could push my knowledge. I decided on creating a stylized waterfall effect (because any sort of water effect is always really fun to work on) but I wanted to do something unique with it:

For Sky Adventure (My current game project - you can read more about it here) I really wanted to include waterfalls that the player's balloon could fly through, interrupting the flow of the water as it falls.

This effect needed the following features:

  • Intersection of the waterfall with overlapping objects, masking out parts of the waterfall.
  • Waterfall should have thickness and not just be a flat plane, so ideally intersection should work from all sides of the mesh, not just one side.
  • Splashes and ripples at bottom
  • Controllable parameters for things like colour and water flow speed.
  • Could be adjustable later on for blueprints (effect will be extended at later date so it can be used in different configurations within the game) 
  • Nice, clean and cartoony style that fits with existing game art style

So I went to work figuring out how to get this effect to work inside Unreal Engine. Below is the final result I ended up with!

Final Waterfall effect complete with flow breakup, masked particles, top highlight, ripples and a healthy amount of UV distortion.

How it works

The waterfall uses a scene capture component to record depth information from an attached camera, this picks up objects that are overlapping with the waterfall and uses their Zdepth information relative to that camera to generate a texture. This depth texture is then used as a starting point to create a mask on our waterfall. You can see how the depth is captured below:

The render target capturing the depth of the intersecting objects.

Initially I had this effect setup with the scene capture placed behind the waterfall. This captured objects insecting with a black background plane (invisible to the player) at the same location of the waterfall plane. This worked for a basic intersection effect but it a couple of limitations:

  • The main issue: If the waterfall has thickness then the mask will be applied to both sides of the waterfall or result in a gap in the mask. Ideally I need it so that the waterfall masks the position of intersecting meshes at any point. 
  • I was just using a simple diffuse colour capture of the objects intersecting a black plane, this meant that as soon as I changed the colour of the intersecting objects from white they stopped working! So I need to capture the Zdepth of the camera instead
  • I could try some workaround by having the scene capture rotate according to the point where the object enters the waterfall but it seemed very overcomplicated for this effect. I didn't want to perform all these different checks during gameplay. 
After a bit of digging I was suggested to try using a projection from either the top or bottom of the waterfall instead. With a little bit of shader magic, the render target could then be used as a sort of volume texture; this can be used to figure out where the object is intersecting the waterfall based on it's associated depth value in the render target and then mask out everything under the intersecting pixel's world position!

The benefit of doing it this way is now the waterfall can be any shape and it will mask perfectly from any side, perfect for what I want!

How I setup the Projection

So to start creating the waterfall I created a blueprint with a scene capture component added. This capture component has been put on an end of a spring so it's position can be adjusted easier if needed.


The waterfall mesh is 800 unreal units tall so I positioned my capture component at the top of the waterfall so it is 800 units form the base and pointed it downwards.

I also set the rotation of the capture component to be absolute, this got rid of some weird projection issues I was having when I turned the waterfall around, this means the projection would always stay the same rotation but unless the waterfall was really wide it didn't really matter.

Lastly, I made sure to set the projection type to orthographic (don't want any perspective distortion in our texture!) and I set the ortho width to be 1024 (this would normally be the size of the texture as defined inside the render target itself.)

Depth Capture

I applied a simple post process material to the scene capture component, this allows me to capture the scene depth to the texture but only within a range I define, in this case the length of the waterfall which is 800 units.


What does this do?

Basically this means my texture will now capture depth values within a range of 0-800. This means the texture can be used to output the exact Z position of any intersecting objects.

My attempt at a diagram demonstrating how the height of the object is recorded as a value within the render target

Setting up the texture size of the render target

I created a material parameter collection so I could store the the size of my render target camera. A material parameter collection allows me to contain scalar and vector parameters that are global, meaning an easy way to store important data I would need for the material!

I added the following parameters to my collection, both will be used for placing the projection correctly in the world:

Parameters inside the material parameter collection
Next, back in my waterfall blueprint I added the following construction script. These nodes allow me to output data from the BP into the material parameter collection.

This construction script grabs the current ortho width and position of the render target camera and feeds it into the waterfall material.

Creating the waterfall material 

I begin to set up my UVs for the for waterfall masking. This graph below shows how I projected the render target inside my material using world position and using the capture size parameter to scale the texture correctly within the material.

Projecting Render Target UVs in World Space


This generates UVs that I can then feed into my 'Cutout Effect' material function. Here I am sampling the render texture based on my world position UVs, multipling it by my projection distance to get the depth to work between a 0-800 range rather than just between 0-1. I then offset the texture by the Waterfall's overall Z position so get the correct projection location.

Here is the fun bit: comparing the world position of each pixel of the waterfall mesh to the projected value of the render texture. If the depth value of a pixel on the projected render texture is lower than it's z position in the world then mask it out.

How to compare the depth value of the render target to the world z of the current pixel, this results in the space under intersecting objects being masked out.


Below is what the generated mask looks like:

Generated mask from comparing the render target values to world z position of each pixel on the object.

 

Defining the look of the waterfall

After establishing how the mask would work I turned my attention to developing the appearance of the waterfall. I looked at a bunch of ref and then created a simple concept painting to figure out what I wanted: I wanted clear, defined shapes that would be readable at a distance and very bright highlights for the top and the splashes. In terms of style I would say I was looking for a sort of blend between the Wind Waker and Rime styles (A bit more towards Wind Waker though as it has a more flat appearance), for reference I taken a look at a lot of Studio Ghibli water animations as well as water animations from the FMV game Dragon's Lair.

This current style goes very well with what I have in mind for the rest of the game: Simple, fluid and readable.


Adding Edge Highights

I added some edge highlights to the waterfall when intersected. This was done by grabbing the cutoff mask generated earlier and adding together multiple copies of it which have been offsetted in different directions. This was then added to the emissive colour channel to create thin highlight around any intersection.

Adding an outline for the masked out area, it is sharing the same output as the cutout effect, just offset up, left and right along the UVs by an outline thickness parameter!

Water flow using UV Distortion

Probably one of the most important contributing parts to the waterfall effect: the falling foam. This is needed to help establish a downwards flow of water. For this I used panning textures combined with UV Distortion with a noise texture. I use this effect a lot on this waterfall and on other projects and it's super useful. 
Uv distortion on the waterfall shown (slightly exaggerated for gif purposes.)

How noise is added to a UV channel to get the distortion effect.
To get a harsh defined edge to the mask that fits with the game style I use a SmoothStep node. This node allows me to input a threshold parameter; anything above max will be white and anything below min will be black, anything inbetween will be smoothed against a curve. If I keep the min and max values tight or even equal to each other I can adjust the sharpness of the edge.



How to set up a mask using smoothstep.
After this it's just a case of feeding the mask into a lerp so I can easily define the colours of the waterfall. :)

Ripples - Also with UV Distortion

I also used the same techniques on the ripples, the ripples use a circular mesh with textures panning outwards to create the look.

Ripples + Wireframe

Top Highlights

For the white highlight on the top of the waterfall I used the previous techniques to get the 'ripply' effect it has. Although to place the highlight I used a separate piece of geometry with a separate UV channel so I can control the placement of the highlight better. This piece of geometry was masked out with green vertex colours. The main benefit of doing it this way is that I can change the length of the waterfall later on without risk ofchanging the top highlight geometry/stretching it's UVs.

Vertex colours of the waterfall, the red channel is
used to mask out the ripples at the top.

Adding depth to the waterfall - Two Sided Texturing

The next step was to add thickness to the waterfall. This was relatively straight forward since I simply made the waterfall two sided, and made the inside of the waterfall an unlit white to make it look like foam. Normally materials set to two sided use the same texture/colour on the other side, but with a TwoSidedTexturing node you can give your backfaces a different input!



Splashes - Masking out Particles by position

At the moment though the fact that the waterfall is just a two sided material is still obvious because of the bottom looking like it's cutaway. I add in splashes at the bottom of the waterfall to cover up the intersection with the water plane!

The particles are simple circle shaped planes with a lot of geometry. This geometry is pushed up using world displacement and a noise mask. I can control the rise and fall of the splashes using a Dynamic Parameter in cascade, which can feed data directly into the material to drive the displacement.

The main part (that taken the most amount of headaches on this project) was figuring out how to mask out the particles when the water was cutaway. For this I grabbed my render target projection material script from the waterfall, the problem with using this straight up though was that the particles would only be partially masked out, which when combined with the displacment has an unsightly appearance:


Bad Masking - the render target is masking out the splashes at each pixel which results in this harsh outline.

To fix it I realized I could simply replace the world position node in my cutout UVs with a ParticlePosition node. Instead of sampling the UVs at the current pixel position it would do it for the center of each particle: if the center of the particle lays within the masked out section of the render target, the entire particle will mask itself out.

Replace World Position with Particle Position to sample render target UVs at position of particle center.



It's not perfect, currently it snaps the particle opacity completely. I would like something more gradual but I'm still experimenting with a better way to do it.

Summary

    It has been loads of fun putting this effect together and trying to get it to work, I have learnt loads about how to manipulate UVs in different ways and how to use render targets in more detail. For future work in Sky Adventure I will come back to this effect and add the ability to alter the size of the waterfall using construction script as well as adding a softer transition to the splashes. I also want to explore having the water redirect over intersecting objects, but that's for another time!

    If you have any further questions about this effect or you have any feedback please send me an email through my contact page or leave a comment to this post. :)

    In the meantime check out Sky Adventure at these places below:


    DEVBLOG: http://blog.idotri.games/
    TWITTER: https://twitter.com/IDOTRIGAMES



    Thursday, 17 October 2019

    Free Level Greyboxing Tool! - UE4 Slabs - Now on Gumroad.

    Hello, after a few years of just forgetting about it I have finally put my tiny little UE4 Slabs Blueprint on Gumroad. I've cleaned up the code a bit and released it in it's basic form.

    If there is enough interest and requests for extra features for Slabs then I may come back to it, I have some ideas to extend the tool that might include some use of Unreal's Utility Widgets.

    Anyway the link to my Gumroad pack is below:


    Tuesday, 29 January 2019

    Quick GIF Drop - THE VOID - Portal FX and Procedural Generation Preview

    Hey guys, it's been a while since I have updated the blog, I am still alive and making things! The whole end of the year has been a bit hectic and things like the blog writing always ends up getting left out on my list of things to do.

    I am working on an experimental game project called 'The Void' with Leon Field. https://ldmfield.weebly.com So I am using this project as an opportunity to push my tech art skills.

    I will be showing a lot more of what I am working on soon, but for now here is a GIF showing a portal effect for the The Void I have been working on in UE made with particles, fancy material stuff, blueprints and skeletal meshes. I will be providing a proper breakdown of how I made this effect on this blog on a later date.




    Portal Materialization effect - Uses a blueprint timeline to control how the meshes expand, how the post process material animates, when the particles activate, and when skeletal meshes start playing their animations.


    I'm also currently working on some procedural generation script for the same project, this is a bit more advanced and will take more time but I see if I can post more updates for that too. In this project I have been experimenting with a bit of C++ as well as blueprint so I can read text files that contain layout information for each room before I start placing each one procedurally.

    Super early procedural generation script (This has developed a lot since making this GIF)

    I plan on writing larger blog posts about each of the things I am working on above so I can link them to my portfolio site, this will take a bit more planning as I actually want to breakdown each little project in a lot of detail to (hopefully) explain how I've done things. So bear with me!



    However, f you want to see things as I'm working on them though I tend to post on Twitter more frequently, so check out my page there: https://twitter.com/JamesMBroderick

    See you soon!
    -James

    Sunday, 4 November 2018

    Art Dump - Rock Studies Continued

    Continuing with the rock studies, I'm working from a ref board full of some interesting rock formations gathered from Pinterest and marking each one off as I draw.




    Feels really good working this way as the satisfaction of having another image ticked off the board really pushes me into the next drawing. One more page of rocks should do it, and then I will move onto tree roots!



    I'm probably going to write a list down of further studies I want to do past the subject matter Feng Zhu mentioned, as I want to paint some crystals and mushrooms and other cool things later on but in colour, and I think that would be a good continuation of this.

    Until next time! :)

    -James


    Art Dump - Rock Studies

    Started some rock studies after watching this video by Feng Zhu: 





    Saturday, 26 May 2018

    James Broderick Design - Test Stream! Guiding Sprites Optimization

    Just doing a little test stream showing off some Guiding Sprites optimization... after I have fixed a load of blueprints that have broken due to migrating the project to 4.19



    Click the video below to view the stream. :)



    Monday, 7 May 2018

    Old UE4 Grid-Based Tile Movement Project Download!

    Hello!

    Over the last couple of years I have got a lot of emails and comments asking about how I did my top down grid movement in this video:


    Just to save some of the questions I thought it would be a good idea to upload the old project to the site so people can break it apart and see how it functions. I should warn you, this code is trash in this current form as it is really old and I made this back when I was figuring out how to do all of this scripting stuff properly. There are probably a million better ways to do this! It should make for good learning though.

    Please, if you have any questions about the project still or want to show off how you have used it, email me. I would like to hear from you, and if you have made anything interesting using something you have learnt from this then I would like to see it.

    Some time in the future I may come back to this demo, and make a proper tutorial on how to create it (in a way that isn't stupid), subscribe to my Youtube channel so you can see my new tutorials when they come out. (Hopefully should be around late summer time if everything goes well!)

    Download Project Here

    Just as an additional note about the contents of the project:


    • A lot of this code is duplicated, disconnected and just generally messy. Old unused code should be deleted.
    • A lot of the code is in weird disjointed places, some of the Pawn and Controller script is mixed up and is in the wrong place, like the actual movement script being on the Controller, this should probably be implemented onto the pawn. The controller should mainly be responsible for handling the input.
    • A lot of the events I have set up could and should probably be set up as functions instead.
    • There is quite a bit of duplicate code, using the functions like I've mentioned above could help cut some of that out.
    • Basically, be smart in what you take from this code, use knowledge gained from other sources to improve it and make it better.


    Tuesday, 1 May 2018

    Inspiration - Hang Sơn Đoòng - THE LARGEST CAVE ON EARTH

    I love looking at places like this, would very much like to visit one day. The concept of super-giant caves fascinates me and is one of the major inspirations behind one of my ongoing personal projects, this video demonstrates just how wonderful a place like this can be.


    Hang Sơn Đoòng - THE LARGEST CAVE ON EARTH from Georgy Tarasov on Vimeo.
    Short Movie about Incredible journey through Son Doong — largest cave on Earth.

    For all questions and proposals - hello@cameraptor.com

    More info — http://cameraptor.com/sondong

    instagram.com/georgyegor/
    georgytarasov@gmail.com

    Camera: Sony a7s2 and mavic
    Drone: DJI Mavic

    At over 5km long, with sections reaching up to 200m tall and 150m wide, Hang Son Doong is large enough to house an entire New York City block, complete with 40 story skyscrapers. With a total measured volume of 38.5 million cubic metres, this comfortably surpasses Deer Cave in Malaysia, which was considered to be the previous record holder. Stalagmites up to 80m high have also been surveyed, the tallest ever encountered.

    Less people have seen the inside of Hang Son Doong than have stood on the summit of Mount Everest.

    MUSIC:
    River by ZACHARY DAVID
    Hovard Shoe - Song of the Lonely Mountain

    DIRECTOR — Georgy Tarasov
    PRODUCER — VOOGIE.pro
    COLORIST — Regie
    VFX ARTIST — Sergey Mykhailov
    VOICEOVER — Ernest Rudyak
    SOUND EDITOR — Nikita Bochkov
    MOTION DESIGNER — Alexey Fedorov
    EXECUTIVE PRODUCTION MANAGER — Ilya Buzanov

    STARRING:

    Andrew Ilitchev
    Artem Yunusov
    Ernest Rudyak
    Dmitry Dyldin


    Sunday, 22 April 2018

    Added Resource Links to sidebar

    Hi!

    Been making a couple of small changes to the website, mainly some minor edits to the about page... but also I have added a list of links to Game Development, Traditional Art and CG Art Resources on the right sidebar.



    Have a look through! Some are pretty well known, others less so... all of them can be pretty useful for artists/developers of any skill level.

    ABSORB ALL THE KNOWLEDGE!!

    I_DO_TRI Studio Website, Twitter and Official Discord Links and new portfolio website link

    If you have been following my stuff for a while you may have noticed that I have been trying to kickstart an Indie Games Studio with my friend Amber Jamieson. We are currently in the midst of planning things for it (we have something lined up for later in the year) Anyways, we have an official site, community discord and a twitter page that was created for our previous demo projects. I have linked them too under 'Official Sites' in the sidebar, but here are the links below for you, feel free to join the discord and say hi!




    Also I have updated my portfolio link in the sidebar... for some reason I hadn't changed it to the new portfolio site: https://jamesbroderick.portfoliobox.net/


    I will continue to update the links in the sidebar over time to keep them relevant and interesting. Also, if you feel like it comment if you have any suggestions about anything else I could add!

    See you next time,
    James. :)

    Saturday, 21 April 2018

    Art Dump - Gouache Life Drawings + Plein Air

    Just a collection of Gouache Paintings done over the last few weeks, in order of painting. The first couple are from Life Drawing and the last one I did a few days ago when the we had our first bit of sun all year. 



    Painting done at the bottom of my street. I really want to do a lot more of these! I have a little Moleskine book I want to fill up. :)


    -James


    Rusty Springs progress! - Environment Art Process

    Hi again!

    I've been busy tinkering away on the springs environment inside Unreal Engine. I have some other paintings from Life Drawing too and some other random things but I will cover all of those in another post. :)

    For the environment, progress has been steady. I can only really work on it on certain days during the week but I'm gradually figuring out how I'm actually going to construct it.

    Setting up the scene


    The last update I provided was a basic introduction to the concept for the scene, I have since fleshed out the design, working specifically on developing the mood of the overall scene. For this I created a 3d blockout (greybox, whitebox, blockmesh, whatever you want to call it) which I then painted over the top of in Photoshop.

    Blockout of the scene, created some simple placeholder meshes just to establish all the key forms. 

    As you can see above I also got distracted and created some basic water/waterfall shaders... I really like making water materials ok!  It helped anyway, since I would have a good idea where the water in the scene would be and how it would react to light.

    I also added some volumetric fog. For context: in a cave with a spring (and lots of water) there would be a lot of moisture in the air, the volumetric fog helps to simulate this. The values of the fog had to be tweaked quite a bit (and it's still being tweaked now) It really helped to add a lot of depth to the scene as without it the scene lacks the atmosphere an environment like this should have. 

    Figuring out the best composition


    From this point onwards it was a process of going back and forth between 2d and 3d, figuring out the details of the composition and what shots I wanted to focus on. 

    I taken the shot above into Photoshop and analysed it's composition so I could make some changes to improve it. The main thing that the image needed was string guiding lines, which could be exaggerated with the flowing water. I also doodled in some pipes in the top right corner of the image to reinforce some of those guiding lines, making the composition even stronger.

    I received a piece of feedback about the figure being a bit too hard to see, so I reduced the fog a tad and changed some of the background values to compensate for this.


    After doing this however, I happened upon a more zoomed in shot of the figure which I liked quite a lot; the main reason I thought it was better was because I could create a lot more detail for a more zoomed in scene. I could focus on the more zoomed in shot and then later if I feel like it, I could expand the scope of the project to include the shot above.

    Closer, zoomed in shot of the statue/figure. I prefer this a lot to start with, as I can potentially spend a lot more time adding details upon details to this smaller area.
    Another shot from a slightly lower angle. Concerning the water materials: I will go into those properly in their own post at some point, when they are closer to being done, as otherwise this post might stretch on a bit too far. :)


    Main 'Mood' Concept

    Before actually moving onto painting over the shot straightaway, I first created another little reference board containing some more style references for different things I would like to include. This was more for the actual style of the painting rather than then content as much, although I did have a few references for how I could like the metal and rocks to look and such.



    Some notes about what I wanted from the scene at this point:
    • The rocks need to look quite chunky, yet sort of soft, this would be natural anyway because of water erosion and the like.
    • Moss and layers of foliage would be extremely important, especially close to the water.
    • The image in the bottom left of the reference board seems to glisten because of the water, the moss and rocks also blend in quite nicely with the water and everything else. It just feels natural and pleasant, a feeling that should be conveyed as much as possible.
    Anyway, here was my first work-in-progress on the painting: 


    I started this by replicating the process used for some Gouache paintings (the medium used for the background paintings in the Studio Ghiblio animations) This process was to lay down a wash of a warm, saturated colour, that could bleed through subsequent overpaints, using this technique allowed me to paint blues and greens (which can look sickly if done wrong) that still appear to have some warmth and glow due to some increased colour contrast.

    The iteration of the image above needed some work, primarily on the figure. The original intention was to use a rusted metal on the figure (The rusted horse sculpture from the reference board was being used as the inspiration) but using this made the figure look way too orange. A different look was needed.


    Process of the painting - roughly shows the buildup of layers from the initial blockout, to the colour underpainting, to the background paint and then finally the figure and image correction.

    The image was posted online to get critique: to arty friends, to non-arty friends and to some discord art critique threads. Everybody I talked to agreed with me in saying that the figure was too orange. I was recommended to look more at how metals and rust are done in the Ghibli work's themselves. Here is a list of some of the other feedback I received:

    • Rust is too even, try to vary the density of it and localise it more to the areas where it will be more likely to appear. (Around joints, closer to water surfaces. Also rust depends on the minerals present in the water and the type of metal, so more research would have to be done to make it look correct.
    • Maybe mix stone and metal for the statue, would give it more defined look.
    • Was encouraged to look at the environment design for the Anime film: Origin - Spirits of the Past, was pretty interesting and has some very lovely painted metal in the backgrounds.
    • Increase the canvas size at the bottom to give the image a bit more breathing room.
    • The figure doesn't have too much of a purpose, the 'story' of the figure needs to be thought about so I can work out the design better. 
    The last one is probably the most important of all the points, as otherwise the entire image does not have a point. I had a rough idea of what I wanted when I started the project but more needs to be done to make sense everything. 

    To contextualize the Figure I created some notes on the backstory, the whole environment plan is in the Evernote link but essentially I want the statue to act as sort of guardian of a water temple below, keeping an eye on the environment incase anybody uninvited try and break in.

    Evernote environment planning: Linky Link



    'Final' Painting - this is as much as I'm willing to do with the painting at this stage, as I want to alter the design of the figure quite a bit. It would be easier to iterate on the figure in it's own series of images, rather than get distracted by the rest of the mood painting.

    3D Work


    After this I began the concept of fleshing out some of the background assets and blocking in some of the main rock forms in more detail. For this I used Zbrush to sculpt, XNormal for baking and 3d coat for texturing (Which I just bought properly) 

    PLUS! I got some awesome links to tutorials for rock sculpting from my friends: Zhane James-Marshall and Dan Burgess which helped a lot hammer down my process. Listed them below for peoples convenience:

    Below is the sculpted rock, baked out in Xnormal along with a screenshot of the rocks placed into the scene.

    Rock Sculpt, baked out and displayed in Unreal Engine.
    Rocks placed in scene, some extra mesh work has also been done on the base. But all the rocks in this scene now are the sculpted ones.
    At this stage some different/smaller rocks need to be added to break up some of these shapes, because some parts of the image are starting to look a bit too chunky. First though, I wanted to try some texturing and another lighting pass, so I can bring the general feel of the environment closer to what it is in my concept image. 

    It's all about the broad strokes! :D

    Then I painted the rock in 3d coat as a bit of a texturing test. Will probably go back and cover the texturing process in another post. But I ended up with this to start with:


    Current Stage!

    And this is the current state of the scene! I recorded it in OBS because I added some basic environmental sounds nicked from the Effects Cave and the Reflections example projects created by Epic Games to just make it feel a bit more immersive.



    It's starting to come together quite well now, just need to keep chugging along! :D

    Feel free to leave feedback/ask me any questions about my work in the blog comments or you can email me. :) (Email is in my contact page.)

    Byeeeeee.

    Wednesday, 14 March 2018

    New 3d project - Rusty Springs UE4 Environment

    Hi people!

    At the start of the week I had a massive urge to start a new 3d project, this came after a discussion with a student about a project idea of theirs based around some ruins. She is doing a level based around some roman ruins, with a tree focal point, with the scene illuminated in moonlight. It sounded pretty interesting, and I managed to get her flicking through the library books in order to make the idea even better. Teaching things!

    Anyway, the idea sounded cool, and it made me want to create a similar kind of environment involving ruins, moss and an excuse to include some sparkly, super-jazzy water shaders. So I'm creating a small scene based around some springs.




    I plan to include some mechanical elements (because you know I love that shit) which I imagined would end up being the focal point in some way. My thoughts were that I could tie these elements in quite nicely by having them all overgrown and covered in rust. These extra elements would add a nice layer of uniqueness to the level; meaning that it doesn't end up as just an environment with ruins and has a bit more interest and intrigue.

    Why am I starting this project now, despite the fact that I had 20 million other projects I have mentioned I am working on?


    Good question. I had the art urge so I had to obey it.

    No, seriously though, I felt like the little 'mini-projects' I was working on wasn't really working for me. I was having a go at modelling and texturing random assets but I never end up finishing them, I realized that the main reason for this is that there was no artistic drive or want to finish them. I prefer working on actual scenes that give off a nice feeling, that is something I don't think I could communicate by working on little stylized lanterns.

    My plan is to fold some of my side projects into this one as part of the process, then it would feel like I am actually doing them for a reason: To develop these processes as part of my style.

    This includes things like:

    •  Cel shading (which I was doing a bit on last week or so) This could be good for animated parts of the environment, sort of like old animations where the animated cels can be easily separated from the background. I have seen this called the Scooby Doo effect before, would be a really great thing to capture the feel of traditional animation.
    • Bone driven material animation - could be useful for certain animation effects on the focal point, not sure yet. 
    • Character modelling - Need to relearn a bit for the focal point, which I will go into detail about in a minute. Might need to learn how to pose a character model correctly too, hopefully it shouldn't be too difficult.
    • Handpainted textures - I am trying to work on developing a hand-painted style that is as close to animation quality as possible, might take quite a bit of work to be up to my standard, but this project gives a lot of scope for adding really nice details like one could find in a Studio Ghibli background painting.
    • Water Shader - This is something i have come back to now and again, I love making them, probably one of the things I enjoy tinkering with just so I can get it perfect, in this scene it will be a major focus. The water should look so good that someone would just want to drink it when seeing it. :D
    • Foliage - This will probably take around the most work in the level, and it will be a large part of the scene, I want the foliage to tie into the rest of the scene as seamlessly as possible whilst still retaining the handpainted look. The foliage should flow straight into the forms it is covering, making it feel like the machinery and the nature of the scene are in unison. Using 3dcoat to texture unique pieces of foliage will be key to making this environment seem real.
    Overall the plan is to capture the feeling of a Studio Ghibli background painting, but to create a final environment full of life. So by the end I should have a nicely composed final scene, with lighting, FX, sounds and probably a little sequencer animation. :)




    Ideas and Research


    The process on this project just started by looking through Pinterest, Google and my hard drives to find cool stuff to feed my brain. I gathered a from a lot of different sources; images of rusted old machinery, roman ruins, gardens, pond designs, water animations, master paintings (for colour and style reference) and photography.

    I will still continue to research over the course of the project, so I can refine the look even more, this just gives me a good base to work from for initial drawings.

    Below is my Pinterest board I created:



    Moodboard

    My first moodboard included key images which I have been looking at and key things I need to consider whilst creating the scene, like lighting, architecture, focal point, nature, and style reference. I also listed the key things I am looking for in the scene so I can keep checking to see if I am staying focused on the right theme over the course of the project. When I create the 3d blockout I will refine the art direction even more, being more strict with the design decisions I make.


    First concepts

    The first concepting stage taken the form of just doodling around in my sketchbook, trying out compositions and weird mechanical forms. I wanted a mechanical piece as my focus of the scene, but as I kept drawing I realised I wanted to evoke the feeling of some of the statues on my mood-board, so I gave it a face, before I knew it then centrepiece was more like a statue or monument than a strictly functional piece of machinery. 

    Original sketch of focal point statue-monument-thing. The idea with it as the statue 'cries' into a little pool which is collected around the head, this little pool of water spills into the one below, creating a tiny little waterfall. Also, this little pool could also act as a bird bath or something, with plenty of plants growing in it. The staute should appear to be the source of the life in the scene, I think that could be really interesting. This page was great for figuring out the kind of features the focal point should include, and identifying what things I really like. <3
    The main catalyst for this design was this image of a crying statue above, which I thought I could utilise quite well within the context of this environment, the fountain could be fed by mechanical pipes going into the statue's head.

    Crying Statue Fountain - Second Life - https://marketplace.secondlife.com/p/crying-woman-fountain-mesh-7-prim-new/9207664
    The main design in my sketchbook I liked enough that I decided to move it forward into the next stage: just plotting some colour onto it. I scanned the page (taken a photo in my case) and painted under the lines in Photoshop, just to show what the piece would look like with some basic colour dropped onto it. I wanted to have the oranges and reds of the rust blend quite nicely with the colours of the foliage, so I tried to work around the colour wheel harmonising the colours with each other where I could. This was a little tricky because of my colour blindness, but I think I'm getting slightly better at it.

    WIP Colour pass of the previous sketch, I will be defining this painting a bit more, but the design will change a bit when it comes to blocking it out in 3d and then creating another paintover. This was more to get an idea on how it might look.
    More work will be done on this concept before moving to the next stage, which will be a simple 3d blockout so I can then create a more detailed concept image of the scene.

    Project Process

    For this project I aim to jump between 2d And 3d a lot as I refine the image and make it as visually pleasing as possible. Basically, a lot of paintovers and feedback sessions! This will extend to the texturing stage too, which will involve using 3dcoat to texture the scene, this will feel like more of a natural progression of all the 2d art I have created before, so the concepts should end up translating into 3d quite well. 

    • Sketchbook Doodles
    • Colour image of focal point design
    • 3d blockout of scene
    • Main scene concepting
    • Style Refinement - Defining what the water, mist and other effects look like in the scene
    • Main scene building
    • Base light and colour pass
    • Define major silohuettes
    • Model focal point
    • Rocks
    • Base Water and Foliage
    • Other assets
    • Model and texture polish pass
    • FX - Drips, trickling water, light beams, mist, birds.
    • Colour Correction and detail Post Process Pass
    • OPTIONAL Sounds and ambience
    • OPTIONAL Short Cutscene made in sequencer

    Anyway, that is all for now, more in the week after I have done more stuff! Should be a 3d blockout in the next post. :)

    See you next time, 
    -James.

    Tuesday, 13 March 2018

    Life Drawing - How I started painting with Gouache!

    Hey peeps, I have still been busy marking over the last couple of weeks so haven't had a load of time to write. Now though I have been advised to not do any more work at home, so I have now a little more free time to make stuff.

    Last week I brought a new Gouache paint set made by Caran D'Ache, what is great about this set is that it is pans instead of tubes. So it makes it very easy for carrying about and doing some paints outside! This set is really great, and the colours a very high quality and have a silky smooth texture to them.

    Caran D'Ache Gouache Pan Set of 15 - comes with a tube of white Gouache and a brush.:)
    Set opened up, also some little mini-paintings that I was messing around with. I ADORE the matte finish that you get with Gouache, it's just the best. 

    As soon as the set arrived I had to do some colour charts, so I had a little go in my large PaintOn pad!

    Some quick colour swatches I worked on, I forgot to do the red to yellow blend though so I need to go back and finish that section. Thinning out the Gouache doesn't really look amazing, I think the better option is to mix with white for thinning, problem with that is the colour will loose it's vibrancy even more.

    I used the set last week to do some Gouache paintings for life drawing. This time the focus of my practise was on developing colour and mixing skills, so I spent the whole session working on developing longer pieces rather than doing quick sketches.

    Here is one of the pieces I worked on:


    I started with a thin wash of orange (I don't know what the actual pigment is for these colours, I couldn't find any information on it and I'm not an experienced enough painter to guess.) Anyways, this wash acted as a good base to paint onto, as when I start putting cooler shades of colour in, some of the warm background tones should peek through a little. 

    I kept my palette fairly simple: I only used an orange, a pinkish-red colour, a bit of yellow and a white, which I added more of as I continued the painting, making more opaque layers. This meant that I could focus on seeing what I could get from just those colours, this also helped keep the painting from going muddy too. 

    Also limiting the palette helped my distinguish the colours better for my colourblindness, if I had too much going on, then I probably wouldn't be able to tell the difference between all the blues and purples and browns and dark greens. :S

    One thing I need to sort out if I do more of these kinds of paintings is to get more white Gouache, the set I have comes with a little tube but mine seems to be running out really quick. I'm going to have to stock up on that a lot in order to get anywhere with doing a load of these paintings.

    More life drawing this Thursday, I will be doing more paintings so I will upload those when they are done. :)

    -James