什么是webgl

作者：时间：2023-11-21阅读数：人阅读

webgl是一种3D绘图协议，衍生于 OpenGL ES2.0，可以结合HtmI5和JavaScript 在网页上绘制和渲染二/三维图形

webgl开源框架

1.Three.js : JavaScript 3D WebGL库
2.Babylonjs:Web3D图形引擎
3.KickJs:Web的开源图形和游戏引擎
4.ClayGL:构建可扩展的Web3D应用程序
5PlayCanvas:网络游戏和3D图形引擎
6.WebGLStudiojs和Litescenejs:开源Web 3D图形编辑器和创建器
7.Luma:Uber的3D WebGL可视化库
8A-Frame是用于构建VR(虚拟现实)体验的Web框架

初始化着色器流程

创建着色器对象(gl.createShader())
向着色器对象中填充着色器程序的源代码(gl.shaderSource())
编译着色器(gl.compileShader())
创建程序对象(gl.createProgram)
为程序对象分配着色器(gl.attachShader)
链接程序对象(gl.linkProgram)
使用程序对象(gl.useProgram)

demo案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://blog.csdn.net/lbPro0412/article/lib/index.js"></script>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>

  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')


  // 着色器
  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    // 必须要存在 main 函数
    void main() {
      // 要绘制的点的坐标
      gl_Position = vec4(0.0,0.0,0.0,1.0);
      // 点的大小
      gl_PointSize = 30.0;
    }
  `; // 顶点着色器

  //  gl_Position vec4(0.0,0.0,0.0,1.0)  x, y, z, w齐次坐标 (x/w, y/w, z/w)

  // gl_FragColor vec4(1.0,0.0,0.0,1.0) r, g, b, a
  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器


  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  // 执行绘制

  // 要绘制的图形是什么， 从哪个开始，   使用几个顶点
  gl.drawArrays(gl.POINTS, 0, 1);
  gl.drawArrays(gl.LINES, 0, 1); // 最少需要有两个点，
  gl.drawArrays(gl.TRIANGLES, 0, 1); // 3个点

  // 3个顶点
  // 0.0, 0.0, 0.0
  // 0.2, 0.0, 0.0
  // 0.4, 0.0, 0.0
  gl.drawArrays(gl.POINTS, 0, 1);
  gl.drawArrays(gl.LINES, 1, 2);
</script>

封装的initShader方法：

function initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE) {
  const vertexShader = gl.createShader(gl.VERTEX_SHADER);
  const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);

  gl.shaderSource(vertexShader, VERTEX_SHADER_SOURCE) // 指定顶点着色器的源码
  gl.shaderSource(fragmentShader, FRAGMENT_SHADER_SOURCE) // 指定片元着色器的源码

  // 编译着色器
  gl.compileShader(vertexShader)
  gl.compileShader(fragmentShader)

  // 创建一个程序对象
  const program = gl.createProgram();

  gl.attachShader(program, vertexShader)
  gl.attachShader(program, fragmentShader)

  gl.linkProgram(program)

  gl.useProgram(program)

  return program;
}