下面是js源代码和着色器代码
const ctx = document.getElementById('canvas') const gl = ctx.getContext('webgl') //顶点着色器 const VERTEX_SHADER_SOURCE = ` void main(){ //要绘制的坐标 x,y,z,w(齐次座标,x/w,y/w,z/w） gl_Position = vec4(0.0,0.0,0.0,1.0); //点的大小 gl_PointSize = 30.0; } ` //片元着色器 const FRAGMENT_SHADER_SOURCE = ` void main(){ gl_FragColor = vec4(1.0,0.0,0.0,1.0); } ` //创建着色器 const vertexShader = gl.createShader(gl.VERTEX_SHADER) const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) //指定顶点着色器源码 gl.shaderSource(vertexShader,VERTEX_SHADER_SOURCE) //指定片元着色器源码 gl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE) //编译着色器 gl.compileShader(vertexShader) gl.compileShader(fragmentShader) //创建程序对象 const program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) gl.useProgram(program) //执行绘制 gl.drawArrays(gl.POINTS,0,1)
运行后控制台警告报错：WebGL: INVALID_OPERATION: useProgram: program not valid
经过排查后发现 void main() 函数中一定要有分号，采用严格模式写法。
改完后完整代码：
const ctx = document.getElementById('canvas') const gl = ctx.getContext('webgl') //顶点着色器 const VERTEX_SHADER_SOURCE = ` void main(){ //要绘制的坐标 x,y,z,w(齐次座标,x/w,y/w,z/w） gl_Position = vec4(0.0,0.0,0.0,1.0); //点的大小 gl_PointSize = 30.0; } ` //片元着色器 const FRAGMENT_SHADER_SOURCE = ` void main(){ gl_FragColor = vec4(1.0,0.0,0.0,1.0); } ` //创建着色器 const vertexShader = gl.createShader(gl.VERTEX_SHADER) const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER) //指定顶点着色器源码 gl.shaderSource(vertexShader,VERTEX_SHADER_SOURCE) //指定片元着色器源码 gl.shaderSource(fragmentShader,FRAGMENT_SHADER_SOURCE) //编译着色器 gl.compileShader(vertexShader) gl.compileShader(fragmentShader) //创建程序对象 const program = gl.createProgram() gl.attachShader(program, vertexShader) gl.attachShader(program, fragmentShader) gl.linkProgram(program) gl.useProgram(program) //执行绘制 gl.drawArrays(gl.POINTS,0,1)
