WebGL:マウスでクリックしたところに点を描画する

webgl-mouse.png

<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-utils.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/webgl-debug.js" type="text/javascript"></script>
<script src="http://miffysora.wikidot.com/local--files/webgl/cuon-utils.js" type="text/javascript"></script>
<script type='text/javascript' >
//頂点シェーダ
var VSHADER_SOURCE = 
  'attribute vec4 a_Position;\n' +
  'void main() {\n' +
  '  gl_Position = a_Position;\n' + // 頂点の位置
  '  gl_PointSize = 10.0;\n' +                    // 点のサイズをセット
  '}\n';
 
//フラグメントシェーダ
var FSHADER_SOURCE =
"precision mediump float;\n" +//これがないとno precision specified for floatのエラーになります
  'void main() {\n' +
           "vec4 color=vec4(157,217,221,200);\n"+//半透明グリーン
           "gl_FragColor =color/255.0;\n" + //点の色をセット
  '}\n';
function main() {//onLoadで呼ばれる関数
  var canvas = document.getElementById('webgl');
 
  var gl = getWebGLContext(canvas);//cuon-utils.jsより
  //シェーダの初期化
  initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE);//cuon-utils.jsより
  //アトリビュート変数の場所の取得
  var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  //マウス入力関数の登録
   canvas.onmousedown = function(ev){ click(ev, gl, canvas, a_Position); };
  gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
  gl.clear(gl.COLOR_BUFFER_BIT);
}
var g_points = []; //マウスを押した場所を格納する配列
//マウスがクリックされたときに呼ばれる関数
function click(ev, gl, canvas, a_Position) {
  var x = ev.clientX; //マウスの x座標
  var y = ev.clientY; //マウスの y座標 
  var rect = ev.target.getBoundingClientRect() ;
  x = ((x - rect.left) - canvas.width/2)/(canvas.width/2);
  y = (canvas.height/2 - (y - rect.top))/(canvas.height/2);
  // 配列に押した場所を記録
  g_points.push(x); g_points.push(y);
 
  gl.clearColor(83.0/255.0, 62.0/255.0, 37.0/255.0, 0.6);//半透明茶色
  gl.clear(gl.COLOR_BUFFER_BIT);
 
  var len = g_points.length;
  for(var i = 0; i < len; i += 2) {
    // 頂点シェーダのa_Positionにデータを送る
    gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);
 
    // 点を描画
    gl.drawArrays(gl.POINTS, 0, 1);
  }
}
</script>
<body onload="main()">
</script><canvas id="webgl" style="border: none;" width="200" height="200"></canvas>

サポートサイト Wikidot.com