<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width, initial-scale=1.0"><link rel="stylesheet"href="/static/css/common.css"><title>attribute</title></head><body onload="main()"><canvas id="example"width="512"height="512">
游览器不支持
</canvas></body><script src="/static/js/cuon-utils.js"></script><script src="/static/js/webgl-debug.js"></script><script src="/static/js/webgl-utils.js"></script><script>
var VSHADER_SOURCE ='attribute vec4 a_Position;\n' + // attribute variable
'void main() {
\n' +
' gl_Position = a_Position;\n' +
' gl_PointSize = 10.0;\n' +
'}\n';
// Fragment shader program
var FSHADER_SOURCE ='void main() {
\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n' +
'}\n';functionmain(){
// Retrieve <canvas> element
var canvas = document.getElementById('example');
console.log(canvas)
// Get the rendering context for WebGL
// var gl = getWebGLContext(canvas);
var gl = canvas.getContext('webgl');if(!gl){
console.log('Failed to get the rendering context for WebGL');return;}
// Initialize shaders
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to intialize shaders.');return;}
// Get the storage location of a_Position
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');if(a_Position <0){
console.log('Failed to get the storage location of a_Position');return;}
// Register function(event handler) to be called on a mouse press
canvas.onmousedown = function(ev){
click(ev, gl, canvas, a_Position);};
// Specify the color for clearing <canvas>
gl.clearColor(0.0, 0.5, 0.5, 1.0);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw
// gl.drawArrays(gl.POINTS, 0, 1);}
var g_points =[]; // The array for the position of a mouse press
function click(ev, gl, canvas, a_Position){
var x = ev.clientX; // x coordinate of a mouse pointer
var y = ev.clientY; // y coordinate of a mouse pointer
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);
// Store the coordinates to g_points array
g_points.push(x); g_points.push(y);
// Clear <canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
var len = g_points.length;
for(var i =0; i < len; i +=2){
// Pass the position of a point to a_Position variable
gl.vertexAttrib3f(a_Position, g_points[i], g_points[i+1], 0.0);
// Draw
gl.drawArrays(gl.POINTS, 0, 1);}}</script></html>