Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

claygl

Package Overview
Dependencies
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

claygl

WebGL graphic library

  • 1.1.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
12K
decreased by-16.89%
Maintainers
1
Weekly downloads
 
Created
Source

ClayGL

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 40k(gzipped) for a basic 3D application.

Download
API
Examples

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
        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: function (renderer, scene, timeline) {
        this._cube.rotation.rotateY(this.frameTime / 1000);
      }
    });
  </script>
</body>
</html>

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:

  • FBX
  • COLLADA
  • OBJ

Output:

  • Scene hierarchy
  • Mesh and camera
  • PBR material
  • Texture
  • Skin
  • Animation

Keywords

FAQs

Package last updated on 28 Feb 2018

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc