绘制点
- 效果
- 代码
- 过程问题
-
- [1、WebGL: INVALID_OPERATION:useProgram: program not valid](#1、WebGL: INVALID_OPERATION:useProgram: program not valid)
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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;
var projMat4 = mat4.create()
// 顶点着色器
var vertexString = `
attribute vec4 a_posiiton;
uniform mat4 proj;
void main(){
gl_Position=proj*a_posiiton;
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的上下文
webgl = webglDiv.getContext("webgl")
// 设置webgl的视觉区域
webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight)
// 设置webgl的投影
mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
}
// shader初始化函数
function initShader() {
let vsshader = webgl.createShader(webgl.VERTEX_SHADER)
let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER)
webgl.shaderSource(vsshader, vertexString)
webgl.shaderSource(fsshader, fragmentString)
// 将shader编译进行打包
webgl.compileShader(vsshader)
webgl.compileShader(fsshader)
let program = webgl.createProgram()
webgl.attachShader(program, vsshader)
webgl.attachShader(program, fsshader)
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_posiiton")
webgl.vertexAttrib4fv(aPosition, pointPosition)
let uniformproj = webgl.getUniformLocation(webgl.program, "proj")
webgl.uniformMatrix4fv(uniformproj, false, projMat4)
}
// webgl的绘制函数
function draw() {
webgl.clearColor(0.0, 0.0, 0.0, 1.0)
// 颜色检测
webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT)
webgl.drawArrays(webgl.POINTS, 0, 1)//0为索引，1为绘制的数量
}
</script>
</head>
<body onload="init()">
<canvas id="webglCanvas" width="500" height="500"></canvas>
</body>
</html>过程问题
1、WebGL: INVALID_OPERATION:useProgram: program not valid
解决：函数中加分号
