WebGL进阶（五）-可视域

理论基础：

顶点着色器 Vertex Shader

主要是负责处理顶点位置、顶点颜色、顶点向量等顶点的数据；处理一些顶点的变换：例如在进行视图变换和投影变换时MVP矩阵会改变顶点的位置信息。

输入：

顶点着色器输入部分主要是声明：

①储存着每个顶点属性的attribute变量；

②所有顶点都会实现的（例如MVP矩阵、透视变换矩阵等）全局的uniform变量；

③一些会传递给片元着色器的varying变量。

// 变量
attribute vwc3 aVertexPosition; // 顶点位置
attribute vec3 aNormalPosition; // 法线
attribute vec2 aTextureCoord; // uv坐标

varying highp vec2 vTextureCoord; // 顶点着色器传递给片元着色器
varying highp vec3 vFragPos;
varying highp vec3 vNormal;

// 矩阵
uniform mat4 uModelViewMatrix; // 视图变换矩阵
uniform mat4 uProjectionMatrix; // 透视变换矩阵

输出：

①顶点坐标gl_Position；

②给输入部分声明的varying变量赋值；

矩阵运算从右往左运算

vFragPos = aVertexPosition;
vNormal = aNormalPosition;

// 计算点坐标
gl_Position = uProjextionMatrix * uModelViewMatrix * vec4(aVertexPosition,1.0);

vTextureCoord = aTextureCoord;

片元着色器 Fragment Shader

用于颜色、贴图、光照阴影等

//除了上述出现的“着色器不支持高精度，限定浮点类型为中精度”
precision mediump float;

//还有表示支持高精度的：“着色器支持高精度，限定浮点类型为高精度”
precision highp float;

//以及仅支持低精度的：
prcision lowp float; 

输入： 

uniform声明

/声明一个纹理相关的变量，sampler2D 也是一种数据类型
//它是一种取样器类型的变量，该变量对应传入的纹理2D图片的像素数据
uniform sampler2D uSampler;
//Blinn-Phong需要的漫反射项kd、高光项ks、光源位置、相机位置、光强
uniform vec3 uKd;
uniform vec3 uKs;
uniform vec3 uLightPos;
uniform vec3 uCameraPos;
uniform float uLightIntensity;
// 这个TextureSample参数作用应该是：
// 以左上角为原点，通过UV截取图片，如果==1，则正常取值
uniform int uTextureSample; 

 varing变量

//继承varying参数
varying highp vec2 vTextureCoord;
varying highp vec3 vFragPos;
varying highp vec3 vNormal; 

输出： 

一般设置为gl_FragColor

参考：GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili

gl.compileShader(shader), 传递需要编译的着色器，函数实现着色器编译。

gl.getShaderParameter(shader,COMPILE_STATUS),COMPILE_STATUS为：