今天学习一下如何使用webgl画一条线段
let vertexShaderSource = `
//浮点数设置为中等精度
precision mediump float;
//接收 JavaScript 传递过来的点的坐标（X, Y）
attribute vec2 a_Position;
// 接收canvas的尺寸。
attribute vec2 a_Screen_Size;
void main(){
// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
// canvas的 Y 轴坐标方向和 设备坐标系的相反。
position = position * vec2(1.0, -1.0);
// 最终的顶点坐标。
gl_Position = vec4(position, 0.0, 1.0);
gl_PointSize = 15.0;
}
`;
//片元着色器
let fragmentShaderSource =`
precision mediump float;
uniform vec4 u_Color;
void main(){
vec4 color = u_Color/vec4(255,255,255,1);
gl_FragColor = color;
}
`如果你并不太理解上面的内容是什么意思的话，可以去看这一章，你会大概的明白是什么意思下面就是老生常谈的代码了，
这个其实跟我们之前话三角形几乎全部一样，不同的点在于下面 ，我们需要花的是线段 同时个数是 数组长度的一半
line
gl.drawArrays(gl.LINES, 0, positions.length / 2);LINE_LOOPgl.drawArrays(gl.LINE_LOOP, 0, positions.length / 2);LINE_STRIPgl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
let vertexShaderSource = `
//浮点数设置为中等精度
precision mediump float;
//接收 JavaScript 传递过来的点的坐标（X, Y）
attribute vec2 a_Position;
// 接收canvas的尺寸。
attribute vec2 a_Screen_Size;
void main(){
// 将 canvas 的坐标值 转换为 [-1.0, 1.0]的范围。
vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
// canvas的 Y 轴坐标方向和 设备坐标系的相反。
position = position * vec2(1.0, -1.0);
// 最终的顶点坐标。
gl_Position = vec4(position, 0.0, 1.0);
gl_PointSize = 15.0;
}
`;
//片元着色器
let fragmentShaderSource =`
precision mediump float;
uniform vec4 u_Color;
void main(){
vec4 color = u_Color/vec4(255,255,255,1);
gl_FragColor = color;
}
`
let canvas = document.getElementById('canvas');
canvas.width = window.innerWidth;//当前的宽度
canvas.height = window.innerHeight;//当前的高度
let gl = canvas.getContext('webgl');
//创建顶点着色器
let vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader,vertexShaderSource);
gl.compileShader(vertexShader);
//创建片元着色器
let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader,fragmentShaderSource);
gl.compileShader(fragmentShader);
//创建一个完整的着色器
let propgram = gl.createProgram();
gl.attachShader(propgram,vertexShader);
gl.attachShader(propgram,fragmentShader);
gl.linkProgram(propgram);
gl.useProgram(propgram);
let positions =[1,10,10,1];//设置一个数据
//设置缓冲区存放玩家点击的点的坐标
let buffer = gl.createBuffer();
//绑定缓冲区
gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
//取到我们需要使用的变量
let a_Position = gl.getAttribLocation(propgram,'a_Position');
gl.enableVertexAttribArray(a_Position);
//每次取两个数据
let size = 2;
//每个数据的类型是32位浮点型
let type = gl.FLOAT;
//不需要归一化数据
let normalize = false;
// 每次迭代运行需要移动数据数 * 每个数据所占内存 到下一个数据开始点。
let stride = 0;
// 从缓冲起始位置开始读取
let offset = 0;
// 将 a_Position 变量获取数据的缓冲区指向当前绑定的 buffer。
gl.vertexAttribPointer(a_Position, size, type, normalize, stride, offset)
//片元色器
let u_Color = gl.getUniformLocation(propgram,'u_Color');
gl.uniform4f(u_Color,this.randomColor().r,this.randomColor().g,this.randomColor().b,this.randomColor().a);
//顶点着色器
//处理顶点着色器中的变量
let a_Screen_Size = gl.getAttribLocation(propgram,'a_Screen_Size');//取到屏幕的大小
gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);//设置参数
//捕获按钮事件
canvas.addEventListener('mouseup', e => {
var x = e.pageX;
var y = e.pageY;
positions .push(x,y);//将数据放在数组中
if(positions.length > 0){//讲述组放入
gl.bufferData(gl.ARRAY_BUFFER,new Float32Array(positions),gl.STATIC_DRAW);
this.show(gl);
}
});
// this.show(gl);
function show(gl) {
gl.clearColor(0,0,0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.LINES, 0, positions.length / 2);
//gl.drawArrays(gl.LINE_STRIP, 0, positions.length / 2);
//gl.drawArrays(gl.LINE_LOOP, 0, positions.length / 2);
}
//随机取到相关的颜色
function randomColor() {
return {
r: Math.random() * 255,
g: Math.random() * 255,
b: Math.random() * 255,
a: 1 * 1
};
}
</script>
</body>
</html>
