InternationalJournalofElectronicBusiness 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 JournalofElectronicBusiness 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 JournalofElectronicBusiness 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 JournalofElectronicBusiness 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 JournalofElectronicBusiness 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,” JournalofElectronicBusiness
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 Journalof 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 Journalof
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,” InternationalJournalof Purchasing
and Materials Management, Vol. 29, No. 2, pp.
3-9.
International JournalofElectronicBusiness Management, Vol. 3, No. 3 (2005)
234
18. Roberts, B. and Mackay, M., 1998, “IT
supporting supplier relationships: The role of
electronic commerce,” European Journalof
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 Journalof 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