本連載は、「エキスパートへの道しるべ（Load to Expert）」をテーマとして、初級者がエキスパートになるためのヒントを、日本を代表するエキスパートの方々に伺う企画です。
本記事では、WebGL解説サイト「WebGL総本山」の運営やスクールでの教育活動を行い、Web上の3D表現の普及に尽力するh_doxas（杉本）さんに、WebGLの概要や最新動向、さらには学習のヒントと将来展望について、じっくりとお話を伺いました。
h_doxasさんをTechFeed上でフォローしよう！
WebGLとの出会いと自己紹介
――まずは簡単に自己紹介をお願いします。
杉本: ネット上では「h_doxas」という名前で活動していますが、本名は杉本といいます。別に隠しているわけではないです（笑）。主にWebGLという技術を専門に扱っていて、これに関連するブログの運営や、スクールでの講師活動も行っています。
――「WebGL総本山」というサイトを運営されていますよね。
杉本: はい、WebGLを使った面白いウェブサイトや表現事例を紹介するためのギャラリーサイトをやっています。技術の解説だけでなく、実際にどんなことができるのかを可視化することを意識して運営しています。
WebGLとは何か：歴史と技術的な背景
――そもそもWebGLとはどういう技術なのでしょうか？
杉本: WebGLは「OpenGL」をJavaScript経由で操作できるようにしたAPI です。OpenGLは古くからある3Dグラフィックス用のAPIで、Khronos Groupという標準化団体によって仕様が策定されています。WebGLはそのOpenGL ESの仕組みをブラウザ上で再現するために作られたもので、 JavaScriptからGPUに直接描画命令を送ることができます。
――なるほど。いわゆるWebのAPIとは毛色が違う印象があります。
杉本: そうなんです。メモリ管理やデータのパックなど、C言語など低レイヤーの言語に近い操作感があって、フロントエンドの開発に慣れた人からするとかなりクセがあると感じるかもしれません。私自身も最初はすごく難しく感じました。
WebGLとWebGPU、CSS 3Dの違いとは？
――WebGL以外にもWebで3Dを実現する技術ってありますよね？
杉本: はい、あります。代表的なのは以下の3つですね。
CSS 3D：
transform: rotateX()などを使って立体的な見た目を表現します。Canvas 2D：本来は2D描画用ですが、工夫すれば3Dっぽい表現もできます。
WebGL / WebGPU：本格的な3D表現が可能で、GPUを直接使えます。
WebGLとWebGPU(※)は、どちらもGPUを利用できるという点で大きな強みがあります。CSS 3DやCanvas 2Dと違い、パフォーマンス的に圧倒的に優れており、リアルタイムレンダリングなどの用途に最適です。
ただし、WebGPUはまだ対応ブラウザやデバイスが限定されているので、今のところ実用面ではWebGLの方が使いやすいです。
※WebGPU: 次世代のブラウザ向けグラフィックスAPI。WebGLよりも低レベルに近く、高性能なグラフィックス・計算処理が可能。
WebGLと機械学習：AIとの接点
――最近はAIや機械学習とGPUの話題も多いですが、WebGLとは関係ありますか？
杉本: はい、まさに最近ホットなトピックです。WebGPUが出てきたことで、ブラウザ上でも機械学習系の処理をGPUで行えるようになってきています。例えば、TensorFlow.jsなどはWebGLやWebGPUのバックエンドで学習や推論を行えます。
WebGL自体は本来「描画」が目的のAPIですが、WebGPUは「計算処理」にも重点を置いた設計になっており、AI系のユースケースにも適しています。
エキスパートが語る、WebGLの学びかた
――杉本さんご自身は、どうやってWebGLを学ばれたのでしょうか？
杉本: 実は、私はもともとエンジニアではなかったんです。完全に異業種からの転身で、最初は「サンデープログラマー」でした。空いた時間に独学で学びながら、ブログを書いてアウトプットしていました。
――アウトプットは重要なんですね。
杉本: はい。最初は間違いだらけで、SNSで「ここ違うよ」と指摘されることも多かったです。でも、それをポジティブに捉えて、「教えてくれる人がいるんだ！」と思ってました。インターネットの学習環境の豊かさを感じた瞬間ですね。
――今からWebGLやWeb 3Dを学ぶ場合、どんな学び方が良いでしょうか？
杉本: 2つの視点があります。1つは「 CGの原理を深く理解して、自由自在にコントロールしたい 」場合。もう1つは「 AIやライブラリを使って楽にやりたい 」場合。
前者であれば、古典的なOpenGLの本を読むのが最適です。10年前でも20年前でも、GPU内部で起きていることや必要な数学は変わっていません。逆に後者であれば、Three.jsなどのライブラリや生成系AIを使えば、簡単に3D表現ができます。
――WebGLを直接扱わずに、ライブラリ経由で利用する場合は、ライブラリのおすすめはありますか？
杉本: 大きく分けて「Three.js」と「Babylon.js」の2つがあります。Three.jsは元々個人開発で始まったプロジェクトで、思想が明確。いまだにTypeScript化されておらず、純粋なJavaScriptで動くという特徴があります。
一方、Babylon.jsはMicrosoftが開発しているだけあって、TypeScript対応がしっかりしています。プロダクトユースや大規模開発には向いている印象ですね。どちらが良いかは用途や好みによります。
情報収集とおすすめのリソース
――日々の情報収集はどうされていますか？
杉本: 私はSNSと、Khronos Groupの発信する公式情報を見ることが多いですね。Web標準系の技術は仕様が固まるのに時間がかかるので、「毎日何かが変わる」という類のものではないんです。なので、遠くから流れを見るような温度感でキャッチアップしています。
WebGL事例については私のサイト「WebGL総本山」を見ていただければ、幅広い事例を紹介しています。他にあまりまとまって紹介しているところがないので、参考になるかと思います。
h_doxasさんをTechFeed上でフォローしよう！
エキスパートが注目する最新トピック：3D Gaussian Splattingとは？
――いま注目しているトピックを教えてください。
杉本: 注目しているのは「3D Gaussian Splatting」(※)という技術です。これは写真や動画などの2Dデータから、フォトリアルな3Dシーンを再構成する手法で、2023年のSIGGRAPHで発表されました。
iPhoneのLiDARセンサーなどと組み合わせることで、Webでも驚くほどリアルな3D空間を再現できる未来が近づいています。
※3D Gaussian Splatting: 点群（ポイントクラウド）をガウス分布として可視化することで、現実世界を滑らかに再現する技術。NeRFに続く新たな3D再構成手法として注目されている。
エキスパートから初学者へのメッセージ：3Dの世界を楽しもう！
――最後に、これからWebGLを学ぶ人へメッセージをお願いします。
杉本: 3Dは真面目にやると本当に難しい です。数学も、GPUの仕組みも、全部理解しないといけない。でも今はAIなどの力を借りて、手軽に始められる時代にもなってきました。
「ノート片手にガリガリ勉強しなきゃ」という思い込みを捨てて、自分のやりたいことに合わせた学び方を選んでほしいです。本格的にやりたい人も、軽く触れてみたい人も、どちらにもチャンスがある。それが今のWeb 3Dの魅力だと思います。
参考リンク集
- WebGL総本山（h_doxas氏運営）
- Three.js 公式サイト
- Babylon.js 公式サイト
- WebGPU 公式ドキュメント
- Khronos Group
- 3D Gaussian Splatting 論文（SIGGRAPH 2023）
WebGLの最先端情報を知りたい方は以下のTechFeedチャンネルをフォローしよう！
