WebGL学习笔记 | 创建着色器程序

0. 前言

今天本想偷个懒不发文的,在朋友圈看下到下几句话,还是忍不住,看来我得把自己的位定好,坚定不移.

程序员:你是什么BUG!

前面两周我们学习的是 GLSL ES 语法相关的内容,今天换一个角度学习WebGL,了解如何在浏览器中使用原生 JavaScript 创建 WebGL 着色器程序。

色器程序分为顶点着色器片元着色器,一个是用于描述绘图的位置大小,一个是用于描述绘图的颜色。我们从零开始,在浏览器中使用 WebGL API 创建一个着色器程序,先看一下大概的流程:

1.获取 WebGL 上下文对象

  • 获取HTML canvas 对象
  • 从 canvas 中获取 WebGL 上下文对象

2.创建 shader 对象

  • 顶点 shader : 创建、关联代码、编译
  • 片元 shader : 创建、关联代码、编译

3.创建 program 对象

  • 创建 program
  • 将顶点、片元 attach 到 program
  • 链接、使用

下同看详细步骤:

1. 获取 WebGL 上下文对象 在 HTML 中创建一个 id 为 webgl 的 <canvas> 标签,大小为400*400

<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 中测试通过。

2. 创建编译shader

有了上面的 gl 对象就可以使用 WebGL 相关的 API 来创建Shader,首先创建的是顶点着色器,代码如下:

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

非常简单一行代码就创建了一个顶点着色器shader,使用gl.createShader时需要传入着色器类型,就两种:

  • VERTEX_SHADER
  • FRAGMENT_SHADER

然后使用 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,流程相同就不再缀述。

3. 创建链接着色器程序

有了 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星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-06-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏公众号文章

如何使用beego快速开发web系统【Golang 入门系列十三】

接着之前的内容,前面已经讲过很多Golang的基础语法,mysql的使用,redis的使用,也讲了orm框架,如何创建一个webapi 服务等等,感兴趣的可以看...

12940
来自专栏Java猫说

Netty自动重连机制的Demo

官方案例地址:https://netty.io/4.1/xref/io/netty/example/uptime/package-summary.html

8120
来自专栏WD学习记录

RestTemplate学习

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

7010
来自专栏毛利学Python

Django项目开发(二)

上次搭建的django环境,这次来真正的实战开发,项目是比较老的图书管理系统,对于django来说只是一个Hello,world的项目,django的世界比你想...

13570
来自专栏JetpropelledSnake

Python学习笔记之使用 python -m SimpleHTTPServer 快速搭建http服务

搭建FTP,或者是搭建网络文件系统,这些方法都能够实现Linux的目录共享。但是FTP和网络文件系统的功能都过于强大,因此它们都有一些不够方便的地方。比如你想快...

13050
来自专栏码神路漫漫

Go 回答之如何阅读 Go 源码

Go 的源码在安装包的 src/ 目录下。怎么看它的源码呢?直接看吧!没人教的情况下,只能自己撸了。当然,这种内容一般也不会有人教。

13330
来自专栏中科院渣渣博肆僧一枚

计算机视觉邻域论文查找方法

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

14320
来自专栏前端一会

webpack4:多页面及分离第三方库和公用文件配置

本篇开始学习webpack打包的构建配置,所用版本为webpack 4.16.1和webpack-cli 3.2.3。

27240
来自专栏前端一会

webpack4:css/sass编译优化分离,处理引用资源

在上篇中,解决了webpack4关于多页面及分离第三方库js和共用自定义库js的配置,本篇将以此为基础继续配置css引入、分离等功能。

29020
来自专栏along的开发之旅

cmake-tutorial cmake入门指引

Below is a step-by-step tutorial covering common build system use cases that CMa...

7520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励