webGl shader的学习记录(二)js 与(glsl语言) OpenGL ES之间如何进行交互？及其如何在js中对vertexShader与fragmentShader进行赋值

 再上一个的章节之中我们知道，着色的书写分两个着色器（顶点着色器与片元着色器），从而结合成为一个可以使用的单独使用的着色器的程序。

下面我们将会接触到的是，如何使用js 与(glsl语言) OpenGL ES之间进行交互。

在了解两者之间如何通讯的时候，我们需要了解一些定义。这些定义出来的数据，可以是的glsl与js进行交互。

attribute变量： attribute变量是只能在vertexShader中使用的变量。（它不能在fragment shader中声明attribute变量，也不能被fragment shader中使用）如：顶点坐标，法线，纹理坐标，顶点颜色等。

uniform变量：uniform变量一般用来表示：变换矩阵，材质，光照参数和颜色等信息。fragmentShader就是这个定义的

既可以在顶点着色器中定义，也可以在片元着色器中定义。

varying变量 ：可以简单的理解为可以是的vertexShader与fragmentShader之间进行交互，因此varying变量在vertexShader和fragment shader二者之间的声明必须是一致的

上面的三个定义的变量，你可以去看下 webgl一些变量 这个文章中会有例子

下面我们就看一下：如何是的js 与 glsl之间进行交互

你需要先看下最下面的代码，这个就是我们今天学习使用到的例子

js 与(glsl语言) OpenGL ES之间如何进行交互

我们看下 vextexShader 的定义

    //设置浮点数精度为中等精度
    precision mediump float;
    //接收点在 canvas 坐标系上的坐标 (x, y)
    attribute vec2 a_Position;
    //接收 canvas 的宽高尺寸
    attribute vec2 a_Screen_Size;
    void main(){
        //start 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       vec2 position = (a_Position / a_Screen_Size) * 2.0 - 1.0;
       position = position * vec2(1.0, -1.0);
       gl_Position = vec4(position, 0, 1);
       //end 将屏幕坐标系转化为裁剪坐标（裁剪坐标系）
       //声明要绘制的点的大小。
       gl_PointSize = 10.0;
    }

我们看了上面的代码，就会发现在mian() 函数中 gl_Position与gl_PointSize 被赋予了值，而gl_Position更是被变量赋值。我想你大概明白些了，既然被变量赋值了，那我们直接修改变量，不就达到了对webgl（gl_Position直接决定webgl中显示出来的图形的坐标）的赋值了交互更改了吗！

我们看到下面的代码直接进行的gl_Position的数据修改。你会发现是attribute型的

    //接收点在 canvas 坐标系上的坐标 (x, y)
    attribute vec2 a_Position;
    //接收 canvas 的宽高尺寸
    attribute vec2 a_Screen_Size;

我们再来看看在js中 有下面的代码。

如果你并不懂 getAttribLoaction 这个api的意思（点击它，你的疑问会得到解决）

 //找到顶点做着色器程序中的变量 a_Position
    //getAttribLocation(program: WebGLProgram, name: string): GLint;
    //getAttribLocation通过这个方法取到相关Attribute的相关参数
    let a_Position = gl.getAttribLocation(program,'a_Position');
    //找到顶点做着色器程序中的变量 a_Screen_Size
    //getAttribLocation通过这个方法取到相关Attribute的相关参数
    let a_Screen_Size = gl.getAttribLocation(program,'a_Screen_Size');
    console.log(a_Position,a_Screen_Size);
    //找到片元着色器的变量 u_colo;
    let u_Clolor = gl.getUniformLocation(program,'u_Color');
    //为顶点着色器中的 a_Screen_Size 传递 canvas 的宽高信息
    //通过这个指令传递相传递相关参数a_Screen_Size
    gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);
    this.clearcanvas();
    let points = [];

上面的代码中，你会发现，js通过getAttribLoaction这个API去访问了vertexShader与fragmentShader的上面我们定义的变量 a_Position， a_Screen_Size；

这样我们就可以js中访问了。通我们可以通过在js中的取到的webgl的相关变量。对这些变量进行赋值，就达到了交互的目的了，既然我们取到了相关的变量，那我们又如何在js中对glsl的代码进行赋值呢？这就是我们下面的问题了

js中对vertexShader与fragmentShader进行赋值

自然是webgl给我们提供了API进行使用了，啊哈哈哈，不需要我们自己从头轮子

下面是两个AIP 这两个API分贝对应了相关的变量修改的方法。

WebGLRenderingContext.vertexAttrib[1234]f[v]()（点击我前去查看） 是 WebGL API 的方法，可以为顶点attibute变量赋值。

The WebGLRenderingContext.uniform[1234][fi][v]()（点击我前去查看） 是 WebGL API的方法，可以为片元uniform比那辆赋值

上面API具体是使用 1234的后缀中的哪一个，这取决你定义的这个定义了的类型 float=1 vuc2=2 vuc3=3 vuc4=4。 

例如 a_Screen_Size

 attribute vec2 a_Screen_Size;

 我们之前在tertexShader中定义的是 vec2的类型，所以我们使用的是vertexAttrib2f的API第一个是参数，后边相关赋值的内容

​​​​​​​ gl.vertexAttrib2f(a_Screen_Size,canvas.width,canvas.height);

好了，到了这里我相信你大概是知道了怎么在js中对着色器进行相关的处理了。然后好好体味下代码是怎么处理的。希望可以帮助到你