近年來，網際網路的迅速發展，雲端運算(Cloud Computing)已經逐漸普及， 人們僅需要將自己的檔案上傳至雲端，伺服器便會開始將資料處理，並使用在不 同的應用上面。資料視覺化(Data Visualization)是將人們無法直接處理的資料，以 圖像化的方式呈現出來，讓人們能夠以更直觀的方式了解資料內容。
離散元素法(Discrete Element Method, DEM)是一種應用大地工程領域之分析 方法，可用於岩石與砂土材料之微觀力學性質探討，以及用於模擬地形上土石崩 塌等問題，並依照精細的時間步驟計算其物理現象。
本研究開發一套基於離散元素法之視覺化系統，幫助使用者建立離散元素模 型。其為一個網頁型應用程式，透過網頁程式編輯器之方式編輯模型、匯入模型 及新增模型，在完成模型之建立後，使用者可以利用預覽模型達到視覺化模型之 效果，進而將建立好的模型上傳至雲端上面將模型之結果計算完成。待結果計算 完成之後，使用者可以將其結果展示於瀏覽器之中，在視覺化的展示過程中，使 用者可以利用上色之功能觀察每個離散元素其物理性質。
最後，本研究利用不同瀏覽器上比較不同瀏覽器上的執行效率，並且比較不 同數目的離散元素下記憶體、CPU、GPU 及網速之表現，記憶體可以決定離散元 素可彩現的數目，CPU 在本研究使用量極小，更好的 GPU 可以讓螢幕更新率更 為流暢，更快的網速讓讀取檔案速度更為提升。

In recent years, with the rapid development of the Internet, cloud computing has gradually become popular. People only need to upload their files to the cloud, and the server will begin to process the data and use it in different applications. Data Visualization is to present the data that people cannot directly process in an image- based way, so that people can understand the content of the data in a more intuitive way.
Discrete Element Method (DEM) is an analysis method applied in the field of geotechnical engineering. It can be used to explore the micro-mechanical properties of rock and sand materials, and to simulate the problems of soil and rock collapse on the terrain, and follow precise time steps. Calculate its physical phenomena.
This research develops a visualization system based on the discrete element method to help users build discrete element models. It is a web-based application that edits models, imports models, and adds new models through a web program editor. After the model is created, the user can use the simulation model to achieve the effect of the visual model, and then create the model is uploaded to the cloud and the result of the model is calculated. After the calculation of the result is completed, the user can display the result in the browser. In the visual display, the user can use the coloring function to observe the physical properties of each discrete element.
At last, this study uses different browsers to compare the execution efficiency of different browsers, and compares the performance of memory, CPU, GPU, and network speed under different numbers of discrete elements. It can be determined that memory can determine the display of discrete elements. The number of CPUs used in this research is extremely small. A better GPU can make the screen update rate smoother, and a faster network speed can make reading files faster.

[1] 吳騏宇(2018)。超高速離散元素分析引擎之研發。碩士論文，國立臺 灣科技大學營建工程系，台北市。
[2] 黃竟鎧(2020)。多圖形處理器之高速離散元素模擬引擎。碩士論文， 國立臺灣科技大學營建工程系，台北市。
[3] Cundall, P. A. (1971). A computer model for simulating progressive, large- scale movements in blocky rock systems. Proc. Symp. Int. Soc. Rock Mech. Nancy, 2(8).
[4] Itasca Consulting Group, I. (2017). PFC3D (particle flow code in 3 dimension), Ver 5.0 user's manual.
[5] ESSS. (n.d.). Rocky DEM - The Most Powerful Particle Simulation Software. from https://rocky.esss.co/
[6] ESSS. (n.d.). Spetstechnomash uses Rocky DEM to design new, customized equipment. Retrieved January 23, 2021, from https://rocky.esss.co/case/spetstechnomash/
[7] ESSS. (n.d.). Idaho National Laboratory relies on complex-shape models to analyze milled biomass flow. Retrieved January 23, 2021, from https://rocky.esss.co/case/idaho-national-laboratory/
[8] ESSS. (n.d.). Beyond Simulation: Supplementing a Virtual Lab with DEM Technology. Retrieved January 23, 2021, from https://rocky.esss.co/case/sandvik-supplementing-virtual-lab-dem-technology/
[9] ESSS. (n.d.). BMS Simulates over 10 million particles using Rocky DEM. Retrieved January 23, 2021, from https://rocky.esss.co/case/bms-simulates- over-10-million-particles-using-rocky-dem/
[10] Ltd., D. S. (n.d.). EDEM Simulation for Industry. Retrieved January 23, 2021, from https://www.edemsimulation.com/industry/
[11] Potyondy, D. O., & Cundall, P. A. (2004). A bonded-particle model for rock. International Journal of Rock Mechanics and Mining Sciences, 41(8 SPEC.ISS.), 1329-1364. doi: 10.1016/j.ijrmms.2004.09.011
[12] Whittles, D. N., Kingman, S., Lowndes, I., & Jackson, K. (2006). Laboratory and numerical investigation into the characteristics of rock fragmentation. Minerals Engineering, 19(14), 1418-1429. doi: 10.1016/j.mineng.2006.02.004
[13] Zhang, Q., Zhu, H., Zhang, L., & Ding, X. (2011). Study of scale effect on intact rock strength using particle flow modeling. International Journal of Rock Mechanics and Mining Sciences, 48(8), 1320-1328. doi:
10.1016/j.ijrmms.2011.09.016

[14] Park, J. W., & Song, J. J. (2013). Numerical method for the determination of
contact areas of a rock joint under normal and shear loads. International Journal of Rock Mechanics and Mining Sciences, 58, 8-22. doi: 10.1016/j.ijrmms.2012.10.001
[15] Sadek, M. A., Chen, Y., & Liu, J. (2011). Simulating shear behavior of a sandy soil under different soil conditions. Journal of Terramechanics, 48(6), 451-458. doi: 10.1016/j.jterra.2011.09.006
[16] Lo, C. M., Lin, Y. H., Wei, L. W., Huang, W. K., Cheng, T. Y., Lin, M. L., . . . Lee, C. T. (2012). Kinematic process of the catastrophic landslide through investigation and numerical simulation. Journal of the Chinese Institute of Civil and Hydraulic Engineering, 24(3), 231-243.
[17] 翁正學(2017)。向上裂隙水對順向坡穩定性及破壞行為之影響。碩士 論文，國立臺灣大學土木工程學研究所，台北市。
[18] Robbins, J. N. (2012). Learning web design: A begin-ner’s guide to HTML, CSS, JavaScript, and web graphics. O’Reilly Media, Inc.
[19] Moraes, F. (n.d.). HTML For Beginners The Easy Way: Start Learning HTML & CSS Today. Retrieved January 18,2021, from https://html.com/
[20] Cowlishaw, M. (2020). ECMA-262, 2nd Edition: ECMAScript Language Specification.
[21] (1995). Press Release Announcing JavaScript, Netscape, and Sun Announce Javascript, PR Newswire.
[22] Chaffer, J., & Swedberg, K. (2013). Learning jQuery.
[23] team, B. (n.d.). Bootstrap. Retrieved Janurary 19, 2021, from
https://getbootstrap.com/
[24] babylonjs.com. (n.d.). Babylon.js Documentation. Retrieved January 19, 2021, from https://doc.babylonjs.com/
[25] codemirror.net. (n.d.). User manual and reference guide. Retrieved January 19, 2021, from https://codemirror.net/doc/manual.html
[26] Fogleman, M. (2020). delatin. Retrieved January 20, 2021, from
https://github.com/mapbox/delatin
[27] Garland, M., & Heckbert, P. S. (1995). Fast polygonal approximation of terrains and height fields. Fast Polygonal Approximation of Terrains and Height Fields.
[28] Wandschneider, M. (2017). Learning node.js: a hands-on guide to building web applications in JavaScript, 2nd Edition. Pearson Schweiz Ag, 58(2), 277-307.
[29] Gor, C. (2020). Express vs Koa: Which Node.js Framework Is Best For You?
Retrieved February, 17, 2021, from https://www.esparkinfo.com/express-vs-
koa.html
[30] (2018). NVIDIA System Management Interface (NVIDIA-smi).
[31] F5, I. (n.d.). NGINX. January 19, 2021, from https://www.nginx.com/
[32] Automatically Enable HTTPS on Your Website with EFF's Certbot, Deploying
Let's Encrypt Certificates.
[33] DB-Engines Ranking. (February, 2021). Retrieved February, 17, 2021,
from https://db-engines.com/en/ranking
[34] babylonjs.com. (n.d.). An Introduction To The Solid Particle System. January
20, 2021, from
https://doc.babylonjs.com/divingDeeper/particles/solid_particle_system/sps_in
tro
[35] W3.CSS. (n.d.). Colors HSL. Retrieved January 20, 2021, from
https://www.w3schools.com/colors/colors_hsl.asp
[36] Velasque, D. (2020). Rendering 100k spheres, instantiating and draw calls. Retrieved January 23, 2021, from https://velasquezdaniel.com/blog/rendering- 100k-spheres-instantianing-and-draw-calls/