Web Design / UI

We redesigned the “Paint from Import” page based on the programming features of the page. Since the paint from import process can be complicated to follow, the revamped web design includes pop-up graphics that explain each step or feature in relation to the interactions required.

Steps:

1. Download fence template.
2. Paint template in any creative application. OR Resize a photo of the fence to fit the template.
3. Import your completed file.

Site Functionality

Some things we are currently working on are:

• 3D environment with panorama background, using a 3D plane with the model to simulate the ground.
• App will most likely be hosted on Heroku, for anyone to view.
• Fixing lighting on the fence to make it appear as if it were outdoors in the daylight.

Our model of our gallery space is coming along nicely and has been mostly textured:

We considered two different options for our menu UI:

• A central “podium” in each room that the user would go to to change the gallery
• An “always there” menu button that the user could access and scroll through

After discussing these two options as well as options for painting information UI, we came up with the following plan:

We are working on getting our textured model integrated with Unity and adding lighting and text for the UI.

We’ve been given access to a computer from Ideate Lending that will allow us to set up our VR environment.

Another factor that could have gone into this is the better hardware we now have access to. We’ve started using an IDeATe Alienware laptop to do our photo processing, and it’s made the whole process much cleaner. Because of how much stronger the laptop is than the machine’s we’ve been using, we’re able to create higher poly models without sacrificing days to the process.

Now that we have our first successful model, our goal is to use this process to create a full model. We’re going to test what happens if we do a lot of close-up shots on a person’s key features, like their face, and then follow those with full body shots. We hope that getting high-detail captures of key areas will let the software use those areas to better align the other photos it has, giving us the accuracy we were missing in our original tries.

We’ll be back next week with some new tests of this process, and hopefully with a full body model!

Some measurements have been adjusted based on how the space felt, and here are views of the model again:

We’ve acquired some photos of art in CFA to use in trying out our model:

(and we do have the names of the artists)

We also acquired photos of two art pieces that we will be trying photogrammetry on.

Currently we are working on integrating the interface, models, and art.

Web Design / UI

We are continuing to integrate the wireframes and graphic elements made in Adobe Illustrator to the functional site.

3D Model

We have been working to improve the uv mapping functionality based on a texture that the user imports. Some results can be seen below.

2 images above: uv mapping a model based on the one texture.

Site Functionality

We are nearing a fully working “paint from import” function. Below is a simple demo of what we have working so far.

• Modeling our 3D spaces
• Creating the interactive elements
• Amassing things to add to the gallery

Models:

Referencing both a recommendation from our Instructor and our original inspiration, we decided to break up the large walls with columns and different panels. The doors will lead to the gallery spaces.

Interactivity:

We are working on being able to categorize and import our art into the spaces as needed.

Collecting Textures/Art:

Marble we would like to use:

Art we’d like to try bringing in:

Features we hope to include:

• A Courtyard room with longer-term curated art
• Gallery rooms that exist based on what group/type of art we are displaying
• A Lobby space or menu that allows the user to pick which art to populate the gallery rooms with
• Sculptures, VR rooms,Paintings/Drawings, and Digital Media art types
• Soft “natural” lighting in the gallery space
• Plants, benches, and a fountain in the courtyard area
• An option to upload art to be housed in the gallery

We were inspired by the following existing spaces:

Web Design / UI

In terms of functionalities, we are choosing to focus on the “paint from import” function, where the user can customize and import an image file of the fence and see that design translated onto the 3D model. For the past week, we have been focusing on designing this import page, since it will host the main application.

The interface allows the user to drag and drop a file or choose from computer. Once a file is uploaded, the user can click the next button and the page will autoscroll down to the grey area mapped to the 3D model generated from their image. The page also features a back to top button and a home button in the top right hand corner.

Site Functionality

So far, the upload feature is mostly working. The user can change the texture to the appearance of the uploaded one. They can then download the three files needed to view the modified model.

3D Model

We made some tweaks to the photogrammetry output by adjusting the mesh to create gaps between the upper and lower beams of the fence. The result can be seen below.

This week, we’ve started having our first successes. We redid a partially successful take at higher poly count / texture quality, and got the above model. The proportions are definitely still off, but it’s the first take where you can definitely tell that a human was the subject.

We suspected that the software was having some issues doing the humans as a whole, so we are in the process of trying to create a model from a set of photos focusing on a face. We don’t have a finished model yet, but the point clouds that were generated look very promising. You can pretty clearly see the outline of the head!

During this retake, we also ran into some issues with our software. Both of our licenses for Metashape ran out, so we’ve been trying to find replacement software. One contender that we’ve been trying is Meshroom, which you can see in the shot above. Meshroom is completely free (open source), and produces pretty good results for other people, so we decided to give it a try. Unfortunately, it turns out that you need a Cuda-enabled graphics card for it, or else you get results that look like this:

That’s it for this week! Hopefully our next post will contain some good shots of face models!

Web Design / UI

For the design of the website that would host the Paint the Fence application, we started by brainstorming some of the key features and how they would relate to one another. We mapped out the general layout and interface for the pages through sketching.

We then began to create mock-ups in Adobe Illustrator. We are in the process of experimenting with different backgrounds and aesthetics for the home page in order to apply them to the design of other pages.

Site Functionality

Below are some screenshots that demonstrate site and feature functionalities as a work-in-progress.

3D Model

Below are some screenshots that show our progress in developing a 3D model of the fence. In the fence capture process, we had to take more pictures around the two ends of the fence in order to get a complete model.

Below: An attempt to align pictures of two different fences.