こんにちは、エンジニアのオオバです。
あわせて読みたい記事
生のWebGLで三角形を描画するショートコード
この記事書いたのが既に3年前。
あれから全くWebGLを書かずに過ごし、
今また再ブームが自分の中に到来しております。
生WebGL最小コード
<!DOCTYPE html>
<html>
<head>
<title>mingl</title>
<meta charset="UTF-8">
<script type="text/javascript" src="script.js"></script>
<script id="vs" type="x-shader/vertex">
attribute vec3 pos;
void main()
{
gl_Position = vec4(pos, 1.0);
}
</script>
<script id="fs" type="x-shader/fragment">
void main()
{
gl_FragColor = vec4(1,0,0,1);
}
</script>
</head>
<body>
<canvas id='canvas'></canvas>
</body>
</html>
window.onload = function()
{
var canvas = document.getElementById('canvas');
canvas.width = canvas.height = 300;
var gl = canvas.getContext('webgl');
var vsObj = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vsObj, document.getElementById('vs').text);
gl.compileShader(vsObj);
var fsObj = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fsObj, document.getElementById('fs').text);
gl.compileShader(fsObj);
var prog = gl.createProgram();
gl.attachShader(prog, vsObj);
gl.attachShader(prog, fsObj);
gl.linkProgram(prog);
if (gl.getProgramParameter(prog, gl.LINK_STATUS)==false)
{
console.log(gl.getProgramInfoLog(prog));
return;
}
gl.useProgram(prog);
var positionAttr = gl.getAttribLocation(prog, "pos");
var data =[
0, 0.5, 0.5,
-0.5, -0.5, 0,
0.5, -0.5, -0.2
];
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
gl.enableVertexAttribArray(positionAttr);
gl.vertexAttribPointer(positionAttr, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER,null);
gl.clearColor(0,0,0,1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 3);
};
まずは勘を取り戻すために、ライブラリなど使用せず
生WebGLで三角形を出してみようと思って書きました。
実行するとこんな邪悪な色味の三角形が表示されます。
- シェーダーをコンパイルする
- プログラムオブジェクトを作って、シェーダーをリンクする
- 頂点座標のバッファを作って頂点情報をセットする
- 頂点シェーダーの頂点属性posに値をバインドして渡す
- 画面をクリアして、描画
という手順を踏んでいます。
あきらめたくないので、
WebGL 開発支援サイト wgld.org
こちらのサイトを参考に1つずつお題をこなして、コンスタントにアウトプットしていきたいです。
この記事が気に入ったらフォローしよう
オススメ記事
