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

#### API

#### Examples

Projects

ECharts GL

Clay Viewer

DOTA2 Hero Viewer

Paper Cut Art Generator

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 } ]);
`

$3

Get it

Needs python3.3 and FBX SDK 2018.1.1.

`
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