← カテゴリ一覧に戻る

WebGL（3D描画）

WebGLRenderingContext WebGL2 Three.js

WebGLはブラウザでGPUを使った3Dグラフィクスを実現するAPIです。低レベルAPIのため、通常はThree.jsなどのライブラリを使います。

デモ：WebGL（背景色アニメーション）

GPU を使って背景色をアニメーション（WebGL の clearColor）

WebGL の基本構造（低レベルAPI）

js
const canvas = document.querySelector('canvas');
// WebGL2（推奨）またはWebGL1
const gl = canvas.getContext('webgl2') || canvas.getContext('webgl');

// シェーダーのソースコード（GLSL）
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); // 赤
  }
`;

// シェーダーのコンパイル
function createShader(gl, type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// プログラムのリンク
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);

// 頂点バッファ
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [-1, -1, 1, -1, -1, 1, 1, 1]; // 正方形
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// 描画
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);

実用的なアプローチ：ライブラリを使う

ライブラリ特徴用途
Three.js最も人気・機能豊富3Dシーン全般
Babylon.jsゲームエンジン風ゲーム・インタラクティブ
React Three FiberReact + Three.jsReactアプリでのThree.js
PixiJS2D特化・高速2Dゲーム・インタラクティブ
js
// Three.js でのシンプルな3D描画
import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(width, height);

// 立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x3b82f6 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;

// アニメーションループ
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

NEWWebGPU（WebGLの後継, Chrome 113+）

WebGPUはWebGLの後継で、Vulkan/Metal/DirectX 12レベルの低レベルGPUアクセスを提供します。グラフィクスだけでなく機械学習の推論にも使われます。

js
// WebGPU（Chrome 113+）
if (!navigator.gpu) {
  console.error('WebGPU 非対応');
}

const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const canvas = document.querySelector('canvas');
const context = canvas.getContext('webgpu');
context.configure({
  device,
  format: navigator.gpu.getPreferredCanvasFormat(),
});

// コンピュートシェーダー（WGSL）
const shaderModule = device.createShaderModule({
  code: `
    @compute @workgroup_size(64)
    fn main(@builtin(global_invocation_id) id: vec3<u32>) {
      // GPU並列計算
    }
  `,
});

// Three.js も WebGPU バックエンドに対応開始（2024〜）

🤖 AIプロンプトテンプレート

以下のようなWebGL APIを使った3Dグラフィックスの基本的なサンプルコードを生成してください：
- canvas.getContext('webgl2')でWebGLコンテキストを取得する基本実装
- GLSLシェーダー（頂点シェーダー・フラグメントシェーダー）のコンパイルとリンク
- gl.clearColor / gl.clear / gl.drawArraysを使った背景色と図形の描画
- Three.jsを使ったシーン・カメラ・メッシュの基本セットアップと回転アニメーション
- WebGPUのadapter / device取得とコンピュートシェーダーの基本構造

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo