WebGL01

WebGL是什么

我们通过 js + GLSL 就可以实现在浏览器中实现2D和3D效果。

WebGL三要素

了解WebGL的运行机制。

canvas画布元素
JavaScript
GLSL ES（着色器语言）

canvas元素的width、height属性指定其绘制图像的区域。

WebGL程序

WebGL并没有直接提供对应的绘图api供我们调用，需要我们自己编写一个着色器的程序，也就是GLSL。

获取对应WebGL的绘图环境

// html 标签
<canvas id="canvas"></canvas>

// 获取 canvas 
const canvas = document.querySelector('#canvas')
// 获取 WebGL 的绘图上下文（传入的参数是 webgl
const gl = canvas.getContext('webgl')

js相关逻辑创建顶点着色器、片元着色器、创建GLSL着色程序

// 创建顶点着色器
const vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexCode)
// 创建片元着色器
const fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentCode)
// 创建 GLSL 着色程序
createProgram(gl, vertexShader, fragmentShader)

GLSL ES 着色器

const vertexCode = `
  void main () {
    // 顶点坐标
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    // 顶点渲染像素大小
    gl_PointSize = 24.0;
  }
`
const fragmentCode = `
  void main () {
    // 顶点颜色——蓝色
    gl_FragColor = vec4(0.0, 0.0, 0.9, 1.0);
  }
`

着色器代码最后会交由GPU进行执行。示例绘制一个点

var canvas = document.getElementById("canvas");

canvas.width = canvas.height = 600;

const gl = canvas.getContext("webgl");
const vertexCode = `
  void main () {
    // 顶点坐标
    gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
    // 顶点渲染像素大小
    gl_PointSize = 10.0;
  }
`;

const fragmentCode = ` void main () {
    // 顶点颜色——蓝色 (R, G, Bule, A)
    gl_FragColor = vec4(0.0, 1.0, 0.0, 1.0);
  }
`;

//着色器代码的初始化
// 绘制实现

// var canvas = document.getElementById("redFn").addEventListener("click",()=>{
//   gl.clearColor(1.0,0.0,0.0,1.0)
//   gl.clear(gl.COLOR_BUFFER_BIT)
// });

function createShader({ glslCode, type }) {
  // 创建对应类型着色器
  const shader = gl.createShader(type);
  // 传入对应着色器代码
  gl.shaderSource(shader, glslCode);
  // 编译着色器
  gl.compileShader(shader);
  return shader;
}

// 创建顶点着色器
const vertexShader = createShader({
  glslCode: vertexCode,
  type: gl.VERTEX_SHADER
});
// 创建片元着色器
const fragmentShader = createShader({
  glslCode: fragmentCode,
  type: gl.FRAGMENT_SHADER
});

// 创建着色器程序
const program = gl.createProgram();
// 分别添加两个着色器 gl.attachShader
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);

// 链接两个着色器
gl.linkProgram(program);
gl.useProgram(program);

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

WebGL坐标系

其坐标原点在中心位置，表示单位使用-1到1以对应画布的像素尺寸一半为基准比例。

写在最后

未完待续…
希望大家好好生活，健康快乐。