ウェブベース VR の最初の紹介

2016 年のテクノロジーの世界で最もエキサイティングなトピックは、VR が世界をどのように変えるかということです。一部の映画ではVRが取り入れられ始めており、3D映像を見るだけでなく、「変身」という手法を使ってその世界に没入することができ、これまでにない没入感のある視聴体験が得られるようになってきています。また、ゲーム分野でも登場し始めています。 VR になるために、ユーザーはゲーム パッケージ内の 1 つのシーンに耐える必要がなくなりました。これらのクールなエフェクトは想像力に大きな余地をもたらし、VR は人々の生活に近づきつつあります。しかし、資本やハードメーカーの熱狂の裏で、VRはブラックテクノロジーの素晴らしさを時折体験するほかは、本格的に普及していないのが現実だ。

現在、VRハードウェアの開発は急速に進んでいますが、コンテンツは非常に薄いです。 VR 映画の料金は非常に高く、VR ゲームも同様に高価です。コンテンツ制作コストの高さにより、VR の注目度が高まりました。 VRが貴族的な華麗さを脱ぎ捨てて庶民の家庭に飛び込むためには、コンテンツ供給の問題を解決する必要がある。 HTML5に代表されるWeb技術の発展は、この行き詰まりを変える可能性がある。現在、最新の Google Chrome および Mozilla Firefox ブラウザには、HTML5 テクノロジの WebVR 機能サポートが追加されており、すべての関係者が業界の最新の WebVR API 標準の草案を作成し、充実させています。これらの Web ベースの仮想現実規格は、VR コンテンツの技術的な作成コストと敷居をさらに引き下げ、世界最大の開発者グループである HTML5 (JavaScript) 開発者が VR コンテンツ作成の分野に参入するのに役立ちます。これは Web テクノロジーの開発における重要な進歩であるだけでなく、VR が普及する機会も生み出します。

WebサイドVRの利点

WebはVR体験の敷居を下げることができます

WebテクノロジーはVRの作成コストを安くするだけでなく、技術的な敷居も大幅に下げます。 WebGL テクノロジーの急速な発展に依存して、Web VR は GPU を使用して計算を実行し、ゲーム エンジン テクノロジーを使用してチップレベル API を最適化します。これにより、グラフィックス レンダリング コンピューティング能力が向上し、同時に開発者が VR 分野に参入する敷居が大幅に下がります。 、Web VR もクラウド コンピューティング技術と組み合わせることで、VR 端末のコンピューティング能力を補完し、インタラクティブな体験を強化します。

Web が VR の利用範囲を広げていることは確かです。広告やマーケティング、パノラマビデオの分野で多くの革新的な事例が生まれ、また、多くの生活系コンテンツも VR 制作に組み込まれています。現実の観光、ニュースレポート、仮想ショッピングなど。そのコンテンツの表示とインタラクションは HTML5 エンジンによって簡単に作成できます。これにより、将来の開発に想像力の余地がさらに広がることは間違いありません。

Web 開発者ベースは巨大です

Web には技術的な実装上の利点に加えて、VR 技術の発展を助けることができる幅広いアプリケーションと巨大な開発者ベースがあるため、VR に大きな革新力をもたらすことができます。人民戦争に勝利すれば、VR はもはや産業界の大物のための単なる資本ゲームではなく、民間のやり方でユーザーの日常生活のあらゆる側面に浸透することになるでしょう。

やがて、VR アプリケーションは、敷居の低い Web 開発を利用して、多数の VR 開発者が参入するようになるだろうと信じています。奇妙なアイデアが無限に生まれ、仮想現実は電子商取引のビジネス手法に必須になるでしょう。この段階に達すれば、VR は現実の繁栄から遠くないでしょう。

WebサイドVRコンテンツの開発

次に、実践的な操作を用いて実際にWebサイドVRコンテンツを制作し、WebVRの便利なメリットを体験していきます。多くの VR 体験はアプリケーションの形式で提供されているため、VR を体験するにはアプリケーションを検索してダウンロードする必要があります。 Web VR はこの形式を変え、VR 体験をブラウザに移します。Web+VR = WebVR です。実践に入る前に、まず WebVR 実装の技術的状況を分析しましょう。

WebVR 開発方法

Web 上で VR アプリケーションを開発するには 3 つの方法があります:

HTML5+ Java Scnipt + WebGL + WebVR API

従来のエンジン + Emscripten[1]

A-Frame などのサードパーティ ツール[2]

最初の方法は、WebGL と WebVR API を組み合わせて使用​​し、従来の Web 側 3D アプリケーションに基づく API を通じて VR デバイスと対話し、対応する VR 実装を取得する方法です。 2 つ目の方法は、Unity や Unreal などの従来のエンジン開発コンテンツをベースにし、Emscripten を使用して C/C++ コードを Java Scnipt バージョンに移植することで、Web 上で VR を実現します。 3 番目の方法は、1 番目の方法をカプセル化し、特にプログラミングの基礎を持たない一般ユーザー向けに Web サイド VR コンテンツを作成する方法です。この記事では、主に 1 番目と 3 番目の方法を例として説明します。

WebVR ドラフト

WebVR は、Oculus Rift、HTC Vive、Google Cardboard などの VR デバイスの機能にアクセスするための API を提供する初期の実験的な JavaScript API です。 VR アプリケーションが満足できるエクスペリエンスを提供するには、高精度、低遅延のインターフェイスが必要です。デバイス オリエンテーション イベントのようなインターフェイスでは、浅い VR 入力を取得できますが、高品質 VR に必要な精度要件は提供されません。 WebVR は VR ハードウェアにアクセスするための専用インターフェイスを提供し、開発者が快適な VR 体験を構築できるようにします。

WebVR API は現在、Firefox が毎晩インストールされている Oculus Rift、Chrome の実験版、および Samsung Gear VR ブラウザで利用できます。

A-Frame を使用して VR コンテンツを開発する

敷居を低くして WebVR 開発を体験したい場合は、MozVR チームが開発した A-Frame フレームワークを使用できます。 A-Frame は、HTML を通じて VR エクスペリエンスを作成するためのオープンソース WebVR フレームワークです。このフレームワークを通じて構築された VR シーンは、スマートフォン、PC、Oculus Rift、HTC Vive と互換性があります。 MozVR チームは、Web 開発コミュニティを WebVR エコシステムに引き付けるために、3D/VR シーンの構築をより簡単かつ迅速にする A-Frame フレームワークを開発しました。 WebVR が成功するには、コンテンツが必要です。しかし、現在、WebGL 開発者の数は少数ですが、Web 開発者とデザイナーは何百万人もいます。 A-Frame は、誰でも 3D/VR コンテンツを作成できるようにしたいと考えています。A-Frame には、次のような利点と特徴があります。

A-Frame は、冗長なコードを削減できます。冗長で複雑なコードは、早期導入者にとって障害となっています。A-Frame では、シーンを作成する場合、必要なのは 1 つの タグだけです。

A-Frame は Web 開発者向けに特別に設計されています。 DOMベースなので、他のWebアプリケーションと同様に3D/VRコンテンツを操作できます。もちろん、box、d3、React などの JavaScript フレームワークと組み合わせて使用​​することもできます。

A-Frame はコードを構造化します。 Three.js コードは通常、緩いものであり、A-Frame は Three.js 上に宣言的なエンティティ コンポーネント システムを構築します。さらに、コンポーネントを公開および共有して、他の開発者が HTML 形式で使用できるようにすることができます。

コードは次のように実装されます:

// 引入A-Frame框架<script src="./aframe.min.js"></script><a-scene>
  <!-- 定义并创建球体 -->
  <a-sphere position="0 1 -1" radius="1" color="#EF2D5E"></a-sphere>
  <!-- 定义交创建立方体 -->
  <a-box width="1" height="1" rotation="0 45 0" depth="1" color="#4CC3D9" position="-1 0.5 1"></a-box>    
  <!-- 定义并创建圆柱体 -->
  <a-cylinder position="1 0.75 1" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <!-- 定义并创建底板 -->
  <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <!-- 定义并创建基于颜色的天空盒背景-->
  <a-sky color="#ECECEC"></a-sky>
  <!-- 设置并指定摄像机的位置 -->
  <a-entity position="0 0 4">
    <a-camera></a-camera>
  </a-entity></a-scene>

Three.js を使用して VR コンテンツを開発する

WebVR コンテンツを作成する際に、より下部に近く、より柔軟な別の方法は、の API を直接使用することであると上で述べました。 WebGL+WebVR。 A-Frame に対するこの方法の利点は、VR サポートを独自の Web3D エンジンに簡単に導入できることです。同時に、パフォーマンスとエクスペリエンスを向上させるために、最下層、特にレンダリング モジュールでより多くの最適化操作を実行できることです。 VR ランタイムの。

独自の Web3D エンジンを持っていなくても、Three.js や Babylon.js などの成熟したレンダリング フレームワークを直接使用できます。これらは、人気のある優れた Web3D 側のレンダリング エンジン (フレームワーク) です。次に、Three.js を例として、その上で WebVR コンテンツを作成する方法を説明します。

まず、どのレンダリング プログラムでも 3 つの要素は似ています。つまり、シーン、レンダラー、カメラの確立です。レンダラー、シーン、カメラの設定操作は以下の通りです。

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
 document.body.appendChild(renderer.domElement);
// 创建Three.js的场景
var scene = new THREE.Scene();
// 创建Three.js的摄像机
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 10000);
// 调用WebVR API中的摄像机控制器对象，并将其与主摄像机进行绑定
var controls = new THREE.VRControls(camera);
// 设置为站立姿态controls.standing = true;
// 调用WebVR API中的渲染控制器对象，并将其与渲染器进行绑定
var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);// 创建一个全局的VR管理器对象，并进行初始化的参数设置
var params = {
  hideButton: false, // Default: false.
  isUndistorted: false // Default: false.
};
var manager = new WebVRManager(renderer, effect, params);

上記のコードでレンダリング前の初期化設定が完了します。次に、特定のモデル オブジェクトをシーンに追加する必要があります。主な操作は次のとおりです。

function onTextureLoaded(texture) {
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  texture.repeat.set(boxSize, boxSize);  
  var geometry = new THREE.BoxGeometry(boxSize, boxSize, boxSize);  
  var material = new THREE.MeshBasicMaterial({
    map: texture,
    color: 0x01BE00,
    side: THREE.BackSide
  });  
  // Align the skybox to the floor (which is at y=0).
  skybox = new THREE.Mesh(geometry, material);
  skybox.position.y = boxSize/2;
  scene.add(skybox);  
  // For high end VR devices like Vive and Oculus, take into account the stage
  // parameters provided.
  setupStage();
}
// Create 3D objects.
var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
var material = new THREE.MeshNormalMaterial();
var targetMesh = new THREE.Mesh(geometry, material);
var light = new THREE.DirectionalLight( 0xffffff, 1.5 );
light.position.set( 10, 10, 10 ).normalize();
scene.add( light );  
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add(ambientLight);
var loader = new THREE.ObjectLoader();
loader.load('./assets/scene.json', function (obj){
    mesh = obj;    
    // Add cube mesh to your three.js scene
    scene.add(mesh);
    mesh.traverse(function (node) {
        if (node instanceof THREE.Mesh) {
            node.geometry.computeVertexNormals();
        }
    });    
    // Scale the object
    mesh.scale.x = 0.2;
    mesh.scale.y = 0.2;
    mesh.scale.z = 0.2;
    targetMesh = mesh;    
    // Position target mesh to be right in front of you.
    targetMesh.position.set(0, controls.userHeight * 0.8, -1);
});

最後の操作は、requestAnimationFrame に更新を設定することです。アニメート機能では、HMD から返される情報を継続的に取得し、カメラを更新する必要があります。

// Request animation frame loop functionvar lastRender = 0;function animate(timestamp) {
  var delta = Math.min(timestamp - lastRender, 500);
  lastRender = timestamp;  
   // Update VR headset position and apply to camera.
  //更新获取HMD的信息
  controls.update();  
   // Render the scene through the manager.
  //进行camera更新和场景绘制
  manager.render(scene, camera, timestamp);
  requestAnimationFrame(animate);
}

経験と経験

上記の紹介を通じて、基本的には予備的なインタラクティブなエクスペリエンスを備えた Web サイド VR アプリケーションを実装できますが、これは最初のステップにすぎず、純粋に技術的な実装と実際の実装の間にはまだ一定のギャップがあります。エンジニアリング。最終的なエンジニアリングの後、ユーザー指向の製品は、レンダリングの品質、インタラクションのスムーズさ、仮想化の没入感など、技術的なプロトタイプよりも具体的なことを考慮する必要があり、最終的にユーザーがその製品を使い続けるかどうかを決定します。製品によって提供されるサービスなどを受け入れるため、上記のテクノロジーをエンジニアリングに適用するには、まだ多くの最適化と改善の作業が必要です。以下は、Web サイド VR アプリケーションの作成プロセスにおける個人的な経験の一部であり、読者の参考のために共有します。

エンジンの選択。既存の WebGL エンジンを使用している場合は、VR SDK の統合については [5] のドキュメントを参照してください。ここでは、エンジン レイヤーを VR SDK レイヤーと互換性のあるものにし、VR モードをエンジンのツール部分と統合する必要があります。VR SDK の統合については、Unity3D や Unreal などのデスクトップ エンジンの開発モデルを参照することもできます。サードパーティの WebGL エンジンを選択する場合は、Three.js または Babylon.js から選択できます。これらの主流の WebGL エンジンには (一部の機能が) VR SDK と統合されています。

デバッグ済みの機器。 Web 上で VR アプリケーションをデバッグするには、特定の VR デバイスのサポートも必要です。デスクトップ WebM コンテンツの場合は、HTC Vive や Oculus などの没入感の高い VR デバイスを使用してみる必要があります。モバイル Web アプリケーションの場合、Android プラットフォームのブラウザ間でパフォーマンスが異なるため、開発とデバッグには iOS デバイスを使用することをお勧めします。ただし、最終リリースまでに、より多くの Android デバイスを適応させる必要があります。テストと最適化。

パフォーマンスの最適化。 Web 上で 3D 描画やレンダリングを行う場合、依然としてパフォーマンスが主なボトルネックとなるため、VR 部分により多くのリソースを残せるように、リアルタイム レンダリングのパフォーマンスを可能な限り改善する必要があります。現在の WebVR には、デスクトップ VR SDK のようなリアルタイム レンダリングでのステレオ レンダリングなどの詳細な最適化のために、多くの GPU の基盤となるインターフェイスを呼び出す機能がないため、依然として大量のパフォーマンスを消費します。

既知の問題。現時点では、WebVR はまだ不安定で、デバイスの追跡が失われる場合があり、効率もあまり高くありません。ほとんどの WebVR アプリケーションは、今後の製品の予備および事前研究として使用できますが、ユーザーが本当に使用でき、スムーズなエクスペリエンスを提供できる製品を発売できるまでには、まだ長い道のりがあります。

VR デモの開発プロセスを見てみるのもいいかもしれません。

気になる開発リンクを簡単に紹介します:

1. 一定規模のVRデモの開発にかかる時間について

会議室のテーブル上。 60 日前 『UNITY from Beginner to Master』という本がありますが、この開発期間が良いことなのか、それとも別の「中国のスピード」と簡単にみなされるのかはわかりません。

その後、UE エンジンに切り替えました。もちろん、UE は非常に満足しているかもしれません。私たちのエンジンの効率性、効果の良さ、ブループリントの便利さ、モールのリソースの使いやすさをご覧ください。

もう 1 つ指摘しておきたいのは、実際、この 60 日間は基礎ゼロから始まったわけではなく、全員が 30 年以上の基本的な 3D アートの経験を持ち、当事者 B の役割を果たしてきました。長い間、技術的な実装と時間の概念が向上しました。また、自分一人で何かを作っているからこそ、よりみんなが深く関わっていくことができます。ですから、今は奇妙で幸せな時期だと言いますが、当然のことながら、支払われる代償も非常に高かったのです。

2. VR 開発にどのエンジンを使用するかについて

実際、VR 開発に UE を使用するか、UNITY を使用するかを議論する前に、Zhihu で専門家が書いたさまざまな賢明な記事を見てきました。意見はほぼ一方的で、UEを使うのと同じで罠にはまってしまいます...しかし、しばらく調べた結果、私たちはまだUEを使うのに適していると感じ、今でも比較的生きています。 「川を渡るリトルポニー」の物語を読みましたか？

以前使用していたツール、MAX と MAYA を思い出しました。用途に応じて、どちらも優れています。建築アニメーションを作成する場合は、高速な MAX を使用します。キャラクターベースのアニメーション ムービーを作成する場合は、MAYA を使用します。アクション モジュールは使いやすく、便利です。チームのコラボレーション。

さらに、UE は現在非常に熱心に取り組んでおり、その公式チュートリアルを見ると、モールがそれに多くの労力を費やしていることがわかり、ブループリント ツールはより視覚的なチームにも非常に適しています。

しかし、UE の公式公開アカウントの閲覧数が毎回非常に少ないのは、中国でのこれほど人気のある VR テーマとは興味深い対照をなしているのは感動的です。

もう 1 つの大きな問題は、UE には比較的少数の人がいて、自分たちで探索するしかないということです。この方法はデッドロックと呼ばれます。

3. VRを開発するCGチームのメリットとデメリット

私たちの強みはビジュアルデザインにあると思います。例えば、インタラクティブツールであるViveコントローラーにも、シーンごとに異なるテーマが必要であると考えており、さまざまなテーマが登場しています。とても美しいハンドルなので、公式ストアに置いても大丈夫だと思います。

中国の VR コンテンツ開発者の背景はいくつかのタイプに分類できると思います:

1 つ目のタイプは、技術的な敷居が比較的低いパノラマ動画で、これらの背景のほとんどは実写での撮影であり、以前のタイトルは通常、取締役。

2 番目のタイプは、手順やワークフローが VR に似ており、技術的に変換しやすいという利点があります。しかし、恥ずかしいのは、視覚効果を追求する場合は、ゲームを作成するのが最適であるということです。次世代ゲームですが、現在は中国で基本的にはモバイル向けのオンラインゲームを主力事業として次世代ゲームや受託加工を行っています。

3 番目のタイプは、過去の CG 業界のもので、私たちの利点はビジュアルをより追求していることです。以前はこのアプローチを使用して非常にうまくいっているチームもあります。ある程度の技術的な作業を行う必要がありますが、幸いなことに基本的な原理は似ており、簡単に理解できます。

4 番目のタイプは、プログラマーのチームです。利点は、比較的素晴らしいコードを開発し、必要なシェーダーを作成し、必要な機能を取得できることです。努力が必要なのは、見た目を良くすることです。

最後はVRをやっているとのこと。

4. UE エンジン ブループリント

ブループリントは、特に作業効率を向上させるために UE によって開発されたビジュアル モジュール プログラミングです。これがなければ、デモを作成することはできません。

例をあげてください:

DEMOの後半で、あなたは翼を振り、空へと飛び立ちました。そして、あなたは水と空と同じ色の塩湖にやって来ました。翼が羽根となって空に散らばる…とてもロマンチックな光景です。

これを実現するには、もちろん、私たちの注釈は非常に現実的であり、理解できる人には必ず理解できるでしょう。

つまり、これはコードを 1 行も書かずに完成したブループリントを備えたデモです。十分豪華だと思いませんか?実際、UE 開発ブループリントの目的は、最終的な効果により役立つことに集中できるようにすることではありませんか?

5. もう一つの技術的なポイント: PBR プロセス

PBRプロセスはCG業界に学んでゲーム業界が導入したと言われていますが、恥ずかしながらCG業界の後期ではプロジェクトの種類上UVすらほとんど展示することはありませんでした。

PBR マテリアル システムにより、エンジン内でオブジェクトがよりリアルなテクスチャと豊かなディテールを表示できるようになります。これは、この世代のゲーム エンジンの一般的なマテリアル システムでもあり、アーティストは、照明に合わせたロジックでテクスチャを描画します。現実世界の原理に基づいて、マテリアルを調整します。このシステムをベースにしたツール ソフトウェアの Substance Tools シリーズは、オリジナルのマルチ ソフトウェア ツールの連携によるテクスチャ、マテリアル、シェーダなどのシステムを完全なシステムに統合すると同時に、柔軟なワークフローにより制作時間を大幅に節約し、制作を容易にします。シリアル化されたテクスチャ マテリアルの反復と更新により、マテリアル マッピングの作業プロセスがより直感的かつ効率的になります。

ソフトウェア Substance ペインターを使用するこのプロセスは、初期の PS と MAX の平坦化マップの間で行ったり来たりするよりもはるかに優れています。

テクノロジーは非常に重要ですが、新しい視聴覚体験方法を前に、創造は非常に重要であり、VR体験デザインの難しい点でもあります。

7. VR 体験のテーマの選択について

私たちが選んだのは、実際には、現在見られる VR のほとんどが、文化的なテーマに興味があるように思えます。 plus we 同僚の何人かは航空ファンなので、このテーマを選択しました。

STEAM にアポロ月面着陸の体験を作った外国のチームがあることに気づき、ダウンロードして勉強しましたが、彼らが私たちに提供したものは何か間違った体験だと思いました、このチームは退屈なチームだと思います。エンジニアの皆さん、退屈すぎて耐えられません。文化的なアウトプットは私たちが比較的得意なことです。これは私たちのこれまでの仕事の経験と関係があるかもしれません。モンスターを倒すためには新しいテクノロジーを使用する必要がありますが、ただモンスターを倒すだけでは間違っています。

私自身の結論としては、自分が好きで、よく調べて、VR表現に適した題材が良いと思います。

8. クリエイティブな観点から見ると、VR の物語言語はどのように変わりますか?しかし VR では、この世界では、あなたはライブの参加者であり、監督はあなたが何を見て参加してほしいのかをガイドする必要があります。

私たちは2008年から数多くのライブイベントの企画・運営に参加してきました。広い空間でどこに音を出し、どこに光を与え、視線をどう誘導するか、この体験は実はVRに近いのではないかと思っています。プロットの発展を促進することは洗練されていて楽しいことです。

つまり、VR の視覚言語は映画的なアプローチではなく、ライブ イベントやパフォーマンスのアプローチだと思います。

技術的なプロセスの点では、元の合成および編集ポジションは廃止されましたが、すべてが廃止されたわけではありません。UE では実際にノンリニア編集が追加されただけです。ポストプロダクションフィルターなどもあります。はい、とても興味深いです。

9. プロセスと分業について

前後20人程度が関わることになり、ゲーム開発の人員配置と同様に3Dアート素材のポジションに集中します。私たちの正義の先生であるプ・アンという監督がいて、彼が全体を調整し、芸術的なコントロールをし、他の同僚と私が協力して技術的なプロセスを進めていきます。

基本的に、このトピックは始めるには少し大きすぎるかもしれません。利点は、オーディション言語全体がより完全かつ詳細に議論されることです。ただし、欠点は、多くのリソースが必要になることです。過去 10 年間で特に優れているのは、大規模なチームを構築し、販売することです。ただし、限られた時間内では、一部のリソースは十分に正確ではない可能性があります。時間があればもっと良いでしょう。 私は幸運にも、よじ登ることができないと予想されていた穴に遭遇することはなく、常に災いを幸運に変えました。たとえば、最初は非常に多くのオブジェクトが最終的にはスタックするだろうと考えていましたが、適切なロードと非表示によって、フレームレートはまだ良好でした。つまり、エンジンの搭載能力は実際に想像よりも優れていました。