开课吧-高薪webGL工程师2022最新完结无密 webgl

download：开课吧-高薪webGL工程师2022最新完结无密 WebGL是什么？
WebGL百度百科给出的解释是WebGL是一个3D绘图协议，而维基百科给出的解释是一个JavaScript API。由于WebGL技术旨在帮助我们在不使用插件的情况下，在任何兼容的web浏览器中开发交互式2D和3D web效果，因此我们可以将其理解为帮助我们开发3D网页的绘图技术。当然，最底层是JavaScript API。
WebGL发展历史
WebGL的发展可以追溯到2006年。WebGL源于Mozilla员工Vladimir Forge Sivic的一个Canvas 3D实验项目，Canvas 3D的原型于2006年首次展示。这项技术于2007年底在FireFox和Opera浏览器中实现。2009年初，Khronos集团联盟成立了WebGL。最初的工作成员包括苹果、谷歌、Mozilla、Opera等等。2011年3月，WebGL 1.0发布。WebGL 2的开发始于2013年，最终于2017年1月完成。火狐51、Chrome 56、Opera 43中首次支持WebGL 2。
总帐中的基本概念
WebGL运行在电脑的GPU上，所以需要使用能在GPU上运行的代码。这样的代码需要提供成对的方法，其中一个叫做顶点着色器，另一个叫做切片着色器，使用GLSL语言。连接顶点着色器和切片着色器的方法称为着色程序。
顶点着色器
着色器的作用是计算顶点的位置，即提供顶点在裁剪空间中的坐标值。
请参考webglfundamentals一文了解该模块的内容。
片段着色器
切片着色器的功能是计算图形元素的颜色值。我们可以粗略地将切片着色器理解为网页中的像素。
数据采集模式
前面我们提到了顶点着色器和片段着色器的概念，顶点着色器和片段着色器都需要相应的数据才能运行。接下来，让我们看看着色器获取数据的四种方式:
和属性缓冲。
缓冲区是发送到GPU的二进制数据序列。通常，缓冲数据包括位置、方向、纹理坐标、顶点颜色值等。当然，你可以根据自己的需要存储任何你想要的数据。
属性用于解释如何从缓冲区获取所需的数据，并将其提供给顶点着色器。
全局变量
全局变量在着色器运行之前分配，在运行过程中全局有效。全局变量在一个绘制过程中将相同的值传递给着色器。
静脉
纹理是一个数据序列，在着色程序运行时可以随意读取其中的数据。一般来说，我们主要以纹理形式存储图像数据，但是除了颜色数据之外，您还可以根据自己的喜好存储其他数据。
可变变量
变量是顶点着色器将值传递给片段着色器的一种方式。
总结
WebGL只关心两件事:裁剪空间的坐标值和颜色值。要使用WebGL，只需要给它提供这两样东西。所以我们通过提供两个着色器来做这两件事，一个顶点着色器提供裁剪空间坐标值，另一个切片着色器提供颜色值。
WebGL的工作原理
了解了WebGL的一些基本概念后，我们可以看看WebGL在GPU上做了什么。之前我们已经了解到，WebGL在GPU上的工作主要分为两部分，即顶点着色器所做的工作(将顶点转换为裁剪空间坐标)和片段着色器所做的工作(根据顶点着色器的计算结果绘制像素)。如果我们需要画一个三角形，此时在GPU上做的工作就是先调用顶点着色器三次，计算三角形的三个顶点在裁剪空间坐标系中的对应位置，并通过变量gl_Position保存在GPU中，然后调用切片着色器计算每个顶点的颜色值，并通过变量gl_FragColor将对应的颜色值保存在GPU中。完成所有这些工作后，我们得到了绘制三角形所需的像素，最终得到了栅格化的三角形。
原生WebGL API绘制三角形
我们之前已经学习了WebGL的历史、基本概念和工作原理，接下来是我们实践真理的时候了，那么我们就来看看如何通过WebGL在一个网页中绘制一个简单的三角形。我们知道WebGL作为一种3D绘图技术，本身就是依靠HTML5中的canvas元素而存在的，所以在正式开始绘图之前，我们需要做一系列的准备工作:
首先我们需要创建一个canvas元素作为画三角形所需的画布，并完成浏览器对canvas元素兼容性的测试。
函数webglInit () {
const canvasEl = document . createelement(' canvas ')；//画布元素创建
canvasel . width = document . body . client width；//设置画布画布的宽度
canvasel . height = document . body . client height；//设置画布canvas高度
document . body . append(canvasEl)；//将创建的canvas画布添加到页面的body元素下。
//接下来需要判断浏览器对WebGL的兼容性。如果浏览器不支持WebGL，那么我们就不需要继续了。
如果(！canvasEl.getContext("webgl") &&！canvasel . get context(" experimental-web GL "){
alert("您的浏览器不支持web GL ")；
返回；
}
//如果浏览器支持Webgl，那么我们将获取Webgl的context对象，并将其复制到变量GL中。
const context =(canvasel . get context(" web GL "))
？canvasEl.getContext("webgl ")
:get context(" experimental-web GL ")；
/*
设置viewport context.viewport (x，y，width，height)；
x:用于设置视口左下角的水平坐标。默认值:0
y:用于设置视口左下角的垂直坐标。默认值:0
宽度:用于设置视口的宽度。默认值:画布宽度
高度:用于设置视口的高度。默认值:画布的高度
当您第一次创建WebGL上下文时，视口大小与画布大小相匹配。但是，如果再次更改canvas的大小，需要告诉WebGL context设置一个新的viewport，所以此处可以省略这行代码，作为第一次创建它。
*/
context.viewport(0，0，context.canvas.width，context . canvas . height)；
返回上下文；
}
复制代码
画布准备好了，下一步是画三角形。就像我们平时画画一样，需要准备画三角形所需的顶点，也就是顶点着色器，以及对应的填充颜色，也就是面片着色器。
const GL = webglInit()；
//创建顶点着色器语法gl.createShader(type)其中type是枚举值gl之一。顶点着色器或gl。片段着色器
const v shader = GL . create shader(GL。顶点着色器)
//编写顶点着色器的GLSL代码语法gl.shaderSource(shader，source)；shader-用于设置程序代码的webglShader (shader对象)源-包含GLSL程序代码的字符串
gl.shaderSource(vShader，
属性vec4 v _ position
void main() {
gl Position = v position//设置顶点位置
}
`)
Gl.compileShader(vShader) //编译着色器代码
const f shader = GL . create shader(GL。片段_着色器)
gl.shaderSource(fShader，' s
精密中间浮动；
统一vec4 f _ color
void main() {
gl FragColor = f color//设置单元格颜色。
}
`)//编写片段着色器代码

Gl.compileShader(fShader) //编译着色器代码复制代码我们已经完成了顶点着色器和片段着色器的配置，做好了渲染前的所有准备工作。接下来，我们需要创建一个程序来连接我们的顶点着色器和片段着色器，以完成最终的三角形渲染。//创建一个程序来连接顶点着色器和片段着色器。 const program = gl.createProgram() Gl.attachshader (program，v shader)//添加顶点着色器 Gl.attachshader (program，f shader)//添加片段着色器 Gl.linkProgram(program) //连接程序中的着色器。Gl.useProgram(program) //告诉WebGL使用这个程序进行渲染const color = GL . getuniformlocation(program，' f_color ') //获取f_color变量的位置 Gl.unifor4F (color，0.93，0，0.56，1)//设置其值const position = GL . getattributelocation(program，' v_position ') //获取v_position的位置 const pBuffer = gl.createBuffer() //创建一个顶点缓冲区对象并返回其id，用来放三角形顶点数据， bindBuffer(gl。ARRAY_BUFFER，pBuffer) //将此顶点缓冲区对象绑定到gl。数组缓冲区 //GL上的后续操作。ARRAY_BUFFER将被映射到这个缓存。 gl.bufferData(gl。ARRAY_BUFFER，new Float32Array([ 0, 0.5, 0.5, 0, -0.5, -0.5 ])，//三角形的三个顶点 //因为数据会送到GPU，所以为了节省数据解析，这里用Float32Array直接传递数据。 Gl。STATIC_DRAW //表示缓冲区的内容不会频繁改变。 ) //将顶点数据添加到新创建的缓存对象中GL . vertexattributepointer(//告诉OpenGL如何从缓冲区获取数据位置，//顶点属性的索引 2，//组件的数量，必须是1，2，3或4。我们只提供X和y。 Gl。FLOAT，//每个元素的数据类型 True，//是否规格化到特定范围，浮点型数据的设置无效。 0，stride step数组中一行的长度，0表示数据紧密，没有空隙。让OpenGL决定具体的步长。 0 // offset字节偏移量，它必须是类型的字节长度的倍数。 ) GL . enablevertexattribarray(position)； //打开属性变量amount，以便顶点着色器可以访问缓冲区数据Gl.clearColor(0，1，1，1) //设置颜色缓冲区清空时的颜色值。 GL . Clear(GL . color _ buffer _ bit)//清除颜色缓冲区，即清除画布。 //语法gl.drawArrays(mode，first，count)；模式-首先指定如何绘制图元-指定从哪个点开始绘制计数-指定要绘制多少个点。 gl.drawArrays( gl。三角形，0，3)

复制代码
用HTML文件运行上述代码后，我们可以在网页中看到如图所示的三角形，三角形大小是根据浏览器窗口大小自适应的。
可以看到，我们仅仅画了一个简单的三角形，就写出了一长串JS代码。如果真的用原生的WebGL API写一个动态的3D交互网页，开发成本是极其昂贵的。
WebGL原生API开发的缺点
上面这个native WebGL API绘制三角形的例子充分向我们展示了使用native WebGL API开发3D交互式网页存在的问题。虽然原生WebGL API可以满足任何场景的开发需求，但是其开发和学习成本极其昂贵。对于WebGL的初学者来说是极其不友好的，而且我们需要配置顶点着色器来计算绘制顶点的位置，这需要开发者有一定的数学基础来熟悉矩阵运算，以及空间几何的概念来熟悉3D物体的空间分布。灯光、纹理等的设计。场景的色彩配置也需要我们自己的见解。所以为了降低初学者的难度，下面我就介绍一些WebGL开发的常用框架。
WebGL开发的几种框架
三. js Three.js是WebGL的综合库，应用广泛。美中不足的是Three.js库中没有全面详细的官方文档，对用户不是特别友好。
铯. js 铯. js是一个专门用于3D地图开发的WebGL库。它拥有完善的3D地图开发API，对于需要开发3D地图的开发者来说是个不错的选择，但是对于其他场景的应用开发不是很全面。
巴比伦. js Babylon.js是国外广泛使用的WebGL库。有兴趣的小伙伴可以自己了解一下，这里就不详细介绍了。
【开课吧-高薪webGL工程师2022最新完结无密】Three.js是在浏览器中运行的3D引擎。你可以用它来创建各种3D场景。同时Three.js也是一个综合性的WebGL库。如果需要开发3D地图网页，可以使用铯. js，这是一个专门用于地图开发的WebGL库。Babylon.js是国外比较流行的WebGL库。
基于Three.js绘制旋转立方体

用Three.js画旋转立方体的第一步和原生WebGl一样。第一步是准备Three.js运行的环境。 //创建渲染器变量来存储渲染器对象 var渲染器； initthree函数用于初始化Three.js运行所需的环境。函数initThree() { //就像构建原生WebGL环境的过程一样，Three.js也需要先设置canvas元素的大小。 width = document . getelementbyid(' canvas-frame ')。clientWidth//将width属性设置为浏览器窗口的宽度。 height = document . getelementbyid(' canvas-frame ')。客户端高度；//将height属性设置为浏览器窗口高度。 //创建新的WebGL渲染器，并将其赋给渲染器变量渲染器=新三。WebGLRenderer({ 抗锯齿:正确 }); //将画布大小设置为浏览器窗口大小 renderer.setSize(宽度，高度)； //将画布元素装载到页面上 document . getelementbyid(' canvas-frame ')。appendChild(renderer . DOM element)； //将空画布的颜色设置为白色 renderer . setclearcolor(0x ffffff，1.0)； }