# TwinSpace2D_Example

**Repository Path**: soBigRice/twinspace2d_example

## Basic Information

- **Project Name**: TwinSpace2D_Example
- **Description**: twinspace2D的代码案例
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-23
- **Last Updated**: 2023-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# TwinSpace2D_Example

#### 介绍
这是一个基于原生WebGL，由作者本人自己开发的一个二维的web图形渲染库twinspace2d的demo，可以让开发者快速的创建你想要的二维效果。以及图片的web端高速处理

#### 案例目录
/demo下面是本项目的案例，启用服务的时候地址栏后面+项目的路径就可以了。
目前仅存在一个demo，后续会陆续新增

#### 运行指令
先通过git获取本项目
安装项目启用所需模块
  `npm install`
运行服务
`npm run dev`
打包
`npm run build`

### 案例目录
```
demo/example1/index.html
demo/example2/index.html
demo/example3/index.html
...
```
##### 案例预览地址
传送门:[https://sobigrice.gitee.io/twinSpace2DExample/index.html](https://sobigrice.gitee.io/twinSpace2DExample/index.html)


#### 适用对象
适合于已经掌握了shader代码的会threejs的开发者，考虑到three写2D的效果不方便（感觉有点大材小用），但是写原生webgl代码太多且繁杂，本作者参照类似threejs的shaderMaterial用法创建了本项目，欢迎各位提出宝贵意见。


#### 相关代码展示
```
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自己独立封装；
为什么没做三维，三维要写很多矩阵变换啥的，说实话，本人比较懒，这种事，就交给大佬们吧。

#### 关于作者
##### CSDN博客
[https://blog.csdn.net/weixin_43980651](https://blog.csdn.net/weixin_43980651)
##### 掘金
[https://juejin.cn/user/2973549008784871](https://juejin.cn/user/2973549008784871)
##### B站
[https://space.bilibili.com/245386607](https://space.bilibili.com/245386607)