【WebGL】とりあえず描画したいんだけど、VueGLにはどんなコンポーネントがあるの？
Vue.jsでWebGLを簡単に扱うためのVueGLというライブラリがあるらしいぞ。
でも調べてみたら日本語で解説されたページが無いな。
というわけで、簡単に描画するまでに必要なコンポーネントの概要に触れていこうと思います。
目次
はじめに
こんにちは。クラウドソリューショングループのtakinami.sです。
以下の記事で四面体の描画まで行ったので、この記事ではその時に使用したコンポーネントの概要に触れてみようと思います。
前回の振り返り
ここで四面体を描画するコードを振り返ってみましょう。
<template>
<vgl-renderer>
<vgl-defs>
<template #tetrahedron>
<vgl-tetrahedron-geometry />
</template>
</vgl-defs>
<template #scene>
<vgl-scene>
<vgl-mesh>
<template #geometry>
<vgl-use href="tetrahedron" />
</template>
<template #material>
<vgl-mesh-standard-material/>
</template>
</vgl-mesh>
<vgl-directional-light
:position-x="2"
:position-y="1.5"
:position-z="1"
/>
</vgl-scene>
</template>
<template #camera>
<vgl-perspective-camera
:position-x="5"
:position-y="1.5"
:position-z="1.5"
rotation="lookAt"
/>
</template>
</vgl-renderer>
</template>
<script>
import { VglRenderer, VglDefs, VglUse, VglScene, VglTetrahedronGeometry, VglMeshStandardMaterial,
VglDirectionalLight, VglMesh, VglPerspectiveCamera, } from 'vue-gl';
export default {
components: {
VglRenderer,
VglDefs,
VglUse,
VglScene,
VglTetrahedronGeometry,
VglMeshStandardMaterial,
VglDirectionalLight,
VglMesh,
VglPerspectiveCamera,
},
};
</script>
上記のコードにより以下のような図形が描画できます。
コンポーネントの概要
では、コンポーネントの概要を見ていきましょう。
vgl-renderer
『renderer』の名前が示す通り、レンダリングに必要なコンポーネントです。
このコンポーネントを読み込まずに描画をしようとしても、コンパイルエラーになります。
vgl-defs
図形やテキストといった3Dで描画する形状を管理するためのコンポーネントです。
このコンポーネントを用いて登録した形状は任意の場所で呼び出すことができます。
呼び出すための準備として、直下のtemplateタグに『#tetrahedron』のように任意の名前を付けておきましょう。
vgl-tetrahedron-geometry
『tetrahedron』の名前が示す通り四面体を描画するためのコンポーネントです。
図形の名前が名前に入っていると、「いよいよ図形を描くんだぞ」とわくわくしますね。
四面体の場合、図形の半径や細分化レベル（数字が0に近いほどより細かく図形の描画ができる）といったプロパティを設定することが可能です。
『vgl-box-geometry』なら四角柱、『vgl-ring-geometry』なら輪のようにいくつか種類があるので、公式ドキュメントを参考にいろいろ試してみると面白いと思います。
vgl-scene
後述するメッシュ(mesh)を置くための場所（scene）の作成とその設定を行うコンポーネントです。
『scene』という土台があることで初めて図形を物体として表示できるようになります。
X、Y、Zの各軸の座標や背景色などを設定することが可能です。
vgl-mesh
メッシュの準備とその設定を行うコンポーネントです。
メッシュとは、図形やテキストのような形状と3Dで描画したときの見栄えを決めるマテリアルを管理するためのものです。
形状を描画するX、Y、Zの各軸の座標などを設定することが可能です。
vgl-use
vgl-defsで管理している形状を呼び出すためのコンポーネントです。
<vgl-use href="vgl-defsの時に付けた任意の名前" />
上記のようにhrefの中で名前で指定することで呼び出すことができます。
vgl-mesh-standard-material
メッシュの所で少し触れたマテリアルを指定するコンポーネントです。
今回使用した『standard』のマテリアルは、反射の仕方など光に関する挙動が現実に近い状態で再現できるものになっています。
影がつかないため奥行き感が無い最もシンプルな『basic』、影がついた光沢感の無い形状を表現できる『lambert』などマテリアルにはさまざまな種類があります。
vgl-directional-light
光源を管理するためのコンポーネントです。
今回使用した『directional』は平行な光源が無限にある状態を作り出します。
人で捉えるなら、どこまで歩いて行ってもずっと頭上から光が当たっている状態をイメージすると良いかもしれません。
個人的にずっと光が当たるのはしんどいものがありますが、生成した図形たちには頑張ってもらいましょう。
全方位に光を発する『point』や、スポットライトのように一点にのみ光を当てる『spot』など光源にもさまざまな種類があります。
vgl-perspective-camera
どの視点から空間を見るかを決めるコンポーネントです。
『perspective』の場合は遠近法が適用され、視点の手前にあるものは大きく、奥にあるものは小さく見えるようになります。
他にも『orthographic』というものがあり、こちらは遠近法が適用されないため、手前のものも奥のものも同じ大きさに見えるという特徴があります。
おわりに
今回はほんの少し触れただけですが、ドキュメントを読みながらいろいろいじってみるのは楽しいですね。
日本語化されたドキュメントがあればもっと楽なんですが…
Three.jsの公式ドキュメントを先に読んでおくと、VueGLの各コンポーネントが何をするものなのかをすんなり理解することができると思います。
VueGLの公式ドキュメントもコンポーネントの概要があっさりしていたりとThree.jsの知識があることを前提に書かれているのではないかという部分があるので、Three.jsから入っていくことをお勧めします。
参考文献
