WebGL中如何初始化顶点着色器和片源着色器，和添加到程序中
1.WebGL中如何初始化顶点着色器和片源着色器，和添加到程序中
这个流程主要分为着几步.
- 创建对应的着色器(顶点着色器，片源着色器), createShader()
- 设置着色器的数据源(设置着四器的GLSL程序代码), shaderSource()
- 编译创建的着色器(使其成为为二进制数据，然后就可以被WebGLProgram对象所使用) ，compileShader()。
- 添加到WebGL 渲染上下文中，attachShader()
- 链接，从而完成为程序的片元和顶点着色器准备GPU代码的过程。
- 将创建的着色器添加到当前的渲染状态中。 useProgram()
创建对应的着色器(顶点着色器，片源着色器), createShader()
const shader = gl.createShader(type);
// type就是你要创建的是，顶点着色器,还是,片源着色器。
// 参数为gl.VERTEX_SHADER 或 gl.FRAGMENT_SHADER两者中的一个。
设置着色器的数据源(设置着色器的GLSL程序代码), shaderSource()
gl.shaderSource(shader, source);
// shader 我们创建的着色器
// source 包含GLSL程序代码的字符串。
编译创建的着色器(使其成为为二进制数据，然后就可以被WebGLProgram对象所使用)
gl.compileShader(shader); // 编译已经创建和设置的着色器。
所以以上三步就是创建一个着色器。接下来就是合成到一起。
2.创建着色器的过程。
function createShader(gl, type, source) {
const shader = gl.createShader(type); // 创建对应的着色器
gl.shaderSource(shader, source); // 设置着色器的GLSL程序代码。
gl.compoleShader(shader); // 开始编译对应的着色器。
这里编译时，可能会编译出错，使用我们需要获取编译的信息。使用getShaderParameter。
const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS); // gl.COMPILE_STATUS:着色器是否编译成功
// gl.DELETE_STATUS:标示着色器是否被删除
// gl.SHADER_TYPE: 标示着色器类型，是顶点着色器(gl.VERTEX_SHADER)还是片段着色器(gl.FRAGMENT_SHADER)
if (!compiled) {
当编译失败了，我们就需要查看失败的原因。getShaderInfoLog
以及将其删除掉。
const err = gl.getShaderInfoLog(shader);
console.log(`编译失败的原因时:${err}`)
然后再需要将其删除掉。deleteShader
gl.deleteShader(shader); // 删除着色器
return null;
}
return shader
}
上面的createShader函数就用来创建着色器
添加到WebGL 渲染上下文中，attachShader()
gl.attachShader
第一个参数 : 一个 WebGLProgram 对象。
第二个参数 : 才是我们使用createShader函数创建的着色器对象。
1.创建 WebGLProgram对象。
const program = gl.createProgram()
gl.attachShader(program, shader);
链接。
gl.linkProgram(program);
此时我会查看链接的状态。是成功还是失败。
const linked = gl.getProgramParameter(program, gl.LINK_STATUS);
// getProgramParameter方法返回WebGLProgram的信息。
// gl.LINK_STATUS获取链接状态。
if (!linked) {
如果链接失败，就查看失败的原因，并且删除掉。
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
}
// 成功的话。就将其添加到当前渲染状态中
将创建的着色器添加到当前的渲染状态中。 useProgram()
gl.useProgram(program);
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>Documenttitle>
<style>
canvas {
width: 400px;
height: 400px;
}
style>
head>
<body>
<canvas id="canvas">canvas>
<script>
var VSHADER_SOURCE =
'void main() {\n' +
' gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' + // Set the vertex coordinates of the point
' gl_PointSize = 10.0; return;\n' + // Set the point size
'}\n';
// Fragment shader program
console.log(VSHADER_SOURCE, 'VSHADER_SOURCE')
var FSHADER_SOURCE =
'void main() {\n' +
' gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); return;\n' + // Set the point color
'}\n';
// const FSHADER_SOURCE = `
// void main() {
// gl_FragColor = vec4(1, 0, 0, 1)
// }
// `
// const d = `void main() {
// gl_Position = vec4(0, 0, 0, 1);
// gl_PointSize = 10;return;}`
// console.log(d, 'd3333')
function loadShader(gl, type, source) {
const shader = gl.createShader(type); //
gl.shaderSource(shader, source);
gl.compileShader(shader);
const compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
return shader;
}
function createProgram(gl, vshader, fshader) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader)
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
console.log(program, 'program');
gl.linkProgram(program);
var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
console.log(linked, 'linkedlinked');
if (!linked) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
gl.useProgram(program)
console.log('sdf')
// return program
}
const gl = canvas.getContext('webgl')
createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE)
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);
// console.log(gl.VERTEX_SHADER, 'gl')
script>
body>
html>
正确的效果为:
