WebGLと2D描画の違いとは？描画方式ごとの特徴を解説

WebGLと2D描画の違いを理解することは、Web上でゲーム、アニメーション、インタラクティブUI、データ可視化、3D表現を作るうえで非常に重要です。どちらもHTMLの<canvas>要素を使うことがありますが、内部の描画方式は大きく異なります。2D描画は比較的シンプルに図形や画像を描く方式であり、WebGLはGPUを活用して高性能な描画を行う方式です。

Web表現が進化するにつれて、単なる静的ページだけでなく、スクロール連動アニメーション、3D商品ビュー、Webゲーム、ビジュアル演出、リアルタイムデータ可視化などが求められるようになりました。そのため、描画方式の選び方は、見た目だけでなく、パフォーマンス、開発難易度、保守性、UX品質にも大きく影響します。

ゲーム開発では、2Dゲームでも描画量が多い場合はWebGLが有利になることがあります。一方で、簡単なUIやシンプルなアニメーションであれば、Canvas 2Dの方が実装しやすく、開発コストも低く抑えられます。つまり、WebGLと2D描画はどちらが上という関係ではなく、用途によって使い分けるべき技術です。

1. WebGLとは？

WebGLとは、ブラウザ上でGPUを利用して高性能なグラフィック描画を行うための技術です。3D描画に使われる印象が強いですが、実際には2Dゲームや大量スプライト描画、パーティクル表現、背景エフェクトなどにも使われます。

主な特徴

1.1 GPUを利用するWeb描画技術

WebGLの最大の特徴は、GPUを使って描画処理を行う点です。GPUは大量のピクセルや頂点を並列に処理することに向いているため、複雑なグラフィックや大量のオブジェクトを高速に描画できます。通常の2D描画では処理が重くなりやすい場面でも、WebGLならGPUの力を使って滑らかな表現を作りやすくなります。

ただし、GPUを使うためには、描画データをGPUへ渡す考え方が必要になります。頂点データ、バッファ、シェーダー、テクスチャなど、通常のHTML/CSSとは異なる概念が登場します。そのため、WebGLは高性能ですが、実装には一定の学習コストがあります。

コード例: WebGLコンテキストを取得する

<!-- file: webgl-basic.html -->
<!-- 役割: CanvasからWebGL描画用コンテキストを取得する基本例 -->
<canvas id="glCanvas" width="400" height="300"></canvas>

<script>
  const canvas = document.getElementById("glCanvas");
  const gl = canvas.getContext("webgl");

  if (!gl) {
    console.error("WebGL is not supported.");
  } else {
    gl.clearColor(0.1, 0.1, 0.15, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
</script>

このコードでは、getContext("webgl")によってWebGL用の描画コンテキストを取得しています。clearColorで背景色を指定し、clearで画面を塗りつぶしています。WebGLでは、このように描画処理をGPU側へ渡す準備から始まります。

1.2 高速な3D・2D描画が可能

WebGLは3D描画に強い技術ですが、2D描画でも大きな効果を発揮します。たとえば、大量のキャラクター、弾、パーティクル、背景レイヤーを同時に動かす2Dゲームでは、Canvas 2DよりWebGLの方が安定して高FPSを出しやすい場合があります。2Dであっても描画負荷が高いなら、WebGLは有力な選択肢になります。

また、WebGLではシェーダーを使えるため、単純な画像表示だけでなく、色変化、発光、ぼかし、歪み、波表現なども実装できます。これにより、2D表現でも映像的なリッチ演出が可能になります。ただし、単純な描画だけならWebGLは過剰になることもあるため、用途に応じた判断が必要です。

コード例: WebGLで背景を高速にクリアする

// file: clear-webgl.js
// 役割: WebGLで毎フレーム背景を更新する基本例

function render(gl) {
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);

  requestAnimationFrame(() => render(gl));
}

const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");

if (gl) {
  render(gl);
}

このコードは、WebGLで毎フレーム画面をクリアする最小構成です。実際のゲームやアニメーションでは、この中でスプライトや3Dモデルを描画します。requestAnimationFrameを使うことで、ブラウザの描画タイミングに合わせて更新できます。

1.3 ブラウザ上で動作するグラフィックスAPI

WebGLはブラウザ上で動作するため、専用アプリをインストールせずに高度なグラフィック表現を提供できます。3D商品プレビュー、Webゲーム、教育用3D教材、インタラクティブなブランドサイトなど、ユーザーがWebページを開くだけで体験できる点が大きなメリットです。

一方で、ブラウザやデバイスの性能差には注意が必要です。高性能なPCでは快適に動くWebGL表現でも、古いスマートフォンや低スペック端末では重くなることがあります。そのため、WebGLを使う場合は、描画負荷の調整、低解像度モード、エフェクト軽量化、fallback表示なども設計する必要があります。

コード例: WebGL対応チェック

// file: check-webgl-support.js
// 役割: ユーザー環境でWebGLが使えるか確認する

function isWebGLSupported() {
  const canvas = document.createElement("canvas");
  return !!(
    window.WebGLRenderingContext &&
    canvas.getContext("webgl")
  );
}

if (isWebGLSupported()) {
  console.log("WebGL is available.");
} else {
  console.log("Fallback to 2D rendering.");
}

このコードでは、現在のブラウザ環境でWebGLが利用できるかを確認しています。WebGLが使えない場合、Canvas 2Dや静的画像に切り替える設計にしておくと、より安全なUXを提供できます。

2. 2D描画とは？

2D描画とは、平面的なグラフィックを描画する方式です。Webでは主にCanvas 2D Contextを使い、図形、画像、文字、線、簡単なアニメーションを描画します。WebGLほど高度なGPU制御は必要なく、比較的シンプルに実装できることが大きな特徴です。

主な特徴

2.1 平面的な描画方式

2D描画は、X軸とY軸の座標を使って平面的に要素を描画します。画面上のどの位置に、どの大きさで、どの色の図形や画像を置くかを指定するため、初心者にも理解しやすい方式です。3Dのようにカメラ、ライト、奥行き、行列変換を考える必要がないため、比較的短時間で実装できます。

この方式は、グラフ、簡単なゲーム、手書きツール、教育用コンテンツなどに向いています。たとえば、2Dのパズルゲームや簡単なキャラクター移動であれば、Canvas 2Dだけでも十分に作れます。複雑な視覚効果を必要としない場合、2D描画は非常に効率的です。

コード例: Canvas 2Dで四角形を描画する

<!-- file: canvas-2d-rect.html -->
<!-- 役割: Canvas 2Dで基本的な図形を描画する -->
<canvas id="canvas2d" width="400" height="300"></canvas>

<script>
  const canvas = document.getElementById("canvas2d");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "#4f46e5";
  ctx.fillRect(80, 60, 200, 120);
</script>

このコードでは、Canvas 2D Contextを使って四角形を描画しています。WebGLと比べると、図形を描くまでのコードが非常に少なく、直感的に扱えることが分かります。

2.2 Canvas APIによる描画

Canvas 2Dでは、getContext("2d")を使って2D描画用のコンテキストを取得します。このコンテキストには、線を引く、四角形を塗る、画像を描く、文字を書くなどのAPIが用意されています。WebGLと違い、シェーダーやバッファを自分で管理する必要がないため、実装が分かりやすいです。

ただし、Canvas 2Dは描画したものをDOM要素のように個別管理するわけではありません。一度描いたものを動かしたい場合は、基本的に画面をクリアして再描画します。そのため、アニメーションでは「更新 → クリア → 再描画」という流れを自分で管理する必要があります。

コード例: Canvas 2Dで画像を描画する

// file: canvas-draw-image.js
// 役割: Canvas 2Dで画像を読み込み、キャンバスへ描画する

const canvas = document.getElementById("canvas2d");
const ctx = canvas.getContext("2d");

const img = new Image();
img.src = "player.png";

img.onload = () => {
  ctx.drawImage(img, 100, 80, 64, 64);
};

このコードは、画像を読み込んでCanvas上に描画する例です。2Dゲームでは、キャラクターや背景をこのように描画し、座標を更新することでアニメーションを作ります。

2.3 UIやシンプルアニメーションで使われる

2D描画は、UIやシンプルなアニメーションでよく使われます。ローディング演出、チャート、地図上のマーカー、手書き入力、簡単な背景アニメーションなど、軽量な描画には非常に向いています。WebGLほど複雑な準備が不要なため、実装速度を重視したい場合にも便利です。

ただし、描画対象が大量になると負荷が高くなる場合があります。たとえば、毎フレーム数千個のオブジェクトを描く場合、Canvas 2Dでは処理が重くなる可能性があります。その場合は、描画範囲を減らす、キャッシュを使う、またはWebGLへ切り替える判断が必要になります。

コード例: Canvas 2Dで簡単なアニメーション

// file: canvas-2d-animation.js
// 役割: Canvas 2Dで円を横方向に動かす簡単なアニメーション

const canvas = document.getElementById("canvas2d");
const ctx = canvas.getContext("2d");

let x = 0;

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  ctx.beginPath();
  ctx.arc(x, 150, 24, 0, Math.PI * 2);
  ctx.fillStyle = "#f97316";
  ctx.fill();

  x = (x + 2) % canvas.width;
  requestAnimationFrame(animate);
}

animate();

このコードでは、毎フレームCanvasをクリアし、円の位置を更新して再描画しています。シンプルなアニメーションであれば、Canvas 2Dだけで十分に実装できます。

3. WebGLと2D描画の違い

WebGLと2D描画の違いは、GPUを使うかどうか、描画性能、表現可能な演出、開発難易度にあります。WebGLは高性能で表現力が高い一方、実装が複雑です。2D描画はシンプルで扱いやすい一方、大量描画や高度なエフェクトには限界があります。

総合比較

3.1 GPU利用有無の違い

WebGLはGPUを活用するため、大量の描画や複雑な演出に強いです。GPUは並列処理に向いているため、多数の頂点やピクセルを同時に処理できます。3Dモデルや粒子表現、画像加工のような高負荷な描画では、WebGLの強みが出やすくなります。

一方、2D描画はWebGLほどGPUを直接制御しません。Canvas 2Dはブラウザ側である程度最適化される場合もありますが、開発者がGPUの描画パイプラインを操作するわけではありません。そのため、実装は簡単ですが、高負荷な描画ではWebGLほど柔軟に最適化できない場合があります。

コード例: WebGLと2Dのコンテキスト取得比較

// file: context-compare.js
// 役割: Canvas 2DとWebGLのコンテキスト取得方法を比較する

const canvas = document.querySelector("canvas");

const ctx2d = canvas.getContext("2d");
const gl = canvas.getContext("webgl");

console.log("2D Context:", ctx2d);
console.log("WebGL Context:", gl);

同じcanvasでも、getContext("2d")とgetContext("webgl")では取得する描画エンジンが異なります。これが、WebGLと2D描画の根本的な違いです。

3.2 描画性能の違い

描画性能は、描画する内容によって変わります。少量の図形や画像を描く程度なら、2D描画でも十分高速です。しかし、大量のオブジェクトを毎フレーム更新する場合や、複雑なエフェクトを使う場合は、WebGLの方が有利になることが多いです。

特にゲームやリアルタイム表現では、描画性能がUXに直結します。FPSが低下すると、動きがカクつき、入力遅延が発生し、ユーザー体験が悪化します。描画対象が増える可能性があるなら、初期段階からWebGLを検討しておくことも重要です。

コード例: 2Dで大量の円を描画する

// file: canvas-many-circles.js
// 役割: Canvas 2Dで大量オブジェクト描画の負荷を確認する例

const canvas = document.getElementById("canvas2d");
const ctx = canvas.getContext("2d");

function drawManyCircles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  for (let i = 0; i < 2000; i++) {
    ctx.beginPath();
    ctx.arc(
      Math.random() * canvas.width,
      Math.random() * canvas.height,
      2,
      0,
      Math.PI * 2
    );
    ctx.fillStyle = "#22c55e";
    ctx.fill();
  }

  requestAnimationFrame(drawManyCircles);
}

drawManyCircles();

このコードでは、Canvas 2Dで大量の円を毎フレーム描画しています。描画数が増えるほど負荷が高くなるため、大量描画ではWebGLの検討が必要になります。

3.3 表現可能な演出の違い

WebGLは、3D、シェーダー、パーティクル、光表現、歪み、反射など高度な演出に対応できます。視覚表現そのものを強く見せたいWebサイトやゲームでは、WebGLの表現力が大きな武器になります。

2D描画でも、図形、画像、文字、透明度、簡単なアニメーションは扱えます。ただし、シェーダーのような自由度はありません。表現力を重視するならWebGL、実装の分かりやすさを重視するなら2D描画が向いています。

コード例: Canvas 2Dで簡単な透明エフェクト

// file: canvas-alpha-effect.js
// 役割: Canvas 2Dで透明度を使った簡単な演出を作る

const ctx = document.getElementById("canvas2d").getContext("2d");

ctx.fillStyle = "rgba(59, 130, 246, 0.4)";
ctx.fillRect(60, 60, 160, 160);

ctx.fillStyle = "rgba(239, 68, 68, 0.4)";
ctx.fillRect(140, 120, 160, 160);

2D描画でも透明度や重なりを使った簡単なエフェクトは作れます。ただし、歪みや波、発光などの高度な演出はWebGLの方が向いています。

4. パフォーマンスの違い

パフォーマンスを考えるときは、単にWebGLか2Dかだけではなく、描画数、更新頻度、対象デバイス、画像サイズ、アニメーション量を確認する必要があります。少量描画では2Dで十分でも、大量描画やリアルタイム処理ではWebGLが有利になりやすいです。

総合比較

4.1 大量オブジェクト描画性能

大量オブジェクトを描画する場合、WebGLはGPUを活用できるため有利です。たとえば、弾幕ゲーム、粒子エフェクト、大規模マップ、リアルタイムデータ可視化では、描画対象が非常に多くなります。Canvas 2Dでは毎フレーム描画命令を大量に実行する必要があり、負荷が高くなりやすいです。

一方で、WebGLでも設計が悪いと重くなります。描画回数が多すぎる、テクスチャを頻繁に切り替える、不要なデータ転送が多いと、GPUを使っていても性能が出ません。大量描画では、WebGLを使うことに加えて、描画をまとめる設計も重要です。

コード例: オブジェクト数を制御する設計

// file: object-limit.js
// 役割: 描画オブジェクト数を管理し、負荷を抑える例

const particles = [];

function addParticle(x, y) {
  particles.push({ x, y, life: 60 });

  if (particles.length > 1000) {
    particles.shift();
  }
}

このコードは、パーティクル数を最大1000個に制限する例です。WebGLでも2D描画でも、描画対象を無制限に増やすと負荷が高くなるため、数を管理する設計が重要です。

4.2 リアルタイム処理性能

リアルタイム処理では、ユーザー入力や時間経過に応じて画面を素早く更新する必要があります。ゲームやインタラクティブUIでは、60FPSに近い滑らかな描画が求められることが多く、描画方式の選択が重要になります。WebGLはGPUを使えるため、高負荷なリアルタイム描画に向いています。

ただし、リアルタイム処理では描画だけでなく、物理演算、衝突判定、AI処理、入力処理も負荷になります。WebGLを使っていても、JavaScript側の処理が重ければFPSは低下します。そのため、描画処理とロジック処理を分け、不要な計算を減らすことが重要です。

コード例: FPS計測の基本

// file: fps-counter.js
// 役割: requestAnimationFrameでFPSを簡易計測する

let last = performance.now();
let frames = 0;

function loop(now) {
  frames++;

  if (now - last >= 1000) {
    console.log("FPS:", frames);
    frames = 0;
    last = now;
  }

  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

このコードは、簡易的にFPSを計測する例です。WebGLでも2D描画でも、実際のパフォーマンスを確認しながら最適化することが重要です。

4.3 アニメーション処理負荷

アニメーション処理では、毎フレームどれだけ描画を更新するかが重要です。単純な移動やフェードであれば2D描画でも十分ですが、複数レイヤー、粒子、光、変形、背景演出を同時に行うと負荷が増えます。WebGLでは、こうした複雑な演出をGPU側で処理できるため有利です。

一方で、UIの小さなアニメーションにWebGLを使うと、実装が過剰になる場合があります。ボタンのhover、簡単なローディング、軽いフェード程度であれば、CSSやCanvas 2Dの方が効率的です。アニメーションの目的と負荷を見て、適切な技術を選ぶ必要があります。

コード例: アニメーション負荷を下げる更新間引き

// file: throttle-animation.js
// 役割: 毎フレームではなく一定間隔で処理を更新する例

let lastUpdate = 0;

function animate(time) {
  if (time - lastUpdate > 33) {
    // 約30FPS相当でロジック更新
    updateObjects();
    lastUpdate = time;
  }

  drawScene();
  requestAnimationFrame(animate);
}

function updateObjects() {}
function drawScene() {}

requestAnimationFrame(animate);

このコードでは、描画は毎フレーム行いながら、ロジック更新を一定間隔に制限しています。重い処理を毎フレーム実行しないことで、負荷を抑えやすくなります。

5. 表現力の違い

WebGLと2D描画では、表現できる範囲が大きく異なります。2D描画は平面的な表現に強く、WebGLは3Dや高度なエフェクト表現に強いです。特に、シェーダーや3D空間を使いたい場合はWebGLが必要になります。

総合比較

5.1 3D表現対応

3D表現を扱う場合、WebGLが基本的な選択肢になります。3Dモデル、カメラ、ライト、奥行き、回転、影などは、2D描画では自然に扱えません。商品を360度回転して見せる3Dビューや、3Dゲーム、建築モデルの表示などではWebGLが非常に有効です。

2D描画でも擬似的な奥行き表現はできますが、本格的な3D空間には向きません。3Dを扱う場合は、WebGLを直接使うか、Three.jsのようなライブラリを使うことで開発しやすくなります。

コード例: Three.jsで簡単な3D立方体を表示

// file: three-cube.js
// 役割: WebGLライブラリThree.jsで3D立方体を描画する例

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth / innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x22c55e });
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);
camera.position.z = 3;

function animate() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

このコードはThree.jsを使ったWebGLの例です。WebGLを直接書かなくても、ライブラリを使えば3D表現を比較的簡単に実装できます。

5.2 シェーダー演出対応

WebGLでは、シェーダーを使って描画結果を細かく制御できます。シェーダーを使うと、色の変化、歪み、波、ノイズ、発光、グリッチなど、通常の2D描画では難しい演出を作れます。ブランドサイトやゲームで印象的なビジュアルを作る場合に非常に有効です。

ただし、シェーダーは学習コストが高いです。GLSLという専用のシェーダー言語を使うため、JavaScriptだけで完結するCanvas 2Dより難しく感じることがあります。必要な演出がシンプルなら2D描画で十分ですが、高度な映像表現を作るならシェーダーは強力です。

コード例: 簡単なフラグメントシェーダー

// file: simple-fragment.glsl
// 役割: WebGLでピクセル色を決めるフラグメントシェーダー例

precision mediump float;

void main() {
  gl_FragColor = vec4(0.2, 0.6, 1.0, 1.0);
}

このコードは、すべてのピクセルを青系の色で描画する最小シェーダーです。実際には時間や座標を使って、波やノイズなどのエフェクトを作ります。

5.3 エフェクト表現の自由度

WebGLは、エフェクト表現の自由度が高いです。パーティクル、光、煙、爆発、波、歪み、反射、ポストエフェクトなど、映像的な表現をWeb上で実現できます。ゲームやインタラクティブサイトでは、この表現力が大きな価値になります。

2D描画でも簡単なフェードや透明度表現は可能ですが、複雑なエフェクトを大量に重ねると実装が難しくなります。高度な演出を安定して動かしたい場合は、WebGLを使う方が適していることが多いです。

コード例: 2Dで簡単なパーティクルを描画

// file: canvas-particles.js
// 役割: Canvas 2Dで軽量な粒子表現を作る例

const particles = Array.from({ length: 100 }, () => ({
  x: Math.random() * 400,
  y: Math.random() * 300,
  vx: Math.random() * 2 - 1,
  vy: Math.random() * 2 - 1
}));

function draw(ctx) {
  ctx.clearRect(0, 0, 400, 300);

  particles.forEach(p => {
    p.x += p.vx;
    p.y += p.vy;

    ctx.fillStyle = "#38bdf8";
    ctx.fillRect(p.x, p.y, 3, 3);
  });

  requestAnimationFrame(() => draw(ctx));
}

この程度の軽量な粒子ならCanvas 2Dでも実装できます。ただし、数千〜数万粒子や高度な発光表現になるとWebGLの方が向いています。

6. 開発難易度の違い

WebGLと2D描画では、開発難易度に大きな差があります。2D描画は座標を指定して図形や画像を描くため直感的ですが、WebGLはGPU、シェーダー、バッファ、行列などの知識が必要です。

総合比較

6.1 WebGLは学習コストが高い

WebGLは、通常のWeb開発とは違う考え方が必要です。頂点データを用意し、バッファに渡し、シェーダーを作り、GPUに描画させる流れを理解する必要があります。そのため、HTML/CSS/JavaScriptに慣れている人でも、最初は難しく感じやすいです。

ただし、WebGLを直接書かなくても、Three.js、PixiJS、Babylon.jsなどのライブラリを使えば学習コストを下げられます。それでも、パフォーマンス問題や描画崩れに対応するには、WebGLの基本概念を理解しておくと有利です。

コード例: WebGLの初期化関数

// file: init-webgl.js
// 役割: WebGLの初期化処理を関数化する例

function initWebGL(canvasId) {
  const canvas = document.getElementById(canvasId);
  const gl = canvas.getContext("webgl");

  if (!gl) {
    throw new Error("WebGL is not supported.");
  }

  gl.viewport(0, 0, canvas.width, canvas.height);
  return gl;
}

const gl = initWebGL("glCanvas");

WebGLでは、このような初期化処理が必要になります。2D描画よりも準備が多いため、関数化して管理すると保守しやすくなります。

6.2 2D描画は比較的シンプル

2D描画は、WebGLに比べて非常にシンプルです。getContext("2d")を取得し、図形や画像を描画するだけで基本的な表現ができます。座標とサイズを指定する感覚で描けるため、初学者でも理解しやすいです。

また、2D描画はプロトタイプ制作にも向いています。ゲームの動きやUIのアイデアを素早く試す場合、まずCanvas 2Dで実装し、必要に応じてWebGLへ移行する流れも現実的です。

コード例: 2D描画の初期化関数

// file: init-canvas-2d.js
// 役割: Canvas 2Dの初期化処理を関数化する例

function initCanvas2D(canvasId) {
  const canvas = document.getElementById(canvasId);
  const ctx = canvas.getContext("2d");

  if (!ctx) {
    throw new Error("Canvas 2D is not supported.");
  }

  return { canvas, ctx };
}

const { canvas, ctx } = initCanvas2D("canvas2d");

Canvas 2Dの初期化はWebGLよりも簡単です。図形や画像をすぐに描画できるため、小規模な描画処理では扱いやすいです。

6.3 数学知識必要性の違い

WebGLでは、数学知識が必要になりやすいです。特に3Dでは、ベクトル、行列、座標変換、カメラ、投影、回転、スケールなどを扱います。これらを理解していないと、オブジェクトが思った位置に表示されない、回転が不自然になる、カメラが正しく動かないといった問題が起きます。

2D描画でも数学は使いますが、主に座標、速度、角度、距離、当たり判定などが中心です。3Dほど複雑ではないため、ゲームやアニメーションの基本を学ぶには2D描画から始めるのが分かりやすいです。

コード例: 2Dで角度を使って移動する

// file: move-by-angle.js
// 役割: 角度と速度から2Dオブジェクトの移動量を計算する

const angle = Math.PI / 4;
const speed = 5;

const vx = Math.cos(angle) * speed;
const vy = Math.sin(angle) * speed;

console.log({ vx, vy });

2D描画でも角度や三角関数はよく使います。ただし、WebGLの3D数学に比べると、扱う範囲は比較的シンプルです。

7. Canvasとの関係

WebGLと2D描画は、どちらもHTMLの<canvas>要素を使うことがあります。ただし、同じCanvasでも、取得するコンテキストによって描画方式が変わります。getContext("2d")ならCanvas 2D、getContext("webgl")ならWebGLになります。

総合比較

7.1 Canvas 2D Context

Canvas 2D Contextは、平面的な描画を行うためのコンテキストです。図形、画像、文字を描きやすく、APIも比較的直感的です。小規模なゲームやチャート、描画ツール、UI装飾などに向いています。

ただし、Canvas 2Dは描画内容をオブジェクトとして個別に保持するわけではありません。画面を更新する場合は、基本的にキャンバスをクリアして再描画します。そのため、描画対象の管理は自分で行う必要があります。

コード例: Canvas 2D Contextの取得

// file: get-2d-context.js
// 役割: Canvas 2D Contextを取得して線を描画する

const canvas = document.getElementById("canvas2d");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(40, 40);
ctx.lineTo(240, 160);
ctx.strokeStyle = "#111827";
ctx.lineWidth = 4;
ctx.stroke();

このコードでは、2Dコンテキストを取得して線を描画しています。Canvas 2Dはこのように、直感的な描画命令で扱えます。

7.2 WebGL Context

WebGL Contextは、GPUを使って描画するためのコンテキストです。Canvas 2Dよりも低レベルで、頂点データ、シェーダー、テクスチャなどを扱います。描画までの準備は多いですが、高度な表現や高負荷な描画に対応できます。

WebGL Contextを取得したあとは、背景をクリアするだけでもWebGL用の命令を使います。実際の描画では、シェーダーのコンパイル、プログラム作成、バッファ設定などが必要になります。

コード例: WebGL Contextの取得

// file: get-webgl-context.js
// 役割: WebGL Contextを取得して背景色を設定する

const canvas = document.getElementById("glCanvas");
const gl = canvas.getContext("webgl");

if (gl) {
  gl.clearColor(0.05, 0.05, 0.08, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
}

このコードでは、WebGLコンテキストを取得し、背景色を設定しています。同じCanvasでも、2Dとは使うAPIが大きく異なります。

7.3 同じCanvasでも内部構造が異なる

同じ<canvas>要素を使っていても、Canvas 2DとWebGLでは内部構造が異なります。Canvas 2Dは描画命令を順番に実行する感覚に近く、WebGLはGPUにデータを渡して描画する仕組みです。この違いが、パフォーマンス、表現力、実装難易度の差につながります。

そのため、「Canvasを使う」という表現だけでは不十分です。実際には、Canvas 2DなのかWebGLなのかを明確にする必要があります。シンプルな2D表現ならCanvas 2D、高負荷な描画や3D表現ならWebGLが向いています。

コード例: 描画方式を切り替える簡易設計

// file: renderer-selector.js
// 役割: 目的に応じて2D描画かWebGL描画を選ぶ簡易例

function createRenderer(canvas, mode) {
  if (mode === "webgl") {
    return canvas.getContext("webgl");
  }

  return canvas.getContext("2d");
}

const canvas = document.querySelector("canvas");
const renderer = createRenderer(canvas, "2d");

console.log(renderer);

このコードでは、用途に応じて描画方式を切り替える考え方を示しています。実務では、端末性能や機能要件によって描画方式を選択する設計も有効です。

8. ゲーム開発との関係

ゲーム開発では、描画方式の選択がパフォーマンスと開発効率に直結します。2Dゲームだから必ずCanvas 2D、3Dゲームだから必ずWebGLという単純な話ではありません。2Dゲームでも大量描画が必要ならWebGLが有利ですし、軽量なゲームならCanvas 2Dで十分です。

8.1 2Dゲームでの利用

2Dゲームでは、Canvas 2Dがよく使われます。パズルゲーム、カードゲーム、クリックゲーム、教育ゲーム、簡単なアクションゲームなどは、Canvas 2Dで十分に実装できます。座標を更新しながらキャラクターや背景を描画するだけで、基本的なゲームループを作れます。

ただし、弾幕ゲームや大量の敵キャラクターが出るゲーム、背景エフェクトが多いゲームでは、Canvas 2Dだけでは重くなる場合があります。その場合は、PixiJSのようなWebGLベースの2D描画ライブラリを使うと、高速描画と開発効率を両立しやすくなります。

コード例: Canvas 2Dでプレイヤーを動かす

// file: simple-2d-game.js
// 役割: Canvas 2Dでプレイヤーを左右に動かす簡単なゲーム例

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");

const player = { x: 100, y: 200, speed: 4 };
const keys = {};

addEventListener("keydown", e => keys[e.key] = true);
addEventListener("keyup", e => keys[e.key] = false);

function loop() {
  if (keys.ArrowLeft) player.x -= player.speed;
  if (keys.ArrowRight) player.x += player.speed;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = "#2563eb";
  ctx.fillRect(player.x, player.y, 32, 32);

  requestAnimationFrame(loop);
}

loop();

このコードは、Canvas 2Dでプレイヤーを左右に動かす基本例です。小規模な2Dゲームなら、このような構造で十分に作れます。

8.2 3Dゲームでの利用

3Dゲームでは、WebGLが基本的な選択肢になります。3Dモデル、カメラ、ライト、奥行き、回転、物体の表示などはCanvas 2Dでは扱いにくいため、WebGLやThree.jsなどのライブラリを使うことが一般的です。

ただし、3Dゲームでは描画だけでなく、入力、物理演算、衝突判定、アニメーション、サウンド、アセット管理も必要になります。WebGLは描画の基盤ですが、ゲーム全体を作るには、ライブラリやゲームエンジンの活用が現実的です。

コード例: Three.jsでゲーム用カメラを配置する

// file: game-camera.js
// 役割: Three.jsで3Dゲーム用の基本カメラを作成する

const camera = new THREE.PerspectiveCamera(
  70,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

camera.position.set(0, 2, 6);
camera.lookAt(0, 0, 0);

このコードでは、3D空間を見るためのカメラを作成しています。WebGL系の3Dゲームでは、カメラ設定が非常に重要になります。

8.3 高FPS描画対応

ゲームでは、高FPSを維持することが重要です。FPSが低下すると、操作感が悪くなり、ユーザーがストレスを感じます。WebGLはGPUを使えるため、高FPS描画に向いています。特に、リアルタイムアクション、シューティング、3DゲームではWebGLのメリットが大きくなります。

ただし、WebGLを使ってもロジック処理が重いとFPSは下がります。描画だけでなく、当たり判定、AI、物理演算、オブジェクト管理も最適化する必要があります。ゲーム開発では、描画方式とゲームロジックの両方を考えることが重要です。

コード例: ゲームループの基本構造

// file: game-loop.js
// 役割: 更新処理と描画処理を分けたゲームループ例

let lastTime = 0;

function update(deltaTime) {
  // キャラクター移動、当たり判定、ゲーム状態更新
}

function render() {
  // Canvas 2DまたはWebGLで描画
}

function loop(time) {
  const deltaTime = time - lastTime;
  lastTime = time;

  update(deltaTime);
  render();

  requestAnimationFrame(loop);
}

requestAnimationFrame(loop);

このコードは、ゲーム開発でよく使う基本構造です。WebGLでもCanvas 2Dでも、更新処理と描画処理を分けることで保守しやすくなります。

9. UI/UXとの関係

WebGLと2D描画は、UI/UX表現にも大きく関係します。WebGLは高度なアニメーションや没入型表現に強く、2D描画は軽量で分かりやすいUI表現に向いています。ただし、UI/UXでは見た目の派手さだけでなく、読みやすさ、操作性、表示速度も重要です。

総合比較

9.1 高度アニメーションUI

WebGLは、高度なアニメーションUIに向いています。スクロールに応じて3Dオブジェクトが動く、背景の粒子がマウスに反応する、画像が波のように歪むなど、通常のHTML/CSSでは難しい表現を実現できます。ブランドサイトやプロモーションLPでは、こうした演出が印象形成に役立ちます。

ただし、演出が強すぎるとUXを悪化させることがあります。ユーザーが情報を読みにくい、操作が重い、スクロールが不自然になる場合は、演出の価値より負担の方が大きくなります。WebGLのアニメーションは、情報理解や世界観作りを補助する目的で使うことが重要です。

コード例: スクロール量をアニメーションに反映する

// file: scroll-animation.js
// 役割: スクロール量を描画オブジェクトの位置へ反映する例

let scrollYValue = 0;

window.addEventListener("scroll", () => {
  scrollYValue = window.scrollY;
});

function animateObject(object) {
  object.y = scrollYValue * 0.2;
}

このコードは、スクロール量をオブジェクトの位置に反映する例です。WebGLやCanvas 2Dのどちらでも、スクロール連動演出の基本になります。

9.2 インタラクティブ表現

WebGLは、マウスやタッチ操作に反応するインタラクティブ表現に強いです。ユーザーの操作に応じて3Dオブジェクトが動いたり、背景エフェクトが変化したりすると、体験型のWeb表現を作れます。特に、商品紹介や教育コンテンツでは、操作できるビジュアルが理解を助けることがあります。

2D描画でも、チャートのホバー表示、描画ツール、マップ操作、簡単なゲームUIなどは十分に実装できます。高度な立体表現が不要なら、2D描画の方が軽量で分かりやすく作れる場合があります。

コード例: マウス位置を取得して描画に使う

// file: mouse-interaction.js
// 役割: マウス位置を取得し、インタラクティブ描画に利用する

const mouse = { x: 0, y: 0 };

window.addEventListener("mousemove", e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

function updateVisual() {
  // WebGLやCanvas 2Dの描画位置・エフェクトにmouseを使う
}

このコードは、マウス位置を取得する基本例です。WebGLではシェーダーに渡して歪み表現を作ることもでき、2D描画ではカーソル追従エフェクトを作れます。

9.3 没入型UX

没入型UXでは、WebGLが非常に有効です。3D空間、リアルタイム演出、視点移動、奥行き、音との連携などによって、ユーザーがコンテンツの中に入り込むような体験を作れます。ゲームやブランドサイト、展示コンテンツ、教育コンテンツでは大きな価値になります。

ただし、没入型UXはすべてのWebサイトに必要ではありません。情報を素早く伝えるページや、業務効率を重視する管理画面では、過剰な没入演出は逆効果になることがあります。WebGLを使う場合は、その演出がユーザー体験に本当に必要かを判断することが重要です。

コード例: 没入感を作る全画面Canvas

<!-- file: fullscreen-canvas.html -->
<!-- 役割: WebGLや2D描画で全画面ビジュアルを作るためのCanvas -->
<canvas id="visual"></canvas>

<script>
  const canvas = document.getElementById("visual");

  function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
  }

  window.addEventListener("resize", resize);
  resize();
</script>

全画面Canvasは、没入型ビジュアルの基本になります。WebGLで3D背景を作る場合にも、Canvas 2Dで背景アニメーションを作る場合にも使えます。

10. WebGLと2D描画の本質

WebGLと2D描画の本質的な違いは、描画方式と目的にあります。WebGLはGPUを使った高速・高表現力の描画技術であり、2D描画はシンプルで扱いやすい平面描画方式です。どちらを選ぶかは、作りたい体験によって決まります。

総合整理

10.1 WebGLは「GPU活用による高速描画技術」

WebGLの本質は、GPUを活用してブラウザ上で高速な描画を行うことです。大量オブジェクト、3Dモデル、パーティクル、シェーダーエフェクト、リアルタイムゲームなど、描画負荷が高い場面で強みを発揮します。

ただし、WebGLは万能ではありません。簡単なUIや軽量な図形描画に使うと、実装コストが無駄に高くなる場合があります。WebGLを使うべきなのは、GPUを使うことで明確に価値が出る場面です。

コード例: WebGLを使うべきか判定する簡易条件

// file: should-use-webgl.js
// 役割: 描画要件からWebGL採用を判断する簡易例

function shouldUseWebGL({ has3D, objectCount, needsShader }) {
  return has3D || objectCount > 1000 || needsShader;
}

const result = shouldUseWebGL({
  has3D: true,
  objectCount: 300,
  needsShader: false
});

console.log("Use WebGL:", result);

このコードは、3Dが必要か、大量描画があるか、シェーダーが必要かでWebGL採用を判断する考え方です。

10.2 2D描画は「シンプルで扱いやすい描画方式」

2D描画の本質は、平面的なグラフィックを簡単に描けることです。図形、画像、文字、軽量なアニメーションを素早く実装できます。WebGLほど高度な表現はできませんが、その分、開発しやすく、保守しやすいです。

シンプルなチャート、軽量なUI、簡単なゲーム、教育コンテンツでは、2D描画が非常に向いています。必要以上に複雑な技術を使わないことも、良い設計の一つです。

コード例: 2D描画を選ぶ条件

// file: should-use-2d.js
// 役割: シンプルな描画ならCanvas 2Dを選ぶ簡易例

function shouldUseCanvas2D({ has3D, objectCount, simpleUI }) {
  return !has3D && objectCount < 500 && simpleUI;
}

const result = shouldUseCanvas2D({
  has3D: false,
  objectCount: 120,
  simpleUI: true
});

console.log("Use Canvas 2D:", result);

このコードは、3Dがなく、描画数が少なく、UIがシンプルな場合にCanvas 2Dを選ぶ考え方を示しています。

10.3 表現力と開発難易度はトレードオフになる

WebGLは表現力が高い反面、開発難易度も高くなります。シェーダー、GPU、行列、バッファなどを扱うため、学習コストやデバッグコストが増えます。一方、2D描画は表現力に限界がありますが、実装しやすく、開発速度も速いです。

そのため、技術選定では、表現力と開発コストのバランスを見る必要があります。高品質な3D表現がプロダクト価値に直結するならWebGLを選ぶ価値があります。逆に、シンプルなUIで十分なら2D描画を選ぶ方が合理的です。

コード例: 開発コストをスコア化する簡易例

// file: rendering-cost-score.js
// 役割: 表現要件から開発コストを簡易評価する

function estimateCost({ webgl, shader, threeD }) {
  let cost = 1;

  if (webgl) cost += 2;
  if (shader) cost += 2;
  if (threeD) cost += 2;

  return cost;
}

console.log(estimateCost({
  webgl: true,
  shader: true,
  threeD: true
}));

このコードは、WebGLやシェーダー、3Dが入るほど開発コストが上がるという考え方を示しています。

10.4 用途によって最適な描画方式は変わる

最適な描画方式は用途によって変わります。シンプルなチャートや手書きツール、軽量UIなら2D描画が向いています。3Dゲーム、商品3Dプレビュー、大量スプライト、リッチ演出ならWebGLが向いています。

実務では、最初に描画要件を整理することが重要です。3Dが必要か、描画数が多いか、シェーダーが必要か、モバイル対応が必要か、チームがWebGLを扱えるかを確認してから選ぶと失敗しにくくなります。

コード例: 用途別に描画方式を返す

// file: choose-renderer-by-usecase.js
// 役割: 用途に応じて描画方式を選ぶ簡易例

function chooseRenderer(useCase) {
  const webglCases = ["3d-game", "product-3d", "particle-heavy"];
  const canvas2dCases = ["chart", "simple-ui", "drawing-tool"];

  if (webglCases.includes(useCase)) return "webgl";
  if (canvas2dCases.includes(useCase)) return "2d";

  return "depends";
}

console.log(chooseRenderer("product-3d"));

用途ごとに描画方式を整理しておくと、チーム内で技術選定の判断がしやすくなります。

10.5 「何を描画したいか」で選択することが本質

WebGLと2D描画を選ぶうえで最も重要なのは、「何を描画したいか」です。3D空間、シェーダー、大量オブジェクト、高FPS描画が必要ならWebGLが候補になります。平面的な図形、画像、文字、軽量なアニメーションで十分なら2D描画が適しています。

流行や技術の名前だけで選ぶべきではありません。WebGLは強力ですが、必要ない場面で使うと開発コストが増えます。2D描画はシンプルですが、高負荷な表現では限界があります。作りたい体験、描画要件、対象デバイス、開発体制をもとに選ぶことが本質です。

コード例: 最終的な描画方式選定ロジック

// file: final-renderer-decision.js
// 役割: 描画要件から最終的な描画方式を選ぶ例

function decideRenderer(options) {
  const {
    needs3D,
    objectCount,
    needsShader,
    simpleUI,
    teamWebGLSkill
  } = options;

  if (needs3D || needsShader) {
    return teamWebGLSkill ? "webgl" : "use-library-like-threejs";
  }

  if (objectCount > 1000) {
    return "webgl-or-pixijs";
  }

  if (simpleUI) {
    return "canvas-2d";
  }

  return "canvas-2d-first";
}

console.log(decideRenderer({
  needs3D: false,
  objectCount: 200,
  needsShader: false,
  simpleUI: true,
  teamWebGLSkill: false
}));

このコードは、実務での技術選定に近い考え方です。描画要件だけでなく、チームスキルも含めて判断することが重要です。

おわりに

WebGLは、高性能な描画や高度なビジュアル表現に強い技術です。GPUを活用できるため、3D表現、大量オブジェクト描画、リアルタイムゲーム、シェーダーエフェクト、インタラクティブなWeb表現に向いています。特に、描画そのものがユーザー体験やブランド価値に直結する場合、WebGLは非常に強力な選択肢になります。

一方で、2D描画はシンプルで扱いやすい描画方式です。Canvas 2D Contextを使えば、図形、画像、文字、簡単なアニメーションを比較的簡単に実装できます。チャート、UI装飾、簡単な2Dゲーム、教育コンテンツなどでは、2D描画の方が開発効率や保守性に優れる場合があります。

ゲーム、UI、3D表現では、WebGLと2D描画を適切に使い分けることが重要です。高FPS、大量描画、複雑なエフェクト、3D表現が必要ならWebGLが有利です。軽量で分かりやすい平面描画が目的なら、2D描画が適しています。

GPU活用と描画目的にあります。WebGLは「高性能で自由度の高い描画」、2D描画は「シンプルで扱いやすい平面描画」です。重要なのは、技術の名前ではなく、作りたい体験に対して最適な描画方式を選ぶことです。