原生webgl学习(一) 原生WebGL学习和入门引言

一.笔者自述       

 对于原生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的一些基础性介绍

2.开发要求

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

       

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

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

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

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

 

3.着色器语言:glsl 

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

4.着色器编译

关于着色器的编译可以参考:着色器介绍,笔者在这里不再讲详细,直接上本教程要用的着色器创建,编译,链接代码,读者可以根据注释理解哈,在后面的章节我将讲解这个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的开发。

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页