TwinSpace2D

简介：

一个基于原生WebGL的2D渲染引擎，在Web端可以轻松创建你想要的2D网页效果，也可以支持利用Web进行高性能图片处理，为前端开发提供便利。

如何获取/安装

npm install twinspace2d

在项目中引入

import { Geometry, Mesh, ShaderMaterial, TSVector2, TextureLoader, TwinSpace2D, } from "twinspace2d";

如何使用

1.配置一个渲染器

const T2D = new TwinSpace2D("view3d");//传入你需要绘制的canvas的id

2. 创建几何体

const geometry = new Geometry();

geometry.setAttribute("position",new Float32Array([0,0,2048,0,2048,1024,2048,1024,0,1024,0,0,]),2);

3. 创建shader代码片段（材质）

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,//顶点着色器代码
});

4. 如何传入一张贴图

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

5. 创建一个绘制的对象

const mesh = new Mesh(geometry, material);

6.渲染到屏幕

  T2D.render();

作者想说的：

是不是看上面的代码很熟悉。为了减少开发者的学习成本。这边参照了threejs ShaderMaterial的用法，做了适配。方便快速开发。

相关案例代码

https://gitee.com/soBigRice/twinspace2d_example

项目库地址：

目前功能暂未完善，后续大致完善了，会进行开源。帮助大家学习。