最小WebGL库OGL使用示例

什么是 OGL？

OGL 是一个小型、有效的 WebGL 库，面向喜欢最少抽象并对自己创建着色器感兴趣的开发人员。

OGL 的 API 采用零依赖的 es6 模块编写，与 ThreeJS 有许多相似之处，但它与 WebGL 紧密耦合，并且功能少得多。

在 OGL 的设计中，该库做了最少的必要抽象，因此开发人员仍然可以放心地将其与本机 WebGL 命令结合使用。保持较底层的抽象级别有助于使 OGL 更易于理解和扩展，并且使其作为 WebGL 学习资源更加实用。

为了保持简洁和模块化，OGL 库分为三个部分：Math、Core 和 Extras。

Math 组件是 gl-matrix 的扩展，提供可实例化的类，为每个模块类型扩展 Array。 gzip 压缩后 8kb，没有依赖关系，可以单独使用。

核心 Core 由以下部分组成：

• Geometry.js
• Program.js
• Renderer.js
• Camera.js
• Transform.js
• Mesh.js
• Texture.js
• RenderTarget.js

任何额外的抽象层都将作为附加项包含在内，而不是核心的一部分，以减少代码体积膨胀。

目前 OGL 在 Github 上通过 MIT 协议开源，有超过 3.2k 的 star、是一个值得关注的前端开源项目。

如何使用 OGL？

尽管 OGL 的源是模块化的，以下是完整的组件下载大小。

通过使用 tree-shaking，可以预期最终大小将比上述值小得多。如果 OGL 安装在项目文件中，则可以从一个入口点完成导入。

import { ... } from './path/to/src/index.js';

如果使用打包器或使用 Node 模块导入映射，则直接从已安装的 Node 模块导入。

import { ... } from 'ogl';

默认情况下，加载 ES 源模块（src/index.js）可作为另一种选择，开发者可以使用 jsdelivr、unpkg 或 skypack 服务从 CDN 加载。

import { ... } from 'https://cdn.jsdelivr.net/npm/ogl';
import { ... } from 'https://unpkg.com/ogl';
import { ... } from 'https://cdn.skypack.dev/ogl';

如果采用此路线，强烈建议锁定一个特定版本（附加@x.x.x）以避免代码破坏，而不是按照上述链接获取最新版本。 作为一个基本的 API 示例，下面渲染了一个旋转的白色立方体。

import { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';

{
  const renderer = new Renderer();
  const gl = renderer.gl;
  document.body.appendChild(gl.canvas);

  const camera = new Camera(gl);
  camera.position.z = 5;

  function resize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.perspective({
      aspect: gl.canvas.width / gl.canvas.height,
    });
  }
  window.addEventListener('resize', resize, false);
  resize();

  const scene = new Transform();

  const geometry = new Box(gl);

  const program = new Program(gl, {
    vertex: /* glsl */ `
            attribute vec3 position;

            uniform mat4 modelViewMatrix;
            uniform mat4 projectionMatrix;

            void main() {
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `,
    fragment: /* glsl */ `
            void main() {
                gl_FragColor = vec4(1.0);
            }
        `,
  });

  const mesh = new Mesh(gl, { geometry, program });
  mesh.setParent(scene);

  requestAnimationFrame(update);
  function update(t) {
    requestAnimationFrame(update);

    mesh.rotation.y -= 0.04;
    mesh.rotation.x += 0.03;
    renderer.render({ scene, camera });
  }
}

对于更简单的使用，例如全屏着色器，可以省略更多核心，因为不需要场景图（变换）和投影矩阵（相机）。 OGL 还将展示如何轻松创建自定义几何体。

import { Renderer, Geometry, Program, Mesh } from 'ogl';

{
  const renderer = new Renderer({
    width: window.innerWidth,
    height: window.innerHeight,
  });
  const gl = renderer.gl;
  document.body.appendChild(gl.canvas);

  // Triangle that covers viewport, with UVs that still span 0 > 1 across viewport
  const geometry = new Geometry(gl, {
    position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
    uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
  });
  // Alternatively, you could use the Triangle class.

  const program = new Program(gl, {
    vertex: /* glsl */ `
            attribute vec2 uv;
            attribute vec2 position;

            varying vec2 vUv;

            void main() {
                vUv = uv;
                gl_Position = vec4(position, 0, 1);
            }
        `,
    fragment: /* glsl */ `
            precision highp float;

            uniform float uTime;

            varying vec2 vUv;

            void main() {
                gl_FragColor.rgb = vec3(0.8, 0.7, 1.0) + 0.3 * cos(vUv.xyx + uTime);
                gl_FragColor.a = 1.0;
            }
        `,
    uniforms: {
      uTime: { value: 0 },
    },
  });
  const mesh = new Mesh(gl, { geometry, program });
  requestAnimationFrame(update);
  function update(t) {
    requestAnimationFrame(update);
    program.uniforms.uTime.value = t * 0.001;
    // Don't need a camera if camera uniforms aren't required
    renderer.render({ scene: mesh });
  }
}