WebGL入门（一）绘制一个点
源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./glMatrix.min.js"></script>
</head>
<body>
<canvas id="webglCanvas" width="500" height="500"></canvas>
<script>
var webgl // 全局声明webgl
var projMat4 // 全局声明投影矩阵
var projMat4 = mat4.create() // 创建一个4*4的矩阵
var vertexString = `
attribute vec4 a_Position;
uniform mat4 proj;
void main() {
gl_Position = proj * a_Position;
gl_PointSize = 60.0;
}
` // 顶点着色器字符串
var fragmentString = `
precision mediump float;
void main() {
gl_FragColor = vec4(0, 1.0, 1.0, 1.0);
}
` // 片元着色器字符串
// 入口初始化函数
function init(){
initWebgl()
initShader()// 初始化着色器
initBuffer()// 数据缓冲区
draw()// 绘制
}
// webgl初始化
function initWebgl(){
let webglDiv = document.getElementById('webglCanvas')
webgl = webglDiv.getContext('webgl')
webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.height) // 设置视口,四个参数分别是x,y,width,height
mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1, 1, projMat4) // 设置正交投影矩阵
}
// 初始化着色器,shader初始化函数
function initShader(){
let vertexShader = webgl.createShader(webgl.VERTEX_SHADER) // 创建顶点着色器
let fragmentShader = webgl.createShader(webgl.FRAGMENT_SHADER) // 创建片元着色器
webgl.shaderSource(vertexShader, vertexString) // 顶点着色器绑定字符串
webgl.shaderSource(fragmentShader, fragmentString) // 片元着色器绑定字符串
webgl.compileShader(vertexShader) // 编译顶点着色器
webgl.compileShader(fragmentShader) // 编译片元着色器
let program = webgl.createProgram() // 创建着色器程序
webgl.attachShader(program, vertexShader) // 顶点着色器绑定到着色器程序
webgl.attachShader(program, fragmentShader) // 片元着色器绑定到着色器程序
webgl.linkProgram(program) // 链接着色器程序
webgl.useProgram(program) // 使用着色器程序
webgl.program = program // 将着色器程序绑定到webgl上
}
// 数据缓冲区初始化函数
function initBuffer(){
let pointPosition = new Float32Array([100.0, 100.0, 0.0, 1.0]) // 创建一个点的位置
let aPosition = webgl.getAttribLocation(webgl.program, 'a_Position') // 获取顶点着色器中的a_Position变量
let buffer = webgl.createBuffer() // 创建缓冲区对象
webgl.bindBuffer(webgl.ARRAY_BUFFER, buffer) // 绑定缓冲区对象
webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW) // 上传数据到缓冲区
webgl.vertexAttribPointer(aPosition, 4, webgl.FLOAT, false, 0, 0) // 将缓冲区数据绑定到a_Position
webgl.enableVertexAttribArray(aPosition) // 启用顶点属性数组
let uniforproj = webgl.getUniformLocation(webgl.program, 'proj') // 获取顶点着色器中的proj变量
webgl.uniformMatrix4fv(uniforproj, false, projMat4) // 将投影矩阵传入顶点着色器,三个参数分别是变量,是否转置,矩阵
}
// 绘制函数
function draw(){
webgl.clearColor(0.0, 0.0, 0.0, 1.0) // 设置清空颜色
webgl.clear(webgl.COLOR_BUFFER_BIT) // 清空颜色缓冲区
webgl.drawArrays(webgl.POINTS, 0, 1) // 绘制点,三个参数分别是绘制类型,起始位置,顶点数量
}
init()
</script>
</body>
</html>绘图效果：
原文地址：https://blog.csdn.net/Ian1025/article/details/142433120
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！