JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    A WebGL graphic library for building scalable Web3D applications
    Filed under  › 

    • 🔾56%Overall
    • 1,772
    • 5.9 days
    • 🕩208
    • 👥8

    ClayGL

    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

    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
    Show All