Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

表現の幅を広げるWebGLライブラリ「jThree」の公式プラグイン

jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用 第5回

  • LINEで送る
  • このエントリーをはてなブックマークに追加

 本連載では、jQuery+three.jsを実現したWebGLライブラリ「jThree(ジェイスリー)」について、MMDプラグインを利用したコンテンツのコーディング例を紹介します。連載5回目となる今回はWebGL表現の幅をさらに拡げるjThree公式プラグインを紹介します。前回までに作成したサンプルファイルをベースにMMDのモデルが歌って踊るサンプルと共に解説します。jQueryの基礎があれば難しくないので最後までお付き合いください。

目次

はじめに

 数あるHTML5の機能の中でも特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今1つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。

 three.jsの登場により大分実装のハードルが下がったものの、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。

 今回紹介する「jThree(ジェイスリー)」はそんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら手軽にWebGLコンテンツを作ることができます。

 本記事ではこのjThreeについて、WebGL表現の幅をさらに拡げる公式プラグインを紹介します。前回までに作ったサンプルファイルを使って実際にMMDモデルを歌って踊らせるところまで解説します。

対象読者

  • HTML、CSS、jQueryの基礎を理解している方
  • 3DCG・WebGLコンテンツを手軽に作ってみたい方
  • MMDモデルを自分のサイト上で3Dのまま躍らせてみたい方

jThreeがサポートする環境

 jThreeを利用するにはjQueryの2.0.0または1.10.0以降の読み込みが必須です。OSはWindows 7でのみテストしましたがブラウザの要件を満たしているとOS XやLinux、Androidでも動作するようです。ブラウザは動作テストを行ったもののみ以下に記述しますが、それ以外にもSleipnirやAndroid 4.4標準ブラウザでも動作する可能性があります。

  • Internet Explorer:11.0.7以上
  • Google Chrome:最新版
  • Firefox:最新版
  • Opera:最新版

 なお、後述するサンプルはWindows 7(64bit)、Google Chrome最新版で動作確認しています。

フレームレートメーターを表示する

 WebGLコンテンツと言えばフレームレートの表示がおなじみです。Statsプラグインを使うとメソッドを1回呼ぶだけでメーターが表示されます。引数にはメーターを設置させたいrdr要素のCSSセレクタを指定します。省略すると"rdr:first"が選択されます。返り値はメーター自体のHTML要素です。メーターは1ページ上に1つだけ表示できます。

jThree.Stats();

  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:jQueryの記法でWebGLを操作できるライブラリ「jThree」の活用
All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5