WebGL

ウェブジーエル（API & Web機能）

意味 3Dグラフィックス描画API

WebGLとは？

WebGLは、ブラウザ内で3Dグラフィックスを描画するためのAPIです。

WebGLの具体的な使い方

WebGLで赤い三角形を描画する例

<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const gl = canvas.getContext('webgl');

  // 頂点シェーダーのソースコード
  const vertexShaderSource = `
    attribute vec4 a_position;
    void main() {
      gl_Position = a_position;
    }
  `;

  // フラグメントシェーダーのソースコード
  const fragmentShaderSource = `
    precision mediump float;
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 赤色
    }
  `;

  // シェーダーのコンパイルと設定
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  gl.shaderSource(vertexShader, vertexShaderSource);
  gl.compileShader(vertexShader);

  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
  gl.shaderSource(fragmentShader, fragmentShaderSource);
  gl.compileShader(fragmentShader);

  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // 三角形の頂点データ
  const vertices = new Float32Array([
    0.0,  0.5,
   -0.5, -0.5,
    0.5, -0.5
  ]);

  const buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  const positionAttributeLocation = gl.getAttribLocation(program, "a_position");
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 2, gl.FLOAT, false, 0, 0);

  // 描画
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

このコードは、WebGLを使用して赤い三角形をキャンバスに描画します。頂点シェーダーとフラグメントシェーダーを定義し、三角形の頂点データを設定して描画しています。

WebGLに関するよくある質問

Q. WebGLとは何ですか？

A. WebGLは、ウェブブラウザで3Dグラフィックスを描画するためのJavaScript APIです。HTMLのcanvas要素を使用して、GPUアクセラレーションによる高性能な2Dおよび3Dレンダリングを可能にします。

Q. WebGLの利点は何ですか？

A. WebGLの主な利点は、プラグインなしでブラウザ上で直接3Dグラフィックスを描画できること、クロスプラットフォーム対応であること、そしてハードウェアアクセラレーションにより高速な描画が可能なことです。

Q. WebGLの学習は難しいですか？

A. WebGLは比較的低レベルのAPIであり、3Dグラフィックスの基本概念（頂点、シェーダー、テクスチャなど）の理解が必要です。初心者にとっては学習曲線が急な場合がありますが、Three.jsなどのライブラリを使用することで、より簡単に始めることができます。

WebGLが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのWebGLやFetch API、Battery Status API、FileReader API、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。