WebGL 探秘 (2)

可能开始有些内容是重复的没为题，大家就当复习一下，我也提出少量新的内容

const gl = canvas.getContext("webgl");

通过调用 canvas 的 getContext 方法会返回一个 WebGLRenderingContext 对象，这是一个提供 webgl 接口方法的对象，假如浏览器不支持 webgl 会返回一个 null，
我们可以通过判断 gl 来判断能否浏览器支持 webgl

if(!gl){
alert(“您的不支持 webGL”)
}

这个方法主要是清除屏幕使用，下面是将屏幕设置为黑色，我们在做动画和游戏是，在绘制每一帧前可能都需要清一下屏幕

gl.clearColor(0.0, 0.0, 0.0, 1.0);

仅仅调用 clear 是无法是实现清屏

// Clear the color buffer with specified clear color  gl.clear(gl.COLOR_BUFFER_BIT);

webgl 所有静态变量都可以通过访问 gl 来获取。
这里有两种方式供 clear 使用 COLOR_BUFFER_BIT 和 DEPTH_BUFFER_BIT

我们想象一下，要绘制一个图片，图片是由一个一个的顶点组成的，那么我们需要数据来形容这些顶点，而后将形容数据传入渲染引擎进行渲染。这是我在开始之前一点认识。

shader

什么是 shader 呢？ shader 的用途是什么，可以带着这两个问题进行简单理解 shader。shader 可以简单了解着色器，我们通常考虑材质通常只会考虑颜色或者文理而忽略了光和材质对
每一个 shader 都是一个小程序，看 glsl 代码这里一个 main 函数，

• 根据 shader 类型创立 shader
• 让后把程序文本作为资源写入 shader

有两种类型的 shader ，这里是个人的他们了解，了解有限随后会不断刷新我对这两 shader 的认识

• 顶点 shader : 用于定义点的位置，以及其变形
• fragment shader : 定义顶点的颜色

我们看两个 shader 文件

precision mediump float;

attribute vec2 vertPosition;
attribute vec3 vertColor;

varying vec3 fragColor;

void main()
{
fragColor = vertColor;
gl_Position = vec4(vertPosition, 0.0, 1.0);
}

这里返回值 gl_Position 用于定义位置，所以返回 vec4 类型的位置信息值，我理解暂时也不多，随后我会分享相关内容。大家暂时有一个印象。这里大家注意到了有 main 函数，说明这是一个可执行的程序，我们

precision mediump float;

attribute vec3 vertColor;
varying vec3 fragColor;

void main()
{
gl_FragColor = vec4(fragColor, 1.0);
}

这个 fragment 返回的颜色信息数据。1. 引入 shader 程序以文本形式引用var vertexShaderText =[    'precision mediump float;',    '',    'attribute vec2 vertPosition;',    '',    'void main()',    '{',    'gl_Position = vec4(vertPosition, 0.0, 1.0);',    '}'].join('\n');

也可以用新语法来写方便多了

const vertexShaderText1 =`    precision mediump float;    attribute vec2 vertPosition;    void main()    {        gl_Position = vec4(vertPosition, 0.0, 1.0);    }`

2. 创立 shader

var vertexShader = gl.createShader(gl.VERTEX_SHADER);var fragmentShader =  gl.createShader(gl.FRAGMENT_SHADER);

这里我们创立两个类型 shader 分别属 vertexShader 和 fragmentShader

3. 为 shader 指定程序文本，将

gl.shaderSource(vertexShader,vertexShaderText);gl.shaderSource(fragmentShader,fragmentShaderText);

4. 而后开始编译 shader

gl.compileShader(vertexShader);gl.compileShader(fragmentShader);

我们需要判断一下 shader 能否正常，这两个可以写在一个方法里

if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(vertexShader));    gl.deleteShader(vertexShader);    return;  }

if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {    alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(fragmentShader));    gl.deleteShader(fragmentShader);    return;  }