原生webgl学习（一）原生WebGL学习和入门引言

曾经终败给现在 2022-05-08 09:33 695阅读 0赞

## 一.笔者自述        ##

对于原生WebGL的学习，相信对于很多搞前端图形开发的小伙伴的痛点是花了很多时间，却收效甚微；好在现在存在诸如Three.js、Babylon.js、cesium.js等功能强大和齐全的WebGL第三方库；有了这些第三方库，我们可以用更少的代码构建出绚丽多彩的网络3D应用；那为什么我们还要学习原生的WebGL，原生的WebGL对于我们来说意味着什么？接下来笔者就以自身的学习经历回答这两个问题：

首先，笔者在学习WebGL是做科研课题的需要，刚开始的时候也是很茫然，不知道怎么学，学了一段时间Three.js，又觉得必须把原生的WebGL学一下，不然不明白Three.js到底是怎么实现的(强迫症患者哈)，于是就学习一段时间的原生WebGL，后来发现用Three.js做科研课题更加合适，里面提供有各种各样的功能，不用自己再去写（ps:如果自己去写这些功能，我可能毕不了业。。。），于是乎我的Three.js越来越进步，用的越来越熟悉；然而，近期身为即将毕业找工作的我，发现很多岗位都要求具备原生的WebGL开发能力，特别是h5渲染引擎的开发，所以峰回路转，我再一次选择学习原生WebGL，于是便决定把自己的学习经历和一些例子分享给广大爱好WebGL开发的道友们，希望我们一起度过原生WebGL的这个劫。

其次，学习原生的WebGL，意味着我们的底层开发能力更上一层楼，如果你再学习一下计算机图形学的相关知识，我们也可以自己动手开发自己的渲染引擎，是不是觉得很高大上？尤其当我们掌握了原生WebGL开发的相关知识，回过头来看哪些第三方库，一切疑惑自然解开了，正所谓“初听不知曲中意， 再听已是曲中人”，你理解了，就自然不会再疑惑它们究竟是怎么实现的。

## 二.WebGL开发需要准备什么 ##

### 1.WebGL简介 ###

关于WebGL的介绍，笔者在很早以前写过一篇基础介绍的文章，可以供大家参考：[关于WebGL的一些基础性介绍][WebGL]。

### 2.开发要求 ###

**编程软件：**这里笔者使用的是WebStorm（看个人习惯，不做强制性要求），由于开发原生WebGL会涉及到着色器的编程，Webstorm提供了一个方便着色器代码编写的插件：[GLSL Support][]；安装好这个插件后，着色器代码的关键字将会带上颜色，与普通变量区分，如下图：

![70][]

要安装这个插件，你可以自己到[官网][GLSL Support]下载然后手动添加到webstorm插件里面，也可以在webstorm的setting(

设置)>Plugins(插件)里面搜索GLSL Support，安装即可。

**运行环境：**对于WebGL的支持程度各大浏览器都不一样，市面上主流的l谷歌、火狐、opera、safari等了浏览器都支持，如下图所示，具体可在：[https://caniuse.com/\#feat=webgl][https_caniuse.com_feat_webgl]获得相关信息。我们可以看到各大浏览器对WebGL的支持情况，谷歌浏览器是支持度最好的，火狐其次；笔者选择了谷歌浏览器，原因是谷歌浏览器调试代码超级方便，而且谷歌浏览器也提供了一个WebStorm调试插件JetBrains IDE Support，可以说给程序的调试带来了极大的方便，这个插件也很好安装，有两个方法：1、上百度搜查并下载，手动拖拽扩展到谷歌浏览器的“扩展程序”里面即可；2、在谷歌应用商店搜索安装（打开谷歌商店需要翻墙）；**等笔者闲暇时间，一定写一篇关于这个插件的调试详细教程分享给大家，请大家多关注我的博客。**

![70 1][]

**编程语言：**HTML、CSS、JavaScript；其中最为重要的是JavaScript，它是WebGL载体语言，就像C++于OpenGL的重要性一样，所以一定要具备一定的javascript编程基础。

### 3.着色器语言：glsl  ###

关于着色器语言的介绍，可以参考：[着色器介绍][Link 1]；而对于着色器的编写一般有三种形式，第一种是将着色器代码单独写在一个文件，顶点着色器可命名为vShader.glsl， 片元着色器可用命名为Shader.glsl；第二种是将着色器代码以定义字符串变量的形式写在javascript代码内；第三种是将着色器代码卸载HTML文档的<script> </script>中间，将其表示为脚本。本教程用的第三种方法，如下图：

![70 2][]

### 4.着色器编译 ###

关于着色器的编译可以参考：[着色器介绍][Link 1]，笔者在这里不再讲详细，直接上本教程要用的着色器创建，编译，链接代码，读者可以根据注释理解哈，在后面的章节我将讲解这个shader.js文件如何用于创建着、编译和链接着色器：

//shader.js
    //创建着色器
    function createShader(gl, type, source) {
        let shader = gl.createShader(type);//创建着色器
        gl.shaderSource(shader, source);//附加着色器源文件到Shader
        gl.compileShader(shader);//编译着色器
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);//判断着色器是是否编译成功
        if(success) {
            return shader;
        } else {
            console.log("着色器创建失败！");
        }
    
        console.log(gl.getShaderInfoLog(shader));//获取着色器信息
        gl.deleteShader(shader);//删除着色器
    }
    
    //链接着色器程序
    function createProgram(gl, vertexShader, fragmentShader) {
        let program = gl.createProgram();//生成程序对象
        gl.attachShader(program, vertexShader);//向程序对象分配着色器
        gl.attachShader(program, fragmentShader);//向程序对象分配着色器
        gl.linkProgram(program);//链接着色器
    
        let success = gl.getProgramParameter(program, gl.LINK_STATUS);//判断着色器是否链接成功
        if(success) {
            return program;
        } else {
            console.log("着色器链接失败！");
        }
    
        console.log(gl.getProgramInfoLog(program));
        gl.deleteProgram(program);
    }
    
    //初始化着色器
    function initShader(gl, vShaderText, fShaderText) {
        let vShader = createShader(gl, gl.VERTEX_SHADER, vShaderText);
        let fShader = createShader(gl, gl.FRAGMENT_SHADER, fShaderText);
    
        return createProgram(gl, vShader, fShader);
    }

希望经过笔者在前面的这么多介绍，大家对WebGL有一个初步的认识，从下一节开始，将带领大家进行一些基础知识的学习和demo的开发。

[WebGL]: https://blog.csdn.net/qq_37338983/article/details/78556042
[GLSL Support]: http://plugins.jetbrains.com/plugin/6993-glsl-support
[70]: /images/20220508/33df920bee7e492e95d9e597caf29ff4.png
[https_caniuse.com_feat_webgl]: https://caniuse.com/#feat=webgl
[70 1]: /images/20220508/6a7b1cb0e76c45258a5b396caa4379f0.png
[Link 1]: https://blog.csdn.net/qq_37338983/article/details/78556063
[70 2]: /images/20220508/fd7a6ab21d514af7b76577a41443651a.png