🕤 🤜🏻 🤘🏿 DIYインタラクティブ3Dマップ 🤲🏻 🚙 🤬

とにかく、3Dグラフィックスが主な専門分野ではない場合、このレポートの著者であるAlexander Amosov （ @ s9k ）の場合のように、3Dグラフィックスを使用する必要があります。エントリーのしきい値はそれほど高くありません。ブラウザーで利用可能なWebGLテクノロジー、人気のあるThree.jsフレームワーク、および志を同じくする人々の小さな会社が自分でそれを面白いプロジェクトにすることができます。 Avito hackathonの一部として開始されたこのようなプロジェクトの例です。メインステージを分析し、問題のある領域に注意を払い、最後に、このオフィスカードのようなクールなものの作成に焦点を当てます。

ちなみに、プロジェクト自体は興味深いものです。現代の大きなオープンスペースでは、空間内を移動し、適切な人や会議室を見つけることは非常に困難です。もちろん、Excelで図を作成することもできますが、これは必ずしも優れたソリューションではありません。アレクサンダー・アモソフは、より便利にそれを行うという考えを持っていました。彼はFrontend Confでそれを共有しました。以下は彼の報告の転写です。

物語

プロジェクトに関するいくつかの言葉。当社は積極的に開発を進めており、新しい従業員が現れ、オフィスでのナビゲーションの平凡な問題が発生します。

最近まで、たとえば、フロアの1つのこのマップのようなスケッチマップがあり、そこに何が配置されているかが示されていました。しかし、それは修正されており、時間が経つにつれて何かが変化し、人々が別の部門に移動し、カードは無関係になります。

さらに大きな問題は、適切な従業員を見つけることでした。最初に、Confluenceに強力なテーブルがありました。セルは、名前が入力される従業員の場所です。想像力があまり良くなければ、あまり便利ではありません。表示された画像では、テーブル（左）とマップ（右）はオフィスの同じ場所に対応しています。もちろん、このスキームはテーブルを使用して作成できます。非常に安価で迅速なソリューションですが、非常に愛されています。

新しい従業員が必要なものを簡単に見つけられるように、もっと便利にするというアイデアがありました。

これは、すべてのフロアがある3次元のマップです。人に検索して自分の現在地を見つけ、連絡先を取得し、適切な会議室を見つけてもらうことができます。

2D vs 3D

プロジェクトがまだ始まったばかりの頃、当然ながら議論がありました。彼らは私に言った：「なぜ3D？これはすべて理解不能です。誰もが二次元カードに慣れています！迅速かつ簡単に作成できます。二次元にしましょう！」

3次元実装が選択されたのはなぜですか？

元の2次元svgスキームは、ページ上ではあまりきれいに見えません。 3D、影、遠近法のおかげで大きなリソースがなくても、マップはよりエレガントに見えます。

• 明確です

私たちにはまだ3次元空間に存在しているので、そのようなマップはより視覚的です。好きなように向きを変えてナビゲートできます-非常に便利です。

• できるから

これが主な理由です-私はそれを行うことができますが、私がやらない2次元の実装とは異なり、それは私にとって興味深いです。

どこから始まりますか？

モデル作成

オプションがあります：

•モデラーの検索（オプション）

これがおそらく最も理想的なオプションです。3DMAXおよび同様のプログラムを理解している人を見つけて、彼がすべてを行うようにし、このモデルを採用するだけです。

•既製モデルの検索（オプション）

そのような人がいない場合、既製のモデルはインターネットで見つけることができます。

•3Dエディターを自分でマスターする

このオプションは実際に必要です （括弧内に「オプション」という単語はありません）-とにかく必要なので。ダイブレベルの問題。モデラーがいる場合でも、おそらく自分で何かを編集するか、少なくともエディターで開いて、モデルが適切に作成されていることを確認する必要があります。したがって、この項目は必須です。

3D Blenderエディターを使用しました。

おそらく誰もが3D MAX-3D編集用プログラムについて聞いたことがあるでしょう。これは対応するものであり、オープンソースの世界からのみです。このエディターは無料で、すべての主要なプラットフォームがあり、常に進化しています。これには素晴らしい機能があります-Blenderを使ってできることはすべて、通常のPythonスクリプトを使ってできます。

いくつかのインターフェイス要素にカーソルを合わせると、ポップアップウィンドウに、データを受信するため、または特定のアクションが機能するために実行する必要があるメソッドが表示されます。

もう1つのクールな機能は、デフォルトでSVGからのインポートをサポートしていることです。

ソースマテリアルSVGを入手したばかりなので、非常に適しています。図をインポートして、三角形に変換し、壁の高さを設定するだけです。唯一のことは、従業員が配置されている椅子がなく、Blenderに手動で配置する必要があったことです。

原則として、これらの場所はすべて同じであるため、少しずらしてクローンを作成する必要がありました。上から見ると場所を整理するのが最も便利ですが、上から見るとすべてが正常に見えるように見えますが、実際には異なるレベルにあることがわかりました。

さらに、場所を複製するときに、いわゆるジオメトリを誤って複製する可能性があります。 ジオメトリは、ワイヤフレームを構成するポイントです 。モデルがより多くのディスク容量を占有し始めるため、複製はあまり良くありません。

ここで、チップの1つ、つまりPythonスクリプトを使用できるという事実が役立ちます。

import bpy geometry = bpy.data.meshes['place'] for obj in bpy.context.selected_objects: obj.rotation_euler.x = 0 obj.rotation_euler.y = 0 obj.data = geometry obj.location.z = 0

場所のジオメトリを取得し、選択したオブジェクトを調べ、回転をリセットし、すべてが同じジオメトリと高さを参照していることを示し（Z軸が上を向いている）、0にリセットします。

影

Blenderに戻ると、影が焼き付けられました。当然、 シェーディングオブジェクトではよりボリュームがあります。リアルタイムシェーディング技術のアンビエントオクルージョン （オブジェクトの相互シェーディング）を使用する場合、レンダリングの速度が低下するため、事前にシャドウをベイクすることをお勧めします。

図は、以前に焼き付けられた影を示しています。右側がテクスチャ、左側がこの座標がオブジェクトに重ねられるテクスチャ座標です。

テクスチャ座標の外観の別の例。

いくつかの簡単なアクションの後、「Bake」ボタンをクリックし、相互シェーディングとベイクを選択する必要があります。私は3Dエディターがあまり得意ではないので、これらは本当の影ではありません。また、すべてをテクスチャリングしてクールにするために光源を美しく配置することは困難でした。したがって、相互シェーディングは非常に適切なオプションです。

フラット実装の外観と影付きの写真を比較できます。

モデルを把握し、モデルがあると信じています。そして、誰もが使用できるように、ブラウザにそれを構築する必要があります。

Webgl

WebGL仕様が助けになります。

それが何であるかについての少しの歴史。 WebGLはOpenGL for Embedded Systemsバージョン2.0仕様に基づいており、基本的に若干の変更を加えて繰り返しています。一方、OpenGL for Embedded Systemsは、モバイルデバイス専用に設計されたOpenGL仕様のサブセットです。つまり、過剰なカットアウトがあります。

WebGLバージョン2.0もブラウザでサポートされていますが、まだそれほど普及していません。 WebGL Nextも議論されていますが、何に焦点を合わせるのか、それともまったく焦点を合わせるのかは明確ではありません。おそらくバルカンに-それはまだ明確ではありません。

WebGL 1.0はどこでもサポートされています ：iOS、Androidなど。これに問題はありません。

比較のために、WebGL 2.0は現時点ではあまりサポートされていないため、お待ちください。

2D vs 3D [2]

WebGLを掘り下げるために、2次元と3次元の実装を比較します。簡単なテストを行いましょう。通常の赤い正方形の2次元および3次元の実現がどのように見えるかです。

Canvasの2次元実装は非常に簡単です。

 <canvas id="canvas" width="100" height="100"></canvas> <script> (function() { const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); context.fillStyle = 'rgba(255, 0, 0, 1)'; context.fillRect(25, 25, 50, 50); }()); </script>

キャンバス要素があり、その2次元のコンテキストを使用して、塗りつぶしスタイルを定義し、正方形を描画します。

3次元実装は、最初は似ているようです。canvas要素もあり、コンテキストはcanvas.getContext（ 'webgl'）を使用して取得されます。しかし、ここに違いがあります。今、私は説明しようとします。実装に深く入り込むことはできず、あいまいな用語を恐れることもありません。これをすべて単純化する方法をさらに説明します。

 <canvas id="canvas" width="100" height="100"></canvas> <script> (function() { const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl'); //   //   //    //        //   }()); </script>

次にする必要があること：

1. 頂点シェーダー -コンパイルして渡します。

 const vertexShaderSource = ` attribute vec4 position; void main() { gl_Position = position; } `; const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader);

2. フラグメントシェーダー 、出力で単に赤色を与える-再度コンパイルして渡す

 const fragmentShaderSource = ` void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, vertexShaderSource); gl.compileShader(fragmentShader);

3. プログラム -両方のシェーダーをプログラムに接続して使用します。

 const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); gl.useProgram(program);

4.四角形の頂点の座標が設定される頂点バッファー 。作成後、バインドし、頂点の座標を転送し、頂点シェーダーからの位置属性を頂点バッファーに関連付けて使用する必要があります。

 const vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); const vertexSize = 2; const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const attrPosition = gl.getAttribLocation(program, 'position'); gl.vertexAttribPointer(attrPosition, vertexSize, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(attrPosition);

5.次に、これらすべてを描画する必要があります。

 const vertices = new Float32Array([ -0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5 ]); const vertexSize = 2; // … gl.drawArrays(gl.TRIANGLE_STRIP, 0, vertices.length / vertexSize);

だから、「簡単に」赤い正方形であることが判明しました！

おそらく、WebGLはそれほど単純ではないことに気付いたでしょう。それはかなり低レベルであり、多くのメソッドがあり、それらには100万の引数があります。そして、これはまだ単純化されたコードです-実際のコードで必要なエラーのチェックはありません。

ネイティブWebGLを詳しく調べたい場合は、松田耕一、Roger Lee、「WebGL：Programming Three-Dimensional Graphics」によるロシア語の優れた本があります。

私はそれを読むことをお勧めします、すべてが最初から容易に語られます。たとえば、単純な三角形の描画から始まり、影付きの完全な3次元オブジェクトの作成で終わります。

それを理解する時間がなく、おそらくそこにない場合-私がやったプロジェクトでさえ、数日でハッカソンの一部として実装されました（2階建ての最初のプロトタイプ）。したがって、最愛の（または最愛ではない）フレームワークが助けになります。

最も人気のあるWebGLフレームワークとしてThree.jsを使用しました。このフレームワークの主な利点は、低レベルAPIを掘り下げることなく、すべてをより速く、より少ないコードで実行できる便利な抽象化を作成することです。プロジェクト全体に対して単一のシェーダーを記述することはできません。

この例はReadme Three.jsから取られています：

 var scene, camera, renderer, geometry, material, mesh; init(); animate(); function init() { scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; geometry = new THREE.BoxGeometry( 200, 200, 200 ); material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); } function animate() { requestAnimationFrame( animate ); mesh.rotation.y += 0.02; renderer.render( scene, camera ); }

このコードをブラウザにコピーすると、実際、すでに完全な3次元視覚化が行われています。そして、これは単なる普通の正方形ではなく、回転する3次元の立方体です。

この例を考えてください

特定のシーン（ scene

）があります-これは仮想空間です。これらのシーンは複数ある場合がありますが、通常は1つです。複数のシーンが存在する場合、それらはパラレルワールドとして存在します。
カメラ（ camera

）があります-それは、スクリーン上の写真を撮影して取得するポイントです。
次は、オブジェクトを作成するコードです。これにより、キューブのgeometry

（ geometry

）とそのマテリアル（ material

）が作成されます。この場合は、単なるフラットな赤色です。キューブフレームを組み合わせてその上にマテリアルを配置すると、赤いキューブ（ mesh

）が得られ、それをステージ（仮想空間）に配置します。
次のステップは、レンダラーオブジェクトを作成し、その中にキャンバスオブジェクトを作成し、WebGLと対話することです。この場合、レンダリングが全画面で行われるようにサイズを設定し、ページの本文にキャンバスを追加します。
その後、 animate()

関数を呼び出すだけで、 requestAnimationFrame

によって自分自身を呼び出すだけでなく、キューブが回転します。

そのため、完全に視覚化されています。

キューブを作成するコードセクションを使用すると、ローダーがあるコードに簡単に置き換えることができます。

 var loader = new THREE.ObjectLoader(); loader.load('model.json', function(mesh) { scene.add(mesh); });

モデルをロードするためにloadメソッドを呼び出し、すでにスタンドに抽象キューブではなくモデルを追加して、ブラウザーで表示します。これは一般的にクールです！

モデルを取得するには、特定の形式のモデルが必要です。 Three.jsには、接続する必要がある既製のエクスポーターがあり（デフォルトではBlenderにはありません）、それを使用して、シーンに既にインポートできる形式にモデルをエクスポートします。

しかし、写真は静的でしたが、モデルをねじって、さまざまな角度から見たいと思います。

Three.jsには、このためのOrbitControlsが既にあります。メインのThree.jsフォルダーではなく、例（<script src = "three / examples / js / controls / OrbitControls.js"> </ script>）にあります。コアコードには含まれていないが、さらに接続できるものはすべてあります。

OrbitControlsを接続し、カメラオブジェクトを渡すインスタンスを作成します。

 scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000); camera.position.z = 1000; new THREE.OrbitControls(camera);

カメラはOrbitControlsによって制御されます。その後、マウスでモデルを回転できます。マウスの左ボタンを押したまま動かし始め、オブジェクトをズームインまたはズームアウトすることもできます。

これはThree.jsの例です。モデルとコントロールがロードされるだけで、原則として、これはすでに完全な視覚化です。たとえば時計を販売している場合、モデルを作成したり、インターネット上で見つけたり、ブラウザに挿入したりすることができ、ユーザーはズームインしてさまざまな角度から見ることができます。

Three.jsフレームワークを使用して3次元グラフィックスの世界をより深く理解するために、Udacityの優れたコースがあります。彼は英語ですが、とても面白いです。

アプリケーションの仕組み

基本を習得したとき、本格的なアプリケーションの動作を実現するために、より多くの機能が必要になります-ツイスト渦巻きだけでなく、追加の機能を接続します。

アプリケーションを2つの部分に分割しました。

視聴者

これは、CanvasとWebGLの操作を担当する部分です。次のものが含まれます。

ベイクドシャドウを使用したモデル。
オブジェクトの再キャストがあります-キャンバスをクリックすることで、ヒットした3次元空間の要素を決定するメカニズムです。これは、たとえば、計画上の場所を割り当てたり、アイコンに関する情報を取得したりするために必要です。
アイコンのスプライトは、3次元空間の2次元画像の一種です。最初の3次元シューティングゲームをプレイした場合、たとえば、Doom 1および2では、すべての敵がスプライト、つまり2次元であり、常にあなたを見ていることを思い出してください。

UI

インターフェイスは非常に標準的で、キャンバスの上部に重ねられ、検索、承認、およびフロア内の移動が可能です。したがって、3次元空間で直接クリックするだけでなく、従来の2次元インターフェイスを使用して、フロアを割り当てることができます。

私は2つの独立したブロックを選択しました。それは私にとって便利だと思われたためです-突然誰かがWebGLをサポートしなくなった場合、ビューアを別のブロックにすばやく置き換えることができます。 UIは同じままにすることができます-この2次元画像の場所をハイライトするとしましょう。

すべてはReduxストアで管理されます。アクションが発生すると、アクションが作成されます。この場合、フロアをクリックして、3次元図で、2次元インターフェイスで、フロアを選択できます。したがって、アクションが発生し、アプリケーションの状態が更新され、ビューアーとUIの両方の部分に広がります。

モデルがあり、対話性があり、インターフェースがあります。しかし、現時点では、十分な大きさのアプリケーションがある場合、ユーザーが「すべてが遅い！」と言う問題に遭遇する可能性が高いです。

すべてが遅くなります

どのような問題に遭遇し、その解決に何が役立ったかを説明します。

最初の問題は、macOS上のSafariのブレーキでした。さらに、プロファイルしようとすると、 requestAnimatioFrame

は正直な60 FPSを生成し、すべてがうまくいくように見えますが、ビデオはすべてがぎくしゃくしていることを示しています。そして、これはSafariでのみです。Chromeではすべて問題なく、FireFoxでは問題ありません。

長い間、私は何が問題なのかを突き止めました。可能なすべてをオフにしました-それでも速度が低下します。次に、上で示したキューブを使用してThree.jsの例を取り上げ、起動しましたが、速度も低下しました！

事はこれであることが判明した。 WebGLは、 ハードウェアアンチエイリアスをサポートしています。単純にアンチエイリアスを指定できます：true-純粋なWebGLかThree.jsかを問わず、画像は良くなります。さらに、このアンチエイリアシングはハードウェアであるため、十分に迅速に動作します。この問題が発生するまで、これまで問題に気づいたことはありません。

しかし、それは巨大な解像度のMacブックのRetinaスクリーン上のSafariにあり、いつものように、弱いビデオカードで、この問題が発見されました。このブラウザでこのようなデバイスのハードウェアアンチエイリアスを無効にするのに役立ちました。

まだ不満を抱いていた別の問題は、アプリケーションが起動されたときに、 コンピュータークーラーが猛烈に回転し 、音を立て始めたことでした。

すべてがシンプルであることが判明しました。私が示した例には、 requestAnimationFrame

によって自分自身を呼び出すanimate()

関数があります。問題は、基本的にこれは必要ないということです。モデルを回転させると仮定します。画像は静的で、何も起こりませんが、ビデオカードは苦しめられ、 requestAnimationFrame

1秒あたり60回トリガーされrequestAnimationFrame

（理想的な場合）。何も起こりませんが、シーンを何度も何度も再描画することを余儀なくされたビデオカードを拷問します。

解決策は明らかです。 不要なときはレンダリングしないでください 。カメラを回転させ始め、すべてが動き、レンダリングを開始します。マウスボタンを放し、カメラの回転を停止すると、レンダリングを停止できます。

アプリケーションの状態が変更された場合、たとえば、2次元インターフェースで場所を選択し、強調表示する必要がある場合、通常は1つのフレームのみをレンダリングでき、それがすべて強調表示されます。

すでにレイキャスティングについて言及しました。キャンバスをクリックすると、3次元空間にベクトルが作成され、オブジェクトを構成するどの三角形がこのベクトルと交差するかが計算されます。したがって、最初に交差したオブジェクト、選択したオブジェクト。 Three.jsでは、次のようになります。

レイキャスターがあり、
座標とカメラ、および交差点を確認するオブジェクトを送信します。
その結果、交差点が得られます。

しかし、多数の三角形で構成される非常に大きなモデルがある場合、これには多くの時間がかかります。実際、すべてのオブジェクトを構成するすべての三角形をソートする必要があります。したがって、別の方法が使用されます。事前に、Blenderでオブジェクトに近いオブジェクトを作成できますが、非常に少数の三角形で構成されています（上の図で赤で示されています）。

非表示にすることも、別のステージに配置することもできますが、レイキャスティングは彼と一緒に行われ、はるかに高速になります。

さらに、床の場合、手動で作成する必要があった場合-複雑なジオメトリがあるため、場所ではJSコードで自動的に生成できます。場所を取り、x軸とy軸上の最大位置を計算し（zでは必要ありません）、完了です。 2つの三角形で構成される正方形があります-それだけです。

インスタンス化テクノロジを使用すると、パフォーマンスが最大に向上しました （結果は左側にあります）。 Instancingを使用する前は、365のドローコール（ビデオカードでのドロー）があり、その後は51でした。これもかなりの数ですが、おそらくアイコンが原因です。

ポイントは何ですか？同じジオメトリを参照する場所があることをお伝えしました-異なるインスタンスが異なる場所に異なる色で存在していることを思い出してください。同じ種類のオブジェクトが存在する場合、この手法を適用して、ビデオカードでのレンダリングの回数を減らすことができます。これらすべての場所が1つのオブジェクトに結合され、一度にレンダリングされます-1つのパスで。

インスタンスはWebGL 2仕様の一部であり、最初のWebGLでは、拡張機能を介して使用できます。拡張機能は、最新のすべてのブラウザーでサポートされ、使用可能です。

それがどのように機能するかを説明しようとします。デフォルトでは、4つの異なる位置に4つの異なる色で4つの場所があるとします。通常、このデータはユニフォームを介して渡されます-これはシェーダープログラム全体に適用される「変数」です。これらの場所が1つのバッチに結合されると、場所は同じ色になり、1つの場所で混雑します。

したがって、これらのデータを正確に送信するには：色、場所の位置。属性が必要です。これは、各頂点に個別に渡されるパラメーターです。

インスタンス化について知っておくべきこと：

パフォーマンスが大幅に向上します 。同じタイプのアイテムがたくさんあり、すべてが遅くなる場合、ほとんどの場合、大幅に増加します。
しかし、それは難しいです。 Three.jsからの例はここにあります。

次に発生する問題は、次の画像です（Chrome内）。これは通常、 十分なビデオメモリがないときに発生します。

何が役立ちますか？

モデルの簡素化

svg画像を3次元オブジェクトに変換するとき、Blenderは多くの余分なポイントを作成します。もちろん、取得したオブジェクトは滑らかですが、ほとんどの場合これは特に見えません。 そして、余分な点はすべて、ビデオメモリの消費とパフォーマンスの低下です。

テクスチャの最適化

通常、3次元ゲームでは、三角形の数が最も少ない低ポリゴンモデルが使用されます。これを中和するために、多数のテクスチャを使用して美しい写真を作成します。残念ながら、これはブラウザで問題になります。これは、タブに割り当てられるメモリがあまり多くないため、タブが短いとタブがクラッシュするためです。したがって、テクスチャの数とその最適化を減らすためのテクニックがあります。

そのテクニックの1つは、複数のテクスチャを1つに結合することです。 3つの黒と白のテクスチャがある場合、それらをチャネルに分割して1つに結合できます。最初のテクスチャは赤のチャネルに、2番目は緑に、3番目は青に転送されます。結局のところ、これはすべて3分の1のビデオメモリを占有することがわかります。

圧縮テクスチャ

さまざまな形式があります：DXT、PVRTC、ETC。ビデオカードのテクスチャサイズ1024 * 1024をテクスチャメモリ512 * 512として、つまり4倍小さくすることができます。

クールな利益に思えますが、大きな制限があります。

さまざまな形式 （DXT-デスクトップでのみサポート、PVRTC-iOS、ETC-Android）。一般的な場合、ほとんどの場合、4つの異なるテクスチャ（各形式、および4番目の非圧縮）を保持し、システムがサポートする形式を確認する必要があります。サポートされている形式がない場合は、元の非圧縮テクスチャを使用します。
画像の劣化 。歪みの程度は元の画像によって異なります。
透明領域の境界にアーティファクトが表示される場合の透明性の問題 。
大きなファイル （ただし、gzipを使用できます）。サイズが1024 * 1024の完全に黒いPNG画像が即座にダウンロードされますが、ビデオメモリでは各ポイントがメモリを消去します。 — , .

— .

— . (, ) .

— ! , - - . — , , , , .

, . 3D, . . , . , , , .

便利なリンク：

✓ Udacity

✓ « »

✓ threejs

✓ WebGL ( )

✓ WebGL ( )

:

https://twitter.com/gc_s9k

s9k0@ya.ru

, ++ , 28 29 . , FrontEnd Conf :

(Tutmee Agency). — ?

(Coderiver).

(Luxoft). Apollo GraphQL.

, , , .

DIYインタラクティブ3Dマップ

物語