NOTE: Known issues with Firefox. Best viewed with Chrome, Edge, or Safari.
This project was created as a simple solution for a potentially large problem.
WebGL canvas elements offer open access to content data. Whether it being built using three.js, babylon.js, sketchfab, marmoset viewer or any other WebGL framework, the resources will be exposed. The issue is when selling a product, this case being materials for offline and realtime rendering, where having those resourses exposed would equate to giving out valued goods for free. WebView creates an automated light-weight solution to bringing a secure solution to an interactive material preview.
How it works:
WebView's only requirement is an input folder of bitmap images for material or asset. For this solution we utilized the realtime renderer Marmoset Toolbag. However, any renderer that outputs bitmaps will work. The material is built on the bitmaps parsed through the importer, and each frame is rendered out to a subfolder of the input location. These frame sets are then combined as an atlas and compressed to save memory footprint. WebView then generates the required HTML based on the product name and output files.
Why build an atlas? WebView is built upon the idea of a flipbook. As the mouse moves over the viewport, the total DIV width divided by the number of images gives us the distance alotted for each frame of the atlas. The additional cost of 'flipping' through individual image resources requiring loading and rendering each image on the DOM was out of the question. Loading one asset and manipulating its position in the frame not only was a faster approach for rendering on the DOM, but held a much lighter filesize for the end user to load.Benefits:
Secured resources is the largest point of concern. We are okay with handing out sixteen frames of beauty renders over rull resolution texture bitmaps that can be used elsewhere.
Having to create over 3000 different materials through this process allowed for more time spent on more important projects instead of hand manipulating each through the process. Each product takes about five to seven seconds to generate.
There is a consistency between every single material we showcase. Each has the same lighting, same resolution, and same atlas generation, removing the more-than-likely human error.