webgl学习备份
- 设置画布颜色
const ctx = document.getElementById('canvas');
const gl = ctx.getContext('webgl');
gl.clear(gl.COLOR_BUFFER_BIT);
gl.clear(gl.DEPTH_BUFFER_BIT);
gl.clear(gl.STENCIL_BUFFER_BIT);
- 着色器
javascript
读取相关着色器信息,传递给 webgl
并进行使用。
- 顶点着色器:顶点是指二维三维空间中的一个点,可以理解为一个坐标
- 片元着色器:片元可以理解为一个个像素
function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
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);
return program;
}
- 绘制一个点
const ctx = document.getElementById('canvas');
const gl = ctx.getContext('webgl');
const VERTEX_SHADER_SOURCE = `
void main(){
gl_Position = vec4(1.0, 1.0, 1.0, 1.0); // vec4(x,y,z,w);
gl_PointSize = 30.0;
}
`;
const FRAGMENT_SHADER_SOURCE = `
void main(){
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)
gl.drawArrays(gl.POINTS, 0, 1);