International Journal of Electronic Business Management, Vol. 3, No. 3, pp. 225-234 (2005) 225 ONLINE PRODUCT CONFIGURATION IN E-COMMERCE WITH 3D WEB VIEWING TECHNOLOGY Chih-Hsing Chu 1* , Chi-Wei Lin 2 , Yi-Wen Li 1 and Jen-Yu Yang 1 1 Department of Industrial Engineering and Engineering Management National Tsing Hua University Hsinchu (300), Taiwan 2 Department of Industrial Engineering and Management Ming Hsin University of Science and Technology Hsinfeng (304), Taiwan ABSTRACT This paper presents a novel idea for online 3D product configuration in e-Commerce and its prototyping system using the Web viewing technology. The end user is allowed to choose the configuration of each individual component, assemble the chosen components, and see the resulting product in real time with a regular browser. This system provides a set of graphical functions such as zoom, rotation, section, and annotation that facilitate the user interactions with 3D complex product over the Internet. It collects the customer preference and feedback of the product by transferring the information over to and stored in a backend PDM system. The presented idea serves as an effective approach to realizing mass customization in electric business. Keywords: Mass Customization, 3D Web Viewing, Product Development, e-Commerce 1. INTRODUCTION * Nowadays most companies are facing a great pressure caused by shorter product life cycle and wider product variety in the global market. To identify customer needs has become a crucial factor in any product development in this circumstance. It is an imperative to create a high-quality information channel that runs directly between customers in the target market and the product developers [24], who have to listen to the customer voice so that they can create customer centric values and thus meet the market competition. Close collaboration with customers is recognized as a primary goal even in many manufacturing industries. Recent progress in information technologies (particularly the Internet) enables effective cooperation, communication, and coordination among the stakeholders involved in product development but geographically dispersed [3]. This has a great impact on the way of conducting e-Commerce. There has been a significant growth in collaborative software services, which perform a variety of tasks, from scheduling, teleconferencing, project management, to data management, information exchange, and applications integration [1]. The Web has evolved into a working desktop equipped with all kinds of functions with which the * Corresponding author: chchu@ie.nthu.edu.tw product development tasks virtually take place. Recently collaborative computing software has shifted from facilitating the commerce activities in traditional supply chain like procurement, logistics, and scheduling [4,5,17], to expediting sophisticated interactions among the product designers [23,26]. Nevertheless, the technology development so far has been more concerned with collaborative CAD software [16,21,22] and the Web-based product data management [18,19,28], corresponding to the functionality of design construction and design management, respectively. Fewer efforts have been focused on integration of the customer voice or the input of the other stakeholders. These people (such as marketing staff, services people, and small/medium sized suppliers) normally do not have suitable software tools for accessing to the product design data. However, as mentioned above, their participations in the development process are as essential as those of engineers. To overcome this problem, new technologies have been lately developed for distributing product data among people without proprietary or high-end software systems. One promising technology is the Web-based collaborative visualization [7], which enables the user to visualize, annotate, and manipulate 3D design model in a real time manner over the Internet. Commercial software tools including AutoVue™ [2], SpinFire™ [10], and Hoop3D™ [9] have been successfully deployed in International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 226 many industrial applications, which validate their potential as a powerful online communication tool. We extend the use of the 3D Web viewing technology further into more complex situations in product development, particularly with the customers. A novel idea is proposed and implemented as a software prototype that demonstrates the flexibility and applicability of the technology as an effective means for sharing 3D product information. This prototype offers a client-side application embedded in a regular browser that allows the end customer to choose among a variety of configurations for each single component, assemble them into a product in 3D space, and visualize the resulting product instantaneously through the Internet. This online 3D product configurator facilitates collection of consumer preference for mass customization in e-Commerce. The server side contains a PDM system that automatically records the product configuration information and any other feedback/input obtained from the user. This paper exemplifies that 3D Web viewing is a practical interfacing technology for managing customer interactions in the e-Commerce activities involving with complex product. 2. INTRODUCTION TO 3D WEB VIEWING The 3D Web viewing technology evolves from collaborative visualization, referring to a collection of computer-supported cooperative work (CSCW) applications in which control over parameters or products of the scientific visualization process is shared [8]. The visualization process generally consists of a series of filtering raw data that generate the desired resolution and preserve contents of interest. A mapping step is required to render the result into a graphical form, and create an image, animation, or other data formats. Figure 1 shows a simplest form of collaborative visualization application [25] with multiple participants. Typically only the one creating the data has direct interaction with the visualization process, and the other are limited to passive viewing of the results. The participants may exchange feedback using other collaboration tools such as email, MSN, whiteboard, or teleconferencing. One important motivation of the development of 3D Web viewing is to enable rendering of complex 3D objects in a networked environment. Recently this technology has found successful applications in product-related digital data sharing, sometimes referred to as CAD viewing. Within this context, a CAD model (normally a B-Rep model) is converted into a light-weighted and more universal file format for easy transfer and distribution over the network. A common industrial standard is the STL format established by 3D Systems [14]. An STL represents a 3D object as a set of connected triangles, or meshes. Commercial viewing tools may have their proprietary file format, but most of them adopt the mesh model as a basis and append other attributes for specific functions. The file conversion process (or mesh generation process) is based on a well-known geometric algorithm, Delaunay Triangulations [13], that produces a mesh model with a controllable degree of approximation to the converted object. This algorithm consists of three steps: (1) Delaunay Triangulation, (2) Constrained Delaunay Triangulation, and (3) Delaunay Refinement, as shown in Figure 2. One major advantage is that common graphics libraries from fundamental OpenGL to high-level modeling schemes like Java3D, VRML, and X3D all support geometric manipulation and graphical rendering of a mesh model in 3D space. This opens up broad applications of 3D Web viewing in heterogeneous IT platforms, particularly the Internet-based business environment. Figure 1: Schematic of a simple collaborative visualization system [25] Figure 2: The conversion process to a mesh model 3. APPLICATIONS OF 3D WEB VIEWING IN INDUSTRIES There have been numerous deployments of the Web-based visualization in current industries. They can be categorized into various applications described as the follows:  Product data management: One of the early C. H. Chu et al.: Online Product Configuration in e-Commerce with 3D Web Viewing Technology 227 needs of 3D Web viewing is to provide visualization capability for CAD drawings, particularly complex 3D models. People involved in the product design may not always have CAD tools readily available. Moreover, different CAD formats are usually not compatible with each other, resulting in a critical barrier of information dissemination. Many commercial PDM systems have adopted the co-called CAD viewer as a solution for management of product-related documents. Figure 3 captures a screenshot of the viewer integrated in a PDM tool. A project manager can access to the product data, at least visually, in such environment without opening up any design tools. This function partially fulfills the needs of design review and product information sharing. Figure 3: CAD viewer integrated in a PDM system (http://www.smarteam.com) Figure 4: Online 3D catalogue of consumer parts ( http://fishing.shimano.co.jp/body/3D_new) International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 228  Outsourcing: To identify appropriate suppliers is a crucial task for collaborative product development on a global basis. Potential suppliers have to obtain sufficient detail regarding the design being outsourced in order to determine whether the part can be made with their process/production capabilities, and more importantly to place a quote on it or not. However, they are not allowed to gain access to any design know-how before any official contract is established with obligations enforced. The 3D Web viewing technology readily fulfills this need. As described above, it converts a CAD model into the mesh representation that gives controllable approximation to the original design data. The conversion excludes important design information such as dimensions, tolerances, and the other engineering attributes. In this case, a company can attach such a simplified model to an electronic RFQ and send it over to possible suppliers without risking leak of the proprietary information.  3D catalogue: Text data, image, animation, and video clip are not appealing enough to modern customers in their e-Commerce exploration. Many companies (both B2B and B2C) start to offer the Internet-based 3D product catalogues in their websites. Figure 4 illustrates an example of bicycle component. The end customers can visualize the product in 3D space in an interactive manner with simple graphical manipulations, enhancing their satisfaction during the online shopping process. An enterprise user may want to directly download the part model and estimate its compatibility with other components in the assembly being designed.  After services: 3D Web visualization also finds useful applications in the after service activities such as online DIY product manuals [15] and maintenance instructions [12]. Such ‘paperless’ documentation saves material cost, is downloadable every where with the Internet connection, and can be updated at any time without additional costs. It is considered a better tool than traditional product instruction sheets. 4. 3D PRODCUT CONFIGURATOR Customer voices are valuable and indispensable to the entire product development process, from the front-end collection of customer requirements to feedback of product in use. Nowadays mass customization has become an imperative for product success in the competitive global market. Many consumers often want to configure, if not design, the product with individual preference, and better in the cyber space using easy-to-operate 3D GUI’s. The Internet has emerged as an enabling medium for accomplishing this goal. In fact, companies have been offering online product configuration for years (Dell Computer is the most famous example). However, in most cases the customer is only allowed to choose product specs, without instantaneous update in the product appearance or overall shape according to what he/she has chosen. Some online shopping sites do provide 2D images in accordance with customer’s configurations, but such a passive approach may not be effective when the product styling (shape, color, and appearance) is an important factor that influences the purchase decision like consumer electronics, sport goods, and fashion articles. There is a lack of practical IT tools with which the online shopper can readily interact with these products in the current e-Commerce practice. This research develops an online 3D product configurator to overcome the above deficiency. This system consists of three major software components: SpinFire™ 3D Web viewing utilities, an applications server, and a backend PDM system. Figure 5 shows the system structure. SpinFire is a light-weighted 2D/3D viewing application that supports major CAD formats like IGES, STEP, VDA, DWG, CATIA, Pro-E, UG, HPGL, STL, VRML, and G-Code. This application program can work as a plug-in in a normal browser and is downloadable from the client-side on the fly. It also provides a set of SDK (Software Development Kits) in JavaScript, VB Script, and C++ for customized applications and integration with other software systems. In the prototyping system, SpinFire is embedded in an IE 6.0 browser. The main page consists of four parts as shown in Figure 6. The major part is a display area in which the 3D product model is rendered. A drop-down menu contains all the product items for the current user to configure. On the right is a BOM-like tree representing the hierarchy of the product. Note that each leaf node, a single component, includes a clickable list of possible configurations beneath it. A command panel provides a variety of 3D graphical functions like zoom, rotate, and measure, implemented with SpinFire JavaScript API’s, for the user to interact with the product. An assembly module characterizing the spatial relationships among all the single components enables the assemble and explode operations of the product. A data management module is responsible for managing the user profile, monitoring session information, and transferring the configuration result back to the backend. A PDM system, SME PDM [11], stores all the product-related information like available product types, the configurations of each component, the configuration result, the user profile, and special C. H. Chu et al.: Online Product Configuration in e-Commerce with 3D Web Viewing Technology 229 requirements. The PDM system contains a database system, SQL Server, and exposes a set of API’s for the data management from external ASP (Active Server Page) calls. The applications server, Microsoft Internet Information Server (IIS) 6.0, manages, dispatches, and controls the information flow between the PDM system and the GUI’s at the front end. It also serves as a Web page server. Note that the PDM server and the applications server are located in a distributed manner based on the current prototype design. Figure 5: System framework of the prototype design A typical scenario of using this system is described as follows: 1. The user opens up a browser with SpinFire as a plug-in, establishes an HTTP link to the system, and chooses a product for configuration from a drop-down menu, a sport sedan in this case, as shown in Figure 7(a). 2. The white car body by default is not attractive to the user, who thus decides to changes to the yellow color to see the resultant styling effect. The system instantly displays the corresponding product (see Figure 7(b)). 3. Figure 7(c) illustrates that the user is evaluating the product in detail by rotating, zooming, and even exploding the assembly. 4. Finally, the preferred configurations include gray wheel, gray tire, yellow car body, gray windshield, and white seat, as shown in Figure 8. 5. By clicking the ‘Save’ button on the command panel, the product configurations are sent over to and stored in the backend PDM. In addition, the user can type in special requests with respect to an individual component using the 3D markup function provided by the 3D Web viewer. For example, the rounding radius of the handle edge is too large for the user to hold securely, so he/she is asking to modify the size as shown in Figure 9. The server transfers the configuration result of the product along with the markup notes residing in an XML document over to the PDM system. Figure 10 shows the corresponding XSLT for the XML. These pieces of information will be automatically extracted, associated to the correct component, and saved in the database, after the XML document arrives and gets parsed by an XML-DOM at the backend. In this manner, the user preferences are quickly and effectively collected through the Internet and serves as an important intelligence source for mass customization in e-Commerce. International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 230 Figure 6: Major GUI components of the prototype system (a) Figure 7(a): The use scenario for configuration of a sport sedan Figure 7(b): The use scenario for configuration of a sport sedan C. H. Chu et al.: Online Product Configuration in e-Commerce with 3D Web Viewing Technology 231 Figure 7(c): The use scenario for configuration of a sport sedan Figure 8: The final product configurations Figure 9: The user can offer special requirements with the 3D markup function International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 232 Figure 10: XSLT for the product configuration and markup data 5. CONCLUSIONS AND FUTURE RESEARCH This paper has illustrated that the 3D Web viewing technology is an effective approach to the design information dissemination in distributed product development. This technology enables real time interactions with 3D assembled products through the Internet, without the need of proprietary CAD tools or other high-end software systems. As a result, the stakeholders of the product development who could not access to the product data now have a communication channel for close collaborations with the core development team. It expedites online collection of customer preferences for mass customization. To demonstrate the versatility and practicality of 3D Web viewing, we have developed a novel software system for online 3D product configuration, which allows the end customer to choose components of a variety of configurations comprising an assembly, and renders the resulting product instantaneously. The user can interact with the product in 3D graphical space simply using a regular web browser. Moreover, the customer feedback regarding the product can be automatically collected through the digital markup function provided by the viewing technology. Thus, this technology lends a support to connecting with the customer, accumulating the product preference data, and managing the customer relationship on the Web. It also helps enhance the use quality of the current e-Commerce environment. Nevertheless, application of the Web-based 3D visualization in the value chain integration for distributed product development is still at a preliminary stage for the present. Continuing enhancement of existing functions and development of new utilities are necessary to expand the values of this promising technology. We have identified several areas worth of pursuing from the experimentation of this work:  Levels of detail (LOD): depending on the role and the ensuing requirements, each collaborator in the product development should access to the product data in various levels of detail [20]. Not only should the data content be tailored for individual user, but the way of visualization and presentation has to be adapted to specific applications. From performance aspect, the visualization model running in a wireless device is supposed to contain graphical data in a compact form than that of a desktop PC. The Web viewing technology must provide multi-resolution geometric representations, both semantically and graphically, to fulfill these needs. Figure 11 illustrates an ODMV (One Design Multiple View) scheme of design collaboration [6].  Deformable mesh model: the current 3D Web technology emphasizes more on digital data communication with 3D graphical functions in the network environment. However, to offer real time modification for simple feature geometries of the 3D product model on the client side can be highly valuable in certain applications, e.g. a reviewer adjusts the size (or the position) of some hole in a product for better evaluation directly in a browser (as opposed to en route from the designer). The end user may also want to change the shape or appearance of certain features and visualize the change effect immediately for online product customization. The FFD (Free-Form Deformation) method provides an effective solution for this.  Enabling multimedia data: this paper has shown that the Web viewing technology serves as an effective 3D user interface for disseminating information in a product life cycle. More efforts should be focused on integrating multimedia functions (video, audio, animation, and other entertainment media) into the existing visualization function in order to extend its utilization. Such a multimedia enabling technology can significantly improve satisfaction of the Internet browsing experience and the quality of the Web-based e-Commerce by offering a sophisticated interactive environment. C. H. Chu et al.: Online Product Configuration in e-Commerce with 3D Web Viewing Technology 233 Figure 11: ODMV (One Design Multiple View) design collaboration with Web 3D viewing REFERENCES 1. Chang, C. J. and Chu, C. H., 2004, “Collaborative product development in Taiwan PCB industry,” Journal of Electronic Business Management, Vol. 2, No. 2, pp. 108-116. 2. Chu, C. H., Cheng, C. Y. and Wu, C. W., 2005, “Applications of the web-based collaborative visualization in distributed product development,” Computers in Industry, under review. 3. Chu, C. H., Cheng, H. C. and Chang, C. J, 2005, “Collaborative product development for the new economics: An empirical study of methods and enabling functions,” CIRP Design Seminar, Shanghai, China. 4. Dowlatshahi, S., 1998, “Implementing early supplier involvement: A conceptual framework,” International Journal of Operations and Production Management, Vol. 18, No. 2, pp. 143-167. 5. Fagerstrom, B. and Jackson, M., 2002, “Efficient collaboration between main and sub-suppliers,” Computers in Industry, Vol. 49, pp. 25-35. 6. Fuxin, F. and Edlund, S., 2001, “Categorisation of geometry users,” Concurrent Engineering: Research and Application, Vol. 9, No. 1, pp. 15-22. 7. Helander, M. G. and Jiao, J., 2002, “Research on e-Product development (ePD) for mass customization,” Technovation, Vol. 22, No. 11, pp. 717-724. 8. http://hoops3d.com 9. http://www.actify.com 10. http://www.cimmetry.com/index.html 11. http://www.parallelgraphics.com/virtual-manuals /cases/ 12. http://www.vital.co.uk/3d/house.htm 13. Jacobs, P. F., 1992, “Rapid prototyping and manufacturing,” Society of Manufacturing Engineers, pp. 1-23. 14. Johnson, G., 1998, “Collaborative visualization 101,” ACM SIGGRAPH, Vol. 32, No. 2, pp. 8-11. 15. Lee, D. T. and Schachter, B. J., 1980, “Two algorithms for constructing a delaunay triangulation,” International Journal of Computer and Information Sciences, Vol. 9, No. 3, pp. 219-242. 16. Li, W. D., Lu, W. F., Fuh, J. Y. H. and Wong, Y. S., 2005, “Collaborative computer-aided design: Research and development status,” Computer-Aided Design, Vol. 37, No. 9, pp. 931-940. 17. O’Neil, C., 1993, “Concurrent engineering with early supplier involvement: A cross-functional challenge,” International Journal of Purchasing and Materials Management, Vol. 29, No. 2, pp. 3-9. International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 234 18. Roberts, B. and Mackay, M., 1998, “IT supporting supplier relationships: The role of electronic commerce,” European Journal of Purchasing & Supply Management, Vol. 4, No. 2-3, pp. 175-184. 19. Roy, U. and Kodkani, S. S., 1999, “Product modeling within the framework of the World Wide Web,” IIE Trans, Vol. 31, pp. 667-677. 20. Shi, Z. N., 2004, “The feasibility study and implementation of ITRI SME-PDM on Microsoft .NET platform,” Department of Computer Science and Information Engineering, National Taiwan University, Master Thesis. 21. Shyamsundar, N. and Gadh, R., 2002, “Collaborative virtual prototyping of product assemblies over the Internet,” Computer-Aided Design, Vol. 34, No. 10, pp. 755-769. 22. Tay, F. E. H. and Roy, A., 2003, “CyberCAD: A collaborative approach in 3D-CAD technology in a multimedia-supported environment,” Computers in Industry, Vol. 52, pp. 127-145. 23. Twigg, D., 1998, “Managing product development within a design chain,” International Journal of Operations and Production Management, Vol. 18, No. 5, pp. 508-524. 24. Ulrich, K. T. and Eppinger, S. D., 2004, Product Design and Development, McGraw Hill, 3rd Edition. 25. Vinod, A., Bajaj, C., Schikore, D. and Schikore, M., 1994, “Distributed and collaborative visualization,” Computer, Vol. 27, No. 7, pp. 37-43. 26. Wognum, P. M., Fisscher, O. A. M. and Weenink, S. A. J., 2002, “Balanced relationships: Management of client-supplier relationships in product development,” Technovation, Vol. 22, pp. 341-351. 27. Wu, P. H. and Chu, C. H., 2004, “Multi-level 3D modeling for synchronous collaborative design,” Proceedings of the Chinese Institute of Industrial Engineers. 28. Xu, W. X. and Liu, T., 2003, “A web-enabled PDM system in a collaborative design environment,” Robotics and Computer-Integrated Manufacturing, Vol. 19, No. 4, pp. 315-328. ABOUT THE AUTHORS Chih-Hsing Chu attended National Taiwan University in Taipei, Taiwan, and received his BS and MS degrees from the Mechanical Engineering Department. He received his PhD degree in mechanical engineering at the Laboratory for Manufacturing Automation, University of California at Berkeley. His project work at Berkeley concerned Internet-based design and manufacturing. He worked as a Web Applications Engineer at RedSpark Inc., an Autodesk Venture, on development of Web-based collaboration software. His past work experiences also include a Research Intern at DaimlerChrysler AG, Stuttgart, Germany, and a Technical Consultant for StandTech Inc., Taoyuan, Taiwan. Prior to joining National Tsing Hua University in 2002, he was on the faculty of Industrial and Systems Engineering Department, Virginia Tech, Blacksburg. His research interests include product development, collaborative design, geometric modeling, and CAD/CAM. He is a Member of the SME, ASME, SCC, and PDMA. Chiwei Lin is an Assistant Professor in Department of Industrial Engineering and Management, Ming Hsin University of Science and Technology, Hsinfeng, Hsinchu, Taiwan. He received his PhD degree from Department of Industrial Engineering, Purdue University, West Lafayette, USA. Prior to joining Ming Hsin University of Science and Technology in 2003, he worked as a researcher in Mechanical Industry Research Laboratories (MIRL), The Industrial Technology Research Institute (ITRI), Hsinchu, Taiwan. His research interests include design chain management, precision machine tools, and semi-conductor equipment design. Yi-Wen Li received his BS degree from Industrial Engineering and Engineering Management Department at National Tsing-Hua University (NTHU), in the year of 2005. His research interests include E-Commerce and R&D management. Jen-Yu Yang received his BS degree from Industrial Engineering and Engineering Management Department at National Tsing-Hua University (NTHU), in the year of 2005. His research interests include finance engineering and E-Commerce. (Received May 2004, revised June 2004, accepted July 2004) . cross-functional challenge,” International Journal of Purchasing and Materials Management, Vol. 29, No. 2, pp. 3-9. International Journal of Electronic Business Management, Vol. 3, No. 3 (2005). mass customization in e-Commerce. International Journal of Electronic Business Management, Vol. 3, No. 3 (2005) 230 Figure 6: Major GUI components of the prototype system (a) Figure. configuration of a sport sedan Figure 8: The final product configurations Figure 9: The user can offer special requirements with the 3D markup function International Journal of Electronic Business