My main inspiration for this unit. Please listen to it while you go over this webpage.
Silhouettes
Set #01
The GIF inserted above was created to help visualise the process I took in sketching these silhouettes and to also condense the process down into a simple step-by-step demonstration. I began with some very faint and rough sketches of top-down views for a starship, looking across the references I included in my research while also exploring new shapes, and then refined them one by one until I had a silhouette that made sense. However, as the development always does, I’m left with a lot of designs I’m unhappy with so I’ll move onto creating a second set for further variation. From this first collection, my favourites are A1, B2, D3, and E3. As you can see, all of the aforementioned shapes portray a sleek and delicate frame, which is general built for agility and speed. Whatever design I settle on will need to be capable of warping at the speed of light. While visual demonstrations are very useful, it’s difficult to understand what the developer is truly thinking without some discussion on the topic. Therefore, I should note here that: A2 and D1 are both inspired by Star Wars aircraft; A3 and E2 are inspired by Bungie’s Halo 3; A1 and C3 appear to be fighter jets; B1 and D2 heavily reference Wipeout 3; and B3 is the odd one out because it’s made of several individual, floating parts (I hate it).
Set #02
Although there’s not too much to discuss about this same repeated process, it should be noted that I’m not a fan of any of these silhouettes so far. Michael also pointed out that Set #01 D2 is almost identical to Set #02 D1. Most of these new designs are too wide or too bulky in appearance, which is something I should start actively avoiding; but despite being wide, they could also be flat, which works in their favour. The bottom row have been designed so that their ‘wings’ fold out, but I see no practical reason for this being so. A1’s roundness was taken from the Prophet’s Sin in Halo 3 – I’d like a healthy balance between angular and soft styles. These illustrations are the first bodies of work that have included Photoshop’s symmetry feature as part of the process, and it has really improved my 2D work. This entire sequence begins with a draft sketch or very basic compound shape; I then increase the brush size and apply a vertical line of symmetry in the place I feel it most appropriate; finally, I use the shift key feature for drawing straight lines to produce a shape that makes logical sense; I then go back to add smaller parts that may represent mounted weaponry or engines to create a more diverse and varied design.
Set #03
Although this set may be unfinished, it does contain some of my absolute favourite designs. I feel the extra detail overlayed on designs A2, B2 really add some depth and extra information to the illustration. Once I narrow down my top 4 silhouettes, I’ll make sure to implement this new style on the next layer while experimenting with height and depth. Because I’d like to move on without properly finishing this set, the designs are a lot larger and slightly out of place but I don’t believe that’s an issue for now. At this point, I’m just trying to up my word count and fill out the spaces underneath these GIFs.
Concepts
Concept #01
For this concept, I took the majority of Set #03 D1 and added a curvy spoiler to the back, inspired by Aaron de Leon’s contribution to Destiny 2, referenced prior to the ideas generation stage. As of now, I feel this design ends too abruptly before the spoiler and so it needs some work before I add it to my top 4. The smaller brush lines are there to provide some more information to create a sense of depth and imply where grills, jet details, and paneling will be seen toward the end. Lastly, I used a kid-like block colour palette to help identify different identical parts. I believe the body of the ship could use some extension that fits under the spoilers to make the design flow more, but I’m struggling to draw that so I’ll be leaving it for the blockout stages.
The Bigger Picture
Although the jumpship should be the scene’s main focus, the other assets placed around it are just as important. The quick labelled sketch inserted above depicts the ship floating over a segment of a specific planet, with a large star in the background. In an ideal world, with more time and a different pathway chosen, I’d add my own custom user interface to fit the overall aesthetic of the environment. The main purpose of this sketch is to emphasise the importance of a neutral and centered environment, as well as the significance of the outer glow of the back-lit planet. Below, I’ve attached a few colour palettes I’d like to play around with when considering which planets/satellites/bodies I’d like to feature, including Mars, Titan, and an asteroid belt.
Textures
Mars
During task 3’s research stage, I made sure to discuss and compare a couple of great resources for planet related textures. However, after finding the resolution too low, I faced a select few options: use third-party software to up the resolution of each image, choose a different set of planets, or a new source of information. After some very cursory delving, I found that NASA supplies their own high resolution textures within a huge database of texture maps, 3D models, kit bashes, etc – here. Although the normal map doesn’t match up with the base colour very well, it doesn’t seem to really matter. As expressed in the proposal, this scene will follow a small jumpship travelling from point A to point B with a jump/warp effect in the middle. I’ve chosen Mars to be my point A because I’d like to create a warm scene with warm colours that’ll transition to a cold scene with cool colours, such as an astroid belt/nebula or Uranus.
Standard Clouds Alpha
By now, I know that I want each destination to be made up of several layers, to create a more realistic and dynamic effect. Each layer will pan independently in their own direction and at their own speed. It’s a simple trick that should add some flare to the scene, and really help it come together. The image included above is an example of a standard atmospheric cloud formation over Earth. I’ll be scouring various sites for similar images that are royalty free, as recreating them by hand seems to be a pointless and tiresome task. I’ll then pan this texture around a sphere at a slightly faster speed than the planet’s initial rotation, hopefully creating a subtle effect.
Setting Up Mars
Here I’ve set up this blueprint so that I can reuse it on other destinations, using similar spheres with each component. Because the encasing atmosphere and cloud layers are only partially visible, I used the default sphere mesh to represent them; even though this mesh is too low poly to create a high quality finish inside the scene, its not very visible once in the viewport so there’s no point in wasting triangles on it. However, I did create a custom sphere with 100 segments and 9,000 triangles for the planet’s surface. This decision took some testing before it was made, but the subtle difference really makes the result look more realistic and natural. Below is a comparison between the two. Because there aren’t many meshes present at one time, its safe to spend a lot of the triangle count on this asset. It’s difficult to really see in the GIF above but the planet rotates ever so slowly in the opposite direction to the clouds – this is far more prevalent in the viewport, once the scale is more accurate. Finally, I added the atmosphere, which is essentially one uniform colour with a low opacity to give the planet a glow that should help it blend with the rest of the level.
Planet Material
Even though I only plan to create point A and point B, one being a planet while the other is a miscellaneous celestial body, I set up my planet’s material so that I could reuse it for other locations – i.e. one instance per planet. I achieved this by including some exposed parameters. For example, the base colour and normal maps can be switched out for other textures when needed. To add some variation and more control over the material, I also introduced a hue shift that can be adjusted according to the planet’s colour scheme. After some experimenting, I found that multiplying each base colour texture with white brightened the planet and made it seem more at home within the scene. Finally, I added a panner with a tiny speed value in one axis to make the planet look like its rotating slowly.
Clouds Material
This is the second time I’ve writing this section so please bear with me here. The clouds material follows the same process as the planet’s surface. The exposed texture mask is panned slightly quicker than the planet, in 2 axis. The dev. can then control the density of the cloud formations using the contrast. Similarly, the dev. can also control the overall opacity of the clouds layer using a slider, which is clamped between values 0 and 1 as not to slip into any visual bugs. This sequence makes up the opacity mask. The base colour is simply adjusted using a ParamRGBA. This setup allows for a nice range of customization and variation across planets. I’m not going to cover the atmosphere material because there’s not enough to discuss, having consisted of only a custom base colour and opacity*fresnel. To improve upon both the planet and clouds material, I should also expose the panning speeds as these could vary greatly across planets.
Space Skybox
This project was created using a completely empty template without a skybox or any other asset, so it was entirely and infinitely black for a long while. To create the skybox, I made a basic sphere with reversed normals so that the triangles faced inwards as a canvas for the sky texture. For now, the nebula and stars remain on the same texture but I’d personally prefer them to be separate so I can move them around independently, much like the layers of each planet. Ideally, the nebula would be made out of a particle system that flows from left to right and fades in and out – but I’m not very experienced in particle systems, so I’ll leave something like that until the last minute.
Skybox Material
I’m not sure where I picked it up (maybe skipping through tutorials for future references) but I know that skyboxes are unlit materials made up of only emissive colour, so that the lighting inside the scene doesn’t affect the skybox itself. So again, I begin with an interchangeable texture map and implement a simple colour shift, then I multiply the result by custom value to brighten or darken the sky. For the example in the GIF above, I’ve used the following image and adjusted the hue and brightness until I was satisfied with the scene’s colour scheme and warm feel. At this point, I’m unhappy with the texture’s large stars, overall low resolution, and dependent nebula – but I can change this at a later date.
Stars
This is something that I initially really struggled with. There was no light in the scene whatsoever, so I couldn’t see the skybox I was working inside the scene itself. I used a temporary and extreme point light to see the changes I was making during the previous section. Again, I took the relevant textures from NASA, but these weren’t reall necessary because the brightness of the emissions meant that nobody could see them anyway. I followed the tutorial linked above to begin the creation of The Sun. Before I settled on Mars being point A, I experimented with the hue shifts and other more alien stars as direct light sources; I may still do this for the final destination.
Star Material
The star material is similar to the rest in terms of sequence, but is instead made up of 2 copies of the same texture that are panned independently and multiplied; this was something I just wanted to experiment with and has absolutely no effect on the scene itself, due to the sheer brightness of the stars. As you can see in the screenshot of this instance, the emissive colour is multiplied by an extremely large value. Again, I play with the hue and saturation of the emissive colour to create a result I’m happy with. I have no idea how to work UE’s cameras or any of the animation sequence features but here is a preview of what I’d like the first scene to look like, via a cine camera actor with a zoom of 28mm. This is a section of UE I’ll have to learn more about over the course of this unit. I’d like to up the res of Mars’ normal map before I move on but I can’t seem to find one bigger than 1k.
Starting Over
After reviewing some footage from Destiny 2, I decided that my work so far wasn’t good enough and so I started over. In this version, I’ll be paying more attention to my reference material. For example, I find that keeping the planet’s surface and clouds material on completely separate layers/meshes looks extremely unrealistic, so I merged them. I also changed the camera position to be more neutral, with no large star visible. This time around, I’ve used textures from Solar System Scope.
While skimming through the material graphs, you may find that each texture is attached to a TextCoords node that tiles each texture by 2. This is poor practice because these textures are warped to fit the pinching on a sphere, but it was the only way I could make the textures look better without upping the res beyond 8k; therefore, I had ensure none of this warping was visible to the player/viewer.
Planet Material
Using the same idea of switching out planet surface textures and cloud masks, I create a more advanced material that essentially merges the several layers of the original version into one graph. One the second slide, toward the top of the graph, you can see the similar process of multiplying the clouds by an expose RGB parameter and then again into a scalar parameter that allows the dev. to choose how much of the clouds is visible per instance. Out of that section, the final part involves adding the clouds to the planet’s surface; again, the clouds pans slightly quicker than the planet’s surface. In addition to this initial sequence, we have a fresnel that creates an inner glow as if a large star is lighting the planet from behind. And finally, my favourite part involves selecting a portion of the mesh to hide – this is determined by the colour that represents the direct light’s direction. This segment is clamped between 0 and 1 to limit the greyscale between black and white – this now becomes the opacity map. In the examples above, the material blending and lighting modes are set to translucent and unlit to enable the use of opacity and to ensure the material isn’t affected by lighting. However, in the scene itself, the main planet in view is set to default properties to prevent stars from passing through the object, whereas smaller bodies in the distance keep these properties. Mars and the Earth are used as working examples in the slideshow above.
Mars Instance Parameters
There are 9 customization options available from this material graph, most of which are used to adjust the initial textures, fresnel effect, and light direction. Because Mars doesn’t have an atmosphere that supports clouds, I’ve set the cloud amount to 0. The overall brightness is controlled by the Glow Crank, while the fresnel brightness is controlled by the Atmosphere Strength. Likewise, the thickness of the fresnel is controlled by the Fresnel Strength. The Atmosphere Colour determines the colour of the fresnel and the Cloud Colour does exactly what it says on the tin. Finally, the Light Direction XYZ is represented by the RGB values and determines how much of the planet is visible at what direction.
Outer Glow
The fresnel method creates a nice inner glow across the planet’s surface, but a subtle outer glow that disperses the further out it travels should reduce the sharp contrast between the planet and the empty space around it. It should also help emphasise the extreme light coming from behind the body. I’ve tried adding an additional fresnel to a new mesh that’s slightly larger than the planet, but that doesn’t create the dispersing effect I’m looking for, but it does help crisp-en up the original inner glow (so I kept it).
After creating a discussion on the Unreal Engine sub-Reddit, it was suggested to me that I use a larger sphere with inverted normals, to which I’d apply a regular fresnel with an intense emissive. I felt I should have figured this out myself, but being able to ask other members of the community has really sped up the process.
Space Skybox
This thread in the UE4 forums includes an interesting suggestion I experimented with to make the stars in the skybox ‘twinkle’, but the image linked is no longer available so I just had to play with the concept until I found something that kind of worked – this is something I will work on further until I’m happy with it. “You could lerp (or multiply) the stars with a cloud texture that scrolls very slowly” wasn’t what I ended up doing but was the sole reason I tried the process I took. The idea is simple: pan a mask over the stars texture to change the brightness of each star over time. Below is a screenshot of the material graph so far, using a simpler stars texture and reusing Earth’s cloud mask.
Even though my final result isn’t as nice as I had hoped for, it’s still a huge improvement from my initial attempt. I’m not going to explain the post processing volume settings because they’re quite obvious and were only experimental, but I did add a lens flare, some lens dirt, and some extra bloom – this fills out the details so that the player isn’t only staring at a rotating textured sphere inside a larger rotating textured sphere.
Jump/Warp
The video inserted above, by HÅRU, is the only tutorial on this subject that I could find, both free and paid for. However, it’s not the kind of effect I’m trying to achieve so instead, I looked through Epic’s marketplace for a small, cheap pack I could break down and learn from – ‘Warp Effect’ by NadirVFX was in the sale so I bought it and opened it up to look under the hood to see how to go about recreating it as my own independent piece of work. Unfortunately, I really struggled to understand what was going on so I sought some help from Colin and it wasn’t long before I could identify the components that make up the final result.
Material
The image included above is a screenshot of the green warp material graph which I will try my best to break down and explain in this section of task 4, with the assistance of the highlighted components below. Identified in the first image is the setup for the UV coordinates of both textures. The two variables are appended to create 2 channels – U and V. This is fed directly into the panner and is used to emphasise variation between warps. Next, the developer has created 4 individual values using and splitting an RGBA. Channels 1&2 and 3&4 are used to represent the speed of each axis, U&V, per texture; it’s simply a neat and tidy method of exposing 4 independent variables. Thirdly, U&V for each texture is appended to create another 2-channel entity. This joint value is now multiplied with a variable that controls the overall speed of the panner in both axis; this final value is fed into the speed input for the panner. Next, the two moving textures are combined through multiplication. The power parameter makes the animated material lighter and then the final multiply washes out the mid-greys. The overall opacity is a gradient that fades from white to black as it spreads out toward the camera. Then the opacity of the material can be adjusted again through power and multiplication, essentially removing any unused black space in the two textures. Lastly, the very simple job of overlaying an emissive colour and multiplying it to adjust the brightness afterward.
When I created my own version, I made sure not to copy the original as much as possible. However, that was a super tricky task because I’m not knowledgeable enough in this subject to improve upon this man’s work, but I also don’t want to create something that ultimately looks worse. Because this graph works so well, I didn’t change too much. Most of the difference comes from the different noises I experimented with and the RGBA values, so I will give credit where credit is due when it comes to publishing my work online. (I might create a version that uses static values for UV coordinate variation and speed. I think it’s rather unnecessary to have such a broad range of adaptability in a material I’m only ging to use for one asset.) For now though, here is a slideshow of the results of each noise I tried. I’ve chosen to only show still images as these GIFs become to big to load on wordpress webpages, so it’s difficult to demonstrate their full potential. Please use your imagination for now. All of these material instances are displayed on a custom cone-like mesh to create a ‘tunnel vision’ type effect. Eventually, I’ll have an actor blueprint that consists of several cone mesh layers, each with a material instance that is made up of a different speed, colour, and noise, to create a layered effect – please refer to the bottom of my specific research section for visual aid.
For these screenshots, and the final product, I’ve used a custom cone-like mesh. I utilised the soft selection feature in 3dsmax to produce a clean, non-linear curve from one end to the other. I then flipped the normals of every face so that a one-sided material will face the camera when the ship flies through the center. I can scale this to produce the effect I want inside the engine so it’s not something I have to be concerned about at this stage.
Particle System
In addition to the layered warp effects I’ll have overlapped in my actor’s blueprint, I’d also like a few particle systems in there too. Similar to the material effect, I’ll also have a few instances of the same particle system that will consist of different colours and speeds. Here, I will document how I’ll go about creating these particle systems and how I’ll be implementing them into the design.
This ‘Introduction to Particle Systems’ series by Epic Games, here, teaches the fundamental theory behind particle effects and covers the practical uses of these visual effects inside of Unreal Engine 4. The playlist begins by introducing the viewer to a range of vocabulary which developers should use when referring to the software’s user interface and particle components, including components such as ‘cascade’, ’emitter actor’, ‘module’, ‘distributions’. There are 5 data types: CPU Sprite, GPU Sprite, Mesh, Beam, Ribbon, and AnimTrail; all of which are included in the gallery below, in that order. As you can see, the results produce what the label implies. However, the first two can be a little unclear. Both the CPU and GPU sprite emitters spawn x amount of sprites in a space every tick, however, each are processed on their respective pieces of hardware. Therefore, when creating complex particle systems, with more sprites per tick, or generated movement, it’s best to utilise the GPU data type.
From my new experience with particle systems, I have learnt that I never want to touch them ever again. I will not be revisiting this topic in my final major project, unless it’s a last-minute addition to my scene, simply to serve as a small amount of ol’ razzle dazzle. Seeing as I won’t be producing a jumpship in the final piece for this unit, I’ve decided to go ahead and implement a particle system into the scene. Here I’ll be overlapping 3 instances of the same blueprint setup, to produce the end result seen toward the bottom of this section of task 4. Each blueprint will be made up of their essential components, captured in the screenshot below.
As you can see, the components consist of 3 static meshes, 2 of which are the same custom, curved cone featured prior, and the last being the basic, stock sphere to block up the far end. An instance of the animated warp material explained in a previous section is applied to the thin cone and a blank, uniform colour is applied to the wider, background cone – I’ll be experimenting with using the standard space skybox material to blend the animation with the original scene. In addition, the blueprint also includes the stars particle system and the camera the player will be switched to during transition; to place the camera in the best position, I consistently referred to the preview window in the scene editor. Once I was happy with the positioning of each component in the viewport, I created 2 duplicates and switched out their material instances, then overlayed them until I created a result I was satisfied with. I was able to manipulate the weight of each colour by experimenting with material speeds and playing with the scale of the cones. I think this is where I will end my practical work on this unit.
Level 3 Year 2 