Development of 3D Website Along with VFX and Animation

International Journal of Trend in Scientific Research and Development (IJTSRD)
Special Issue: International Conference on Advances in Engineering, Science and Technology – 2021
Organized by: Uttaranchal Institute of Technology, Uttaranchal University, Dehradun
Available Online: www.ijtsrd.com e-ISSN: 2456 – 6470
@ IJTSRD | Unique Paper ID – IJTSRD42459 | ICAEST-21 | May 2021 Page 13
Development of 3D Website Along with VFX and Animation
Surya Prakash Uniyal1, Shivam Amoli1, Vipul Kumar Singh1, Prashant Chaudhary2
1B.Tech Scholar, 2Assistant Professor,
1, 2Computer Science and Engineering Department,
Uttaranchal Institute of Technology (UIT), Dehradun, Uttarakhand, India
ABSTRACT
This paper focuses on the development of 3D web application by designing
dynamic 3D model with the help of VFX and animation. 3D Modeling can
create the static exposure of product but VFX and animation adds dynamic
effects for real time rendering of product. Real time rendering and interactive
roaming gives a detailed view of the 3D objects created. Firstly, Blender
software was used to design a raw 3D model of a swiss knife and, VFX and
animation were applied to add dynamics and interactive features to this
model. Verge3D online applicationwasusedtodefinefunctionsthatHTML can
perform on different parts of the model designed. Lastly, Googlewebdesigner
was employed to develop an HTML page where we have placed HTML
embedded 3D model retrieved from Verge3D. In addition to this, different
buttons were placed and linked in the website to allow user to perform
different functions defined in Verge3D.
How to cite this paper: Surya Prakash
Uniyal | Shivam Amoli | Vipul Kumar
Singh | Prashant Chaudhary
"Development of 3D Website Along with
VFX and Animation" Published in
International Journal ofTrendinScientific
Research and Development (ijtsrd), ISSN:
2456-6470, Special
Issue | International
Conference on
Advances in
Engineering, Science
and Technology –
2021, May 2021,
pp.13-17, URL:
www.ijtsrd.com/papers/ijtsrd42459.pdf
Copyright © 2021 by author(s) and
International Journal ofTrendinScientific
Research and Development Journal. This
is an Open Access article distributed
under the terms of
the Creative
CommonsAttribution
License (CC BY 4.0)
(http://creativecommons.org/licenses/by/4.0)
INTRODUCTION:
Ever since 3D modeling came into being around 50 years
back in the late 1960s, the technology has evolved in a
massive way. The pioneer 3D graphics company, Evans &
Sutherland, was founded by David Evans and Ivan
Sutherland in association with University of Utah, U.S. in
1968[1]. Currently, there are many industries or sectors
benefiting from this technology, such as gaming,
architecture, healthcare, engineering, entertainment
industry, commercial advertising, Geographic Information
System (GIS), academic research, website development etc.
With the rapid digitalization of businessorganizations,more
and more websites are getting developed daily for online
presence, information exchange, credibility, market
expansion, consumer insights, advertising, e-commerce, 3D
tour, architecture, model designing, gaming, management
systems, cloud storage, e-learning,etc.[2][3][4][5][6][7].Everyday
slightly more than 547200 new websites are created
globally[8]. Now the competition at the development of
websites/web applications arises mostly in designing
making the product more easy to use and interactive at the
same time. 3D modeling is a new rave in the development of
websites and web applications. 3D elements used in web
design can make a website moreimpressiveandmemorable.
The technology can expand the area of visibility in the
application as well as the number of details we want to
display to the user. 2D technologies are not capable of
developing websites/web applications interactive and
effective enough to meet UX for certain purposes like
gaming, product display, etc. Advantages of 3D modeling
over 2D methods include ability to change angle or animate
images with faster rendering of the changes, automatic
calculation and rendering photorealistic effects rather than
mentally visualizing or estimating, and lesser chance of
human error in misplacing, overdoing, or forgetting to
include a visual effect[9]. The website/web application
prepared with the help of 3D modeling along with visual
effects and animation has more attractive design and more
understandable facts/details.
Some of these 3D modeling softwares commonly usedtoday
are Adobe Maya, Houdini, Cinema 4D, Blender, WebGL,
Verge3D, etc. 3D modelingalongwithVFXandanimation can
enhance the UI/UX of websites/web applications far more
than user expectations[10]. The development of a 3D
website/web application involves broadly two processes.
The first step of development of 3D model and
implementation of VFX is done by software applications like
IJTSRD42459

Special Issue: International Conference on Advances in Engineering, Science and Technology – 2021 (ICAEST-21)
Available online @ www.ijtsrd.com eISSN: 2456-6470
Adobe Maya, Blender, etc. The second step involves the
deployment of 3D model prepared along with VFX and
animation in websites/web applications by the help of
software tools like WebGL, Verge3D, etc. VFX includes
shading and texturing of objects withintegrationof real time
environment. Therefore, VFX along with 3D modeling is
helpful in creating multiple visual combinations. As the
model prepared through VFX and 3D modeling is static,
addition of animation can make the model dynamic.
Animation helps in the dynamic manipulation of image and
rendering motions.
The objective of the present work is to create and design a
website using visual effects and animation in addition to the
3D modeling technology.
METHODOLOGY
We have employed following software tools for achieving the objective of the present study – BLENDER[11], VERGE3D[12] and,
GOOGLE WEB DESIGNER[13]. Blender software application was used for these three purposes – designing 3D model,
implementing VFX and animating objects. Verge3D is a middleware between Blender 3D model and HTML. It enables users to
interact with 3D model through html page. We can also define predefined functions which HTML can perform on different
objects in 3D model. Verge3D integrates 3D model with pre-defined functionsintoa HTML embeddedobject,whichisusablein
HTML page. Google web designer is a software tool to design HTML pages. (Fig. 1)
Fig. 1
RESULTS AND DISCUSSIONS
Blender:
Firstly the Blender software tool was used for designing a raw 3D model of the Swiss knife with blades and tools (Fig. 2).
Secondly, we implemented VFX to design following materials for applying on the model – chrome for blades, aluminum for
frame and brass for pivot. For the body of the swiss knife model we have designed three different materials – wood (Fig. 3),
carbon black (Fig. 4) and blue metal (Fig. 5), which we can change in the website/web application. We have placed the swiss
knife at the centre of the ionosphere to provide space for the movement of camera. We have also applied VFX for interactive
environment (Fig. 6). Lastly, we have animated the opening/unpacking motion of all blades/tools of the swiss knife model at
once. We have animated the motion by key-framing the positions, rotations and scales of the blades/tools (Fig. 7).
Fig. 2 Fig. 3

Fig. 4 Fig. 5
Fig. 6 Fig. 7
Verge3D:
We have defined functions which HTML can perform on different objectsin3Dmodel.Wehaveintegrated3Dmodel alongwith
defined functions into a HTML embedded object, which is usable in HTML page. We have coded the camera object for auto-
rotate around the 3D model, if there is no activity by the user for a certain period of time. We have defined functions for:
Play opening/unpacking animation of all Blades/tools at once
Play opening/unpacking animation in reverse, i.e. closing/packing animation of all Blades/tools at once
Play opening/unpacking animation for individual blade/tool when respective blade/tool is clicked by user
For changing material of body of swiss knife 3D model to other predesigned materials.
We have defined functions to change material of objects “back_cover” and “front_cover”. We have three different materials
“carbon”, “cover” (default blue) and “wood”. We are also linking these functions to HTML elements “carbon_material”(Fig. 8),
“blue_material”(Fig. 9) and “wood_material”(Fig. 10), i.e., these functions will get invoked on event of click for respective
element. We have set a timer of 2 seconds after initial loading of HTML page. When the timerwill getover,it will setthecamera
object on auto-rotate (Fig. 11). We have also set a click listener on all objects which will get invoked if user clicks anywhere on
the screen. The click listener will set the camera auto-rotate off for an interval of 5 seconds, after that it will set the camera
auto-rotate on again (Fig. 12). As initially when the HTML page will load, the Swiss Knife Model will be in folded state,
therefore, we have defined a variable “fold” with initial state true. The fold variable will holdthefoldingstateoftheSwissKnife
Model (Fig. 13). We have also defined variables for each individual Blade/Tool to hold their respective fold state, as we have
given a functionality to unfold individual blade/tool by clicking on them. We have set all these variables initially to false (Fig.
14).
On event of click for HTML element “unfold_knife_button”, we have set “play animation” function for all objects (i.e., all
blades/tools) from frame 0 to 50. We are also checking the fold state of all blades/tools via “fold” variable before playing the
animation. We are also setting “fold” variable to false after playing animationasall theblades/toolsareunfoldednow.Wehave
also set clicked listener for very individual blade/tool, which will playtheanimationforthatindividual blade/tool only.Clicked
listener will also check and maintain values of “fold” variable as well as respective fold state variable of individual blade/tool.
On event of click for HTML element “fold_knife_button”, we have set “play animation” function either for all objects (i.e., all
blades/tools) or for individual blade/tool (if any is in unfold sate) from frame0to50inreverseorder.Wearealsocheckingthe
fold state of all blades/tools via “fold” variable as well as respective fold state variable of individual blade/tool (if any is in
unfold state), before playing the animation. We are also maintaining the values of variables accordingly. (Fig. 15)
Fig. 8 Fig. 9

Fig. 10 Fig. 11
Fig. 12 Fig. 13
Fig. 14
Fig. 15

Google web designer:
We have a single HTML page where we have placed HTML
embedded object that we have got from Verge3D. We have
also placed and linked different buttonsvia whichsingle user
can perform different functionsthatwehavealreadydefined
in Verge3D. We have placed the HTML embedded element
we have got from Verge3D occupying complete screen. We
have defined two <div> on both sides (left and right) of the
screen containing three buttons each. Below is the code of
the HTML page which we have designed in Google web
designer.
CONCLUSION
The present work involves creation of 3D website/web
application by the development of dynamic 3D modeling,
VFX and animation. The efficiency and scalability of the
project prepared is to provide more interactiveanddynamic
visual experience. The product prepared through 3D
modeling along with VFXand animationgivesaninformative
view for better understanding the procedure. 3D Modeling
can create the static exposure of product but VFX and
animation adds dynamic effects for real time rendering of
product. Real time rendering andinteractive roaminggivesa
detailed view of the 3D objects created. Visual interaction of
the product developed highlights the key features of each
element present in it and also helps to understand the 360o
understanding of the environmental elements. VFX adds an
extra-ordinary feature of texturing and shading along with
motion of objects via animation, the model prepared via 3D
modeling along with VFX and animationisfar betterthanthe
model prepared using 3D modeling alone. The online
softwares employed for the product development were
Blender, Verge3D and Google web designer.
ACKNOWLEDGEMENTS
We would like to thank Uttaranchal Institute of Technology
(UIT), Dehradun for providing resources to complete this
project. We would also like to thank developersofVERGE3D,
BLENDER and GOOGLE WEB DESIGNER software
applications for providing open-source and freeware
software tools which made our project possible.
REFERENCES
[1] Chapman, G. 2015. Utah inventions: The birth of
computer graphics. Available at
https://www.ksl.com/article/36039333/utah-
inventions-the-birth-of-computer-graphics.Accessed
on 10 April, 2021.
[2] Wang, X., Wu, J. and Yang, B. 2009. X3D-Based
Dynamic Interactive3DVirtual E-ShoppingMall.2009
International Conference on E-Business and
Information System Security. 23-24 May 2009.
Wuhan, China. pp. 1-4. doi:
10.1109/EBISS.2009.5138147.
[3] Wang, J. and Zhi-yong, Z. 2010. 3D Presentationand
3D Model Retrieval for E-Commerce. 2010 Third
International Symposium on Electronic Commerce
and Security. 29-31 July 2010. Guangzhou, China. pp.
140-143. doi: 10.1109/ISECS.2010.39.
[4] Li, H., Yan, P., Yingci, Z. and Hong, Z. 2011. Website
platform designandimplementation basedon Web3D
virtual-reality technology. 2011 IEEE 3rd
International Conferenceon CommunicationSoftware
and Networks. 27-29 May 2011. Xi'an, China.pp.618-
622. doi: 10.1109/ICCSN.2011.6014646.
[5] Zhang, G. and Wang, C. 2011. Research of Web3D-
based ceramic products virtual displaying platform.
Proceedings of 2011 International Conference on
Electronic & Mechanical EngineeringandInformation
Technology. 12-14 August 2011. Harbin, China. pp.
2974-2977. doi: 10.1109/EMEIT.2011.6023717.
[6] Cosido, Ó., Terán, L., López, Ó. R., Sarachaga, M.,
Campi, M., Catuogno, R., Gutiérrez, N.G. and
Latorre, E.M. 2015. 3D tour through university
spaces for the management and dissemination of the
cultural heritage of the University of Cantabria. 2015
Digital Heritage. 28 September-2 October 2015.
Granada, Spain. pp. 667-670. doi:
10.1109/DigitalHeritage.2015.7419594.
[7] Lei, L., Zuo, M., Zeng, Y. and Yang, H. 2018. 3D
Digital Campus System Based on WebGL and API.
2018 5th International Conference on Systems and
Informatics (ICSAI). 10-12 November 2018. Nanjing,
China. pp. 532-537. doi:
10.1109/ICSAI.2018.8599415.
[8] WebsiteSetup.org. How many websites are there.
Available at https://websitesetup.org/news/how-
many-websites-are-there/. Accessed on 10 April,
2021.
[9] Wikipedia. 2021. 3D modeling. Available at
https://en.wikipedia.org/wiki/3D_modeling.
Accessed on 9 April, 2021.
[10] Yalanska, M. UI in volume: 3DGraphicsinCreativeUI
Design Concepts. Available at
https://blog.tubikstudio.com/creative-ui-design-
concepts-3d-graphics/. Accessed on 8 April, 2021.
[11] Community, B.O., 2018. Blender-a 3Dmodelingand
rendering package, Stichting Blender Foundation,
Amsterdam. Available at: http://www.blender.org.
[12] Kovelenov, Yuri.2021.Verge3D3.6.1.Soft8soft.com.
[13] Google Web Designer. 2020. Google. 8.0.1.0401 –
Shell Build 6.1.4.0. Available at
https://webdesigner.withgoogle.com/.
[14] Joshi, K., Chauhan, N. A Study on Routing Protocol
Technique. International Journal of Engineering
Research & Technology (IJERT)-Volume, 7 Issue-12.
[15] Joshi, Kapil and Joshi, N.K. and Diwakar, Manoj and
Gupta, Himanshu and Baloni, Dev, Cross Bilateral
Filter Based Image Fusion in Transform Domain
(February 27, 2020). Available at SSRN:
https://ssrn.com/abstract=3545083 or
http://dx.doi.org/10.2139/ssrn.3545083
[16] Joshi, Kapil & Diwakar, Manoj. (2019). Fundamental
of MS-Office.
[17] Dhaundiyal, R., Tripathi, A., Joshi, K., Diwakar, M.,
Singh, P. Clustering based Multi-modality Medical
Image Fusion. Journal of Physics: Conference Series-
Volume-1478 (2020) 012024, doi:10.1088/1742-
6596/1478/1/012024 (Rashmi Dhaundiyal et al
2020 J. Phys.: Conf. Ser. 1478 012024)
[18] Kapil Joshi, Manoj Diwakar*, N.K.Joshi and Sumita
Lamba, “A Concise Review on Latest Methods of
Image Fusion”, Recent Advances in ComputerScience
and Communications (2021) 14: 2046.
https://doi.org/10.2174/221327591266620021411
3414

Development of 3D Website Along with VFX and Animation

More Related Content

What's hot (13)

Similar to Development of 3D Website Along with VFX and Animation (20)

More from YogeshIJTSRD (20)

Recently uploaded (20)

Development of 3D Website Along with VFX and Animation