WebGL入门（一）

前言：webGL编程入门，里面的代码引入了依赖，所以经常会报错某函数undefined，可以下载其依赖文件后再按教程来。
1，webGL是基于OpenGL的一个特殊版本，OpenGL ES 2.0
2，从2.0开始，OpenGL支持一个特性：可编程着色器方法。成为webGL的核心
3，编写着色器的语言：GLSL ES类似于C语言。
4，webGL页面包含三种语言：HTML5，JavaScript，GLSL ES。
5，

6，webGL是使用一个变量存储代码，内置在javascript种进行使用，所以webGL网页种任然使用html和js就足够。但其实以glsl为后缀的文件是有的哦。
7，一个关键的标签<canvas>，若没有我webGL，则仅能绘制二维，不能三维。
8，webGL的关键是着色器，要想在js中使用着色器，需要初始化：
///教程代码，预定义

//（2）第二步 链接

function initShaderProgram(gl, vsSource, fsSource) { //此函数将会调用下面编译函数，完成链接link功能，初始化着色器；

const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource); //得到一个已经编译过的着色器；

const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);

const shaderProgram = gl.createProgram(); // 创建着色器工程

gl.attachShader(shaderProgram, vertexShader); //将着色器添加到工程中

gl.attachShader(shaderProgram, fragmentShader);

gl.linkProgram(shaderProgram); //链接此工程

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {

alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));

return null;

}

return shaderProgram;

}

//（1）第一步，编译

function loadShader(gl, type, source) { //函数作用：

const shader = gl.createShader(type); //创建着色器的类型，顶点着色器还是片元着色器；

gl.shaderSource(shader, source); //将源码发送到创建的着色器shader中；

gl.compileShader(shader); //编译 着色器工程；

if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { //这里是编译阶段，若编译成功则不会报错；getShaderParameter是内置函数；

alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));

gl.deleteShader(shader);

return null;

}

return shader; //若成功，则返回编译成功的着色器；

}

//（3）第三步，利用预定义，实例化顶点着色器；

const VSHADER_SOURCE = `

attribute vec4 aVertexPosition;

uniform mat4 uModelViewMatrix;

uniform mat4 uProjectionMatrix;

void main() {

gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;

}`;

const FSHADER_SOURCE = `

void main() {

gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);

}`;

function main() {

const canvas = document.querySelector("#webgl");

// Initialize the GL context

const gl = canvas.getContext("webgl");

// Only continue if WebGL is available and working

if (!gl) {

alert("Unable to initialize WebGL. Your browser or machine may not support it.");

return;

}

if(!initShaderProgram(gl,VSHADER_SOURCE,FSHADER_SOURCE)){

console.log('falied to initialize shaders.');

}

// Set clear color to black, fully opaque

gl.clearColor(0.0, 0.0, 0.0, 1.0);

// Clear the color buffer with specified clear color

gl.clear(gl.COLOR_BUFFER_BIT);

gl.drawArrays(gl.POINTS,0,1);

}
9，着色器包括顶点着色器和片元着色器；

10，着色器位于webGL系统中运行，而不是JAVASCRIPT中。
11，webGL中有些变量是内置的，就是说直接给它赋值就行，系统知道它是用来干嘛的，比如：
 vec4  gl_position用来定义定点的坐标；
 float  gl_PointSize用来定义点的大小（像素数）。
12，上面的vec4和float是数据类型，vec4表示四个数据类型为float的矢量，就是说它的数据必须是类似（1.0，3.1，2.2，6.7）这样。现在我们只有x,y,z坐标，所以需要将包含4个浮点数的vec4矢量，转化为包含三个浮点数的vec变量，这里提供vec4()函数来解决：
vec4  vec4(1.0,2.0,3.0,4.0)   ;  这样的结果实际上是将齐次坐标(1.0，2.0，3.0，4.0)  转化为（1.0/4.0  ，2.0/4.0，3.0/4.0）。
齐次坐标（x,y,z,w)等价于三维坐标(x/w,y/w,z/w);这个非常重要，记住它。
13，片元着色器中唯一的内置变量：vec4  gl_FragColor。
14，gl.drawArrays(gl.POINTS,0,1);这个函数第一个参数有：gl.POINTS，gl.LINES，gl.LINE_STRIPS等等等，0表示从第0个点开始绘制，1表示只绘制一个点。第三个参数1，表示顶点着色器执行1次，每次处理一个顶点。执行完毕顶点着色器后开始执行片元着色器。
15，在渲染的时候需要用到坐标系，这里是笛卡尔坐标系（三维坐标系）：
z轴正方向就是从电脑屏幕射到你的眼睛。z轴负方向就是你的眼睛往电脑看的方向。（俗称观察者方向）

16，顶点着色器定义变量有个存储限定符attribute，该类型被用来从外部向顶点着色器内传输数据，仅仅顶点着色器可以使用。
使用的时候：
在顶点着色器中定义：
attribute   vec4  variable0；
void main(){
  gl_position =   variable0 ;
}
在js代码中向顶点着色器传递attribute值：
var   variable0 = gl.getAttribLocation(gl.program, 'variable0');   //获取attribute的存储位置。
gl.vertexAttrib3f(variable0，0.0，0.1，0.2）；
17，上面提到，使用attribute自动获取变量，给顶点着色器赋值，但是传递给它的时候，是需要辅助函数的：
在顶点着色器中代码:  获取从外部传来的st
var  vs=`
attribute vec2 st;
varying vec2 v_st;
void main()
{
v_st = st;   //给st取个别名
}`
在片元着色器中代码：
var fs = `
varying vec2  v_st ;  //获取来自顶点着色器的变量
void main(){
materialInput.st = v_st;     
}'
在  a.js  中使用：也就是外部，此时应该从这里向vs中传递st的值
var sources = `
czm_material czm_getMaterial(czm_materialInput materialInput) {
czm_material material = czm_getDefaultMaterial(materialInput);  
vec2 st = materialInput.st;
}`
class  rada{
constructor(lon){   
var  materi = new  Material({
     fabric: {
         source:  sources,
          }
})
var cir1 = new GeometryInstance({
geometry: cylinder,
modelMatrix: Transforms.eastNorthUpToFixedFrame(
Cartesian3.fromDegrees(...lon)) 
});
}
在 b.js 中初始化类：
var  example = new  rada([121,55,77]);   // lon =   [121,55,77]
总结这个st的数据流通路线：
b.js  -->a.js -->顶点着色器-->片元着色器

其中里面有个很关键的语句：Cartesian3.fromDegrees(...lon))  ，这里将b.js传递过来的数据接收到了，可是它怎么做到再从a.js传递给顶点着色器？而且默认的，st变量就是表示坐标了？这里就是需要我们自己去手动定义内置函数了，我们可以在源码里添加方法，设置st这个变量专门用来接收来自Cartesian3.fromDegrees（）函数传递过来的参数，这样就承上启下，数据就流通了。
17，uniforms类似于JavaScript全局变量。所有的像素点的值都是相同的。
18,