# claygl
> WebGL graphic library
Latest version **1.3.0** (published 2019-01-23) · 0 weekly downloads
## Install
```sh
npm install claygl
pnpm add claygl
yarn add claygl
bun add claygl
```
## Health
**Score 40/100 (D)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; large bundle.
Negative: abandoned.
## Facts
| | |
|---|---|
| Version | 1.3.0 |
| Published | 2019-01-23 |
| First published | 2018-01-16 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2862 |
| Author | Yi Shen |
| Maintainers | lang |
| Keywords | graphic, webgl |
## Links
- npm: https://www.npmjs.com/package/claygl
- Repository: https://github.com/pissang/claygl
- Homepage: https://github.com/pissang/claygl#readme
- Issues: https://github.com/pissang/claygl/issues
- npm.io page: https://npm.io/package/claygl
## Alternatives
- [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads
- [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads
- [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads
- [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads
- [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads
## Recent versions
- 1.3.0 (latest) — 2019-01-23
- 1.2.3 — 2018-07-16
- 1.2.2 — 2018-06-23
- 1.2.1 — 2018-05-02
- 1.2.0 — 2018-03-30
- 1.1.4 — 2018-03-29
- 1.1.3 — 2018-03-28
- 1.1.2 — 2018-03-26
- 1.1.1 — 2018-03-12
- 1.1.0 — 2018-02-28
- 1.0.3 — 2018-01-30
- 1.0.2 — 2018-01-24
- 1.0.1 — 2018-01-23
- 1.0.0 — 2018-01-16
## README
ClayGL
[](https://github.com/pissang/claygl)
[](https://circleci.com/gh/pissang/claygl)
ClayGL is a WebGL graphic library for building scalable Web3D applications.
It's easy to use, configurable for high-quality graphics. Benefit from the modularity and tree shaking, it can be scaled down to 22k(gzipped) for a basic 3D application.
#### [Download](https://github.com/pissang/claygl/releases)
#### [API](http://docs.claygl.xyz/api)
#### [Examples](http://examples.claygl.xyz)
## Projects
[ECharts GL](https://github.com/ecomfe/echarts-gl)
[Clay Viewer](https://github.com/pissang/clay-viewer)
[DOTA2 Hero Viewer](https://github.com/pissang/dota2hero)
[Paper Cut Art Generator](https://github.com/pissang/papercut-box-art)
[Little Big City](https://github.com/pissang/little-big-city)
## Quick Start
##### Create a rotating cube
```html
```
#### Minimum bundle example
This example is about 22k(gzipped) after bundled by webpack 4.0. It draws a triangle on the screen.
```js
import { Renderer, GeometryBase, Shader, Material } from 'claygl';
const vsCode = `
attribute vec3 position: POSITION;
void main() {
gl_Position = vec4(position, 1.0);
}
`;
const fsCode = `
void main() {
gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
}
`;
const renderer = new Renderer({
canvas: document.getElementById('main')
});
renderer.resize(400, 400);
const geometry = new GeometryBase();
geometry.createAttribute('position', 'float', 3);
// Add triangle vertices to position attribute.
geometry.attributes.position.fromArray([
[-0.5, -0.5, 0],
[0.5, -0.5, 0],
[0, 0.5, 0]
]);
const material = new Material({
shader: new Shader(vsCode, fsCode)
});
renderer.renderPass([ { geometry, material } ]);
```
### FBX to glTF2.0 Converter
[Get it](https://github.com/pissang/claygl/blob/master/tools/fbx2gltf.py)
Needs [python3.3](https://www.python.org/download/releases/3.3.0/) and [FBX SDK 2018.1.1](http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=26416130).
```
usage: fbx2gltf.py [-h] [-e EXCLUDE] [-t TIMERANGE] [-o OUTPUT]
[-f FRAMERATE] [-p POSE] [-q] [-b]
file
FBX to glTF converter
positional arguments:
file
optional arguments:
-h, --help show this help message and exit
-e EXCLUDE, --exclude EXCLUDE
Data excluded. Can be: scene,animation
-t TIMERANGE, --timerange TIMERANGE
Export animation time, in format
'startSecond,endSecond'
-o OUTPUT, --output OUTPUT
Ouput glTF file path
-f FRAMERATE, --framerate FRAMERATE
Animation frame per second
-p POSE, --pose POSE Start pose time
-q, --quantize Quantize accessors with WEB3D_quantized_attributes
extension
-b, --binary Export glTF-binary
--beautify Beautify json output.
--noflipv If not flip v in texcoord.
```
Input:
+ FBX
+ COLLADA
+ OBJ
Output:
+ Scene hierarchy
+ Mesh and camera
+ PBR material
+ Texture
+ Skin
+ Animation
---
_Source: https://npm.io/package/claygl · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._