Using webGl technology for fashion buttons prototyping.

2. Customer needs:
 Creating easily a new button model
 Sharing the model with the customer avoiding
expensive phisical prototyping
 Managing feedbacks and approval
 Creating programs for production machines
Background
Our solution:
 Custom desktop application of 3D button
modeling
 webGL player to show the model
 Confluence™ plugin to manage interactions
Graphical Web 2012
2
@AlexMufatti 12/09/2012

3. The button
Graphical Web 2012
3
@AlexMufatti 12/09/2012

4. Confluence webGL
Plugin player
Feedbacks
Confluence
Architecture
Export of
3D model
Approval
Custom
Editor
3D engine
Production Shop floor
Desktop Application
Graphical Web 2012
4
@AlexMufatti 12/09/2012

5. A button is not an easy object to model
 Custom 3D editor semplifying functions
(extrudes, texts, profiles, excaves)
Challanges in rendering:
– The «holes» problem
– Objects lied down on the button
Button Editor
Graphical Web 2012
5
@AlexMufatti 12/09/2012

6. The model is very detailed and decoration
increse complexity
– Very large files
Sharing the model
– Problems on the network
– Problems on the browser
 Reduce model precision
 Compress data
BeginModel;1;"Bottone";F;
Position;0.000000;0.000000;0.000000;1.000000;0.000000;0.000000;0.000000;1.000000;0.000000;0.000000;0.0000
00;1.000000;
Bound;0.000000;0.000000;-2.500000;116.000000;116.000000;15.000000;
BeginSolid;"Rotativo";F;
Position;0.000000;0.000000;0.000000;1.000000;0.000000;0.000000;0.000000;1.000000;0.000000;0.000000;0.0000
00;1.000000;
Color;0.315294;0.090980;0.061176;1.000000;0.630588;0.181961;0.122353;1.000000;1.000000;1.000000;1.000000
;1.000000;0.250000;
BeginMesh;5;3;3;0;
Position;0.000000;0.000000;0.000000;0.000000;1.000000;0.000000;1.000000;0.000000;0.000000;0.000000;0.0000
00;-1.000000;
V;0.001000;0.000000;0.000000;0.000000;0.000000;1.000000;
V;50.000000;0.000000;0.000000;0.000000;0.000000;1.000000;
V;0.000996;0.000087;0.000000;0.000000;0.000000;1.000000;
V;49.809735;4.357787;0.000000;0.000000;0.000000;1.000000;
V;0.000985;0.000174;0.000000;0.000000;0.000000;1.000000;
V;49.240388;8.682409;0.000000;0.000000;0.000000;1.000000;
V;0.000966;0.000259;0.000000;0.000000;0.000000;1.000000;
V;48.296291;12.940952;0.000000;0.000000;0.000000;1.000000;
V;0.000940;0.000342;0.000000;0.000000;0.000000;1.000000;
V;46.984631;17.101007;0.000000;0.000000;0.000000;1.000000;
V;0.000906;0.000423;0.000000;0.000000;0.000000;1.000000;
V;45.315389;21.130913;0.000000;0.000000;0.000000;1.000000;
V;0.000866;0.000500;0.000000;0.000000;0.000000;1.000000;
V;43.301270;25.000000;0.000000;0.000000;0.000000;1.000000;
Graphical Web 2012
6
@AlexMufatti 12/09/2012

7. Confluence™ plugin to
manage data loading
Custom webGL player
to show the model
webGL viewer
Confluence™
infrastructure to
manage interactions
Graphical Web 2012
7
@AlexMufatti 12/09/2012

8. Demo
Graphical Web 2012
8
@AlexMufatti 12/09/2012

9.  Completely solve files dimension problems
 Enhance model realism
 Cross browser compatibility
Next steps
 Performance issues
 Adoption of standards
Graphical Web 2012
9
@AlexMufatti 12/09/2012

10. Thank you
Graphical Web 2012
10
@AlexMufatti 12/09/2012