GPU（グラフィックス処理ユニット）を使い、ブラウザ内で 3D を描画します。JavaScript から呼び出せる低レベル API で、頂点座標やシェーダ（描画プログラム）を直接指定する仕組みです。
技術用語
420
WebGL
ウェブジーエル
体験区分：少しだけ触った
推奨読者レベル：Level 3-4
何をしてくれるか
どこで出会うか
Google Maps の 3D 表示、AI モデルのデモ、ブラウザゲームなどで内部的に使われています。three.js（F-14）や Babylon.js といった高レベルライブラリが WebGL を呼び出す構造です。
イメージ
開発フローでの位置
要件確認
ライブラリ選定
AI コード生成
動作確認
2026.04·needs_review
「WebGL でシェーダを直接書くより、three.js を Claude に書かせる方が早いです。」
WebGLの見方
421
この用語の見どころ
1
役割
ブラウザ上で GPU を使った 3D 描画を可能にする API です。
2
うれしさ
プラグインなしで 3D コンテンツをどのブラウザでも動かせます。
3
注意点
低レベル API のため直接書くコード量が多く、学習コストがあります。
4
どこで役立つか
3D ビジュアライゼーションや AI デモをブラウザで提供する場面に向きます。
5
はじめに
WebGL は基盤で、実務では three.js 経由で使う層と理解できれば十分です。
6
深掘り先
three.js（F-14）、OpenGL（F-180）、WebGPU
非エンジニアのつまずき
- 中身の仕組みを知らないと難しく感じ、入口で身構えてしまいます。
- 実は three.js などで簡単に動かせる、と気づくまでに時間がかかります。
- ブラウザで 3D が動く仕組みとして登場するため、出会う場面が限られます。
私のコメント
- 第一印象:「こんなの自作できるんだ」と感動した、すごい体験になりました。
- 良い点:「おっ、すごい」と言わせるものが、思ったより簡単に作れるところです。
- ダメな点:直接書くと大変で、three.js などの上位ライブラリを介す必要があります。
- 誰向けか:ブラウザで 3D を使って遊んだり見せたい人にとっての入口になります。
関連用語
備考
WebGL 1.0 は 2011 年、WebGL 2.0 は 2017 年に Khronos Group が仕様化。
F-181·term_tool
バイブコーディング図鑑