今天本想偷个懒不发文的,在朋友圈看下到下几句话,还是忍不住,看来我得把自己的位定好,坚定不移.
程序员:你是什么BUG!
前面两周我们学习的是 GLSL ES 语法相关的内容,今天换一个角度学习WebGL,了解如何在浏览器中使用原生 JavaScript 创建 WebGL 着色器程序。
色器程序分为顶点着色器和片元着色器,一个是用于描述绘图的位置和大小,一个是用于描述绘图的颜色。我们从零开始,在浏览器中使用 WebGL API 创建一个着色器程序,先看一下大概的流程:
1.获取 WebGL 上下文对象
2.创建 shader 对象
3.创建 program 对象
下同看详细步骤:
<canvas id="webgl" width="400" height="400">
</canvas>
在JS代码中通过 id 获取 canvas 元素,然后在canvas元素中获取 WebGL 上下文,代码如下:
var canvas = document.getElementById('webgl');
//获取webgl上下文
var gl = canvas.getContext('webgl');
注意,在不同的浏览器中 webgl 上下文名字可能不同,上面代码仅在 Chrome 中测试通过。
有了上面的 gl 对象就可以使用 WebGL 相关的 API 来创建Shader,首先创建的是顶点着色器,代码如下:
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
非常简单一行代码就创建了一个顶点着色器shader,使用gl.createShader时需要传入着色器类型,就两种:
然后使用 gl.shaderSource 函数将 顶点着色器代码与 vertexShader 对象关联,并编译:
gl.shaderSource(vertexShader, 'void main() { ... }');
gl.compileShader(vertexShader);
我们的着色器代码有可能会出现语法错误,可以使用 gl.getShaderParameter 函数检查 shader 的编译状态是否有错:
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
//如果出错,使用 gl.getShaderInfoLog 获取错误提示
var error = gl.getShaderInfoLog(vertexShader);
console.log('Failed to compile shader: ' + error);
gl.deleteShader(vertexShader);s
return null;
}
getShaderParameter 如果返回false,表示出错,可使用 gl.getShaderInfoLog 获取错误提示,同时删除 vertexShader 对象,注意需要使用 gl.deleteShader() 来删除。
创建片元着色器 framgentShader,流程相同就不再缀述。
有了 vertexShader 和 framgentShader 两个 shader 对象,现在将它们关联起来,成为一个 完整的着色器程序,需要创建一个 program 对象:
var program = gl.createProgram();
将顶点、片元着色器附加到 program 对象上:
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
最后进行链接,并使用此着色器程序:
gl.linkProgram(program);
gl.useProgram(program);
链接时也可能会出现错误,可使用 gl.getProgramParameter 查看 program 对象的链接状态:
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
var error = gl.getProgramInfoLog(program);
console.log('Failed to link program: ' + error);
//出错了,将shader和program都删除
gl.deleteShader(vertexShader);
gl.deleteShader(fragmentShader);
gl.deleteProgram(program);
}
至此 WebGL 着色器程序创建完成,不过目前着色器还没开始工作,我们下篇继续!
本文分享自 Creator星球游戏开发社区 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!