open-index/open-npm huggingface dataset:
npm package: @galacean/engine-shader-lab
Description: ```sh npm install @galacean/engine-shader-lab ```
Latest version: 1.3.30

## Installation

```sh
npm install @galacean/engine-shader-lab
```

## Usage

```typescript
import { ShaderLab } from "@galacean/engine-shader-lab";

// Create ShaderLab
const shaderLab = new ShaderLab();

// Create engine with shaderLab
const engine = await WebGLEngine.create({ canvas: "canvas", shaderLab });

......

// Create shader by galacean shader code directly
const shader = Shader.create(galaceanShaderCode);

.......

// Run engine
engine.run()
```
npm package: @galacean/engine-toolkit
Description: <a href="https://www.npmjs.com/package/oasis-engine-toolkit"><img src="https://img.shields.io/npm/v/oasis-engine-toolkit"/></a> ![npm-size](https://img.shields.io/bundlephobia/minzip/oasis-engine-toolkit) ![npm-download](https://img.shields.io/npm/dm/oasi
Latest version: 1.6.0
npm package: @galacean/engine-toolkit-shader-lab
Description: Refactor engine builtin `pbr` shader with `ShaderLab`.
Latest version: 1.3.13

# ShaderLab-toolkit

Refactor engine builtin `pbr` shader with `ShaderLab`.

## npm

Published on npm with full typing support. To install, use:

```sh
$ npm install @galacean/engine-toolkit-shader-lab
## or
$ npm install @galacean/engine-toolkit
```

This will allow you to import package entirely using:

```javascript
import { GSLPBRMaterial } from "@galacean/engine-toolkit-shader-lab";
```

## Usage

- To use the exported functionality, you need to init `engine` with `ShaderLab`, as below:

  ```ts
  const engine = await WebGLEngine.create({
    ...
    shaderLab: new ShaderLab()
    ...
  });
  ```

- Use `GSLPBRMaterial` (implemented in shaderlab) just like normal `PBRMaterial`.

  ```ts
  const pbrMaterial = new GSLPBRMaterial(engine);
  ```

- When you instanced `GSLPBRMaterial`, several shader source fragment written in shaderlab will auto be registered, so you can use `#include` syntax in shaderlab. Or you can register pbr related shader source fragment manually with:

  ```ts
  GSLPBRMaterial.registerIncludes();
  ```
npm package: @galacean/mars-math
Description: Javascript Math library for High Performance WebGL apps
Author: Ant Group CO., Ltd.
Latest version: 0.0.1

# 数学库

## 环境准备

- Node.js `>= 10.0.0`

## 本地开发

``` bash
# 1. 安装依赖（首次）
pnpm install
# 2. 编译
pnpm run build
```

## 测试

``` bash
pnpm run test
```

## 发布

``` bash
pnpm publish
```

## 备注
npm package: @galacean/mars-player
Description: Mars runtime player for the web
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars Player

Mars Player 用于播放 Mars 的动效产物。
Mars Player 的底层渲染引擎是 WebGL，能够高性能地支持粒子、3D、滤镜等特性，实时展现惊艳的视觉表现效果。

## 使用文档

通过阅读[《Mars 开发者文档》](https://yuque.antfin.com/huoxing/knaszl)文档，你会了解到更多的 Mars Player 开发互动项目的姿势。

## API 文档

TODO
npm package: @galacean/mars-plugin-alipay-downgrade
Description: Mars Player downgrade plugin for Alipay
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# 支付宝降级插件

## 本地开发

### 开始开发

``` bash
# demo
pnpm --filter @galacean/mars-plugin-alipay-downgrade dev
```

> 浏览器打开：http://localhost:8081/demo/

### 单测

``` bash
# 同上
```

> 浏览器打开：http://localhost:8081/test/
npm package: @galacean/mars-plugin-editor-gizmo
Description: Mars Player editor gizmo plugin
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars Editor Gizmo Plugin

## 本地开发

### 开始开发

``` bash
# demo
pnpm --filter @galacean/mars-plugin-editor-gizmo dev
```

> 浏览器打开：http://localhost:8081/demo/index.html
npm package: @galacean/mars-plugin-model
Description: Mars Player model plugin
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars Model Plugin

## 本地开发

### 开始开发

``` bash
# demo & test
pnpm --filter @galacean/mars-plugin-model dev
# demo & test (legacy)
pnpm --filter @galacean/mars-plugin-model preview
```

> 浏览器打开：http://localhost:8081/demo/index.html

##### WebGL1 环境

> 浏览器打开：http://localhost:8081/demo/index.html?webgl=1

### 单测

``` bash
# 同上
```

> 浏览器打开：http://localhost:8081/test/index.html
npm package: @galacean/mars-plugin-orientation-transformer
Description: Mars Player orientation transformer plugin
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# 陀螺仪插件

## 本地开发

### 开始开发

``` bash
# demo
pnpm --filter @galacean/mars-plugin-orientation-transformer dev
```

> 浏览器打开：http://localhost:8081/demo/
npm package: @galacean/mars-plugin-spine
Description: Mars Player spine plugin
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars 骨骼动画插件

## 使用
### React demo (Smallfish)
https://code.alipay.com/shixian.cr/spine-demo

### 简单引入

``` ts
import { MarsPlayer } from '@galacean/mars-player';
import '@galacean/mars-plugin-spine';
```

### 获取 spine 资源列表

``` ts
import type { SpineResource } from '@galacean/mars-plugin-spine';

const comp = await player.play(scene);
const spineData: SpineResource[] = comp.loaderData.spineDatas;
```

### 获取动画列表/皮肤列表

1. 使用函数获取

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name)
const { skeletonData } = item.spineDataCache;
const animationList = getAnimationList(skeletonData);
const skinList = getSkinList(skeletonData);
```

2. 在 `spineDatas` 数组中获取

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const { skinList, animationList } = comp.loaderData.spineDatas[index];
```

### 获取指定动画时长

``` ts
const animationDuration = getAnimationDuration(skeletonData, animationName);
```

### 获取创建纹理的参数
``` ts
import { getTextureOptions } from '@galacean/mars-plugin-spine';

const { magFilter, minFilter, wrapS, wrapT, pma } = getTextureOptions(atlasBuffer);
```

### 设置动画 mix 时间

1. 设置动画的默认 mix 时间 （需要在 `player.play`` 前调用）

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name);

item.setDefaultMixDuration(mix);
```

2. 设置指定动作的 mix 时间 （需要在 `player.play`` 前调用）

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name);

item.setMixDuration(animationOut, animationIn, mix);
```
### 设置播放速度

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name);

item.setSpeed(speed);
```

### 设置动画

1. 设置单个动画
``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name);

item.setAnimation(animationName, speed);
```

2. 设置一组动画

``` ts
const comp = await new MarsPlayer().loadScene(scene);
const item = comp.getItemByName(name);
const animationList = [animationName1, animationName2, animationName3];

item.setAnimation(animationList, speed);
```

## 本地开发

### 开始开发

``` bash
# demo
pnpm --filter @galacean/mars-plugin-spine dev
```

> 浏览器打开：http://localhost:8081/demo/

## 帧对比测试

> 浏览器打开：http://localhost:8081/test/
npm package: @galacean/mars-plugin-stats
Description: Mars Player stats plugin
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars Stats Plugin

## 本地开发

### 开始开发

``` bash
# demo
pnpm --filter @galacean/mars-plugin-stats dev
```

> 浏览器打开：http://localhost:8080/demo/index.html
npm package: @galacean/mars-specification
Description: Mars JSON Specification
Author: Ant Group CO., Ltd.
Latest version: 2.3.2

# Mars JSON definition

## 环境准备

- Node.js `>= 10.0.0`

## 本地开发

``` bash
# 1. 安装依赖（首次）
npm install
# 2. 编译
npm run build
```

## 测试

``` bash
npm run test
```

> 浏览器打开：http://localhost:9003/test/

## 发布

``` bash
tnpm publish
```
npm package: @galacean/mars-threejs
Description: Mars runtime threejs plugin for the web
Author: Ant Group CO., Ltd.
Latest version: 2.8.1

# Mars 的 THREE.JS 插件

使用此插件，可以在 THREE.JS 环境下加载并渲染 Mars 动效。

## 版本说明

- Three.js ![](https://img.shields.io/badge/npm-0.149.0-green.svg?style=flat-square)

## 使用步骤

### 1、THREE.JS 场景初始化

在 THREE.JS 中实现 Mars 首先要创建一个 THREE.JS 场景：

``` ts
import * as THREE from 'three';

// 创建一个 renderer
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  stencil: true,
  antialias: true,
  depth: true,
  premultipliedAlpha: true,
});
// 创建一个场景
const scene = new THREE.Scene();
const container = document.getElementById('J-container');
const { width, height } = container.getBoundingClientRect();
// 创建一个相机
const camera = new THREE.PerspectiveCamera(80, width / height, 0.1, 1000);

camera.position.set(0, 0, 8);
camera.lookAt(0, 0, 0);
scene.add(camera);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);

container.appendChild(renderer.domElement);
```

### 2、ThreeDisplayObject 实例化和资源加载

``` ts
import { ThreeDisplayObject } from '@galacean/mars-threejs';

const displayObject = new ThreeDisplayObject(renderer.getContext(), { width, height });
// 加载 Mars 产物
await displayObject.loadScene('./xxx.json');
// 将绘制对象添加到 THREE 的 scene 中
scene.add(displayObject);
```

### 3、执行 THREE.JS 渲染

``` ts
const { currentComposition } = displayObject;
let lastTime = performance.now();

function render () {
  // 判断当前合成是否被销毁
  if (!currentComposition.isDestroyed) {
    displayObject.update(performance.now() - lastTime);
  }

  lastTime = performance.now();
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}

render();
```

## API 文档

TODO