大家好,起学我是起学前端西瓜哥。
本文讲解如何用 WebGL 绘制一个点。起学
WebGL 是起学浏览器支持的一种绘制图形的 API,是起学一个标准。我们可以通过 Canvas 元素 在网页的起学特定区域绘制 2D 和 3D 图形。
相比 Canvas 2D,起学WebGL 利用了 GPU 的起学计算能力,绘制速度更快,起学性能更优。起学
WebGL 基于 OpenGL 发展而来,起学某种意义上就是起学 Web 版的 OpenGL,但是阉割了一些功能。
更具体点,是来自 OpenGL 的一个特殊版本 OpenGL ES 2.0,全称为 OpenGL for Embedded Systems,“用于嵌入式系统的 OpenGL”。
使用 WebGL,除了浏览器正统脚本语言 JavaScript,还要使用一种 名为 GLSL ES 的类 C 着色器语言。
将代码描述的效果真正绘制到屏幕上的过程,称为 渲染管线。
管线(pipeling)这个词有点奇怪,因为它没有对应的比较好的翻译,是一个直译。
管线指的是 数据处理的流水线,这个流水线上有很多处理器,会将数据一步步地进行处理,最终得到一个成品。渲染管线,就是渲染过程中执行的一个个步骤。
渲染管线的流程为:
这四个流程中,我们能操作的是第 1 和第 4 步。
Demo 地址:
https://codesandbox.io/s/webgl-hui-zhi-yi-ge-dian-2-bpwz8p。
下面我们来讲解如何绘制一个点。
首先是 WebGL 绘制的地方 Canvas。我们需要在 HTML 中添加一个 Canvas 元素,然后在 JavaScript 中获取这个元素,并拿到 WebGL 渲染上下文。
const canvas = document.querySelector("canvas");
const gl = canvas.getContext("webgl");
如果你用过 Canvas 2D,它对应的上下文变量命名通常是 ctx(context)。但对于 WebGL,我们通常会跟随 OpenGL 的习惯,将变量命名为 gl(OpenGL 的 gl,Graphics Library 的意思)。
接着是顶点着色器。
顶点着色器,用于设置图形的顶点相关的信息,设置好顶点,WebGL 才能确定好图形的位置等信息,好绘制出来。
着色器的代码是在 JavaScript 脚本中,用字符串来写 glsl。
先是顶点着色器。
const vertexShaderSrc = `
void main() {
gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
gl_PointSize = 20.0;
}
`;
gl_Postion 和 gl_PointSize 是 WebGL 顶点着色器的内部变量,用于设置点的位置和点的大小。
vec4 表示矢量类型,同时也是内置函数,调用它就能得到一个 vec4 类型。
这里设置了顶点的位置 (0.0, 0.0, 0.0, 1.0)。WebGL 使用的是三维坐标系,并使用右手坐标系,就是 x 轴指向右侧,y 轴指向上方,z 轴指向观察者。原点就在画布的正中央。
三维中,一个点只要三个维度 x、y、z 就够了,但引入了第四个维度 w,从笛卡尔坐标升维为齐次坐标,作用是方便做矩阵变换和透视投影。齐次坐标 (x, y, z, w)
等价于三维坐标 (x/w, y/w, z/w)
。w 通常会设置为 1。
需要注意的是,着色器中的的数值需要加上小数点,表示用的是浮点数类型。这和 JavaScript 随便写都会变成浮点数不一样。
然后是片元着色器。
顶点着色器确定图形的点的位置,片元着色器则是用于设置多个顶点围成的图形的像素点的 颜色。
const fragmentShaderSrc = `
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
gl_FragColor 是片元着色器的内部变量,这里设置为红色。
因为是入门文章,细节不展开讲了。
总之下面这段代码,将前面声明的顶点着色器和片元着色器的两段源码,进行了编译。
/**** 渲染器生成处理 ****/
// 创建顶点渲染器
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSrc);
gl.compileShader(vertexShader);
// 创建片元渲染器
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSrc);
gl.compileShader(fragmentShader);
// 程序对象
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);
gl.program = program;
gl.clearColor(0, 0, 0, 1);
gl.clear(gl.COLOR_BUFFER_BIT);
首先第一行代码将背景色设置为黑色。当然你也可以设置为其他颜色,比如绿色 (0, 1, 0, 1)。
第二行是清空缓存区,填充背景色。
gl.drawArrays(gl.POINTS, 0, 1);
该 API 用于调用绘制指令,有三个参数:
绘制结果如下:
下一篇画个三角形。
责任编辑:姜华 来源: 前端西瓜哥 WebGLCanvas(责任编辑:知识)
春光科技(603657.SH):拟使用不超2.亿元闲置自有资金进行委托理财
价格差200 Find N3 Flip和Mate 60 Pro怎么选
深高速(00548.HK)年度净利润减少19.88% 末期现金股息每股0.43元
康佳新一代Mini LED电视R7发布 搭载JBL Pro音响
三季度基金代销机构公募基金保有规模前100强名单 银行C位不变
Japan to downgrade coronavirus classification on May 8: NHK