Home

Awesome

<h1><img src="./asset/logo.svg" style="height:30px"> ClayGL</h1> <img width="100%" src="./screenshot/claygl-logo.jpg" />

NPM Version Circle CI

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

<a href="https://github.com/ecomfe/echarts-gl" target="_blank"> <img src="./screenshot/echarts-gl.jpg" width="500" /> </a>

Clay Viewer

<a href="https://github.com/pissang/clay-viewer" target="_blank"> <img src="./screenshot/clay-viewer.jpg" width="500" /> </a>

DOTA2 Hero Viewer

<a href="https://github.com/pissang/dota2hero" target="_blank"> <img src="./screenshot/dota2hero.jpg" width="500" /> </a>

Paper Cut Art Generator

<a href="https://github.com/pissang/papercut-box-art" target="_blank"> <img src="https://github.com/pissang/papercut-box-art/blob/master/screenshots/3.jpg" width="500" alt=""> </a>

Little Big City

<a href="https://github.com/pissang/little-big-city" target="_blank"> <img src="https://github.com/pissang/little-big-city/blob/gh-pages/asset/screenshot.png" width="500" alt=""> </a>

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 } ]);
<!-- ## Current Features + Scene graph based management of lights, meshes, cameras, materials and shaders + Basic primitive geometry procedural generate + Cube, sphere, cylinder, cone, plane + Phong and lambert buildin shaders which support normal map and environment map + Point, directional, spot light + Orthographic, perspective camera + Graph based post processing + High quality shadow + PCF or VSM soft shadow + PSSM for sun light in large scene + Omni light shadow support + High performance geometry processing + GPU based skinning + Support 1D and 2D animation blending with blend tree + First person camera control, orbit camera control + Skybox, skydom + Particle System + Support both ray picking and GPU Picking + Loader + glTF loader + Timeline based animation, support spline interpolation between keyframes. + Full deferred pipeline. + Physically based rendering, Full HDR pipeline. + Stereo rendering, VR ready. -->

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:

Output: