Category Archives: Deliverable

Revised Success Definition and Measurements


Now towards the end of our project, we are trying to see whether if our application has met the initial success definition and also make some revision for our success definition.


Our application has met most of the metrics of success we defined. There are some metrics that we can not measure our success with due to time limitation. And there are also some goals¬†that we haven’t¬†achieved due to other reasons.


We created a document with more detailed explanation. The content of this document is subject to change as development continues. Click here to check out the document.

Point Breakdown

The tasks were equally distributed to all members.

Ashish (5 / 25)
Ngoc (5/ 25)

Alyssa (5 / 25)

Connie (5 / 25)
Ted (5/ 25)


Create App Specification


Now that we have bridged the majority of the learning gap, we have come to a point in the project in which the focus will be development. In order to proceed in an organized fashion, we decided to write loose application specification, one that would be able to change as our knowledge of the framework grew.


We created a document that details the parts that need to be completed by capstone in detail. It should serve as a guideline so that all developers can stay in sync and be able to gain from each other’s knowledge/learning.


We created a specification linked here. The content of this document is subject to change as development continues.

Point Breakdown

Each group member contributed ideas to the functionality of the application. Ashish, Ngoc, Ted, and Connie focused on the the technical aspects of the application where Alyssa focused on making sure the design principles would hold up in the implementation.

Ashish (5 / 25)
Ngoc (5/ 25)

Alyssa (5 / 30)

Connie (5 / 30)
Ted (5/ 30)

Development Meeting with Trond


Accomplishing a task such an incredible technical feat as rendering and displaying a human body and identifying all the individual components is no small endeavor.

For this reason, we requested the help of¬†Trond¬†Nilsen, a quite brilliant software engineer. Trond is a graduate student who’s research is closely aligned with ours. He has already built the model rendering and viewing into his application. We are currently having¬†weekly meetings to work on upgrading his current project to support the Pepper’s Ghost illusion/interface. The process will require splitting the render into multiple views, and passing gestures in as function calls to manipulate his view.¬†



Every Monday, we meet with Trond. After the first session we were able to add all of the math calculations and adjustments to Trond’s engine to allow for 4 separate Three.js cameras of a single model.

After setting up a local web server, the models can be fed in and viewed as such.

Hologram split

View Split for Hologram Use

If one were to place a prism on the screen with this  application running, you would be able to see the illusion of a floating, 3D human body.


During the next meeting we able to integrate the Leap Controller and get a data stream from the pinch-to-zoom gesture. Before the next meeting, we hope to be able to get all of the gestures implemented and added to the application.



All of the new application code we created was pushed to a GitHub repository.

Open source and available here.

To download and test, use an apache/nginx web server.

Your browser must be compatible with webgl to view.


Point Breakdown

Each team member spent some time with Trond throughout each work period and helped integrate our ideas with Trond’s framework.

All members equally contributed to the reading of Trond’s code base and helped him to integrate view splitting and leap controls.






Timeline Revision

We’ve recently been talking about collaborating with Trond Nilsen, who is a graduate student at the UW. He is working on a project that is very similar to ours and we will be able to align our goals with his in order to achieve a much more outstanding final product. In collaboration, Trond will receive and medium for display that is effective for the purpose of his¬†project, and we will receive additional development efforts as well as a substantially developed starting point. He will bring with him much more experience than our team has in working with 3D models for the web, as well as a solid understanding of how to structure the final application.

This will advance our project because it will give us a clear definition of our timeline, including Trond and adjusting for development with him on the team.

Ashish (5), Ngoc (5): Work together to revise timeline.



High-Fidelity Mockup

To refine our interface design, we needed to create a high-fidelity prototype which would look and function exactly like how we would want our application to be. For our hi-fi mockup, we decided to put together all of the gestures that we compiled through our lo-fi user testing and have our users perform tasks using an interface that will be nearly identical to what we will have as our final product. The results from our future hi-fidelity prototype testing will help us diagnose design details, and inform our final design.

So far, we’ve constructed a prototype based on one of the demos that we did for our tutorial. We integrated the Leap Motion Interface with Three.js in order to create a working experience prototype that will allow users to fully interact with the rendered model. Using code samples from the Three.js and Leap Motion tutorials, and our knowledge of programming, we created a web-based demo hosted on Ted’s student server. Our demo will not be projected onto our 3D volumetric display yet; the purpose of this mockup is to show the users the actual functionality of our application. An example of our initial attempt can be found below:

demoClick here to view our first demo

One of the biggest challenges that we ran into was being able to render an entire 3D model of the human body. A vital task that we plan on having for our hi-fi mockup is the ability to “take off” layers. We were able to render a single body part (the mandible; see below) but rendering multiple body parts at once was an unexpected challenge for us. We realized that planning time for problems in advance was a wise decision to make.


Click here to view our second demo

We were unable to construct the entire hi-fi prototype in time because of this issue. To workaround this challenge, we created¬†videos¬†of storyboarded interactions with the interface. The videos mimic the interface, and are designed to be played when users are asked to perform specific, hard-coded functions. These videos will help us diagnose interface and interaction problems.¬†What we have so far will be a foundation that we can utilize to have the user feel like they’re actually using the application.

2.brainlayers (0-00-06-14)

Click here to view our prototype videos

During our actual user study, we will follow procedures that are similar to our lo-fi mockup. We plan to have gestures for every major interaction, and have the user perform actions such as taking off a layer, or accessing the quiz in order to study up anatomy materials. We plan to finalize our High-Fidelity Mockup by next Thursday, which is when we have our first user study scheduled. The prototype will allow us to push our designs to final refinement before heavy development begins.

For the prototype, Ted developed the web prototype (5 points), Alyssa developed the prototype videos (5 points), and Connie prepared the user testing (5 points). The next step for each of these team members is to pull together for user testing, further prototype refinement, and finalizing the Design Spec.

Deliverable: High-Fidelity Mockup

Extra: Hi-Fi Prototype Draft


Timeline Updates Are Here

Five weeks into our project, we have come to see that our development training is taking a little longer than expected. Learning takes time, especially when we have so much to work through while conducting user research and being busy students! We have updated our project milestone timeline schedule to accommodate for this new update.

Take a peek at our Revised Timeline.

Our Project Has Arrived!

Trying to find a suitable project for our ambitions in 3D interactive displays was a real challenge! After several project idea pivots, 4 hours of choosing a name, and stacks of post-it notes, we have finally decided on building a display to assist anatomy students visualize the human body.

Deliverable: Project Proposal

Hours of brainstorming have come to an end!

Hours of brainstorming have come to an end!