LOADING
Explore the
DiamondClean Smart
toothbrush with App

Overview

X

This Educational Demo has been designed to illustrate the artistic and technical decisions that are made to create a typical WEB-GL demo.

Please read the Navigation Controls section in the Menu to get acquainted with the demo controls. Although you do have the ability to explore the scene on your own, and we highly recommend you do, there are key points of interest.

  1. Sink
  2. Flowers
  3. iPhone
  4. Stool
  5. Toothbrush

In addition, the Menu offers information on what it took to create this demo.

  1. Project cost and timing
  2. System specifications
  3. Production details

We hope you find this demo informative and helpful when deciding to create your own or have someone create one for you.

Thank you for interacting and watching.

Route 66 Digital, LLC

Triangles
Hi-Res - 1,654,979 - Video
Lo-Res - 777,400 - WebGL

For this demo, we wanted to minimize the expenses and complete this demo as quickly as possible to determine how long it would take to create and to provide a reference of cost to those thinking about creating or having a WebGL demo created.

Focusing on costs, we stayed away from using all software that had a monthly subscription. All Autodesk and Adobe software were the first to go. We explored free or close to free alternatives. On short projects these costs are relatively small but on larger projects, requiring larger teams, the selection of software can have an impact in project costs. So, we gave Blender, Affinity and Final Cut Pro X a fair shake and were very happy with the results.

As with all our demos, we like to push ourselves to try new things and learn if our standard production techniques can be enhanced by something we might learn or experience. As always, we did.

COST AND TIMING

X

This project consisted of a range of functionality that is very typical of an WebGL experience and intro video.

The project consists of:

  • 22 second HD animated video opening
  • bathroom scene interactive
  • toothbrush close up interactive
  • custom HTML/CSS overlays
  • scripts and programming
  • analytics
  • deployment (web and exhibit
  • devices desktop & tablet
The breakdown is as follows:

50% creative, 3D modeling, animation, video, copy development, textures, 2D graphic overlays, rendering and initial programming.

50% HTML/CSS programming, overlay development.

Purchased assets including models, textures, images and audio totaled $217.

Web and exhibit deployment: This is the most important factor of the costs. The WebGL experiences can be used on a website and be deployed for an exhibit or trade show, typically with no additional costs. You are getting two experiences for the price of one plus a video.

$45,000* as of 4/07/2021

*Pricing will vary based on desired quality, project timeline, available team, and quality of assets provided. When selecting a WebGL provider, pick a partner you can trust as there are many decisions in a project that will need to be made by them in your interest that can keep the project on time, on budget and looking its best.

When we set out to create this demo. We estimated 3 weeks. Unfortunately, we went over slightly due to two issues.

The first issues was the 3D models that were purchased had very bad topology, making the textures nearly impossible to edit. Since this was a typical problem of ours when getting models for projects we decided to press on and rebuild the models, but it added two additional days to the timeline we did not expect.

WebGL, like any software can suffer from memory leaks, crashes and other related issues if not properly dealt with. To aid our future developments new memory management features were added to our base code to allow us to track and mitigate issues in all our future projects. This added three additional unexpected days.

Our 3-week target slipped to 4 weeks but in the end, we believe we achieved our goals.

System Requirements

X

This demo is designed for landscape viewing on desktop and tablets. Although other smaller mobile devices can see the demo the HTML overlays were not designed for mobile use this time.

Desktop
Windows 10
Apple OSX Big Sur
Using Google Chrome, FireFox, Edge or Safari

Tablets
Apple iPad iOS 14+

Resolutions
Although WebGL is resolution independent we recommend a 16:9 ratio.

Project Details

X

At Route 66 Digital we are always testing ourselves and determining where the limits are with WEBGL. In our prior demo, P-51 Beer, we explored dark scenes with WebGL lighting. In this demo we took the opposite approach and wanted to see where the limitations were in an oversaturated environment.

As always, we needed a creative concept. Mine came while brushing my teeth. Laughing to myself that a toothbrush could be considered a medical device. A few clicks on the web later, my musings were realized. As I read more, I found there was a toothbrush that was considered a medical device.

Producer thoughts
  • Time: 3 weeks
  • Available Assets: none
  • Video: none
  • Artwork: none
  • Concept: loose
  • Team size: 2 people (2D/3D/WebGL artist and Web/WebGL developer)

Plan
  • 2D Assets made in house using available imagery and content on the web as reference. All content to be built from scratch.
  • 3D Assets: models to be purchased
  • Music: to be licensed
  • Video: created in house
  • Animation: done in house
  • Rendering: done in house
  • Editing / Compositing done in house
  • Programming: done in house

Most time-consuming creative task
Conversion of materials and 3D models used in the video to then be used in the WebGL demo is a long and tedious task. There is no magic button. As geometry is reduce it affects materials and textures. Most importantly there are subtle differences between 3D applications default rendering engines and WebGL rendering making adjustments a slow repetitive process. That never ends until final approval.

Most time-consuming development task

Make it look like that - everywhere
Web based marketing solutions have a number of prickly elements that need to be addressed.

  • Validating proposed effects or features are available to a clients target device/browser combinations
  • Addressing performance for loading and playing of the given concept
  • Implementing appropriate orchestrations for elements given the current focused item
  • Ensuring control elements align with the given state of an interactive

Typically, the most costly portion of any web based animated interactive is defining and implementing all the viarous animation components, building workarounds for required browsers that lack support for given features, and the final optimization of all code and assets to ensure the interactive is tight, performant and repeatedably accurate.

3D ASSETS
Most models that are purchased are great for putting in a video but often violate the basic requirements for WebGL. The most frequent cause is bad topology but, in this case, not only did we have bad topology, the model files themselves were incomplete, missing textures, or would actually crash the 3D program while trying to edit them. To stay on our timeline, we ended up rebuilding most of the bathroom using what we could salvage. We had contacted the reseller of the models and in all fairness, they did fix the issue, but the fix came days later after we had completed all our animation and scene programming. This set us back a few days and caused us to cut some corners when making the animation that we would love to have fixed. One of which was a mistake with the leaves intersecting a flower pedal. The hanging towel had triangles facing the wrong direction. The shaving brush and the leaves final materials didn’t make it into the render. Under the final review a decision was made. Do we go back and re-render or do we leave it? In this case, since it was an educational demo it was felt it was best to not re-render and to use it as a point of conversation and an area to highlight in the demo itself.

Not all 3D models are created equal. Purchased 3D models can make for some very quick scene geometry and create production cost savings. They can also become problematic when you need to customize the geometry, materials or textures. We are often asked. “Can’t you just swap out the texture?” It’s rarely that simple but we could if you don’t care what it looks like.

When we create models, we create a Hi-Res model that has all the detail we would want to see. Once satisfied with the level of detail we then proceed to sculpting detail if needed (dents, hard scratches, wear, etc). These are modeling details that drive the triangle counts in the millions per object. At this point the model is forked, meaning there will now be two versions: 1) a Hi-Res model and 2) a Low-Res model. The Hi-Res Model is sent off for materials and textures and the Low-Res model is created from the Hi-Res Model. At this point any changes to the model will require we go back to the Hi-Res Model, making changes and then regenerating a “Low-Res” model and its materials and textures. The process of creating “Low-Res” textures and materials for WebGL is one of the most time intensive processes. If you have to match your hero object look you will be iterating minor tweaks making this a very time-consuming task. If it’s a background object or minor object in the scene then it can be very quick.

So when we hear, “Can't you just swap the texture?”. We translate that to mean:

  • Hi-Res Modeling Change – may or may not start before sculpt detail added if modeling detail changed new UV maps required.
  • If new UV maps required, model materials / textures may need to be updated.
  • Create new Lo-Res Model
  • Create new normal maps
  • Create new UV maps
  • Update materials / textures
  • Test new materials in WebGL and iterate until it closely matches the hi-res video output.
But yes, we can change that texture

About

X

WWW.R66D.COM
855-304-R66D
INFO@R66D.COM

We are Route 66 Digital, LLC., a digital interactive agency dedicated to doing the right things for our client partners.

Route 66 is access to a new frontier. Emblematic of a world opening up to new opportunities and endless possibilities. From a time when hard work mattered, and a handshake meant something. The connection between the values we were raised on and the future just waiting for us over the horizon and around the bend. That's how we still see the world. Grounded in integrity and mutual respect. Brimming with hope and new ideas. A world where knowing what you stand for is essential to what you do. And where technology can transport you from what was to what you might never thought possible. It’s how we think, how we work and its who we are!

Route 66 Digital

Making of a Sink

X
Polygons
Video - 248,000 triangles
WebGL - 69,000 triangles

As with all models in the demo, the sink had to be polygon reduced. However, since the object is close to the hero object (the toothbrush) the poly counts need to be high enough to retain the curve shapes and prevent the sink from having flat faceted corners and surfaces that can be seen in the stool.

The original material in the video also had to be redesigned to account for the lighting and reflective properties of WebGL vs the rendering engine used for video. A flat material was used to increase performance but also not detract from the very new and glossy toothbrush.

With WebGL, it is important to prioritize objects and materials to ensure the best performance without impacting the targeted device list.

The Stool

X
Polygons
Video - 135,120 triangles
WebGL - 46,500 triangles
The use of depth of field and motion blur in a video keeps the viewers’ attention away from missing details. This particular frame in the video is only shown behind the title text giving the viewer even less time to notice details. Pay special attention to the shaving brush. Read more in the "Details" tab above.

The shaving brush bristles are not defined in the video. Since it’s not a major area of focus in the video it is easily missed. In the demo, it can be easily explored so the demo received an extra texture to give it a more single strand appearance.

Take a close look at the wooden stool. The video stool perimeter has a smooth curve while the demo stool is faceted (made of straight-line segments). You can also see the same effect in the shaving brush wood handle.

The wood material in the stool is identical in the video and in the demo, yet in the demo the texture is rougher with more bumpiness. This highlights the need that all textures have to be reviewed and potentially modified in order to replicate the way the material was originally intended.

Depending on the importance of the object to the scene these items can be given more or less attention (increasing or decreasing a project budget).

Flowers

X
Polygons
Video - 70,268 triangles
WebGL - 64,902 triangles

When modeling for video there is a lot of room for minor model and material issues. They can be controlled through camera placement, time on the screen and easily hidden if not the focus of the scene. With interactive environments these minor issues are not so easily dismissed as a user can explore every detail from many angles and has unlimited time to view and find any issues.

In the video a leaf penetrates a pedal, and a simple solid green texture was used. In the demo the leaf location had to be changed to prevent the intersection and the texture of the leaves were changed to increase realism.

The flowers are a critical part to the overall since of tranquility and peace of the scene. However, the leaves were not textured in the video since the camera would be moving and the focus is on the toothbrush. For the few seconds the leaves are on screen most viewers would not notice anything wrong.

However in the interactive, all details can be explored and needs to addressed. In the demo a leaf texture was added to provide the extra level of detail need for prolonged viewing.