解説
「WebGL」は、Webブラウザで3Dなどの描画を実現するための、JavaScriptのAPIです。WebGLは、「OpenGL ES」（OpenGL for Embedded Systems：OpenGL組み込みシステム）の派生規格です。また、「OpenGL ES」は、「OpenGL」（Open Graphics Library）のサブセット版です。
OpenGLは、「Open」という名前のとおりオープンな、2次元および3次元のグラフィックスAPIの標準規格です。Webブラウザ向けのWebGLでは、GPUを利用して3D表現を実現したり、大量のオブジェクトを処理落ちなしに描画したりすることができます。
WebGLは、かなりハードウェア寄りの仕様のため、そのまま利用するとコード量が大量になり、あまり便利ではありません。そのため、WebGLを利用するライブラリを利用して、間接的に利用することが多いです。
サンプル
「WebGL」のサンプルです。「three.js」を利用しています。ファイルはUTF-8で保存してください。検証はGoogle Chromeで行なっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>「WebGL」のサンプル</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/99/three.min.js"></script>
</head>
<body>
<script>
window.addEventListener('load', () => {
// 変数の初期化
const w = 640;
const h = 480;
// レンダラ作成
const renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(w, h);
document.body.appendChild(renderer.domElement);
// シーン作成
const scene = new THREE.Scene();
// カメラ作成
const camera = new THREE.PerspectiveCamera(50, w / h);
camera.position.z = 1000;
// オブジェクト作成
const geometry = new THREE.BoxGeometry(300, 400, 500);
const material = new THREE.MeshNormalMaterial();
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// レンダリング
setInterval(() => {
mesh.rotation.x += Math.PI * 0.125 * 0.02;
mesh.rotation.y += Math.PI * 0.25 * 0.02;
renderer.render(scene, camera);
}, 1000 / 30);
});
</script>
</body>
</html>
