整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
源：中國(guó)軍網(wǎng)微信公眾號(hào) 作者：曲延濤、孫浩 等
香港赤柱軍營(yíng)一號(hào)炮臺(tái)全景圖
臨海而建的赤柱炮臺(tái)
直面遼闊的南中國(guó)海
地勢(shì)險(xiǎn)要、氣勢(shì)磅礴
確是一處兵家要地
赤柱炮臺(tái)
見(jiàn)證了香港的榮辱興衰
還有駐港英軍最后的抵抗
香港赤柱軍營(yíng)一號(hào)炮臺(tái)遺址
香港赤柱軍營(yíng)一號(hào)炮臺(tái)五星紅旗迎風(fēng)招展。
香港赤柱軍營(yíng)一號(hào)炮臺(tái)旁的石碑。
赤柱軍營(yíng)的二、三號(hào)炮臺(tái)已改為衛(wèi)星通訊站。
點(diǎn)擊
http://vr.81.cn/html/pano/2017/6/qytczpt/index.html
查看VR
俯瞰赤柱軍營(yíng)炮臺(tái)
中國(guó)軍網(wǎng)微信（zgjw_81）出品
攝影：曲延濤
制作：孫 浩 王佳林
編輯：火藝卉
畫質(zhì)變好、體驗(yàn)變強(qiáng)，是個(gè)亙古不變的需求，在去年《好用軟件十神器》（戳這里）中我們提到過(guò)一個(gè)黑黃配色的播放器——Potplayer，也在《實(shí)時(shí)超分辨率4K》（戳這里）中用它掛載Anime4K著色插件。
不僅是因?yàn)樗黆I好看、速度快、占用小、解碼強(qiáng)，更重要的是畫質(zhì)也比普通播放器更好。但資深玩家肯定知道，這才剛過(guò)門檻兒，往硬核了，還得上LAV Filters解碼器，madVR渲染器，SVP/藍(lán)天/DM補(bǔ)幀，xy-vsfilter字幕濾鏡、Reclock音頻同步等等。
那么我們今天就來(lái)聊一聊，如何進(jìn)一步強(qiáng)化你的播放器。
▌LAV Filters
LAV是一種外掛解碼方案，由DOOM9論壇nevcairiel開(kāi)發(fā)。優(yōu)勢(shì)在其內(nèi)置的Dither抖動(dòng)精度比大多播放器內(nèi)置渲染器更好。最新版應(yīng)該是今年六月更新的0.74.1-60，首先從網(wǎng)上下載一個(gè)安裝。由于這種冷門的東西太不好下了...老張整理到了網(wǎng)盤里大家按需下載：
pan.baidu.com/s/1CRzX8rfU2nmAKc_naAVPXA提取碼pjxx（此外ksite.xyz上有漢化獨(dú)立包）
安裝過(guò)程一路下一步就行（軟解64bit效率強(qiáng)很多；勾選264MVC 3D需要聯(lián)網(wǎng)速度很慢）。用LAV還有一個(gè)原因，就是1.7.20538開(kāi)始Potplayer可能由于版權(quán)費(fèi)原因，默認(rèn)不再支持HEVC/H265軟解，Pot官方推薦用外部解碼器替代，比如LAV。
安裝完了之后會(huì)多出來(lái)個(gè)軟件，逐一說(shuō)明。LAV Splitter是分離器，這個(gè)一般不用設(shè)置，
用來(lái)調(diào)整視頻、音軌、字幕串流設(shè)置優(yōu)先軌道，支持多種硬件加速，勾選Enble Tray Icon后任務(wù)欄會(huì)有圖標(biāo)方便調(diào)整。
下一個(gè)LAV Audio設(shè)置中，在第一欄Audio Settings沒(méi)特殊需求也不用動(dòng)什么東西，普通2.0聲道設(shè)備不需要勾選Options中的Convert Output to Standard Channel Layouts，
然后到第二欄Mixing中，勾選EnableMixing，這個(gè)選項(xiàng)用來(lái)把多聲道音頻混成少聲道輸出。現(xiàn)在有些電影是7.1聲道，不設(shè)置的話輸出聲音會(huì)缺部分聲道信息，開(kāi)啟后解決這個(gè)問(wèn)題。電平增益0.71為ITU發(fā)表的BS.775建議書中推薦，
你音響的低頻頻響夠的話可以適當(dāng)把LFE調(diào)到0~1.58之間，普通音響不建議開(kāi)，會(huì)失真。勾選Dont mix Stereo sources，默認(rèn)的Clipping Protection音量保護(hù)（削波）老張建議關(guān)閉，除非你的音響在大動(dòng)態(tài)音頻下會(huì)破音...
最后到LAV Video中設(shè)置畫面，左上角的Setting是基礎(chǔ)選項(xiàng)，全部自動(dòng)就行。Setting for Interlaced Video Streams是針對(duì)1080i或者DVD等隔行掃描視頻用的反交錯(cuò)，如果遇到問(wèn)題再手動(dòng)調(diào)，
右上角Hardware Acceleration硬解區(qū)域，默認(rèn)不開(kāi)就是CPU軟解（你CPU性能夠強(qiáng)可以不開(kāi)硬解），建議手動(dòng)選擇D3D11模式，畫質(zhì)最接近軟解，退而求其次則選擇DXVA2（native）。如果你用的是老電腦、老平臺(tái)、老硬件改HTPC影音機(jī)用，那么特別需要注意你的硬件是否支持對(duì)應(yīng)選項(xiàng)。
Hardware Device to use設(shè)備選擇不要手動(dòng)選顯卡，否則會(huì)強(qiáng)制coypy-back，默認(rèn)選擇Automatic即可，能搭配madVR使用native模式。
效率：D3D11(native)≥DXVA2(native)＞D3D11(copy-back)≥DXVA2(copy-back)。注意這僅僅是效率，不代表畫質(zhì)，只是為了讓選擇符合你的硬件條件。DXVA2 native下有特殊情況（N卡會(huì)有畫質(zhì)損失，解HDR會(huì)有banding彩條問(wèn)題）。
不同硬解的特點(diǎn)在lysandria1985.blogspot.com作者“萬(wàn)年冷凍庫(kù)”已經(jīng)清楚羅列出來(lái)了。
此外，Resolutions中，勾選的就是用硬解，沒(méi)勾選就是用軟解。4K以下軟解帶的動(dòng)的其實(shí)都不用勾選。Format項(xiàng)目設(shè)置默認(rèn)即可。接下來(lái)打開(kāi)PotPlayer配置LAV，F(xiàn)5打開(kāi)[設(shè)置-濾鏡-全局濾鏡優(yōu)先權(quán)-添加系統(tǒng)濾鏡]，
添加LAV Audio Decoder、LAVVideo Decoder、LAV Splitter Source（不是LAV Splitter），
然后在右下角一個(gè)個(gè)都設(shè)置成[強(qiáng)制使用]，
然后回到[設(shè)置-濾鏡]，把內(nèi)置濾鏡激活條件設(shè)置成[不使用]，把[支持音頻流切換功能]取消勾選。
另外，哪怕是默認(rèn)使用的情況下，老張嚴(yán)重建議把[設(shè)置-聲音-規(guī)格化/混響]中的[播放時(shí)開(kāi)啟規(guī)格化]相關(guān)設(shè)置關(guān)閉，這個(gè)東西會(huì)嚴(yán)重影響音頻響度動(dòng)態(tài)表現(xiàn)，聲音元素多了之后聽(tīng)起來(lái)聲音發(fā)悶也是因?yàn)镻ot默認(rèn)開(kāi)了這設(shè)置的緣故...
（之前剪了錄音對(duì)比視頻，我老以為是達(dá)芬奇輸出的音頻有問(wèn)題，每一個(gè)低頻出來(lái)后其他聲音都會(huì)變輕，結(jié)果發(fā)現(xiàn)是PotPlayer的問(wèn)題...）
另外上次Anime4K中介紹到的，按F5呼出[設(shè)置-視頻-視頻緩沖格式-選擇“32位浮點(diǎn)”]可以進(jìn)一步提升畫面清晰度。
那么LAV的部分先介紹道這里，下一期會(huì)帶來(lái)madVR的配置過(guò)程。因?yàn)檫@類玩家比較少，很多設(shè)置選項(xiàng)總結(jié)自貼吧和海內(nèi)外論壇，如果你有更好的見(jiàn)解和經(jīng)驗(yàn)，不妨在評(píng)論區(qū)中分享給大家，我們下期再見(jiàn)~
參考：
www.ksite.xyz
www.jianshu.com/p/b52db01dbe17
bbs.vcb-s.com/thread-3428-1-1.html
lysandria1985.blogspot.com/2013/01/3-madvr.html
lysandria1985.blogspot.com/2013/01/2-lav-filters.html
tieba.baidu.com/p/6323319633?red_tag=0542720998
tieba.baidu.com/p/2366091101?red_tag=2553974125
ebVR和WebGL應(yīng)用程序接口使得我們已經(jīng)可以在瀏覽器上創(chuàng)建虛擬現(xiàn)實(shí)（VR）體驗(yàn)，但從工程化的角度而言，開(kāi)發(fā)社區(qū)還需要更多方便強(qiáng)大的開(kāi)發(fā)庫(kù)來(lái)簡(jiǎn)化編程，Mozilla的 A-Frame 框架就是這樣一個(gè)工具，提供了一個(gè)Web開(kāi)發(fā)者所熟悉的標(biāo)記語(yǔ)言來(lái)快速構(gòu)建3D VR場(chǎng)景動(dòng)畫原型，而不需要編寫過(guò)多的JavaScript和GLSL語(yǔ)句。本文將介紹如何使用A-Frame構(gòu)建一個(gè)簡(jiǎn)單的在線可運(yùn)行實(shí)例。
參考文檔：A-Frame中文教程
概覽
當(dāng)前A-Frame版本是0.5.0，由于WebVR標(biāo)準(zhǔn)乃至WebGL標(biāo)準(zhǔn)都還在快速發(fā)展演進(jìn)中，因此A-Frame仍然處于高度技術(shù)實(shí)驗(yàn)的狀態(tài)，遠(yuǎn)未達(dá)成商業(yè)成熟。但是對(duì)于開(kāi)啟了相應(yīng)設(shè)置的最新瀏覽器而言，A-Frame是可以正常工作的。它可以在桌面、移動(dòng)設(shè)備（iOS和Android）、Oculus Rift, Gear VR 和 HTC Vive上運(yùn)行。
A-Frame 構(gòu)建在WebGL接口之上（事實(shí)上其內(nèi)置了Three.js開(kāi)發(fā)框架），并為應(yīng)用程序提供了一些預(yù)裝基礎(chǔ)組件如 - 模型、視頻播放器、天空環(huán)境、幾何模型、控制器、動(dòng)畫和鼠標(biāo)等。A-Frame 基于游戲領(lǐng)域常用的實(shí)體組件系統(tǒng)（entity component system），但定位于Web開(kāi)發(fā)，使用標(biāo)記語(yǔ)言以及使用JavaScript語(yǔ)言來(lái)進(jìn)行操作，最終達(dá)到在網(wǎng)頁(yè)中獲得3D虛擬現(xiàn)實(shí)體驗(yàn)的設(shè)計(jì)目標(biāo)。
搭建開(kāi)發(fā)環(huán)境
我們首先需要搭建A-Frame的開(kāi)發(fā)環(huán)境，這里和以往一樣我們借助踏得網(wǎng)在線開(kāi)發(fā)平臺(tái)：
HTML代碼結(jié)構(gòu)
第一步我們先創(chuàng)建一個(gè)空HTML文檔，在HTML面板中編寫如下代碼：
（如果你使用了踏得網(wǎng)在線開(kāi)發(fā)平臺(tái)，此步驟可跳過(guò)，因?yàn)槠脚_(tái)會(huì)自動(dòng)為您生成這些重復(fù)性代碼但并不顯示。）
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>A-Frame demo</title>
<script src="aframe.min.js"></script>
</head>
<body>
<!-- HTML goes here -->
</body>
</html>
初始化場(chǎng)景
場(chǎng)景（scene）是所有VR內(nèi)容的容器，當(dāng)創(chuàng)建新的對(duì)象后，我們只有把這些對(duì)象加到場(chǎng)景中，才能真正在屏幕上被看到。在 A-Frame 中，場(chǎng)景通過(guò)一個(gè) 場(chǎng)景實(shí)體（Scene entity）元素來(lái)表達(dá)。
注意：一個(gè)實(shí)體（Entity）可以是任意元素 - 可以是盒子、圓柱、圓錐對(duì)象，也可以是一個(gè)相機(jī)（camera）、光源（light）或者聲源（sound）。
我們通過(guò)在 <body> 元素中添加一個(gè) <a-scene> 元素來(lái)添加場(chǎng)景對(duì)象：
<a-scene>
</a-scene>
添加幾何模型
接著我們?cè)?<a-scene> 元素中添加一個(gè) <a-box> 元素，這等于是在場(chǎng)景中添加一個(gè)立方體：
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
上述代碼中，該立方體對(duì)象包含一些已定義屬性：顏色（color）, 位置（position）和角度（rotation）。
注意：這里的距離數(shù)值（比如立方體的y坐標(biāo)位置）是無(wú)單位的，也可以是任何適用于你的場(chǎng)景的單位 - 毫米，米，英尺或英里 - 由你自己來(lái)定。
我們還可以添加一些其他基礎(chǔ)模型如圓柱體等，這里代碼略過(guò)，我們?cè)谖恼伦詈髸?huì)給出完整的在線實(shí)例。
添加一個(gè)背景：天空盒（Sky box）
一個(gè)天空盒（skybox）是三維世界的背景，通過(guò)一個(gè) <a-sky> 元素來(lái)表示。在這里，我們使用一個(gè)簡(jiǎn)單的顏色背景，但它也可以是一個(gè)圖像（image）等。環(huán)顧四周的時(shí)候可以營(yíng)造一種在天空中或者木質(zhì)車庫(kù)或者任何你喜歡的環(huán)境中的感覺(jué)。添加如下的標(biāo)記代碼在 <a-cube> 元素之前：
<a-sky color="#DDDDDD"></a-sky>
到這里，如果你點(diǎn)擊菜單中的“運(yùn)行”按鈕（或者按CTRL+R快捷鍵），我們將看到一個(gè)帶背景的立方體，并且可以通過(guò)鼠標(biāo)（如果是通過(guò)電腦屏幕查閱該作品）操控它：
我們很容易就完成了一個(gè)VR小應(yīng)用，這是因?yàn)?A-Frame 幫我們做了很多事情：
指定一個(gè)相機(jī)
相機(jī)通過(guò) <a-camera> 元素來(lái)添加到場(chǎng)景中。我們可以顯式設(shè)置相機(jī)的位置，把相機(jī)放在場(chǎng)景中心稍退后一點(diǎn)的位置上，這樣我們能看清模型形狀，我們把該元素添加在場(chǎng)景元素的關(guān)閉標(biāo)簽 </a-scene> 之前：
<a-camera
position="0 1 4"
cursor-visible="true"
cursor-scale="2"
cursor-color="#0095DD"
cursor-opacity="0.5">
</a-camera>
上述代碼中，我們還通過(guò) cursor-* 屬性給相機(jī)定義了游標(biāo)（cursor，缺省情況下不可見(jiàn)）- 我們?cè)O(shè)置了游標(biāo)的縮放因子（scale），這樣就更容易被看見(jiàn)，透明度設(shè)置為0.5，這樣不會(huì)完全擋住游標(biāo)后面的物體。
添加光源
A-Frame中的基礎(chǔ)光源類型是平行光（directional light）和環(huán)境光（ambient light）。平行光被放在場(chǎng)景某處而環(huán)境光是來(lái)自該平行光的反射，這樣光線看起來(lái)比較自然。光源元素的標(biāo)簽為 <a-light>，把下面的代碼添加到前述相機(jī)元素之后：
<a-light
type="directional"
color="#FFF"
intensity="0.5"
position="-1 1 2">
</a-light>
<a-light
type="ambient"
color="#FFF">
</a-light>
這樣我們添加了一個(gè)白色平行光，光強(qiáng)為0.5，位置在 (-1, 1, 2) 。環(huán)境光也是白色。
添加高級(jí)模型
前面我們通過(guò) <a-box> 添加過(guò)立方體，但是A-Frame并不局限于只能添加固定模型，還可以添加自定義的復(fù)雜形狀模型，這通過(guò)使用 <a-entity> 標(biāo)簽來(lái)實(shí)現(xiàn)：
<a-entity
geometry="
primitive: torus;
radius: 1;
radiusTubular: 0.1;
segmentsTubular: 12;"
rotation="10 0 0"
position="-3 1 0">
</a-entity>
這里的實(shí)體其幾何模型基于一個(gè)麻花原型（torus primitive），其他的一些參數(shù)用來(lái)定制該模型的外形：torus的外邊界半徑、管道半徑和管道分段數(shù)，位置和角度的設(shè)置和前述的立方體類似。
定義材料
現(xiàn)在我們已經(jīng)在場(chǎng)景中可以看到 torus 模型，但顏色看起來(lái)不太好，因?yàn)樵撃Ｐ瓦€缺少定義其表面屬性的材質(zhì)（material ），我們需要?jiǎng)?chuàng)建一個(gè)材料來(lái)定義實(shí)體表面的外觀，修改上述代碼為如下所示：
<a-entity
geometry="
primitive: torus;
radius: 1;
radiusTubular: 0.1;
segmentsTubular: 12;"
material="
color: #EAEFF2;
roughness: 0.1;
metalness: 0.5;"
rotation="10 0 0"
position="-3 1 0">
</a-entity>
上述代碼中，我們給 entity 添加了一個(gè)新的 material 屬性，并給定了該 material 的顏色（color）、粗糙度（roughness，越粗糙的物體散射越均勻）和金屬性（metalness）。
通過(guò)JS來(lái)動(dòng)態(tài)創(chuàng)建模型對(duì)象
我們當(dāng)然可以通過(guò)JavaScript來(lái)添加物體，下面的代碼將動(dòng)態(tài)創(chuàng)建一個(gè)圓柱體對(duì)象并加入場(chǎng)景中，當(dāng)然JS代碼需要被放在一個(gè)<script>標(biāo)簽內(nèi)部：
var scene=document.querySelector('a-scene');
var cylinder=document.createElement('a-cylinder');
cylinder.setAttribute('color', '#FF9500');
cylinder.setAttribute('height', '2');
cylinder.setAttribute('radius', '0.75');
cylinder.setAttribute('position', '3 1 0');
scene.appendChild(cylinder);
我們首先獲取到場(chǎng)景對(duì)象的句柄，然后我們創(chuàng)建一個(gè)圓柱（a-cylinder）元素為 A-Frame 實(shí)體。接著設(shè)置其對(duì)象屬性：顏色（color）, 高度（height），半徑（ radius ）和 位置（position）。最后一行把新創(chuàng)建的圓柱添加到場(chǎng)景中。就這樣，現(xiàn)在我們已經(jīng)創(chuàng)建了3個(gè)物體了，看起來(lái)像下面這樣：
短短幾行HTML和JS代碼就完成了這樣一個(gè)三維場(chǎng)景，的確令人印象深刻。
動(dòng)畫
我們可以通過(guò) rotation 、position 和 scale 屬性改變對(duì)象，這樣就可以創(chuàng)造出動(dòng)畫的視覺(jué)效果。
旋轉(zhuǎn)
我們可以通過(guò) <a-animation> 實(shí)體來(lái)幫助我們實(shí)現(xiàn)元素的動(dòng)畫。在 <a-box> 元素中添加 <a-animation> 子元素，如下所示：
<a-box
color="#0095DD"
rotation="20 40 0"
position="0 1 0">
<a-animation
attribute="rotation"
from="20 0 0"
to="20 360 0"
direction="alternate"
dur="4000"
repeat="indefinite"
easing="ease">
</a-animation>
</a-box>
與其他實(shí)體一樣，你可以定義動(dòng)畫的關(guān)鍵屬性。上述代碼中我們通過(guò)改變 rotation 屬性，將讓該立方體產(chǎn)生旋轉(zhuǎn)動(dòng)畫，從 20 0 0 到 20 360 0, 也就是在沿著Y軸完成一個(gè)360°的旋轉(zhuǎn)。動(dòng)畫方向（direction）被設(shè)置為 alternate ，因此動(dòng)畫將被正向播放然后返回。動(dòng)畫持續(xù)時(shí)間（dur）為4秒，并無(wú)限循環(huán)（repeat 為 indefinite )。該動(dòng)畫使用 ease 實(shí)現(xiàn)緩動(dòng)效果，這通過(guò)內(nèi)置的 tween.js 來(lái)實(shí)現(xiàn)。
縮放
我們也可以給自定義模型如 torus 來(lái)添加動(dòng)畫，方法基本上類似：
<a-entity
geometry="
primitive: torus;
radius: 1;
radiusTubular: 0.1;
segmentsTubular: 12;"
material="
color: #EAEFF2;
roughness: 0.1;
metalness: 0.5;"
rotation="10 0 0"
position="-3 1 0">
<a-animation
attribute="scale"
to="1 0.5 1"
direction="alternate"
dur="2000"
repeat="indefinite"
easing="linear">
</a-animation>
</a-entity>
這里，我們通過(guò)改變比例（scale）屬性來(lái)給torus添加縮放動(dòng)畫。缺省情況下（未設(shè)置from），scale 是 1 1 1, 我們將使其變換為 1 0.5 1, 也就是沿著Y軸壓縮一半。這里的緩動(dòng)效果我們使用了線性（linear）。因?yàn)榉较颍╠irection）為 alternate，所以在2秒內(nèi)torus對(duì)象將在Y軸方向上縮小一半，然后恢復(fù)成初始狀態(tài)。同樣的，該動(dòng)畫將被無(wú)限反復(fù)。
平移
我們還可以通過(guò) <a-animation> 來(lái)改變對(duì)象的位置，當(dāng)然我們也可以通過(guò)JavaScript來(lái)實(shí)現(xiàn)這一點(diǎn)，在 <script> 標(biāo)簽中添加如下代碼：
var t=0;
function render() {
t +=0.01;
requestAnimationFrame(render);
cylinder.setAttribute('position', '3 '+(Math.sin(t*2)+1)+' 0');
}
render();
這里我們?cè)阡秩竞瘮?shù)（render）中更新圓柱體的位置，requestAnimationFrame函數(shù)將使得該渲染函數(shù)每幀刷新的時(shí)候被調(diào)用，這樣就形成一個(gè)圓柱體平移的視覺(jué)動(dòng)畫。
小結(jié)
到此，我們就完成了第一個(gè)A-Frame WebVR應(yīng)用，這里是最終的代碼實(shí)現(xiàn)，你可以在線試試看：
http://vr.huiwei13.cn/vr/test-3d2/
如果你手頭上有VR設(shè)備，是時(shí)候體驗(yàn)WebVR開(kāi)發(fā)之旅了。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
