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.

Projects

ECharts GL

Clay Viewer

DOTA2 Hero Viewer

Paper Cut Art Generator

Little Big City

Quick Start

Create a rotating cube

<!DOCTYPE html>
<html lang="en">
<head>
  
</head>
<body>
  <canvas id="main"></canvas>
  
</body>
</html>

Minimum bundle example

This example is about 22k(gzipped) after bundled by webpack 4.0. It draws a triangle on the screen.

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

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 WEB3Dquantizedattributes extension -b, --binary Export glTF-binary --beautify Beautify json output. --noflipv If not flip v in texcoord.

Input: