發(fā)布時(shí)間：2020-05-12 04:49

【摘要】：留言簽到系統(tǒng)是商家吸引顧客、增加顧客粘性的營銷手段。商戶通常設(shè)定一個(gè)新穎獨(dú)特的活動(dòng)場景,通過給參與活動(dòng)的用戶一些獎(jiǎng)勵(lì)達(dá)到吸引消費(fèi)者、宣傳自己品牌的目的。傳統(tǒng)的留言簽到系統(tǒng)是2D展現(xiàn)方式,商家只能通過圖片和廣告詞吸引用戶,展現(xiàn)形式單一,容易造成用戶的審美疲勞。WebGL技術(shù)實(shí)現(xiàn)了手機(jī)端的3D場景,極大地提高了手機(jī)端營銷的展示效果。然而,WebGL技術(shù)需要手機(jī)端下載完整模型,并計(jì)算和渲染模型才能呈現(xiàn)3D應(yīng)用場景,在遇到大模型或增量模型時(shí),由于計(jì)算量大和手機(jī)端計(jì)算能力有限,模型下載和首屏渲染使會導(dǎo)致手機(jī)卡頓。針對傳統(tǒng)營銷方式的缺陷和當(dāng)前WebGL應(yīng)用存在的問題,本文提出了構(gòu)建手機(jī)端WebGL應(yīng)用的解決方案,并設(shè)計(jì)實(shí)現(xiàn)了基于WebGL構(gòu)建新型手機(jī)端留言簽到系統(tǒng)。首先,根據(jù)留言簽到系統(tǒng)的需求分析,從構(gòu)建留言簽到系統(tǒng)架構(gòu)和手機(jī)端WebGL架構(gòu)兩方面進(jìn)行了總體設(shè)計(jì)。留言簽到系統(tǒng)架構(gòu)包括商戶端站點(diǎn)、用戶手機(jī)端站點(diǎn)以及服務(wù)端。WebGL應(yīng)用的構(gòu)建重點(diǎn)闡述了手機(jī)端結(jié)構(gòu)設(shè)計(jì)和用戶體驗(yàn)優(yōu)化策略。其后,本文闡述了留言簽到系統(tǒng)的具體實(shí)現(xiàn)方案,并對構(gòu)建手機(jī)端快速響應(yīng)、流暢運(yùn)行的WebGL應(yīng)用進(jìn)行了詳細(xì)的設(shè)計(jì)與實(shí)現(xiàn)。最后,本文從功能和性能兩方面對系統(tǒng)進(jìn)行了測試和分析,結(jié)果表明,WebGL應(yīng)用作為一種新型的營銷展現(xiàn)方式,在手機(jī)端流暢的運(yùn)行成為可能。
【圖文】：

ＯｐｅｎＧＬ庫由不同顯卡生產(chǎn)商家開發(fā)和升級，對外提供統(tǒng)一邋ＡＰＩ。逡逑ＯｐｅｎＧＬ中的圖形渲染管線是將３Ｄ坐標(biāo)最終渲染成屏幕顯示的２Ｄ像素的逡逑過程，圖２－１展示了如何從輸入的３個(gè)空間坐標(biāo)轉(zhuǎn)為一組屏幕顯示有顏色的２Ｄ逡逑像素的過程。逡逑頂點(diǎn)著色器邐形狀（圖元）裝配邐幾何著色器逡逑ＶＥＲＴＥＸ邋ＳＨＡＤＥＲ邋ＳＨＡＰＥ邋ＡＳＳＥＭＢＬＹ邋ＧＥＯＭＥＴＲＹ邋ＳＨＡＤＥＲ逡逑頂點(diǎn)數(shù)據(jù)逡逑ＤＡＴＡｎ邋９邋？邐（４逡逑．：ｉ邋ｗ邐，邋Ｖ邐；邐邋．．邐；邐逡逑ＴＥＳＴ邋ＡＮＤ邋ＢＬＥＮＤＩＮＧ邋ＦＲＡＧＭＥＮＴ邋ＳＨＡＤＥＲ邋ＲＡＳＴＥＲＺＡＴＩＯＮ逡逑測試與混合邐片段著色器邐光柵化逡逑圖２－１圖形渲染管線［１７〗逡逑首先，三個(gè)頂點(diǎn)的３Ｄ坐標(biāo)最先經(jīng)過頂點(diǎn)著色器，這里是做簡單的坐標(biāo)變化，逡逑將輸入坐標(biāo)轉(zhuǎn)化為標(biāo)準(zhǔn)化設(shè)備坐標(biāo)，使ｘ、ｙ、ｚ的值都在－１到１之間，將非標(biāo)準(zhǔn)逡逑的坐標(biāo)轉(zhuǎn)化在ＯｐｅｎＧＬ的可視化區(qū)域內(nèi)，輸出為新的３Ｄ坐標(biāo)。然后，將頂點(diǎn)著逡逑色器輸出的坐標(biāo)作為輸入，同時(shí)傳入裝配的形狀，如點(diǎn)、線、三角形（本例中是逡逑三角形），將頂點(diǎn)裝配成指定的形狀。幾何著色器會將一個(gè)基本的圖形轉(zhuǎn)為由不逡逑同頂點(diǎn)構(gòu)成的新的圖形。接著，幾何著色器的輸出會被光柵化處理，將幾何圖像逡逑轉(zhuǎn)化成屏幕上顯示的像素

點(diǎn)著色器和片元著色器的設(shè)置，ＴｈｒｅｅＪＳ已經(jīng)做了相應(yīng)的轉(zhuǎn)化工作。逡逑使用３Ｄ建模軟件會導(dǎo)出３Ｄ模型數(shù)據(jù)，包括頂點(diǎn)數(shù)據(jù)、位置信息、燈光屬逡逑性、材質(zhì)信息等數(shù)據(jù)。如圖２－７所示，頂點(diǎn)數(shù)據(jù)需要與模型矩陣、視圖矩陣、投逡逑影矩陣相乘后才能進(jìn)入頂點(diǎn)著色器，動(dòng)態(tài)澶染時(shí)，，還需要引入變換矩陣。可以看逡逑出，模型的加載會有非常龐雜的工作量，而ＴｈｒｅｅＪＳ庫提供了加載模型的方法，逡逑即完成頂點(diǎn)數(shù)據(jù)和著色器之間的矩陣變換。逡逑S緬握溴危咤巍�逦｜辶x蟂緬畏彥蝪|敢珍邐挩邐ｇ邐珍邐黎黎逡逑黎邐沷邐？邐？邐？邐？逸邋＊邐？邐？邐＾－＜４＾逡逑■邐■邐－邐＇邐：邐ｎｍｍ邋！邐￣；＞邋次點(diǎn)厶：逡逑圖２－７邋ＷｅｂＧＬ在頂點(diǎn)著色器之前做的工作逡逑總之，ＴｈｒｅｅＪＳ可構(gòu)建兒何模型、生成變換矩陣、生成材質(zhì)和燈光、生成頂逡逑點(diǎn)著色器和片元著色器ＧＬＳＬ代碼。逡逑２．３．２邋ＴｈｒｅｅＪＳ場景的構(gòu)建逡逑１、
【學(xué)位授予單位】：北京郵電大學(xué)
【學(xué)位級別】：碩士
【學(xué)位授予年份】：2018
【分類號】：TP393.09

【相似文獻(xiàn)】

相關(guān)期刊論文 前10條

1 王成雷;連懿;曾曉明;何龍;崔鐵軍;杜鵬;陳鵬飛;;基于WebGL的三維點(diǎn)云可視化研究[J];科技創(chuàng)新與應(yīng)用;2017年35期

2 黃水萍;;基于WEBGL的虛擬實(shí)驗(yàn)室開發(fā)[J];計(jì)算機(jī)光盤軟件與應(yīng)用;2012年18期

3 張衛(wèi)國;武t牱

本文編號：2659686