webgl学习的第一个案例
·
跟着大佬学习——b站-web图形学工作站
webgl的变换矩阵
webgl绘制点：
1.主要需要渲染一个二维画布，
2.然后获取三维画笔，设置渲染区域，投影区域，
3.创建顶点着色器和片元着色器，将glsl相关字符串与着色器相连接（目前的理解，可能有错），编译着色器，初始化webgl项目，将着色器添加到项目中，连接项目，使用项目
4.绘制
<!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>控制点坐标</title>
<script src="./glMatrix-0.9.6.min.js"></script>
<script>
var webgl;
var projMat4;
//创建单位矩阵
projMat4 = mat4.create()
//模板字符串（顶点着色器）点坐标，投影坐标系
//mat4表示4*4矩阵
var vertex5String = `
attribute vec4 a_position;
uniform mat4 proj;
void main(){
gl_Position =proj* a_position;
gl_PointSize = 60.0;
}
`;
var fragmentString = `
void main(){
gl_FragColor = vec4(0,0,1.0,1.0);
}
`;
function init() {
initWebgl();
initShader();
initBuffer();
draw();
}
//webgl初始化函数
function initWebgl() {
//获取容器
let webglDiv = document.getElementById("webglcanvas")
//获取上下文，即画笔
webgl = webglDiv.getContext("webgl")
//webgl的可视域（原点，x距离，y距离）
webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
//webgl的投影坐标系（距离，投影矩阵）
mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1, 1, projMat4)
}
//shader初始化函数（GPU计算语言）
function initShader() {
//
let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
let fssageder = webgl.createShader(webgl.FRAGMENT_SHADER);
//由于设置webglShader着色器的GLSL的程序代码（shader[着色器对象]，source[GLSL代码的字符串]）
webgl.shaderSource(vsshader, vertex5String);
webgl.shaderSource(fssageder, fragmentString)
webgl.compileShader(vsshader);
webgl.compileShader(fssageder);
let program = webgl.createProgram();
webgl.attachShader(program, vsshader);
webgl.attachShader(program, fssageder);
webgl.linkProgram(program);
webgl.useProgram(program);
webgl.program = program;
}
//数据缓冲区初始化函数
function initBuffer() {
let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0])
//获取着色器中声明的变量，然后对其进行赋值
let aPosition = webgl.getAttribLocation(webgl.program, "a_position")
//为顶点attribute变量赋值([指定待修改顶点attribute变量的存储位置]，[顶点attribute变量的各分量值])
webgl.vertexAttrib4fv(aPosition, pointPosition);
//返回统一变量位置（program,name）
let uniforproj = webgl.getUniformLocation(webgl.program, "proj");
//通过统一变量引用将同一变量值传入渲染管线（uniform的位置，）
webgl.uniformMatrix4fv(uniforproj, false, projMat4);
}
//webgl绘制函数
function draw() {
webgl.clearColor(0.0, 0.0, 0.0, 1.0);
webgl.clear(webgl.COLOR_BUFFER_BIT);
webgl.drawArrays(webgl.POINTS, 0, 1);
}
</script>
</head>
<body onload="init()">
<canvas id="webglcanvas" width="500" height="500"></canvas>
</body>
</html>
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)