打造原生 WebGL 2D 引擎：一场创意与技术的融合

打造原生 WebGL 2D 引擎：一场创意与技术的融合

1.引言

在当今数字化时代，网页的功能越来越丰富，已经远远超越了传统的文本和图片呈现。我们生活在一个充满交互性和视觉魅力的网络世界。每天都会遇到许多令人惊叹的网页效果和动画。作为一个Web3D图形的开发，希望可以通过网页来实现更多强大的功能，以及炫酷的效果。

在设计方面：

要实现真正令人叹为观止的网页效果，并不是一件容易的事情。传统的网页设计和CSS动画有着一定的限制。

在功能方面：

受制于浏览器的性能。无法在浏览器端开发很多很强大的工具。

正当我苦苦寻求突破时，WebGL技术闪现在我的视野中。作为一种强大的Web图形库，它能够在浏览器中实现硬件加速的图形渲染，为我提供了无限的创意空间。我决定用自己的双手打造一个基于原生 WebGL 的2D引擎，旨在让我能够轻松处理图像和创作出令人眼前一亮的网页效果。

或许有人问，我是一个web3D开发，为啥要开发一个2D的工具：

首先：web端3D已经有很强大成熟的库了，比如Three.js,Babylon.js,PlayCanvas等,当然优秀的2D库也很多比如：PixiJS等，但是相对于很多3D开发者来讲，大部分人学的还是threejs居多，如果在学习2D库无非会增加很多的学习成本，这里我开发的2D渲染引擎，参照了threejs ShaderMaterial的用法，精简了很多的功能，基于原生webGL，降低了一些开发的学习成本，提升了做2D Web处理的速度。

2.WebGL简介

参照初识web3D–webGL/webGPU

3.设计和架构

1. 模块化设计
   在开发我的基于原生 WebGL 的2D引擎时，我注重了整体的模块化设计。通过将引擎功能拆分为各个独立的模块，我使得每个模块都可以单独处理特定任务，而不会对其他部分产生影响。这种设计使得我的引擎更易于扩展和维护。

2. 基于 ShaderMaterial 的使用
   在设计引擎的渲染部分时，我参考了Three.js中ShaderMaterial的用法。ShaderMaterial允许开发者通过GLSL着色器语言自定义材质的渲染效果，为图形和动画带来更多的创意和自由度。通过借鉴这一思想，我为我的引擎提供了类似的ShaderMaterial接口，使得用户可以轻松地自定义渲染效果，而无需深入了解底层WebGL的复杂细节。这样做的优点在于可以降低用户使用引擎的学习成本，同时又不牺牲灵活性和性能。

3. 渲染管线优化
   在引擎的设计过程中，我重点优化了渲染管线。通过合并和批量处理渲染调用，减少了WebGL上下文切换和资源上传的次数，从而提高了渲染性能。同时，我还实现了简单的渲染批处理机制，以降低绘制调用的开销。这些优化措施让我的引擎在处理大量2D图形时依然保持流畅。

4. 跨浏览器支持
   我在引擎的设计中注重了跨浏览器支持。尽管WebGL技术在现代浏览器中得到广泛支持，但不同浏览器对WebGL的实现仍然存在一些差异。为了确保引擎的兼容性，我进行了充分的测试，并针对不同浏览器做了必要的适配。

5. API简洁易用
   在设计引擎的API时，我力求简洁易用。我为引擎的核心功能提供了直观的接口，使得用户可以迅速上手并快速实现自己的创意。同时，我也提供了详细的文档和示例代码，帮助用户更好地了解和使用引擎。

6. 扩展性与灵活性
   在整体设计中，我注重了引擎的扩展性与灵活性。通过良好的模块化设计，用户可以自定义和添加新的功能模块，满足不同项目的需求。同时，用户还可以根据自己的喜好和风格定制引擎的外观和交互效果。

通过以上的设计和架构，我的基于原生 WebGL 的2D引擎成为了一个功能强大、易于上手的工具，为用户提供了创作炫酷网页效果和处理图像的绝佳体验。

4.关于我的WebGL2D引擎

名称:TwinSpace2D
使用方法：
npm i twinspace2d
通过npm直接引入到web项目中
相关代码展示

const geometry = new Geometry();

const width = 2048;
const height = 1024;

geometry.setAttribute(
  "position",
  new Float32Array([0,0,width,0,width,height,width,height,0,height,0,0]),
  2
);

const material = new ShaderMaterial({
  uniforms: {
    u_resolution: {
      value: new TSVector2(T2D.canvas.clientWidth, T2D.canvas.clientHeight),
    },
    map: {
      value: null,
    },
    mouseMove: {
      value: new TSVector2(0, 0),
    },
  },
  fragmentShader: movePointerFrag,
  vertexShader: movePointerVert,
});

new TextureLoader().load("/public/demo1.png", (texture) => {
  material.uniforms.map.value = texture;
});

const mesh = new Mesh(geometry, material);

有没有看着觉得很耳熟。没错，为了方便开发，我把写法改成了threejs的写法，但是没有用three的代码，基于原生webgl自己独立封装；
为什么没做三维，三维要写很多矩阵变换啥的，说实话，本人比较懒，这种事，就交给大佬们吧。

5.案例展示

目前就简单展示一个，后续会出更多相关案例

这是一个用TwinSpace2D传入了一张图，然后传入了鼠标的坐标，然后实现的一个简单的效果。
后续会推出更多相关案例和demo。敬请期待

6.未来展望

当初写这个2D引擎的目的是想用threejs实现2D的效果，然后发现会有很多无用的占用，需要写一堆东西，感觉每次这么处理会比较麻烦，学习新的webgl2D库，学习成本太高，于是打算自己基于webgl写一个简单的纯粹的2D处理工具库。
希望未来有更多的人，可以通过这个工具库让网页的效果内容更加丰富，效果更加酷炫，能真正意义上帮助各位开发提升开发效率，实现更加炫酷强大的功能。
后续会出一些图片处理的demo以及一些炫酷的网页效果。完善2D工具库的功能。等功能稍微完善了，就正式开源。希望能帮助到各位学习web图形技术。

7.为什么不直接上WebGPU

虽然谷歌已经在Chrome113后续的版本都支持了WebGPU，标准也定下来了，但是目前移动端还没完全适配，以及一些老用户的PC也没有更新升级，等后续相关设备都支持了，就考虑出一个WebGPU版本的。