【前端er入门Shader系列】02—GLSL语言基础

float floatValue = 1.0;

vec4 myVec4 = vec4(1.0);              // myVec4 = {1.0, 1.0, 1.0, 1.0}
vec4 color = vec4(1.0, 1.0, myVec2);
// 向量取值方式
// color.x, color.y, color.z, color.w // xyzw
// color.r, color.g, color.b, color.a // rgba
// color.s, color.t, color.p, color.q // stpq
vec3 myVec3_0 = color.xyz;

// [构造方式1] 矩阵可以由单个标量从左到右进行构造
mat4 m4 = mat4(
  1.0, 2.0, 3.0, 4.0, // 第一列
  0.0, 1.0, 0.0, 0.0, // 第二列
  0.0, 0.0, 1.0, 0.0, // 第三列
  0.5, 0.0, 0.0, 1.0 // 末尾不能带,
);
// [构造方式2] 若只为矩阵构造器提供了一个标量，则该值会构造矩阵对角线上的值
mat4(1.0); // myMat4 = {1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0}
// [构造方式3] 矩阵可以由多个向量构造
vec2 col1 = vec2(1.0, 0.0);
vec2 col2 = vec2(1.0, 0.0);
mat2 matrix2x2 = mat2(coll1, col2);
// 注意，定义的矩阵和实际矩阵是行列转置的关系
// 取值方式
// 获取【第一列】 (1.0, 2.0, 3.0, 4.0)
vec4 v4 = m4[0];
// 获取【第一列第二个】2.0
float m01 = m4[0][1];
// 获取【第一列第二个】2.0
float m01_2 = m4[1].y;
// 注意：不能使用未经const修饰的变量作为索引值
int i = 0;
// 错误 vec4 v4c = m4[i]; // 可以使用 const int i = 0;

uniform sampler2D u_Sampler;

float floatArray[2]; // 数组必须声明长度
vec4 vec4Array[2]; // 不支持多维数组
// 数组不能在声明时一次性初始化，只能显式地对每个元素初始化
vec4Array[0] = vec4(1.0, 2.0, 3.0, 4.0); // 必须由常量表达式初始化
vec4Array[1] = vec4(2.0, 3.0, 4.0, 5.0);

// 定义结构体light，包含两个成员变量，同时声明变量l1(可选)
struct light {
  vec4 color;
  vec3 position;
} l1;
light l2, l3;
l1 = light(vec4(0.0, 0.0, 0.0, 1.0), vec3(8.0, 2.0, 0.0));
vec4 color = l1.color;
// 结构体支持赋值(=)和比较(==和!=)，但不适用含数组或纹理成员的结构体

const vertexShader = /*glsl*/`
attribute vec3 a_position;
void main() {
  float deg = radians(45.0); // 内置函数radians
  mat4 rotateMatrix = mat4(
    cos(deg), sin(deg), 0.0, 0.0, // 内置函数sin/cos
    -sin(deg), cos(deg), 0.0, 0.0,
    0.0, 0.0, 1.0, 0.0,
    0.0, 0.0, 0.0, 1.0
  );
  gl_Position = rotateMatrix * vec4(a_position, 1.0);
}`;

const fragmentShader = /*glsl*/ `
precision mediump float;
// glsl函数，计算两个点的距离
float getDiatance(vec2 p1, vec2 p2) {
  return pow(pow(p1.x - p2.x, 2.0) + pow(p1.y - p2.y, 2.0), 0.5);
}
void main() {
  float x = (gl_FragCoord.x / 400.0 - 0.5) * 2.0;
  float y = (gl_FragCoord.y / 400.0 - 0.5) * 2.0;
  vec3 color1 = vec3(1.0, 1.0, 1.0);
  vec3 color2 = vec3(0.0, 0.0, 1.0);
  float dis = distance(vec2(x, y), vec2(0.0, 0.0));
  /* 条件判断 */
  if (dis > 0.4) {
    gl_FragColor = vec4(color1 - color2, 1.0);
    // 仅适用片元色器，表示放弃当前片元直接处理下一片元
    discard;
  } else {
    gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
  }
  /* 循环 */
  for (int i = 0; i < 10; i++) {
    if (i == 1) {
        continue;
    }
    if (i == 8) {
        break;
    }
  }
}`;

【角度函数】
radians 角度制转孤度制
degrees 弧度制转角度制
【三角函数】
sin 正弦
cos 余弦
tan 正切
asin 反正弦
acos 反余弦
atan 反正切
【指数函数】
pow 开方
exp 自然指数
log 自然对数
exp2 2的x方
log2 以2为底对数
sqrt 开平方
inversesqrt 平开方的倒数
【通用函数】
abs 绝对值
min 最小值
max 最大值
mod 取余数
sign 取下负号
floor 向下取整
ceil 向上取整
clamp 限定范围
mix 线性内插
step 步进函数
smoothstep 艾米内插步进
fract 获取最小数部分
【几何函数】
length 矢量长度
distance 两点间距离
dot 内积
cross 外积
normalize 归一化
reflect 矢量反射
faceforward 使向量"朝前"
【矩阵函数】
matrixCmpMult 逐元素乘法
【矢量函数】
lessThan 逐元素小于
lessThanEqual 逐元素小于等于
greaterThan 逐元素大于
greaterThanEqual 逐元素等于
equal 逐元素等于
notEqual 逐元素不等
any 任一元素为true则为true
all 所有元素为true则为true
not 逐元素取补
【纹理查询函数】
texture2D 在二维纹理中获取纹素
textureCube 在立方体纹理中获取纹素
texture2DProj texture2D 的投影版本
texture2DLod texture2D的金字塔版本
textureCubeLod textureCube的金字塔版本
texture2DProjLod textureCubeLod的投影版本

// 常量限定
const vec4 red = vec4(1.0, 0.0, 0.0, 1.0);

export default function initShaders(gl, vertexSource, fragmentSource) {
  const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexSource);
  const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentSource);
  // 将创建的顶点着色器和片元着色器绑定到着色程序上，顶点着色器和片段着色器需要成对提供
  const program = createProgram(gl, vertexShader, fragmentShader);
  if (program) {
    gl.useProgram(program);
    gl.program = program; // 挂载gl对象上方便获取
    return true;
  } else {
    console.log("create program error.");
    return false;
  }
}

/**
 * 创建着色器
 * @param gl WebGL上下文
 * @param type 着色器类型
 * @param source 着色器文本
 */
function createShader(gl, type, source) {
  // 根据 type 创建着色器
  const shader = gl.createShader(type);
  // 绑定内容文本 source
  gl.shaderSource(shader, source);
  // 编译着色器（将文本内容转换成着色器程序）
  gl.compileShader(shader);
  // 获取编译后的状态
  const state = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  if (state) {
    return shader;
  } else {
    // 获取当前着色器相关信息
    const error = gl.getShaderInfoLog(shader);
    console.log("compile shaders error: " + error);
    // 删除失败的着色器
    gl.deleteShader(shader);
    return null;
  }
}

/**
 * 创建着色程序
 * @param gl WebGL上下文
 * @param vertexShader 顶点着色器对象
 * @param fragmentShader 片元着色器对象
 */
function createProgram(gl, vertexShader, fragmentShader) {
  // 创建着色程序
  const program = gl.createProgram();
  if (!program) return null;
  // 使着色程序获取顶点/片段着色器
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  // 将两个着色器与着色程序绑定
  gl.linkProgram(program);
  const state = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (state) {
    return program;
  } else {
    const error = gl.getProgramInfoLog(program);
    console.log("link program error: " + error);
    gl.deleteProgram(program);
    gl.deleteShader(vertexShader);
    gl.deleteShader(fragmentShader);
    return null;
  }
}

import initShaders from "./initShaders.js";
const gl = document.getElementById("webgl").getContext("webgl");
const vertexShader = `
void main() {
  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
  gl_PointSize = 10.0;
}
`;
const fragmentShader = `
void main() {
  gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`;
initShaders(gl, vertexShader, fragmentShader);
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

import initShaders from "./initShaders.js";
const gl = document.getElementById("webgl").getContext("webgl");
const vertexShader = `
attribute vec2 a_position; // 从js接收顶点位置数据
uniform float u_size; // 从js接收顶点尺寸数据
varying vec2 v_ab; // 向片段着色器提供 vec2 两个数据

void main() {
    v_ab = a_position;
    gl_Position = vec4(a_position, 0.0, 1.0); // 顶点坐标需要接收vec4
    gl_PointSize = u_size;
}
`;
const fragmentShader = `
precision mediump float; // 精度设置
uniform vec3 u_color; // 从js接收片段颜色数据
varying vec2 v_ab; // 从顶点着色器接收 vec2 两个数据

void main() {
    gl_FragColor = vec4(u_color, 1.0);
    // gl_FragColor = vec4(v_ab, 0.0, 1.0);
}
`;
initShaders(gl, vertexShader, fragmentShader);

// 【1】attribute (js=>vertexShader)
const a_position = gl.getAttribLocation(gl.program, "a_position");
gl.vertexAttrib2f(a_position, 0.5, 0.5);

// 【2】uniform (js=>vertexShader/fragmentShader)
const u_color = gl.getUniformLocation(gl.program, "u_color");
gl.uniform3f(u_color, 1.0, 0.0, 0.0);
const u_size = gl.getUniformLocation(gl.program, "u_size");
gl.uniform1f(u_size, 10.0);

// 【3】varying (vertexShader=>fragmentShader)

gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.POINTS, 0, 1);

gl.uniform4f(vertexColorLocation, Math.random(), Math.random(), Math.random(), 1.0);
gl.uniform4fv(vertexColorLocation, [Math.random(), Math.random(), Math.random(), 1.0]);