WebGL|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 : 用于定义点的位置,以及其变形
- fragment 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);
}
`
- 创建 shader
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader =gl.createShader(gl.FRAGMENT_SHADER);
这里我们创建两个类型 shader 分别属 vertexShader 和 fragmentShader
- 为 shader 指定程序文本,将
gl.shaderSource(vertexShader,vertexShaderText);
gl.shaderSource(fragmentShader,fragmentShaderText);
- 然后开始编译 shader
gl.compileShader(vertexShader);
gl.compileShader(fragmentShader);
【WebGL|WebGL 探秘 (2)】我们需要判断一下 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;
}
推荐阅读
- 关于自我为中心的一点感想
- 无故.
- 致每一个追星的女孩(
- 07/22【晨读感悟】保持好奇心,生活才有无限可能
- 你有自己的交友原则吗?
- (If)|(If) 404 Not Found
- 有多少傻瓜在爱着一个不可能的人
- 第三章你如果不能出众就可能出局(下)感悟
- 我可能不会爱你
- 孩子|孩子 我在你身后支持你