WebGLで富士山と青空と雲を作る！ツンデレ先生のやさしい解説
はじめに
「WebGLって難しそう…」「コードを書かずにアニメーションを作りたい！」そんなあなたのために、ツンデレなGPT先生が親切丁寧に教えてくれます。今回は、指タッチで波紋が広がる、富士山と青空と雲のインタラクティブなシェーダーを作ってみましょう！
🎓 登場人物
🧑💻 生徒（利用者）：AIに指示してプログラムを作るのが好き。動けば嬉しいけど、細かいコードは面倒。
👩🏫 GPT先生：ツンデレだけど、初心者に説明するのが大好きな女性。親切で分かりやすく教えてくれる。
🎮 WebGLで富士山アニメーションを作るまでの会話
🧑💻「GPT先生！WebGLで富士山をテーマにしたインタラクティブなアニメーションを作りたい！とにかくスマホで動くやつ！」
👩🏫「ったく、しょうがないわね！まず、WebGL はHTMLのcanvasを使って2D/3Dグラフィックスを描画できる技術よ。あなたが欲しがってるのは 富士山と青空と雲、さらにタッチ操作でリップルが広がる アニメーションでしょ？いいわ、特別に教えてあげる。」
🧑💻「うん、そんな感じ！で、それってどうやるの？」
👩🏫「はぁ…まったく、甘えん坊なんだから。でもいいわ、ゼロから説明してあげる。
1. まずはcanvasを用意する
<canvas id="glcanvas"></canvas>これがWebGLの描画領域になるわ。ここに青空と富士山を描くの。
2. WebGLのシェーダーをセットアップ
シェーダーっていうのは、WebGLで描画するためのプログラムのこと。以下のように、頂点シェーダー（形を作る）とフラグメントシェーダー（色を塗る） を用意するの。
attribute vec4 aVertexPosition;
void main(void) {
gl_Position = aVertexPosition;
}フラグメントシェーダーでは、背景の青空を作りつつ、雲のノイズを重ねるわ。
precision mediump float;
uniform float uTime;
uniform vec2 uResolution;
void main(void) {
vec2 st = gl_FragCoord.xy / uResolution.xy;
vec3 skyColor = mix(vec3(0.69, 0.87, 0.90), vec3(0.0, 0.53, 0.74), st.y);
gl_FragColor = vec4(skyColor, 1.0);
}🧑💻「へぇ、これで空のグラデーションが作れるんだ！」
👩🏫「ふふん、ちゃんと理解できてるじゃない。で、次は富士山を描くわよ！」
3. 富士山のシルエットを描く
float mountainShape = 0.6 - (abs(st.x - 0.5) * 1.2);
float mountainMask = 1.0 - smoothstep(mountainShape, mountainShape + 0.02, st.y);
vec3 mountainColor = mix(vec3(0.1, 0.1, 0.1), vec3(1.0), smoothstep(0.55, 0.65, st.y));👩🏫「山頂付近を白くして、雪化粧した富士山を表現したわ。」
🧑💻「おぉ、いい感じ！」
👩🏫「最後に、タッチでリップルエフェクトを入れて、インタラクティブにするのよ。」
4. マルチタッチで波紋を発生させる
float d1 = distance(st, uTouch1 / uResolution);
float ripple1 = 0.02 * sin(12.0 * d1 - uTime);
float d2 = distance(st, uTouch2 / uResolution);
float ripple2 = 0.02 * sin(12.0 * d2 - uTime);
finalColor += vec3(ripple1 + ripple2);🧑💻「なるほど！タッチした場所に波紋が出るってことか！」
👩🏫「そうよ。これで、指を置くたびに富士山や空がさざ波のように揺れるインタラクティブな表現が完成するの！」
FAQ（よくある質問）
WebGLとは何ですか？
WebGLは、ブラウザ上で3Dグラフィックスを描画するためのJavaScript APIです。OpenGL ESをベースにしており、HTML5のcanvas要素を使って描画できます。
マルチタッチとは？
スマートフォンやタブレットで、2本以上の指を使って操作できる技術のこと。今回は2点のタッチで波紋を発生させました。
シェーダーとは？
WebGLで描画を制御する小さなプログラム。頂点シェーダーは形を決め、フラグメントシェーダーは色を決めます。
まとめ
👩🏫「はぁ…ここまで教えてあげたんだから、ちゃんと実装しなさいよね！」
🧑💻「ありがとう先生！これで動くWebGLアニメーションが作れそう！」
👩🏫「当たり前でしょ！もう、ほんと世話が焼けるんだから…でも、まあ、ちゃんと勉強してるみたいで偉いわよ。」
🧑💻「へへ、また次もよろしく！」
👩🏫「次も！？…まあ、仕方ないわね。今回みたいにWebGLでいろんな表現を作っていきましょ！」
コメント