WebGL学习笔记3-入门画线、三角形、多边形
实现目标画线
代码
<!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" />
<title>使用WebGL绘制线</title>
</head>
<body onload="onInit()">
<canvas id="webgl" width="500" height="500"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 aPosition;
void main() {
gl_PointSize=10.0;
//顶点位置
gl_Position =aPosition; //vec4(0.0,0.0,0.0,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;//设置精度
uniform vec4 aColor;
void main() {
gl_FragColor=aColor; //vec4(0.0,1.0,0.0,1.0);
}
</script>
<script>
function onInit() {
//获取webgl
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
//-----加载着色器-----
//加载顶点着色器
var vertexShaderSource = document.getElementById('vertexShader').innerText;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//加载片元着色器
var fragShaderSource = document.getElementById('fragmentShader').innerText;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragShaderSource);
gl.compileShader(fragmentShader);
//-----链接程序-----
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//-----基本配置-----
//设置视口
gl.viewport(0, 0, canvas.width, canvas.height);
//设置屏幕背景色RGBA
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST); //开启深度检测
//-----参数赋值----
//aPosition赋值
//点有象限之分的，可正负，范围在[-w,w]之间
//vec4(x,y,z,w)
let w = 10.0;
let aPoint = [1.0, 2.0, 0.0, w]; //第一象限
let bPoint = [-4.0, 3.0, 0.0, w]; //第二象限
let cPoint = [-5.0, -6.0, 0.0, w]; //第三象限
let dPoint = [7.0, -8, 0.0, w]; //第四象限
let aPositionVal = new Float32Array([...aPoint, ...bPoint, ...cPoint, ...dPoint]);
let lineBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer); //绑定顶点坐标数据缓冲
gl.bufferData(gl.ARRAY_BUFFER, aPositionVal, gl.STATIC_DRAW);
let aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition); //启用顶点坐标数据数组
//给管线指定顶点坐标数据
gl.vertexAttribPointer(aPosition, 4, gl.FLOAT, false, 0, 0);
//aColor赋值
let aColorVal = [1.0, 0.0, 0.0, 1.0];
let aColor = gl.getUniformLocation(program, 'aColor');
//uniform vec4=>uniform4f
gl.uniform4f(aColor, ...aColorVal);
//-----执行绘制-----
//画线
gl.drawArrays(gl.LINES, 0, 4);
//画点
gl.drawArrays(gl.POINTS, 0, 4);
}
</script>
</body>
</html>
drawArrays(mode,first,count)
mode:绘制方式
first:顶点的起始索引
count:顶点数量
绘制方式
gl.POINTS点类，顶点单独绘制gl.LINES线段类，顶点按照顺序两两依次组成多个线段，若顶点数为奇数，自动忽略最后一个点gl.LINE_STRIP线段类，顶点按照顺序两两依次组成一个线段gl.LINE_LOOP线段类，区别于 LINE_STRIP，将最后一个顶点与第一个顶点相连，形成环gl.TRIANGLES三角形类，每三个顶点组成一个三角形gl.TRIANGLES_STRIP三角形类，形成三角形条带，若 N 个顶点，则绘制出 N-2 个三角形gl.TRIANGLE_FAN三角形类，第一个顶点作为中心点，其他作为边缘点，绘制扇形的相邻三角形
缓存区
bindBuffer(target, buffer)
target:目标缓存区
buffer:WebGL 缓存区
bufferData(target, srcData, usage)
target：目标缓存区
srcData：数据源
usage:使用模式
target 目标缓存区
-
gl.ARRAY_BUFFER：包含顶点属性的缓存区，例如顶点坐标、纹理坐标数据或顶点颜色数据。
-
gl.ELEMENT_ARRAY_BUFFER：用于元素索引的缓存区。
WebGL 2 时还可以使用以下值：
-
gl.COPY_READ_BUFFER：用于从一个缓存区对象复制到另一缓存区对象的缓存区。
-
gl.COPY_WRITE_BUFFER：用于从一个缓存区对象复制到另一个缓冲对象的缓存区。
-
gl.TRANSFORM_FEEDBACK_BUFFER：用于变换反馈操作的缓存区。
-
gl.UNIFORM_BUFFER：用于存储统一块的缓存区。
-
gl.PIXEL_PACK_BUFFER：用于像素传输操作的缓存区。
-
gl.PIXEL_UNPACK_BUFFER：用于像素传输操作的缓存区。
usage 使用模式
- gl.STATIC_DRAW：缓存区的内容可能经常使用，但不会经常更改。内容写入缓存区，但不读取。
- gl.DYNAMIC_DRAW：缓存区的内容可能经常使用，并且经常更改。内容写入缓存区，但不读取。
- gl.STREAM_DRAW：缓存区的内容可能不经常使用。内容写入缓存区，但不读取。
WebGL 2 时，还可以使用以下值：
- gl.STATIC_READ：缓存区的内容可能经常使用，但不会经常更改。内容从缓存区读取，但不写入。
- gl.DYNAMIC_READ：缓存区的内容可能经常使用，并且经常更改。内容从缓存区读取，但不写入。
- gl.STREAM_READ：缓存区的内容可能不经常使用。内容从缓存区读取，但不写入。
- gl.STATIC_COPY：缓存区的内容可能经常使用，而不会经常更改。用户既不写也不读内容。
- gl.DYNAMIC_COPY：缓存区的内容可能经常使用，并且经常更改。用户既不写也不读内容。
- gl.STREAM_COPY：缓存区的内容可能经常使用，而不会经常更改。用户既不写也不读内容。
画三角形
<!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" />
<title>使用WebGL绘制三角形</title>
</head>
<body onload="onInit()">
<canvas id="webgl" width="500" height="500"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 aPosition;
void main() {
//顶点位置
gl_Position =aPosition; //vec4(0.0,0.0,0.0,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;//设置精度
uniform vec4 aColor;
void main() {
gl_FragColor=aColor; //vec4(0.0,1.0,0.0,1.0);
}
</script>
<script>
function onInit() {
//获取webgl
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
//-----加载着色器-----
//加载顶点着色器
var vertexShaderSource = document.getElementById('vertexShader').innerText;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//加载片元着色器
var fragShaderSource = document.getElementById('fragmentShader').innerText;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragShaderSource);
gl.compileShader(fragmentShader);
//-----链接程序-----
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//-----基本配置-----
//设置视口
gl.viewport(0, 0, canvas.width, canvas.height);
//设置屏幕背景色RGBA
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST); //开启深度检测
//-----参数赋值----
//aPosition赋值
//点有象限之分的，可正负，范围在[-w,w]之间
//vec4(x,y,z,w)
let w = 10.0;
let aPoint = [1.0, 2.0, 0.0, w];
let bPoint = [-4.0, 3.0, 0.0, w];
let cPoint = [-5.0, -6.0, 0.0, w];
let aPositionVal = new Float32Array([...aPoint, ...bPoint, ...cPoint]);
let lineBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer); //绑定顶点坐标数据缓冲
gl.bufferData(gl.ARRAY_BUFFER, aPositionVal, gl.STATIC_DRAW);
let aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition); //启用顶点坐标数据数组
//给管线指定顶点坐标数据
gl.vertexAttribPointer(aPosition, 4, gl.FLOAT, false, 0, 0);
//aColor赋值
let aColorVal = [1.0, 0.0, 0.0, 1.0];
let aColor = gl.getUniformLocation(program, 'aColor');
//uniform vec4=>uniform4f
gl.uniform4f(aColor, ...aColorVal);
//-----执行绘制-----
//画三角形
gl.drawArrays(gl.TRIANGLES, 0, 3);
}
</script>
</body>
</html>
多边形
<!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" />
<title>使用WebGL绘制多边形</title>
</head>
<body onload="onInit()">
<canvas id="webgl" width="500" height="500"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
attribute vec4 aPosition;
void main() {
//顶点位置
gl_Position =aPosition; //vec4(0.0,0.0,0.0,1.0);
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
precision mediump float;//设置精度
uniform vec4 aColor;
void main() {
gl_FragColor=aColor; //vec4(0.0,1.0,0.0,1.0);
}
</script>
<script>
function onInit() {
//获取webgl
var canvas = document.getElementById('webgl');
var gl = canvas.getContext('webgl');
//-----加载着色器-----
//加载顶点着色器
var vertexShaderSource = document.getElementById('vertexShader').innerText;
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);
//加载片元着色器
var fragShaderSource = document.getElementById('fragmentShader').innerText;
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragShaderSource);
gl.compileShader(fragmentShader);
//-----链接程序-----
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
//-----基本配置-----
//设置视口
gl.viewport(0, 0, canvas.width, canvas.height);
//设置屏幕背景色RGBA
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.enable(gl.DEPTH_TEST); //开启深度检测
//-----参数赋值----
//aPosition赋值
//点有象限之分的，可正负，范围在[-w,w]之间
//vec4(x,y,z,w)
let w = 2.5;
let aPoint = [1.0, 1.0, 0.0, w];
let bPoint = [2.0, 0.0, 0.0, w];
let cPoint = [1.0, -1.0, 0.0, w];
let dPoint = [-1.0, -1.0, 0.0, w];
let ePoint = [-2.0, 0.0, 0.0, w];
let fPoint = [-1.0, 1.0, 0.0, w];
let aPositionVal = [...aPoint, ...bPoint, ...cPoint, ...dPoint, ...ePoint, ...fPoint];
let lineBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, lineBuffer); //绑定顶点坐标数据缓冲
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(aPositionVal), gl.STATIC_DRAW);
let aPosition = gl.getAttribLocation(program, 'aPosition');
gl.enableVertexAttribArray(aPosition); //启用顶点坐标数据数组
//给管线指定顶点坐标数据
gl.vertexAttribPointer(aPosition, 4, gl.FLOAT, false, 0, 0);
//aColor赋值
let aColorVal = [1.0, 0.0, 0.0, 1.0];
let aColor = gl.getUniformLocation(program, 'aColor');
//uniform vec4=>uniform4f
gl.uniform4f(aColor, ...aColorVal);
//-----执行绘制-----
//画多边形
gl.drawArrays(gl.TRIANGLE_FAN, 0, aPositionVal.length / 4);
}
</script>
</body>
</html>
浙公网安备 33010602011771号