Package Exports

claygl
claygl/src/FrameBuffer
claygl/src/Geometry
claygl/src/Material
claygl/src/Mesh
claygl/src/Node
claygl/src/Renderer
claygl/src/Scene
claygl/src/Shader
claygl/src/Texture
claygl/src/Texture2D
claygl/src/camera/Orthographic
claygl/src/camera/Perspective
claygl/src/compositor/Pass
claygl/src/compositor/createCompositor
claygl/src/core/Base
claygl/src/core/LinkedList
claygl/src/core/mixin/notifier
claygl/src/dep/glmatrix
claygl/src/geometry/Cube
claygl/src/geometry/Plane
claygl/src/geometry/Sphere
claygl/src/light/Ambient
claygl/src/light/AmbientCubemap
claygl/src/light/AmbientSH
claygl/src/light/Directional
claygl/src/light/Point
claygl/src/light/Spot
claygl/src/math/BoundingBox
claygl/src/math/Frustum
claygl/src/math/Matrix2
claygl/src/math/Matrix2d
claygl/src/math/Matrix3
claygl/src/math/Matrix4
claygl/src/math/Plane
claygl/src/math/Quaternion
claygl/src/math/Ray
claygl/src/math/Vector2
claygl/src/math/Vector3
claygl/src/math/Vector4
claygl/src/picking/RayPicking
claygl/src/plugin/Skybox
claygl/src/plugin/Skydome
claygl/src/prePass/ShadowMap
claygl/src/shader/source/compositor/blend.glsl.js
claygl/src/shader/source/compositor/blur.glsl.js
claygl/src/shader/source/compositor/bright.glsl.js
claygl/src/shader/source/compositor/downsample.glsl.js
claygl/src/shader/source/compositor/fxaa.glsl.js
claygl/src/shader/source/compositor/hdr.glsl.js
claygl/src/shader/source/compositor/lut.glsl.js
claygl/src/shader/source/compositor/output.glsl.js
claygl/src/shader/source/compositor/upsample.glsl.js
claygl/src/shader/source/prez.glsl.js
claygl/src/shader/source/util.glsl.js
claygl/src/util/cubemap
claygl/src/util/sh
claygl/src/util/texture
claygl/src/version

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (claygl) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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(renderer, scene, timeline) {
        // 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(renderer, scene, timeline) {
        this._cube.rotation.rotateY(this.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

JSPM

claygl