History

LiRen-qiu d039521926 删除了analysis相关的		10 months ago
..
asset	删除了analysis相关的	10 months ago
coverage	删除了analysis相关的	10 months ago
dist	删除了analysis相关的	10 months ago
src	删除了analysis相关的	10 months ago
tools	删除了analysis相关的	10 months ago
typescript	删除了analysis相关的	10 months ago
.jshintignore	删除了analysis相关的	10 months ago
.jshintrc	删除了analysis相关的	10 months ago
LICENSE	删除了analysis相关的	10 months ago
README.md	删除了analysis相关的	10 months ago
circle.yml	删除了analysis相关的	10 months ago
claygl.todo	删除了analysis相关的	10 months ago
index.d.ts	删除了analysis相关的	10 months ago
index.js	删除了analysis相关的	10 months ago
jsconfig.json	删除了analysis相关的	10 months ago
package.json	删除了analysis相关的	10 months ago
rollup.config.js	删除了analysis相关的	10 months ago
test.js	删除了analysis相关的	10 months ago

README.md

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

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="lib/claygl.js"></script>
</head>
<body>
  <canvas id="main"></canvas>
  <script>
    clay.application.create('#main', {

      width: window.innerWidth,
      height: window.innerHeight,

      init(app) {
        // Create camera
        this._camera = app.createCamera([0, 2, 5], [0, 0, 0]);

        // Create a RED cube
        this._cube = app.createCube({
            color: '#f00'
        });

        // Create light
        this._mainLight = app.createDirectionalLight([-1, -1, -1]);
      },
      loop(app) {
        this._cube.rotation.rotateY(app.frameTime / 1000);
      }
    });
  </script>
</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 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