【备战春招】第1天 WebGL入门篇

课程名称：WebGL+Three.js 入门与实战，系统学习 Web3D 技术

课程章节：2-3 webgl 入门 - 给画布换个颜色

课程讲师： yancy

课程内容：

1、webgl是如何在浏览器中实现的：在浏览器中，webgl都是通过canvas来实现的；

2、如何创建一个wabgl对象实例：先创建一个canvas元素，通过document获取canvas实例对象，再通过

Canvas.getContext('webgl')来创建一个webgl实例对象；

3、清空canvas的颜色：也可以当作重新设置canvas的颜色，r=red，g=green，b=blue，a=alpha；

4、清空缓冲区的颜色：webgl.clear(buffer)

深度缓冲区存储的是像素的深度值，在深度测试时，确定物体遮挡关系，看下哪些像素是需要绘制的（被遮挡的像素不参与绘制）。
模板缓冲区可以理解为：通过一个模具进行绘制，就像模板喷字一样，不在模板中的像素不参与绘制。

https://coding.imooc.com/learn/questiondetail/jxkpVYB8VQe6rwRQ.html

清除缓冲区和清除颜色要搭配使用，下图是配对表

代码示例：

const ctx = doucment.getElmentById('canvas');//获取canvas实例对象
const gl = ctx.getContext('webgl');//获取webgl实例对象
gl.clearColor(1.0,1.0,1.0,1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

课程收获：

本节课是webgl的入门内容，通过学习了解了如何在html中创建webgl实例，以及webgl的使用方法，给webgl的深入学习做了一个开端。