- 基本的な立方体の描画: 以下は、最も基本的なWebGLの立方体の描画例です。
<!DOCTYPE html>
<html>
<head>
<title>WebGL Cube Example</title>
<style>
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
const vertexShaderSource = `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1.0);
}
`;
const fragmentShaderSource = `
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);
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 36);
</script>
</body>
</html>この例では、HTMLのcanvas要素を使用してWebGLコンテキストを取得し、頂点シェーダーとフラグメントシェーダーを作成します。頂点シェーダーは、頂点の位置を受け取り、gl_Positionに変換しています。フラグメントシェーダーは、ピクセルの色を設定しています。その後、プログラムをリンクし、頂点バッファを作成して立方体の頂点データをバッファに格納します。最後に、gl.drawArraysメソッドを使用して立方体を描画します。
- テクスチャを使用した立方体の描画: 以下は、テクスチャを使用して立方体を描画するWebGLの例です。
<!DOCTYPE html>
<html>
<head>
<title>WebGL Cube Example with Texture</title>
<style>
canvas { width: 100%; height: 100%; }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const gl = canvas.getContext('webgl');
const vertexShaderSource = `
attribute vec3 position;
attribute vec2 texCoord;
varying vec2 vTexCoord;
void main() {
gl_Position =vec4(position, 1.0);
vTexCoord = texCoord;
}
`;
const fragmentShaderSource = `
precision mediump float;
uniform sampler2D texture;
varying vec2 vTexCoord;
void main() {
gl_FragColor = texture2D(texture, vTexCoord);
}
`;
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);
const positionAttributeLocation = gl.getAttribLocation(program, 'position');
const texCoordAttributeLocation = gl.getAttribLocation(program, 'texCoord');
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
const positions = [
-1.0, -1.0, 1.0,
1.0, -1.0, 1.0,
-1.0, 1.0, 1.0,
1.0, 1.0, 1.0,
-1.0, -1.0, -1.0,
1.0, -1.0, -1.0,
-1.0, 1.0, -1.0,
1.0, 1.0, -1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);
const texCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
const texCoords = [
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0,
0.0, 0.0,
1.0, 0.0,
0.0, 1.0,
1.0, 1.0,
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
gl.enableVertexAttribArray(texCoordAttributeLocation);
gl.vertexAttribPointer(texCoordAttributeLocation, 2, gl.FLOAT, false, 0, 0);
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
const image = new Image();
image.onload = function() {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = 'path/to/texture/image.png';
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.useProgram(program);
gl.drawArrays(gl.TRIANGLES, 0, 36);
</script>
</body>
</html>この例では、基本的な立方体の描画に加えて、テクスチャを使用して立方体に画像を表示しています。頂点シェーダーには、テクスチャ座標を受け取るための追加の属性「texCoord」と「varying vTexCoord」があります。フラグメントシェーダーでは、テクスチャをサンプリングして色を設定しています。また、テクスチャを読み込んでバインドし、テクスチャ座標のバッファを作成しています。
これらの例は、WebGLを使用して立方体を描画するための基本的なコードです。さまざまな方法でカスタマイズや拡張することができます。これらのコード例を使って、さらに高度な3Dグラフィックスの実装を試してみてください。