株式会社ICSWebGLThree5117826昨今のWebサイトではWebGLを利用した3Dコンテンツをしばしば見かけるようになってきました。WebGLに対応した端末が普及してきていることや、Three.jsなどのライブラリが充実していることもあり、実案件での採用が現実的になってきているからです。いざ3Dコンテンツを作ってみると、どこか味気のないものになってしまう事があります。そんな時はエフェクトの追加をオススメです。エフェクトを追加することで、コンテンツの見栄えが派手になったり、キャラやゲームの状態が伝わりやすくなります。今回エフェクトの例として、RPGのセーブポイントや回復ポイントで使用されそうなデモを制作してみました。ソースコードはGitHubに公開しておりますので、あわせて参照ください。1.8)によって書かれています。本記事では、セーブポイント風なエフェクトの作成を通して、Three.jsを使ったエフェクト作成の3つの基本ノウハウを解説します。他のエフェクト作成にも応用できるので是非ご参考ください。制作の流れ冒頭のデモは下図のパーツで構成されています。複雑そうに見えますが、分解してみるとシンプルなパーツで構成されている事が分かります。今回は以下の3つに絞って順に解説します。その他のパーツはこの3つの方法の応用で作る事ができます。円柱を作る光の柱は縦に伸びる円柱のような形をしています。Three.jsではCylinderGeometryという円柱型のジオメトリが用意されているのでこちらを使用して表現します。true);この時、第6引数の上下面を無くすか否かにtrueを指定するように注意ください。蓋のある円柱になってしまうのを防ぐためです。柱を光らせる円柱に光っているかような質感をもたせます。発光体を表現する際は、光源に関係なく発色できるMeshBasicMaterialが最適です。デプスバッファへの書き込み可否});設定しているパラメーターを順に解説します。mapmapパラメーターは使用するテクスチャーを指定できます。テクスチャーはモノクロで作成しておくとcolorパラメーターから白色部分を指定した色に変更できるため、汎用性が高く扱いやすいのでオススメです。blendingblendingパラメーターはブレンドモード指定できます。NoBlending(無し)、NormalBlending(半透明合成)、AdditiveBlending(加算合成)、SubtractiveBlending(減算合成)、MultiplyBlending(乗算合成)の5つから選択できます。今回は重なった部分を白く発光させたいためAdditiveBlendingを指定します。ブレンドモードを使用する場合は、併せてtransparentをtrueに設定するように注意ください。sidesideパラメーターは描画面を指定できます。FrontSide(表のみ)、BackSide(裏のみ)、DoubleSide(表裏両方)の3つから選択できますが、今回は筒の中も表示させたいためDoubleSideを指定します。depthWritedepthWriteパラメーターは面と面が重なって見える時に、陰に隠れてしまった面を描画させないようにするかどうかを設定できます。今回は光が重なって見える必要があるのでfalseを指定します。ジオメトリとマテリアルが完成したので、この2つを使用したメッシュを作成すれば光の柱の完成です。渦をつくる渦は地面にドーナツ型に渦を発生させたいので、TorusGeometryというドーナツ型のジオメトリを使用します。本来は立体のドーナツ型を想定したジオメトリですが、第3引数の分割数の値を2にすることで平面のドーナツ型を作成できます。100);マテリアルは前章の光の柱とほぼ同じ内容で、テクスチャーのみ変更したものを使用します。THREE.FrontSide});地面に設置するTorusGeometryはデフォルトで縦に立っているので、90度回転させて地面と平行にします。描画面はFrontSideとしているので、表面が見えるように回転させる向きに注意してください。地面と平行になりましたが、このままでは地面とエフェクトが重なってしまい下図のようなチラつきが発生してしまいます。この問題はメッシュを少しだけ浮かせる事で回避できます。浮かせる回転させる渦を巻いているアニメーションをつけます。回転角度をフレーム毎に増やしメッシュを回転させます。回転させたことで渦を巻いているような見栄えになりました。粒をつくるパーティクルにはSpriteというオブジェクトを使用します。Spriteは必ずカメラに正面を向くという特徴のある平面オブジェクトで、パーティクルを表現する場合に、テクスチャーの見え方が均一になるため非常に有効です。このような手法を一般的にビルボードと呼びます。Spriteを生成する場合のマテリアルはSpriteMaterialを使用します。THREE.Sprite(material);これで一粒分のパーティクルを作成できました。湧き出させるパーティクルが下から湧き出るような演出を作っていきます。下から上へと上がっていく動きと、フェードアウトさせる動きを合わせる事で表現します。0.01;真上に上がって消えていくアニメーションができました。あとは同じパーティクルをいくつか生成し、時間差をつけてアニメーションさせることで、湧き出るような演出を表現できます。横方向の動きや拡縮を入れるとよりクオリティーが上がります。まとめ特別なツールを使用する事なく、JavaScriptのコードのみでセーブポイント風なエフェクトを作成できました。今回紹介した基本ノウハウは、セーブポイントだけでなく、波動や爆発などのさまざまなエフェクトを作成する際に応用できます。ゲームエフェクトデザイン入門』ではエフェクトのさまざま表現方法がわかりやすく解説されているので、あわせて見ておくと良いでしょう。本記事以外でもエフェクトに関連した記事をいくつか掲載しているので、こちらもご参考ください。みなさんも色々なエフェクト作成に挑戦してみてください。平成29年8月14日に内容をメンテナンスしています。MEDIAは株式会社ICSが運営するオウンドメディアです。ICSはインタラクションデザイン専門のプロダクション。最先端のwebテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。問い合わせ採用情報インタラクションコンテンツの制作や新しいことに挑戦しながら、互いにスキルを高め合えるメンバーをICSでは募集しています。詳しくは採用情報をご覧ください。MEDIAは古い記事でもメンテナンスし続けることで、常に役立つ情報発信を目指しています。