2018-01-04 23:33:11 +08:00
2018-01-04 15:46:27 +08:00
2018-01-04 13:39:09 +08:00
2018-01-07 19:52:13 +08:00
2018-01-03 16:12:30 +08:00
2014-08-02 11:55:56 +08:00
2017-10-16 17:34:44 +08:00
2017-11-15 15:23:45 +08:00
2017-11-07 11:36:49 +08:00
2018-01-04 12:56:34 +08:00
2018-01-03 14:41:55 +08:00
2014-12-17 13:14:50 +08:00
2018-01-04 23:33:11 +08:00
2018-01-04 12:56:34 +08:00
2016-07-03 19:26:29 +08:00

ClayGL

NPM Version Circle CI

ClayGL is a WebGL graphic library.

Download

API

Example

Projects

ECharts GL

Clay Viewer

DOTA2 Hero Viewer

Worldcup 2014 Intro Movie

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: function (renderer, scene, timeline) {
        // Create camera
        var camera = new clay.camera.Perspective();
        camera.position.set(0, 2, 5);
        camera.lookAt(clay.math.Vector3.ZERO);
        scene.add(camera);

        // Create cube
        this._cube = clay.application.createCube();
        scene.add(this._cube);

        // Create light
        var light = new clay.light.Directional();
        light.position.set(1, 1, 1);
        light.lookAt(this._cube.position);
        scene.add(light);
      },

      loop: function (renderer, scene, timeline) {
        this._cube.rotation.rotateY(this.frameTime / 1000);
      }
    });
  </script>
</body>
</html>

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 prepared.

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
Description
A WebGL graphic library for building scalable Web3D applications
Readme BSD-2-Clause 63 MiB
Languages
JavaScript 77.1%
HTML 13.3%
GLSL 6.7%
Python 2.9%