原生webgl学习（一） 原生WebGL学习和入门引言 - CSDN博客

笔者自述 对于原生WebGL的学习，相信对于很多搞前端图形开发的小伙伴的 ... 不知道怎么学，学了一段时间Three.js，又觉得必须把原生的WebGL学一下， ... 原生webgl学习（一）原生WebGL学习和入门引言 coder_路远 于 2018-10-1020:34:31 发布 9569 收藏 26 分类专栏： 原生WebGL基础学习 原生webgl学习 文章标签： webgl基础入门 glslsupport 原生webgl 着色器编译 版权声明：本文为博主原创文章，遵循CC4.0BY-SA版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_37338983/article/details/83001741 版权 原生WebGL基础学习 同时被2个专栏收录 10篇文章 13订阅 订阅专栏 原生webgl学习 10篇文章 13订阅 订阅专栏 一.笔者自述      对于原生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提供了一个方便着色器代码编写的插件：GLSLSupport；安装好这个插件后，着色器代码的关键字将会带上颜色，与普通变量区分，如下图：      要安装这个插件，你可以自己到官网下载然后手动添加到webstorm插件里面，也可以在webstorm的setting( 设置)>Plugins(插件)里面搜索GLSLSupport，安装即可。

运行环境：对于WebGL的支持程度各大浏览器都不一样，市面上主流的l谷歌、火狐、opera、safari等了浏览器都支持，如下图所示，具体可在：https://caniuse.com/#feat=webgl获得相关信息。

我们可以看到各大浏览器对WebGL的支持情况，谷歌浏览器是支持度最好的，火狐其次；笔者选择了谷歌浏览器，原因是谷歌浏览器调试代码超级方便，而且谷歌浏览器也提供了一个WebStorm调试插件JetBrainsIDESupport，可以说给程序的调试带来了极大的方便，这个插件也很好安装，有两个方法：1、上百度搜查并下载，手动拖拽扩展到谷歌浏览器的“扩展程序”里面即可；2、在谷歌应用商店搜索安装（打开谷歌商店需要翻墙）；等笔者闲暇时间，一定写一篇关于这个插件的调试详细教程分享给大家，请大家多关注我的博客。

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

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

本教程用的第三种方法，如下图： 4.着色器编译 关于着色器的编译可以参考：着色器介绍，笔者在这里不再讲详细，直接上本教程要用的着色器创建，编译，链接代码，读者可以根据注释理解哈，在后面的章节我将讲解这个shader.js文件如何用于创建着、编译和链接着色器： //shader.js //创建着色器 functioncreateShader(gl,type,source){ letshader=gl.createShader(type);//创建着色器 gl.shaderSource(shader,source);//附加着色器源文件到Shader gl.compileShader(shader);//编译着色器 letsuccess=gl.getShaderParameter(shader,gl.COMPILE_STATUS);//判断着色器是是否编译成功 if(success){ returnshader; }else{ console.log("着色器创建失败！"); } console.log(gl.getShaderInfoLog(shader));//获取着色器信息 gl.deleteShader(shader);//删除着色器 } //链接着色器程序 functioncreateProgram(gl,vertexShader,fragmentShader){ letprogram=gl.createProgram();//生成程序对象 gl.attachShader(program,vertexShader);//向程序对象分配着色器 gl.attachShader(program,fragmentShader);//向程序对象分配着色器 gl.linkProgram(program);//链接着色器 letsuccess=gl.getProgramParameter(program,gl.LINK_STATUS);//判断着色器是否链接成功 if(success){ returnprogram; }else{ console.log("着色器链接失败！"); } console.log(gl.getProgramInfoLog(program)); gl.deleteProgram(program); } //初始化着色器 functioninitShader(gl,vShaderText,fShaderText){ letvShader=createShader(gl,gl.VERTEX_SHADER,vShaderText); letfShader=createShader(gl,gl.FRAGMENT_SHADER,fShaderText); returncreateProgram(gl,vShader,fShader); } 希望经过笔者在前面的这么多介绍，大家对WebGL有一个初步的认识，从下一节开始，将带领大家进行一些基础知识的学习和demo的开发。

coder_路远 关注 关注 7 点赞 踩 0 评论 26 收藏 打赏 扫一扫，分享内容 点击复制链接 专栏目录 参与评论 您还未登录，请先 登录 后发表或查看评论 相关推荐 Unity3D官方教程：WebGL（一） 路见不平先甩锅 02-23 10万+ Unity3D官方教程：WebGL 什么是UnityWebGL? 创建一个UnityWebGL项目 网页高性能图形编程（四）-WebGL颜色-使用着色器绘制多顶点颜色的三角图形&操作部骤-顶点着色器和片段着色器&着色器编译羽图像绘制-vertexAttribPointer方法 weixin_44867717的博客 08-01 298 第5章-WebGL颜色 01-操作步骤介绍 颜色添加步骤 在顶点着色器中定义一个接收外部传入颜色值的属性变量a_Color和用于传输获取到的颜色值变量v_Color 在片段着色器中定义一个同一类型和名称的v_Color变量接收传顶点传入的值。

重新传入到顶点坐标和颜色值的类型化数组 将数组值传入缓存中并取出，赋值给顶点的两个变量 接收缓存值并绘制图形和颜色 vertexAttribPointer方法 参数 说明 第1个参数 指定待分配attribute变量的存储位置 [WebGL入门]二十七，多纹理 lufy小屋 10-19 1万+ 多纹理进行渲染的时候应该注意的是，指定正确的纹理单位进行数据的处理，这就足够了。

其他的细节，主要是activeTexture函数和uniform1i函数的使用方法，这几个不出错的话，之后就可以在着色器一侧使用自己喜欢的图片了。

这次只是单纯的在着色器中将两个纹理数据进行相乘运算，然后各个纹理数据分别进行处理，就可以进行完全不一样的渲染，没有使用固定渲染管道，而是使用GLSL中的程序员自定义着色器，这一点很刺激吧。

HTML5原生WebGL开发系列教程 孙群 05-02 1万+ 1.OpenGL中的坐标变换、矩阵变换2.OpenGLES2.0编程基础3.原生WebGL简单Demo4.在WebGL中使用drawElements绘图5.WebGL不同几何图形的渲染方式6.使用自定义glTranslate与glRotate7.原生WebGL+ArcGISJSAPI绘制旋转的地球8.WebGL矩阵、Camera基础操作9.WebGL使用一张贴图纹理绘制地球 《WebGL编程指南》WebGL简介 xx笔记 03-24 702 WebGL概述 WebGL，是一项用来在网页上绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。

WebGL程序的结构 WebGL页面包含了三种语言：HTML5、JavaScript、GLSLES（openGL着色器语言）。

如下图所示： WebGL和OpenGL WebGL的技术规范继承自免费和开源的OpenGL标准，而OpenGL是一种用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口，是在个人计算机上使用最广泛的两种三维图形渲染技术之一，另一种是Direct3D。

在某种意义上，WebG WebGL学习之路 最新发布 GIS小虫的博客 04-07 3421 在这里记录一下个人的WebGL学习过程     作为GIS开发工程师四年，技术栈和项目经验都有了一定积累，感觉到了一个瓶颈。

经过一些讨论和思考，认为可以向两个方向发力，后端方向的空间大数据处理，前端方向的三维。

后端方向苦于以往接触的都是面向政府单位的项目，数据量和并发量都不大，后端能力也比较薄弱，所以先学习前端方向的三维开发。

    GIS领域的三维开发有两个方向，一种基于桌面端三维引擎如UE、unity，另一种基于Web. WebGL自学课程(1)：原生WebGL简单Demo 孙群 06-26 7599 以下是一个原生WebGL简单Demo： World html,body,div{margin:0;padding:0} attributevec3aPosition; uniformmat4uModelView WebGL入门(一)-初识WebGL 点燃火柴的博客 02-28 1024 初识WebGL1.什么是WebGL2.WebGL起源3.WebGL特点与优势4.总结 1.什么是WebGL 用一句话总结一下，WebGL就是可以帮助你在浏览器上创建和渲染三维图形的一个API集 2.WebGL起源 如上图所示，现在WebGL有两个版本，分别是WebGL1.0和WebGL2.0，它们都起源于OpenGL1.5，但WebGL1.0基于OpenGLES2.0，OpenGLES2.0又是OpenGL2.0的子集 而WebGL2.0基于OpenGLES3.0，OpenGLE webgl学习之认识webgl m0_63275099的博客 10-25 137 1.什么是webgl webgl是一项用来在网页上面绘制和渲染复杂三维图形，并允许用户与之进行交互的技术。

它实际上是从opengl的一个特殊版本OpenGLES2.0中派生出来的。

关系见下图（摘自WebGL编程指南） webgl包含了三种语言。

HTML5（超文本标记语言）、JavaScript和GLSLES。

下图展示了传统网页（左侧）和webgl网页（右侧）的软件结构。

2.如何利用webgl绘制一个点 ... webGL入门(1) 静儿的博客 08-04 78 1.什么是webGL? webgl就是在网页上绘制和渲染图形(3D图形),并允许用户与之进行交互; 2.我为什么学webGL? 游戏开发中优化性能，它在web上可以开发直接查看效果，便于转化到游戏开发中理解。

3.最简单的webGL程序(清空绘图区)