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