Mozilla揭秘WebXR時代設計技巧

摘要:北京時間20200222關于【Mozilla揭秘WebXR時代設計技巧】的具體情況和說明,讓www.rmkogn.live新聞頻道以圖文形式為您慢慢道來。

向您推薦
繼續播放

通過推出《Hello WebXR》,Mozilla希望向更多人(尤其是開發者)展示在網頁端VR中可實現的多樣化交互,而為了讓整個教學體驗像游戲一樣輕松,Mozilla在設計上加入不少巧思。

整體感覺

《Hello WebXR》的概念其實是一個簡單、輕松且容易上手的交互式體驗,相當于多種迷你應用的合集,主要是幫助初學者了解VR,并展示新推出的WebXR API。這個API接口支持幾乎任何一臺VR頭顯,尤其是Oculus Quest一體機,因此一些內容更側重于移動性。

為了打造教學體驗中的大廳場景,Mozilla參考了網絡和3D內容平臺Sketchfab上的大量設計。在確定框架后,便開始用Blender工具開始繪圖,并在VR中測試,整個大廳的主旨是看起來友好而溫馨,采用大多數人都可以接受的中性色調。

流程

在Blender完成創作后,3D模型導出為glTF,并使用PNG(大多數)或JPG格式的圖像進行紋理渲染。對于網頁端VR來說,很重要的一不就是對全部紋理進行手動優化,來降低3D資源的大小。此外,還使用Draco壓縮工具來優化用攝影測量法實現的3D模型,將大小進一步從1.41MB降低到683KB。

總得來講,《Hello WebXR》的視覺設計流程比較傳統、簡單,紋理渲染和修改使用了Photoshop,而網格和燈光貼圖是用Blender完成的,并導出為glTF和PNG格式。

特殊著色器和效果

1)光線著色器:這是一個簡單的漸變效果,由于是用附加模式進行渲染,使得黑色變成透明,深藍疊加藍色沒有飽和為白色。光線的目標是一個曲面網格,由一個圓柱和圓盤組合而成;

2)門著色器:用于渲染門的星空透視特效,根據極坐標進行渲染,并疊加在動態的藍色底色上;

3)立體球形著色器:用于渲染立體球形的變形效果(形狀和色彩),這種光暈效果是通過調整紅藍色系位置實現的;

4)縮放著色器:用于優化的縮放效果,只顯示油畫的部分紋理和白色原型光暈。這個著色器是一個平面,使用光線交接的貼圖坐標來計算縮放所顯示的紋理尺寸。

5)SDF文字著色器:使用Troika庫,可快速渲染SDF文字,無須生成紋理。

性能測試

與PC端或高端設備不同,在優化在Quest移動端平臺的性能上,需要用特殊辦法來處理多邊形數量、材質和紋理復雜程度。Mozilla希望WebXR教學應用在Quest上像普通應用或PC VR應用一樣運行順暢,因此決定采用以下手段:

1)在保證整潔平滑的情況下,將多邊形數量降低至最少;

2)網格盡可能合并,所有共享相同材質的靜止物體合并在一起,并導出為同一個網格;

3)盡可能簡化、降低或回收利用材質,也就是說:場景中幾乎所有元素都具備一個不變的材質,只使用兩個定向光(手柄);

此外,由于不變材質不發光,于是需要提前計算出光影圖,這樣做有利有弊,優點是:光線質量比實時光照更好,因為渲染在線下提前完成,不受時間限制,因此不需要在Blender中進行路線追蹤就能實現全局照明,模擬真實的光線。另外一點,由于不需要實時光線渲染,著色也是不變的,只需要在網格上應用紋理就足夠。

相反光影圖也具有兩大缺點,即:體積容易變大,紋理應用在模型上時容易出現可見的像素或像素噪音(因為紋理分辨率不足或渲染效果不夠順滑,不夠細致),使用2048x2048分辨率的紋理可以解決這一問題,同時Mozilla還將1萬個樣本用于渲染。另一點,光影圖不支持動態修改光線,不過好在《Hello WebXR》應用的光線是靜態的。

音效和眩暈測試

《Hello WebXR》中包括一個展示空間音頻的場景,每一種聲音都伴隨著對應的動畫作為視覺提示,它們是由關鍵幀組成的動態網格。

除了展示音頻外,還有一個測試VR眩暈感的城市場景,其特點是多邊形數量少,但看起來足夠逼真,將用戶置身于一個高樓大廈頂端。經過一番體驗,發現這種VR場景并沒有產生眩暈感,還發現只是單純將人轉移到500米的虛擬高度并不足以讓人眩暈,不僅正確紋理規模是關鍵,場景也需要給人帶來一種不安全感才能更沉浸。另外,體驗者與其他建筑的相對位置和規模,以及燈光和紋理還需要更逼真。

于是,Mozilla將建筑的紋理簡化成簡單的黑白色調,通過位置和規模的對比,提升眩暈感。這個場景只包含兩個網格:建筑和傳送門,場景中用戶的移動范圍有限,因此只需要渲染場景中心的部分,亮度和紋理都是重復且不變的。

總結

在《Hello WebXR》開發過程中,Mozilla有一些遺憾的地方,比如:

· 沒有使用合適的硬件來渲染光影圖,因此花了11小時才完成渲染,沒辦法快速進行修改;

· 還沒有測試眩暈場景就開始優化第一版本,浪費了一周時間;

· 貼圖分級細化水平偏低,紋理質量看起來不夠高,近距離觀看VR中的圖像時能夠注意到差異;

· 內容創作流程還有待簡化;

除此之外,也有一些令人滿意的地方:

· 視覺效果比較干凈、美觀,盡管使用簡單材質和紋理,效果并不會看起來廉價;

· 合并網格和簡化材料對于性能提升有很大幫助,不過目前還沒有在3DoF VR頭顯上測試過;

· BASIS或Draco工具效果不錯,如果用JPG或PNG格式的圖像作為紋理,那么載入時間要長很多。參考:Mozilla


查看更多

實時推薦

【防疫科普】疫情期間如何保證兒童正常生長發育?
推薦 2020-04-03 20:23 686 9624
排球名將加莫娃:有朋友因為是中國人在發達國家被打
推薦 2020-04-03 20:23 127 8833
《重生》真的叫人大開眼見,誰都可以活,男主必須死
推薦 2020-04-03 20:23 214 8656
沾益區西平街道開展巡查整改工作
推薦 2020-04-03 20:23 490 5504
廈門證監局積極推動轄區上市公司復工復產
推薦 2020-04-03 20:23 109 500
清明祭英烈 豐碑勵童心 江蘇青少年代表憑吊革命先烈
推薦 2020-04-03 20:23 136 4252
不完美的她:我也差一點就成為,那個縱容男友虐待孩子的單親媽媽
推薦 2020-04-03 20:23 501 7487
紫薯別煮著吃了,教你一招,15分鐘就出鍋,比面包都香!
推薦 2020-04-03 20:23 545 6690
古都太原投資2000萬元修繕明代古圓通寺
推薦 2020-04-03 20:23 217 3470
【幾句話get車】全新奧迪A6 Allroad探索家上市
推薦 2020-04-03 20:23 845 9245
板橋鎮全面發起脫貧攻堅春季總攻動員令
推薦 2020-04-03 20:23 363 8887
胡漢杰任董事長 王強、鞏月瓊任董事!一汽 東風 福田聯手成立公司
推薦 2020-04-03 20:23 515 8232
被時間遺忘的女人!51歲的蕭薔仍屬尤物,好身材不懼穿“抹布裙”
推薦 2020-04-03 20:23 449 8993
六道秘制小龍蝦的做法及醬料配方!
推薦 2020-04-03 20:23 852 531
浙江“疫”線統戰人:一聲“歡迎回家” 一路傾力相送
推薦 2020-04-03 20:23 898 8005
范丞丞太有范兒,塑料都能穿出貴族感,不愧是百分九的“小王子”
推薦 2020-04-03 20:23 204 7173
五六十歲女人別老穿黑褲子,瞧下面女人這樣穿,一個比一個驚艷
推薦 2020-04-03 20:23 820 2066
這碗濃湯太好喝了,細膩順滑又濃香,飯前來一碗,暖胃又減 脂!
推薦 2020-04-03 20:23 679 9940
謊稱能辦理工作 6人團伙詐騙80余萬被抓
推薦 2020-04-03 20:23 159 645
這輛國產車成功引起了沙特土豪的關注,寫信求購!
推薦 2020-04-03 20:23 246 6790
26歲鞠婧祎太驚艷,淺紫色襯衫+針織馬甲,盡顯甜美可人氣息
推薦 2020-04-03 20:23 376 3026
慢性咽炎的“死對頭”每天泡水喝一杯,助你清肺化痰遠離咽炎!
推薦 2020-04-03 20:23 807 7160
風味美食,營養美味的牛肉炒飯,吃起來就停不下來
推薦 2020-04-03 20:23 612 2209
這4道營養餐,很適合6個月寶寶吃!媽媽們請記好
推薦 2020-04-03 20:23 356 9127
10分鐘的早餐這樣做,不揉面不搟面,蓬松暄軟,涼了也不硬
推薦 2020-04-03 20:23 948 7440
春日爽口素小炒,搭配紅燒肉,兩碗米飯下肚!
推薦 2020-04-03 20:23 555 6556
不是iPhone 9!蘋果官方“坐實”命名,真的叫iPhone SE2?
推薦 2020-04-03 20:23 815 6646
繼萬科、保利進駐中山馬鞍島 恒大近36億拿下一宗地
推薦 2020-04-03 20:23 487 634
上??焖俾愤\行壓力持續增加,看看哪些路段比較堵
推薦 2020-04-03 20:23 145 3078
三甲醫生:3個月只做了1件事,甘油三酯降到1.8,高血脂不攻自破
推薦 2020-04-03 20:23 194 8625
血脂不降百病來!家中1物泡水,堅持15天,血管通暢,專降高血脂
推薦 2020-04-03 20:23 579 4903
加工增效麻辣鴨舌的制作技術
推薦 2020-04-03 20:23 330 7101
惠英紅花甲之年再度飆戲,體驗過人間疾苦,演繹“不完美”的女人
推薦 2020-04-03 20:23 694 5755
蔣勤勤隨夫亮相,知性裝扮全被八字劉海毀了,遮住半邊臉太尷尬
推薦 2020-04-03 20:23 645 2702
孕期喝水和羊水量的多少有關嗎?如果羊水量偏少又應該怎么辦?
推薦 2020-04-03 20:23 749 3374
比朱元璋還狠辣皇帝的,一天殺了70名將領,卻無人指責
推薦 2020-04-03 20:23 747 3705
風味的小吃;營養美味的炒河粉,實在是太好吃了
推薦 2020-04-03 20:23 282 9052
為何古代造反的大多是文臣,很少是武將?皇帝對此也很無奈
推薦 2020-04-03 20:23 125 8072
失眠的4種分類,哪種失眠最痛苦?
推薦 2020-04-03 20:23 431 749
胤禛有個侍妾,康熙稱她是有福氣的人,后來果然福祿壽都占全了
推薦 2020-04-03 20:23 196 3913
?雍正是否篡位?“十”改成“于”是真的嗎?洋人官員回國后道出
推薦 2020-04-03 20:23 933 2206
宮保雞丁新做法,原汁原味低脂高蛋白,做出營養健康美味菜肴
推薦 2020-04-03 20:23 900 6484
趙為四戰之國,武靈王圖強,開啟胡服騎射
推薦 2020-04-03 20:23 302 6894
國內賣7萬,換標到國外賣17萬!這款中國SUV在海外市場火了
推薦 2020-04-03 20:23 455 4113
4道牛肉創新菜,味道爽爽爽!賣歡了!
推薦 2020-04-03 20:23 358 5119
高級穿搭看袁泉,A字裙搭配花邊上衣,苗條身材優雅又高級
推薦 2020-04-03 20:23 646 6116
鱸魚這么做!比清蒸鱸魚還要好吃,魚片滑嫩,湯都能喝完
推薦 2020-04-03 20:23 562 5537
20年前的富豪開什么車?一臺馬自達,已經承包整條街的回頭率
推薦 2020-04-03 20:23 918 3358
我炒了金針菇雞蛋,加了它,酥香爽脆,老公夸太好吃了,說炒太少
推薦 2020-04-03 20:23 944 8285
Takara Tomy公開漫畫宣傳世代精選超級威震天 隱藏彩蛋
推薦 2020-04-03 20:23 418 3940
中國富豪多有錢?國內勞斯萊斯車主平均年齡,兩成不足20歲
推薦 2020-04-03 20:23 427 4195
10萬的“保時捷”終于倒了,連續數月零銷量,小毛病不斷被投訴
推薦 2020-04-03 20:23 313 3329
10道春季養生湯之蓮子土豆排骨湯
推薦 2020-04-03 20:23 900 9125
比大G霸氣的6輪“戰斧”!浙江富豪3百萬買入,堪稱真男人座駕
推薦 2020-04-03 20:23 215 4570
媽媽春夏減齡套裝,如何變得更洋氣?
推薦 2020-04-03 20:23 932 4159
熱血傳奇:總說傳奇沒有了當年的味道,是傳奇變了還是玩家變了?
推薦 2020-04-03 20:23 520 7587
我的世界:只睡半張床的村民,MC趣圖分享,你能看出幾種生物?
推薦 2020-04-03 20:23 310 4771
菠菜炒雞蛋,是焯水還是直接炒,大廚:技巧全在這,脆嫩又爽口
推薦 2020-04-03 20:23 987 5594
每年春天我家都要喝這湯,清香開胃,做法簡單營養好,家人喜歡
推薦 2020-04-03 20:23 796 1796
春季里最嫩的美味,用最簡單的家常做法,大人小孩都喜歡
推薦 2020-04-03 20:23 900 9721
云頂之弈“重裝狙神”無解?被這個“遠古玩法”完克,別再搶燼了
推薦 2020-04-03 20:23 746 3045
家中有西葫蘆的試一試這做法,補鈣效果好,簡單快速,5分鐘出鍋
推薦 2020-04-03 20:23 523 2010
當初嫌《三生三世》擎蒼太壞,當他脫下古裝,原是大家的童年男神
推薦 2020-04-03 20:23 108 8406
你做的菠蘿咕咾肉為什么肉是柴的?因為你的肉都選錯了!
推薦 2020-04-03 20:23 378 4733
3日起,深圳占用挖掘道路管理辦法實施
推薦 2020-04-03 20:23 90 9346
快訊!約翰遜:仍有一些發燒,將延長隔離期
推薦 2020-04-03 20:22 517 8496
永濟市三項措施筑牢鐵路安全防火墻
推薦 2020-04-03 20:22 817 9477
物業禁止共享單車進入小區,是否侵犯了業主的合法權益?
推薦 2020-04-03 20:22 278 5199
巡回審理到村 法治宣傳進戶
推薦 2020-04-03 20:22 512 9855
外媒:受疫情影響,數千名外籍性工作者滯留德國
推薦 2020-04-03 20:22 967 6642
搞定了!伊卡爾迪交易即將完成,尤文圖斯這次沒能如愿
推薦 2020-04-03 20:22 940 5105
有一種“沒福相”叫吳謹言的脖子,珠寶帶出枷鎖感,品牌商要哭了
推薦 2020-04-03 20:22 474 792
東山銅陵鎮:凝聚合力 加快古城發展步伐
推薦 2020-04-03 20:22 987 1985
濱州市召開全市律師工作會議 部署安排2020年工作任務
推薦 2020-04-03 20:22 577 8072
誰說女人50歲就老了?穿棉麻衫+九分褲,清爽顯瘦又顯膚白
推薦 2020-04-03 20:22 441 6589
好像在哪里見過?不同電影里的不同“英雄”們,你知道幾個
推薦 2020-04-03 20:22 902 6766
張怡寧曾因不接王楠發球遭禁賽三個月 王楠卻對她大為贊賞
推薦 2020-04-03 20:22 133 8025
2021年女排球員年齡有驚喜!2大“老將”如此年輕,她這么老了?
推薦 2020-04-03 20:22 93 4866
騰訊電競宣布停止明天舉行的所有比賽
推薦 2020-04-03 20:22 798 5521
國產“小路虎”,標配雙10.25液晶屏,油耗低至5.7L,11.57萬
推薦 2020-04-03 20:22 375 1506
熱血傳奇:這些神秘的裝備你知道嗎,第一個很多人講是官方彩蛋?
推薦 2020-04-03 20:22 955 9499
faker和v5一日創造2個記錄:LPL連敗最多,和LCK登場次數最多
推薦 2020-04-03 20:22 212 3011
哈維不去巴薩執教?里瓦爾多:未來會的,現在瓜迪奧拉讓他有壓力
推薦 2020-04-03 20:22 185 2373
四川省統籌推進疫情防控和穩就業工作電視電話會議在成都召開
推薦 2020-04-03 20:22 318 7824
臨江林檢:清明防火“嚴陣以待”
推薦 2020-04-03 20:22 820 5382
陽原為做好開學準備,舉辦全縣教育系統疫情防控演練培訓會!
推薦 2020-04-03 20:22 983 4740
北辰最值錢的還是學位房,均價2.2萬的人民家園一居室,首付僅52萬!速看
推薦 2020-04-03 20:22 156 8438
浦東剛需上車神盤,業主賤賣臨沂二村一居室,每平僅4.2萬,首付僅54萬!
推薦 2020-04-03 20:22 184 4441
置業松江必看!價格喜人,每平1.6萬!佘山家園二居室,首付35萬
推薦 2020-04-03 20:22 921 8358
虹口一周好房速遞,這套一居室均價5.9萬,首付77萬就能搬進新一小區!
推薦 2020-04-03 20:22 312 9899
閔行剛需上車神盤,業主賤賣鶴明小區二居室,每平僅3.2萬,首付僅57萬!
推薦 2020-04-03 20:22 899 4187
武山縣南濱河路西南延伸段道路提升改造及景觀工程項目
推薦 2020-04-03 20:22 145 7061
華春瑩:美國1億援助我們一個子都沒見到
推薦 2020-04-03 20:22 541 1859
酥到掉渣的綠豆酥餅!餅皮可是關鍵,保你個個起酥
推薦 2020-04-03 20:22 660 9991
正海磁材:公司擬通過非公開發行股票的方式為低重稀土永磁體生產基地建設項目募集資金3.25億
推薦 2020-04-03 20:22 921 6461
德美化工:公司碳化硅項目目前沒有新的進展
推薦 2020-04-03 20:22 388 6023
《下一站是幸?!分?,宋茜新劇將襲,看到男主角是他追定了!
推薦 2020-04-03 20:22 418 2169
最長供暖季:16天向北京輸送天然氣7.77億方 同比增長40.76%
推薦 2020-04-03 20:22 238 9802
經歷70天鏖戰,泰安市中心醫院發熱門診醫護人員迎來休整輪換
推薦 2020-04-03 20:22 519 3195
葡萄牙新增852例新冠肺炎確診病例 累計9886例
推薦 2020-04-03 20:22 915 1952
7星彩开奖