<!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, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>ColoredPoints--根据位置改变点的颜色</title>
</head>
<body οnlοad="main();">
<canvas id="webgl" width="400" height="400">
Please use a browser that supports "canvas"
</canvas>
<script type="text/javascript" src="/WebGL/js/lib/webgl-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/webgl-debug.js"></script>
<script type="text/javascript" src="/WebGL/js/lib/cuon-utils.js"></script>
<script type="text/javascript" src="/WebGL/js/ColoredPoints.js"></script>
<script>
</script>
</body>
</html>
//顶点着色器程序
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n'+ //attribute被称为存储限定符，表示接下来的变量（a_Position）
'attribute float a_PointSize;\n'+
'void main() {\n' +
'gl_Position = a_Position;\n' + //赋值 设置坐标
'gl_PointSize = a_PointSize;\n' + //设置尺寸 gl_PointSize为浮点型 不然报错
'}\n';
//片元着色器程序
var FSHADER_SOURCE =
'precision mediump float;\n'+//精度限定词
'uniform vec4 u_FragColor;\n'+//uniform变量
'void main() {\n' +
'gl_FragColor = u_FragColor;\n' + //设置颜色
'}\n';
function main(){
//获取<canvas>元素
var canvas = document.getElementById('webgl');
//获取WebGL绘图上下文
var gl = getWebGLContext(canvas);
if(!gl){
console.log('Failed to get the rendering context for WebGL');
return;
}
//初始化着色器
if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)){
console.log('Failed to initialize shaders');
return;
}
//获取attribute变量的存储位置--地址
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');//参数1：程序对象； 参数2：想要获取存储地址的attribute变量名称；
var a_PointSize = gl.getAttribLocation(gl.program, 'a_PointSize');
//获取uniform变量的存储位置--地址
var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor');
//检查
if(a_Position < 0 || a_PointSize < 0){
console.log('Failed to get the storage location of a_Position');
return;
}
//检查
if(!u_FragColor){
console.log('Failed to get u_FragColor variable');
return;
}
//注册鼠标点击事件响应函数---这种机制称为匿名函数，不需要命名的函数
canvas.onmousedown = function(ev) {click(ev, gl, canvas, a_Position, u_FragColor)};
//将顶点大小传输给attribute变量
gl.vertexAttrib1f(a_PointSize, 5.0);
//清空<canvas>
gl.clear(gl.COLOR_BUFFER_BIT);
//设置<canvas>的背景颜色-----黑色
gl.clearColor(0.0,0.0,0.0,1.0);
}
var g_points = [];//鼠标点击位置数组
var g_colors = [];//存储点颜色的数组
function click(ev, gl, canvas, a_Position, u_FragColor){
var x = ev.clientX;//鼠标点击处的X坐标
var y = ev.clientY;//鼠标点击处的Y坐标
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数组中
g_points.push(x); g_points.push(y);
//将点的颜色存储到g_colors数组中
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([0.0, 0.0, 1.0, 1.0]);//蓝色
}
//清空<canvas>
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);
//将点的颜色传输到u_FragColor变量中
gl.uniform4f(u_FragColor, g_points[i], g_points[i+1], g_points[i+2], g_points[i+3]);
//绘制一个点
gl.drawArrays(gl.POINTS, 0, 1);
}
//第二种方式：将x坐标和y坐标作为一个组合来处理，能够简化程序并提高可读性。
// for(var i = 0; i < len; i++){
// var xy = g_points[i];
// var rgba = g_colors[i];
// console.log(rgba);
// //将点的位置传递到变量中a_Position
// gl.vertexAttrib3f(a_Position, xy[0], xy[1], 0.0);
// //将点的颜色传输到u_FragColor变量中
// gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);
//
// //绘制一个点
// gl.drawArrays(gl.POINTS, 0, 1);
// }
}
//点的颜色取决于其位置。
//片元着色器负责处理颜色，使用uniform变量向gl_FragColor赋值。
//同族函数：
//WebGL函数命名规范：<基础函数名：uniform><参数个数：1，2，3，4><参数类型：f浮点数，i整数>
//gl.uniform1f(localhost, v0);第二三个分量将被设为0.0，第四个分量设为1.0
//gl.uniform2f(localhost, v0, v1);齐次坐标：变量赋值自动补全了第四分量：1.0
//gl.uniform3f(localhost, v0, v1, v2);
//gl.uniform4f(localhost, v0, v1, v2, v3);
扫一扫
4306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
