var vshader_src =
'attribute vec4 a_Position;\n\
attribute float a_PointSize;\n\
void main() {\n\
gl_Position = a_Position;\n\
gl_PointSize = a_PointSize;\n\
}';
var fshader_src =
'precision mediump float;\n\
uniform vec4 u_FragColor;\n\
void main() {\n\
gl_FragColor = u_FragColor;\n\
}';
function main() {
var canvas = document.getElementById("webgl");
var gl = getWebGLContext(canvas, true);
if (!gl) {
alert("Failed at getWebGLContext");
return;
}
if (!initShaders(gl, vshader_src, fshader_src)) {
alert("Failed at initShaders");
return;
}
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
alert("Failed to get a_Position");
return;
}
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
//gl.vertexAttrib2f(a_Position, 0, -0.5);
gl.vertexAttrib2fv(a_Position, new Float32Array([-0.5, -0.5]));
gl.vertexAttrib1f(a_PointSize, 10);
gl.uniform4f(u_FragColor, 0, 0, 1, 1);
canvas.onmousedown = function(ev) { click(ev,gl,canvas,a_Position,u_FragColor);}
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
}
var g_points = [];
var g_colors = [];
function click(ev,gl,canvas,a_Position,u_FragColor){
var x = ev.clientX;
var y = ev.clientY;
var rect = ev.target.getBoundingClientRect();
x = ((x-rect.left) -canvas.height/2)/(canvas.height/2);
y = (canvas.width/2 - (y - rect.top))/(canvas.width/2);
g_points.push([x,y]);
if(x>=0.0&&y>=0.0){
g_colors.push([1.0,0.0,0.0,1.0]);
}else if(x<0.0&&y<0.0){
g_colors.push([0.0,1.0,0.0,1.0]);
}else {
g_colors.push([1.0,1.0,1.0,1.0]);
}
gl.clear(gl.COLOR_BUFFER_BIT);
var len = g_points.length;
for(var i=0;i<len;i++){
var xy=g_points[i];
var rgba=g_colors[i];
gl.vertexAttrib3f(a_Position,xy[0],xy[1],0.0);
gl.uniform4f(u_FragColor,rgba[0],rgba[1],rgba[2],rgba[3]);
gl.drawArrays(gl.POINTS,0,1);
}
}
login.jsp
<html>
<head>
<title>Wormhole</title>
</head>
<body οnlοad="main()">
<canvas id="webgl" width="400" height="400"></canvas>
<script src="../lib/webgl-utils.js"></script>
<script src="../lib/webgl-debug.js"></script>
<script src="../lib/cuon-utils.js"></script>
<script src="hellocanvas.js"></script>
</body>
</html>