App Promotion video, final tweaks and adjustments

In addition to the previous short teaser trailer of what to expect in regard to the overall context of the TrinityVR app, was the creation of an in app promotion video.  Enda originally recorded the in app footage from his smartphone, however it proved to capture the handshake.  On my recommendation he screen recorded it in Unity for smooth mouse movement that works when viewed in the confines of the standard 16:9 YouTube aspect ratio that viewers are accustomed to.

The video showcases the 360 photo and video scenes and transitions including the points of interests (known as POIs) including 360 photo to video transitions, the gallery location icons, 3D modelling, green screen participants and an audio track that features prominently while touring Trinity College Dublin in virtual reality.  It is a taster of what to expect rather than an exhaustive checklist of the many features.  For instance it omits the narration and story voices, ambient sounds and soundtrack.  With this, it is intended to entice viewers to try the immersive app in 360 degree virtual reality as it is intended.  The intro and outros include the branding of the campanile logo to market the app

 

The flexibility of the Android version logo led (unlike Apple’s fixed rounded square icon) to the collective decision to make it round.  It represents the 360 degree spherical imagery commonly referred to as a photosphere.  The black loading screens are fitted with a loading screen icon.  The potential for confusion on a black screen required an indicator for the user.  Hailee created a monotone version and I refined it to a more defined three tones of black, grey and white for the arches with a gradient and opaque version.

 

 

Last, but not least,  I exported the final versions of all of the 360 videos with fade adjustments between loading screens due to Unity fading and the loading screen.  All of the files are compressed with Handbrake with the slowest encoding setting to optimise the compression quality to file size ratio.  The quality difference of the files is negligible and a necessary payoff to optimise the file size of the smartphone app.

Stills, designs, trailers and further visuals

The TrinityVR stills were found to be softer than acceptable in the app in VR mode.  The stills were originally exported to be the same resolution as the video which is restricted to 1920x960px, however when viewed with time to inspect the scene was found to be too low and not reaching the full capabilities of the original stills.  I then exported them at full resolution of 5376x2688px which Unity processes into a 2K resolution image at 2048px.  Prior to this, Unity reduced the resolution of the 960px image below the appropriate viewing capabilities of  VR.

 

The home circle placeholder consisting of a plain blue graphic with a black outline which was rather bulky and lacked the character and spirit of Trinity College in the visual sense.  From this I researched images for circular geometry from my collection of photographs taken on campus.  I selected a roundel stone and the clock from the Museum Building, and the grating from the chapel floor.  I  made progressive darkening adjustments because the scenes in app have a darker image especially on the ground where this home circle is placed to cover my head in the recordings.  The Museum Building roundel was chosen for its visual appeal and architectural referencing of Trinity, the others are ambiguous and ask too many questions to what they represent.  I removed the rest of the image for each with a mask in Photoshop saving as a TIFF for edit backups and a PNG for the Unity software.

 

The website for Trinity VR required imagery of Trinity College that are instantly recognisable for visitors.  The Main entrance proved to be a perfect image once darkened for text readability with the placement of an icon centred in the dark arch entrance.

 

The contact us section of the website has form section that had to be prominent on the page.  From this I selected the skyline of the Front Square and skyline from two different photographs that were simple, clean and suggestive of Trinity College.  I used the grey colour palette from the official Trinity College site and also tested Trinity’s blue colour palette.

 

I concluded that the image that had a visible arch when separated from the sky was the most visually appealing and iconic of Trinity with the campanile.  I added a craquelure filter for some further style and separation from the contact forms.  The image was cropped to size to fit the contact us from.

 

I edited a TrinityVR trailer for the website that cross dissolves between each video scene captured as a teaser to entice the viewer and also to give an idea for visitors for what to expect in the app.  I trimmed myself out of shot because the home circle cannot be placed into the 360 scene in Final Cut Pro X.  Trimming leaves a black circle in the bottom of the scene.  YouTube 360 videos also require the 360 Video Metadata app to inject the spherical metadata and play correctly before uploading.  I added the splash screen and simplified campanile logo five times to the beginning and end.  In 360 VR mode this meanings turning in any direction will still allow these to be viewed.

 

The simplified logo appears in this video on the splash screen at the beginning and the icon at the end of the video.  The original logo created in week three of the project has since been simplified and mirrored so that it is perfectly symmetrical.  It increases the viewability from a distance or at smaller sizes like an app thumbnail for increased definition.  Most noticeable are the cleaner and more defined windows and the more prominent corners and straighter, more geometrical lines that are now identical and forgo any possible centering and formatting issues.  Hailee adjusted the original Trinity colour palette taken from the website for a more subtle and natural look.

 

Our website has a team section to introduce the creators of the TrinityVR app.  I used my photography skills to take professional photographs with my camera which were edited in Adobe Lightroom and cropped and sized accordingly for Jill when constructing the site.  Hailee took the photograph of me.  With this, we present ourselves as a professional team presenting a marketable app for the public.

Week 10 – Trinity VR Website

Content

As the deadline for our project is fast approaching, this past week has been spent trying to get as much as possible done for the website. The layout for the website has pretty much stayed the same except for the addition of the Frequently Asked Questions section. I (Jill) decided to put this section just ahead of the Contact Us section as it meant that users could look for their question first in the FAQ section so as to not send us a question that is already answered on our website. Now it is just a placeholder for when we actually test out the Contact Us section.

 

Up until now, no actual content has been put up on the website. I was conscious of this and had spent time researching what other app designers had to say about their apps. The main objective was to get across what the app was and its functionality and features. As we are including a demo in the Preview section which runs through the functionality of the app, I felt we didn’t need to include this in the About section so this section briefly talks about the app itself and the features. This section also explains why the app sets itself apart from any other app on the market at this time.

 

CSS

Last week was spent just getting the colour scheme right. The template still very much looked the same but with different coloured buttons and the layout of sections were altered. This week was spent mainly trying to get the website to look less like a template and more like our own. First thing on the list was to get the Download button to look similar to the icons in the app itself and the mockup Hailee did out in Photoshop a few weeks ago. This was very tricky for me as I do not own Photoshop so I had to make the button from scratch. After four hours straight of attempts, I eventually settled with a button that could pass for being very similar to the icons and the one in Hailee’s mockup. I ended up using a bootstrap-glyphicon, the arrow down one and not the download one! This appeared with a transparent background so I had to make a round button behind it. The glyphicon and round button wouldn’t line up perfectly but I did the best I could. You can only see the difference if you look really closely.

buttonhover
button- hover
button
button – active

 

 

 

 

 

Next on the agenda was fixing the header image. The Long Room image that appeared in Hailee’s mockup didn’t really fit in the website as the colour palette we decided on earlier in the semester included blues, greys and black. The brown of the Long Room didn’t really fit well with this palette. I suggested to Adrian that we should use an exterior shot as the grey of the buildings would work better. His shot at Front Gate was slightly off center and too bright so he cropped and darkened the image so that it would work perfectly with the template. Now the Trinity VR link in the navigation bar was far too dark so I changed it to white so that it would stand out. The Contact Us image of the map used in the template was very general and less personal to Trinity, however I did like  the idea of the outline being used rather than the entire image. I asked Adrian could he do one similar except using the outline of the campanile and surrounding images. This outline actually worked really well as an outline as you can definitely see that it is part of Trinity College.

header
Darkened image of Front Gate
outlinecampanile
Outline of the Campanile and surrounding buildings

 

Hosting

The next stage was to get the website hosted as some of the links and the Contact Us section could not be tested until this happened. We were originally going to host it using Github as that was where I was saving all the files but I was informed that unfortunately it would not support php , therefore our Contact Us section would not work. I decided to host the website with Digital Ocean for one month as it works well with php, has a very fast network speed, and has no interference such as advertisements. I also managed to get MySQL database with the hosting which means we can incorporate it into the form and keep track of any messages sent to us. I also registered a domain name for the website with namecheap. We decided to go with trinityvr.online which was only 79c. I then connected the domain name to the host and voila, our site was up and running. 

Jill

 

Blender Models and Animations

It’s been a busy few weeks. With the groundwork laid and the memory leak in Unity fixed, it was time to focus on ways to flesh out the app. I’ve been focusing on creating Blender models to add context to the narrations and more multimedia to the scenes.

Sign
This sign will swing on the campanile to illustrate a story marker there

The Blender models and animations will be triggered by markers and will coincide with narration. These help to add a little more to the tour than just listening and looking. Some of these are stills that fade in and out, while others are animated within Blender. Because animating and texturing in Unity is beyond me, I wanted to know if it would be possible to texture and animate the models in Blender and then render them out and fit them in the photospheres. This was very complicated, though, because our Unity world is only an illusion of 3D. Trying to figure out how to fit both a 2D stills and 3D animations within a 3D-looking world that’s actually 2D made my brain hurt, and often the meshes I made had to be altered to force perspective that fit the world. But through some complex finagling and a harsh lesson in camera perspective, Enda and I were able to figure out a way to fit both within the spheres. Because it’s easy to animate location and opacity within Unity, many of my

planned animations became stills that were animated as sprites within Unity to swing or

Screen Shot 2016-08-16 at 11.16.27 AM
This Blender animation will be ‘green screened’ into the scene at Library Square

fade in and out. The remaining animation of the crumbling gravestones in Library Square uses the Easy Movie Textures “Chromakey” plug-in to “sit” within the scene. This one was especially challenging, as I wanted to include the shadows within the scene, but needed to render out the plane image with transparency so as to better fit within the world. Manually matching the slope of the square and the camera perspective may have turned me off to Blender for the rest of my life.

 

The complete list of Blender meshes:

  • Rubrics building
    • Made to illustrate how Front Square originally looked with red-brick buildings
    • Copied from building schematic via Sketchup
    • Individual sections textured by hand
  • Graveyard animation
    • Crumbling gravestones illustrate burial place of monks from All Hallows in Library Square
    • Basic Celtic Cross mesh downloaded from Blendswap but then manually overhauled in order to use Cell Fracture on the mesh
    • Using Rigid Body physics animations from Blender manually keyframed in to control speed and direction of crumbling
    • All textures downloaded from cgtextures.com and then UV-mapped to individual sections of the mesh; keyframed cracks added by hand
    • Originally, I had this animation composited to render only the gravestones and their shadows, but leaving out the plane on which they sit. Unfortunately, once I green-screened this in FCP and then Enda applied the Chromakey plugin, the shadows disappeared as well (too much green in them, apparently). Instead, I textured out the green in the shadows by adding a dirt ground made by photoshopping an alpha-enabled PNG onto the plane on which the gravestones sat.
    • The use of Chromakey means that when the animation fades in it has a bit of a green tinge, but I’m not complaining at this point.
  • “For Sale” sign
    • Will swing on campanile in Library Square to accompany story of race up the structure
    • Mesh made by hand, manually “splintered” using Boolean modifier
    • UV-wrapped texture including Photoshopped “For Sale” font
  • Picture frames in Museum Building
    • Accompany story of one-sided portraits along the staircase
    • Meshes made and textured by hand
    • Individually UV-wrapped historical portraits of soldiers sourced from derjudenfrage.deviantart.com, tpc.dodlive.mil, http://www.dailymail.co.uk
  • Plants on top of Arts Block
    HANGING-GARDENS-OF_2744030b
    I based the design for the Arts Block plants on images like this
    • Illustrate the original design of the Arts Block as based on the Gardens of Babylon
    • Plants and trees appear on different roofs of the Arts Block
    • Grass made using particles in Blender
    • Was originally going to animate this using a force field physics animator, but the
      Screen Shot 2016-08-16 at 11.41.44 AM
      This is how they turned out

      Blender scene had nearly 5,000,000 vertices and was really slowing my computer down. We opted to make it a still and then fade it in and out within Unity to save time and to hopefully keep my computer from blowing up.

  • Original Long Room ceiling
    • Illustrate what the Long Room looked like before the addition of a renovated ceiling
    • The forced perspective of this made me (and probably Enda) want to weep. Trying to get a 2D render of this to look as if it spanned the entire depth of the Long Room was very difficult
    • I ended up having to make the mesh an actual wedge that fit within the perspective from the camera point in the second Long Room scene so that it appeared to extend into the distance. It was somewhat helpful for things like this to use Adrian’s actual images as environment textures within Blender, although everything did tend to change once we brought it into Unity

Now that the models are all have the proper perspective and have been rendered out, the next step is to tie them to a narration marker within Unity and then fade them in and out at the appropriate times.

-Hailee

 

Green Screen Fun

Vivienne had mentioned at our mid-project review that we might want to try to add a more personal touch to the project. Because of this, I wanted to try to include short anecdotes from people about different buildings or spaces on campus. Originally, we thought maybe it could just be different voices narrating their own personal stories, but I thought that was a bit too much listening on top of the narration that’s already there. I’m a big fan of adding more visuals whenever possible, so I talked with Enda about the possibility of adding people within the scene. He’s sick of my ideas by now, for sure, but he had noticed that the Easy Movie Textures plugin included a chromakey option. We tested some green-screen footage we found on YouTube and were able to make a person appear within the photosphere.

I’d used green screens in my undergrad, and felt comfortable lighting scenes in the even way you needed to to get these to work. As it happens, Enda had access to a convenient green screen studio just off campus, so Jill set to work gathering lists of interested parties using our access by using on-campus resources like the GSU and SU groups.We also reached out to Trinity alums with whom we had personal ties. We had a few replies, so we set up a short list of people whose experiences we were most interested in. These included a former Trinity Scholar, a Trinity singer, a global room tour guide, a former accommodation office employee, and an English lecturer (you might be able to pick out a few familiar faces in the footage). The green screen studio already had a pretty solid setup with a camera and lights, but after testing some footage from there, we realized that FCP7 (what I use for editing) had problems natively importing the AVCHD footage from the camera they had. They also had a few wonky lights, although the diffusions on them were really nice for faces.

Instead, we used the school’s camera and lights (but hijacked their diffusion). I used two backlights to give an even coverage to the green screen behind the subject, then a key and fill for their faces. In the past, I’ve worked in green screen cycs, so you’re able to separate the subject from the screen a bit more and have more control over the shadows. In this studio, they didn’t need to capture the subjects feet, so it was set up more for mid- close-up interviews and the green didn’t cover much of the floor. We remedied this by buying several sheets of large green paper from Eason’s and having the subject stand on these. Although the green didn’t match completely, it still works in the Chromakey.

Screen Shot 2016-08-16 at 12.11.37 PM.pngEnda and I ran the shoot last Wednesday, and managed to have everyone come in for 30-minute slots. Some took longer than others, and some were definitely more comfortable in front of the camera than others, but we got some good stuff in the end. I wanted the testimonials to come out naturally, so we started each interview with more of a conversation to get a rough idea of what each person wanted to talk about, and then ironed out a script naturally from what they said. It meant going over each story a few times, but it worked out.

Screen Shot 2016-08-16 at 12.25.19 PM.png
Original problematic pants

After the shoot, I edited each of the testimonials in FCP. Because they each did the stories a few times, I was able to edit

Screen Shot 2016-08-16 at 12.25.57 PM.png
Green pants now brown thanks to AE magic

the stories a few times, I was able to edit the takes together into cohesive pieces. I was also able to cut out a few of the extra “umms” and pauses without too much visual hiccuping. The one hitch was that one subject wore pants that were a gray-green, and the Chromakey made them transparent. Thankfully, the subjects are mostly stationary, so I was able to use a tracking mask in AfterEffects to layer the footage on top of itself and then use a color change effect to alter the pants to a brown. It’s not perfect if you look closely, but because the people are relatively small within the scene, it’s acceptable (I hope).

I adjusted the aspect ratio to be vertical to cut out the unnecessary footage and have the

Screen Shot 2016-08-16 at 13.52.40.png
One of our subjects in the sphere

entire background be green. Then, I passed them off to Enda to edit the sound. He returned the edited WAVs to me and then I pasted them in and added fades to the footage so that the subjects appear to fade in and out. I exported these as ProRes MOVs and then HandBraked them to MP4s so Enda could add them to the scenes. He’s currently working on having them be triggered by the markers so they appear on command. So far, it looks pretty realistic, minus the Ghostbusters-esque green glow that accompanies the fades. I may need to fix that in the future, but we’ll see.

-Hailee

 

 

Week 9 – Content & Website

Content – Video Introduction

 

grads04
The first eight women graduates – A Century of Women in Trinity College Dublin

Last week, I(Jill) didn’t manage to get all the photographs Hailee needed in order to compose the video introduction. I found it difficult to find images of women around Trinity College around the time Provost Salmon allowed them to attend the college in 1904. The only pictures I could find were taken sometime during the 1960’s. I eventually came to a page on Trinity’s website dedicated to an entire century of women alumni in the college. Here, I also found a photo gallery which included a picture of the first eight women graduates of Trinity College Dublin.

 

 

 

Website

The layout of the website changed significantly in a few days so in order to make sure myself and Ying were clear on the layout, I decided I should redo the wireframes early on in the week. The “Team” section was switched with the “Leave A Message” section and the “Download” section was merged with the “About the App” section. I decided to keep the same colour scheme on the wireframes because without the colour it looked a little bare but I was open to suggestions.

The next stage was to fix the layout of the website to match the layout of the new wireframes. This was relatively easy to do as it just required swapping or duplicating HTML which was already present. Headings were then changed before altering any CSS. Content will not be added in until later on but for now Lorem Ipsum will do as a placeholder.

 

Trinity VR mobile v.2.png
Mobile Wireframes – Version 2 – New Layout

I wanted to keep the colour scheme similar to the colour palettes Adrian had done out for the logo. I spent time switching the template’s highlight colour from yellow to the Trinity blue. This was difficult to read against an almost black backdrop image so I switched it to the lighter blue in the colour palette and the hover would then be the Trinity blue, a little bit like the button on the homepage for Google drive.

tcdcrestfontpalette
Colour Palette – TCD crest

Once I had switched the header image to a placeholder image of the long room, it became apparent that the original idea of having the Trinity blue for the active button would work, just on a lighter background.

Google drive active
Google drive homepage button – active – lighter blue

 

Google drive hover
Google drive homepage button – hover – darker blue

The array of browns in the long room however, didn’t really match the colour scheme all that well, especially next to the greys so myself and Adrian discussed the use of an exterior shot for the header, as well as possibly doing an outline of the campanile for the leave a message section as now it is a map of the world. Myself, Hailee and Enda also discussed adding in an FAQ section if I have time and if I can get the database up and running. This might alter the overall CSS a little also but it can easily be fixed in the future.

Jill

Stabilising, recording, editing and imagery

The last number of weeks have involved the perfection of the recording process and workflow.  The biggest revelation in this regard was the addition of a stabiliser for the 360 camera that provided support and steadiness without blocking the view of the two 180 degree lenses on the camera whilst also extended from myself to minimise my appearance in shot that will be covered by the UI menu in app.

The stabiliser, known as the Stabylcam is a cheap effective handheld device that originated from a Kickstarter project. It is intended for smartphone usage, however the phone mount can be unscrewed for the likes of GoPros, or in my case a 360 camera.

Photography by http://adrianlangtry.com
Ricoh Theta S mounted on a balanced Stabylcam

It must be extended horizontally with the camera attached whilst holding the gyroscope ring in one hand.  When perfect balanced equilibrium is achieved the Stabylcam can then be flipped vertically ready to record.  Following exhaustive testing using the stabylcam I perfected the finger support technique of holding it.  Also my walking has a tendency to introduce a side to side swaggering motion from a natural walking gait.  The stabiliser lacks stabilisation on the y-axis or the up-down direction.  I had to adjust my recording technique accordingly and keep the potential for wind in mind that would affect stability and thus a risk of motion sickness for the viewer in the app.

Screenshot (15 August 2016 1-48 PM)
Theta S App

Field recordings were made using the Theta S app for the Ricoh Theta S that provides a connection using wifi with the a livefeed for photographs that uploaded each photosphere when taken.  This was a slow process, taking roughly one minute to upload each shot on my aging Samsung Galaxy S5.  The video is recorded completely blind with no live feed and the upload to phone feature would take up ten minutes to upload a short one minute video which is not feasible on the field.  I had to trust the camera recorded the footage with the correct exposure, the video mode is locked on automatic.  I compensated for this by recording on two occasions for the exterior for 6am to capture the sunrise and avoid people.  The second occasion had a near perfect forecast and provided excellent conditions with a spectacular sky with the golden dawn light hitting the tops of Trinity’s buildings.   The interiors were in controlled consistent lighting and did not prove such unforeseen issues.

03frontsq
Recording the campus at 6am

If the shot did not prove adequately placed, stabilised or exposed, I used the return or backwards clip or vice versa by flipping the image in Final Cut Pro X.  Each video and photosphere is colour graded in Final Cut Pro X.  The video exported as a H.264 MOV file and is compressed with Handbrake compression software to reduce the file size for the smartphone app into MP4 at 1920x960p.  The photospheres are quite small JPEGs and so are exported at their original 5K size of 5376x2688px from Final Cut Pro X.

20160806tcd (14 of 33)06rubrics

The rubrics photosphere had an overexposed sky which I replaced with a sky from a Front Square photosphere with careful consideration taken for the seams that join at each side.

20160805museumbuilding (7 of 10)02museumbuilding

The Museum building photosphere captured two people sitting on the bench on the left side who I removed using a previous photosphere, they are not identifiable in the video due to the lower quality and appear for no more than 3 seconds.

01longroom

The Old Library Long Room private access was a one time only event with the older monopod-phone strap technique which meant I leaned my head back when capturing the photosphere.  I photoshopped my head out so that it would not appear in VR mode when covered with the UI menu.

I edited the video and photospheres together in Final Cut Pro X with a cross dissolve transition at the beginning and end from the photosphere to video and then video to photosphere facing the same direction for an effective transition for the VR app.  The exposures and colour grading are adjusted accordingly to match up, the highly compressed video does not lend itself to the more flexiblely editable JPEGs.  The video is sharpened using PHYSX Sharpest plugin using luminance threshold which is powerful but not over the top.

 

I also took photographs for the points of interest in the Trinity VR app including the corner accident, the Moore and Calder sculptures, and the Salmon and Lecky statues.  They are signifigant to the history and narrative of the Trinity VR app and thus have their own detailed close ups for the viewer.

 

Last but not least I am collecting and organising imagery for the website which are visually compelling with text legibility and colour matching with the colour palette of Trinity College and the Trinity VR app and website in mind.

This slideshow requires JavaScript.