1.0.2 • Published 1 year ago
twinspace2d v1.0.2
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
项目库地址:
目前功能暂未完善,后续大致完善了,会进行开源。帮助大家学习。