简介
simple-2d-shader 是一个基于 WebGL 的 2D 渲染库，可以快速实现各种 2D 效果，如颜色变换、模糊、灰度等。它是一个开源的 npm 包，可以通过 npm 安装并在前端项目中使用。
安装
要使用 simple-2d-shader，你需要先安装它。可以使用 npm 命令进行安装：
npm install simple-2d-shader
安装完成后，你就可以在你的项目中引入 simple-2d-shader 了。
使用
创建画布和着色器
首先，我们需要创建画布和着色器。在 HTML 中添加一个 canvas 元素，并获取它的上下文：
<canvas id="canvas"></canvas>
const canvas = document.getElementById('canvas'); const gl = canvas.getContext('webgl');
然后，我们需要创建顶点着色器和片元着色器，并将它们编译成 WebGL 程序：
-- -------------------- ---- ------- ----- ------------------ - - --------- ---- ----------- ---- ------ - ----------- - ---------------- -- --- - -- ----- -------------------- - - --------- ------- ------ ------- ---- -------- ---- ------ - ------------ - -------- - -- ----- ------------ - ---------------------------------- ----------------------------- -------------------- ------------------------------- ----- -------------- - ------------------------------------ ------------------------------- ---------------------- --------------------------------- ----- ------- - ------------------- ------------------------ -------------- ------------------------ ---------------- ------------------------ -----------------------展开代码
创建缓冲区
接下来，我们需要创建一个包含顶点数据的缓冲区。
-- -------------------- ---- ------- ----- -------------- - ------------------ ------------------------------ ---------------- ----- --------- - - --- --- --- -- -- -- -- --- -- ------------------------------ --- ------------------------ ---------------- ----- ------------------------- - ----------------------------- -------------- ------------------------------------------------------ ----------------------- -------------------------- -- --------- ------ -- -- --展开代码
渲染
最后，我们可以使用 simple-2d-shader 提供的渲染函数来渲染画面了。
const { createRenderer } = require('simple-2d-shader'); const renderer = createRenderer(gl); renderer.render({ uniforms: { u_color: [1, 0, 0, 1], }, });
在这个例子中，我们将画布颜色设置为红色。你可以通过调整 uniforms 中的 u_color 值来改变画布的颜色。
示例代码
完整的示例代码如下：
-- -------------------- ---- ------- ------- --------------------- -------- ----- ------ - ---------------------------------- ----- -- - --------------------------- ----- ------------------ - - --------- ---- ----------- ---- ------ - ----------- - ---------------- -- --- - -- ----- -------------------- - - --------- ------- ------ ------- ---- -------- ---- ------ - ------------ - -------- - -- ----- ------------ - ---------------------------------- ----------------------------- -------------------- ------------------------------- ----- -------------- - ------------------------------------ ------------------------------- ---------------------- --------------------------------- ----- ------- - ------------------- ------------------------ -------------- ------------------------ ---------------- ------------------------ ----------------------- ----- -------------- - ------------------ ------------------------------ ---------------- ----- --------- - - --- --- --- -- -- -- -- --- -- ------------- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------展开代码
