ブログについて
Three.jsでメロンソーダ
2022.03.23
制作
こんにちは。制作部の中山です。
制作カテゴリのブログ記事で突然何を聞くという感じではあるのですが、みなさんはメロンソーダはお好きですか？現在我が家には空前のメロンソーダブームが到来しており、あの鮮やかな緑色とシュワシュワの魅力に取り憑かれています。
もともとテレワークがはじまる前は、会社近くの喫茶店でお昼休みにメロンクリームソーダをよく飲んでいたのですが、このご時世で喫茶店へ行く機会も減り、コンビニでもあまり見かけないので、最近はもっぱら購入するのは自動販売機です。
自販機の種類によって、様々な種類のメロンソーダがあるのですが、わたしがその中でも好きなのは、SUNTORYの自販機にあるPOPメロンソーダ。他のメロンソーダと比べても一際鮮やかな緑といった色合いで、成分表をみても「果糖ぶどう糖液糖（国内製造）／炭酸、香料、酸味料、リン酸塩（Ｎａ）、甘味料（アセスルファムＫ、スクラロース）、着色料（黄４、青１）」とまったくもって自然な物が入っていません。今のこの健康志向な世の中に逆行していく感じ、背徳感があって嫌いじゃありません。ただそのせいか自販機専用商品であり、SUNTORYの自販機でも滅多にお目にかかる機会がなく、坂道巡りの度にSUNTORYの自販機を探してはPOPメロンソーダを探しています。
と、ここまで読み進めた方の中には、何を制作ブログでメロンソーダについて語っているんだと思われる方がでてきそうなので、本題に入ります。まあ本題もメロンソーダになるのですが…今回は「Three.js（WebGL）」を使ってメロンソーダを作ってみようと思います。
Three.js（WebGL）とは？
そもそもThree.jsとは何でしょうか？Wikipediaを引いてみると、下記のように説明されています。
three.jsは、ウェブブラウザ上でリアルタイムレンダリングによる3次元コンピュータグラフィックスを描画する、クロスブラウザ対応の軽量なJavaScriptライブラリおよびAPIである。HTML5のcanvas要素、Scalable Vector Graphics、WebGLとの組み合わせが可能である。ソースコードはGitHubでホストされている。WebGLというWeb標準技術の登場により[4]、商用のブラウザ拡張機能に頼らずに、HTMLファイル内に埋め込まれたJavaScriptを介して、GPUアクセラレーションによる動的表現を描画することが可能になった。three.jsは、WebGLのAPIを簡略化するためのラッパである。
Wikipedia- Three.js https://ja.wikipedia.org/wiki/Three.js
端的にご説明すると、より簡単にWebサイトで3Dのコンテンツを表示するライブラリのことです。ここ数年で増えたと思うのですが、ふわふわと図形が舞っていたり、スクロールでアニメーションがついてきたり、写真の一部が3Dになっていたりといったサイトを見かけたことはありませんか？それらの一部はThree.jsで表現されています。わたしがこの業界に入った頃にはなかった新しい表現方法で、本当に日々勉強だなと痛感する今日この頃です。また、こういったライブラリがあることは純粋にありがたいなと思います。
ただそうはいいつつも、当たり前のことながらすぐにサックリと使いこなせるものでもなく、Amazonを見てもいくつもの分厚い解説書が発売されています。わたしも解説書を購入し、休みの日にちまちまと触ってみているわけですが、やはり目的がないとなかなか難しいものです。
楽しく学ぶ
そこで学びも楽しくなければ…ということでメロンソーダにいきつくわけです。個人的には新しい技術を学ぶには、自分の好きなものを形にするという方法が、一番の近道だと思っています。参考書を片手に、あるいは参考サイトとにらめっこしながら、というのはもちろん正当な学習法ですが、それだけだとどうしても挫折してしまいがちです。途中で挫折しないためにも自分の好きなものをテーマにするのは良い方法だと思います。（途中経過を見られた場合、家族に何をやっているんだ…？といった白い目で見られる点は除いて）
ここまで熱く語ってきましたが、わたしの説明がものすごく下手なので、まずはわたしの作成したメロンソーダを…。シュワシュワーと広がる炭酸…そうです。これを表現したかったわけです。参考書に加え、参考サイトを巡る中で気泡を再現している記事がありましたので、それらも参考にしながら炭酸を表現しました。
https://codepen.io/kimurayuka/pen/BaJNaLQ
部分解説
今回の記事は入門編ではないので細かな説明は避けますが、ポイントとなる点を部分的に解説していきたいと思います。
HTML
HTMLの記述はいたってシンプルです。Three.js本体の読み込みを行い、canvasエリアを用意します。canvas要素にはidをつけ、あとでjsで指定できるようにしておきましょう。なお大前提にはなりますが、Three.jsはHTML5のcanvas要素を利用するため、この要素内がコンテンツを表示する描画エリアとなります。またThree.jsはWebGL対応のブラウザでのみ対応となります。各ブラウザの対応状況は下記表にまとめていますが、WebGL対応のブラウザで動作確認をするようにしましょう。
| デバイス | ブラウザ | バージョン情報 |
|---|---|---|
| PC | Microsoft Edge | 12以降 |
| GoogleChrome | 8は要設定、9から標準で有効 | |
| Mozilla Firefox | 4以降 | |
| Opera | 12は要設定、15から標準で有効 | |
| Safari | 5.1は要設定、8から標準で有効 | |
| SP | Google Chrome for Android | 25は要設定、30から標準で有効 |
| Safari on iOS | 8以降 | |
| Opera Android | 12以降 | |
| Samsung Internet | 1.5以降 | |
| Firefox for Mobile | (Maemoは1.0から、Androidは4から) |
CSS
CSSに関しても大がかりな設定をしていないため、特筆すべき事項がないのですが、一点jsと絡む部分としてわたしが躓いた部分があります。CSSでグラデーション指定をしても、js側で「alpha:true」設定をしないとグラデーションが反映されません。js設定前に現状確認をしたところグラデーションが反映されず…コードを何度見もして様々なサイトを巡って判明したことだったので、この点は備忘録としても残しておきたいと思います。
js
次にjsについてですが、こちらもボリューム的にすべての解説はできないため、ざっくりとですがピックアップしてご紹介いたします。
レンダラーの作成
レンダリングをするためのレンダラーを作成し、コンストラクターのクラスにはHTMLで設定したcanvas要素のidを指定しています。
const canvasElement = document.querySelector('#melonsoda')
const renderer = new THREE.WebGLRenderer({
canvas: canvasElement,
antialias: true,
alpha: true
});
カメラの作成
今回のメロンソーダの表現では重要度は高くありませんが、様々な表現をする中で非常に重要となるカメラという機能にも触れておきます。3Dとして表現をする場合、空間をどの視点から撮影するかという点が鍵となります。Three.jsでは、画角、アスペクト比、描画開始距離、描画終了距離の情報を因数として設定しカメラの設定を行っています。
アニメーションの作成
JavaScriptで炭酸をアニメーションで再現するにあたって、requestAnimationFrame()というグローバルメソッドを使用し、毎フレームごとに渡された関数を実行しています。また、アニメーションの処理として、Math.random()関数で浮動小数点の擬似乱数を返しています。
まとめ
最近、春から入社する新卒生から「基礎部分の以外でどのようなことを学んでおいたら良いですか？」「どのように学んでいくのが良いですか？」といったご質問をいただく機会があったのですが、個人的にはまずは自身の中にある好奇心を大切にしてみることが大切だと思います。
制作の分野は幅が広く、また新しい技術が毎年のように生まれています。基礎は基礎としてしっかりと学びつつも、「これはどうやって実現しているんだろう？」「こんなデザインを作ってみたい」といった日頃の好奇心を大切に新しい技術を学んでいくことが、成長への近道になるように思います。
最後まで読んでくださりありがとうございます。