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に関するよくある質問
WebGLが学べる書籍の紹介
「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか?
プログラミング単語帳には、JavaScriptのWebGLやFetch API、Battery Status API、WebVR、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。
よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。
HTML編、CSS編、JavaScript編、PHP編、Ruby編、その他単語編の6シリーズ分が公式ストアにて販売中です。気になった方はぜひ購入してみてください。
JavaScriptを学べる「プログラミング単語帳」アプリ
プログラミング単語帳がアプリになりました!JavaScriptはもちろん、10種類のプログラミング言語の中から、よく使われる単語をスマホで学習できます。
収録単語は2,000単語以上!
現在は、HTML、CSS、JavaScirpt、PHP、Laravel、Ruby、Python、MySQL、Linux、など10カテゴリーの単語帳が1つのアプリに収録されています。
いつでも、どこでも、隙間時間を有効活用して、プログラミングを効率的に学べるので、ぜひダウンロードしてみてください。
2024年7月アップデート情報:「Laravel」カテゴリーが追加されましました!
2024年8月アップデート情報:「MySQL」「Linux」カテゴリーが追加されましました!