这是我参与「第四届青训营 」笔记创作活动的第16天

引言

我们知道canvas、svg等是2D绘图的。主流的3D开发使用的是c++，但是随着技术的发展，JavaScript目前已经是无孔不入了，three.js就是使用JavaScript进行3d绘图的框架了，而three.js是对webgl进行封装的，所以，实际上webgl是3D绘图的基础，但我们使用three.js开发会更加高效。

1.什么是WebGL？

普通网页组成成分：HTML、CSS、JavaScript

WebGL网页组成成分：HTML5、JavaScript和GLSL ES(着色器语言 OpenGL ES)

WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集，也就是专门用于Web页面的OpenGL

2.如何利用webgl绘制一个点

要使用webgl进行绘图就必须使用着色器，在代码中，着色器是一字符串的形式‘嵌入’在JavaScript文件中的，在程序运行前它就已经设置好了。

顶点着色器：用来描述顶点的特性（如位置、颜色等）的程序。顶点是指二维或三维中的一个点。

片元着色器：进行逐片元处理过程的程序。片元是一个webgl中的术语，你可以理解为像素（图片的单元）。

/*顶点着色器*/
var VSHADER_SOURCE = 
'void main() {\n'+
'gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n'+
'gl_PointSize = 10.0;\n'+
'}\n'
/*片元着色器*/
var FSHEADER_SOURCES = 
'void main() {\n'+
'gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);\n'+
'}\n'

3、WebGL特点与优势

1、WebGL内嵌在浏览器中，不需要安装插件和库就可以直接使用

2、由于WebGL基于浏览器，不是基于操作系统。所以可以直接在多种平台运行WebGL程序

3、WebGL程序由HTML和JavaScript文件组成，可以直接发送给对方在浏览器中展示

4、不需要搭建开发环境，可以直接通过文本编辑器开发

5、由于WebGL继承自OpenGL，所以OpenGL相关资料都可以拿来参考

总结

WebGL是一门非常强大的语言，也是一门需要花费大量精力去掌握的语言，随着5G时代的来临，工业4.0的到来，智慧城市的创建，物联网的快速发展，智能可视化的兴起等这些契机的出现，三维图形展示与WebGL必将越来越受重视，越来越多的被使用。

今天介绍了一些WebGL的相关知识，WebGL还有许多内容值得关注。 一起打卡学习吧！！！

烟火向星辰，所愿皆成真！