colorpoint.js

最新推荐文章于 2024-04-10 13:44:59 发布

原创最新推荐文章于 2024-04-10 13:44:59 发布 · 530 阅读

0 ·

CC 4.0 BY-SA版权

技术专栏收录该内容

69 篇文章

订阅专栏

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);
	}
}

<html>
 <head>
  <title>Wormhole</title>
 </head>
 <body onload="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>