2.0.0-alpha.47 • Published 8 months ago

claygl-next v2.0.0-alpha.47

Weekly downloads
-
License
-
Repository
github
Last release
8 months ago

NPM Version Circle CI

ClayGL is a type friendly 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

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>
      const app = new clay.App3D('#main', {
        width: window.innerWidth,
        height: window.innerHeight
      });
      // Create camera
      const camera = app.createCamera([0, 2, 5], [0, 0, 0]);

      // Create a RED cube
      const cube = app.createCube({
        color: '#f00'
      });

      // Create light
      const mainLight = app.createDirectionalLight([-1, -1, -1]);

      app.loop((frameTime) => {
        cube.rotation.rotateY(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, glsl } from 'claygl';

const vs = new Shader.Vertex({
  attributes: {
    position: Shader.attribute('vec3', 'POSITION')
  },
  main: glsl`
void main() {
  gl_Position = vec4(position, 1.0);
}`
});
const fs = new Shader.Fragment({
  uniforms: {
    color: Shader.uniform('rgb', 'red')
  },
  main: glsl`
void main() {
  out_color = vec4(color, 1.0);
}
`
});

const renderer = new Renderer({
  canvas: document.getElementById('main')
});
renderer.resize(400, 400);

const geometry = new GeometryBase();
const positionAttrib = geometry.createAttribute('position', 'float', 3);
// Add triangle vertices to position attribute.
positionAttrib.fromArray([
  [-0.5, -0.5, 0],
  [0.5, -0.5, 0],
  [0, 0.5, 0]
]);

const material = new Material(new Shader(vs, fs));
// 'color' have correct type here.
material.set('color', 'red');

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
2.0.0-alpha.47

8 months ago

2.0.0-alpha.46

8 months ago

2.0.0-alpha.45

11 months ago

2.0.0-alpha.44

12 months ago

2.0.0-alpha.43

1 year ago

2.0.0-alpha.42

1 year ago

2.0.0-alpha.41

1 year ago

2.0.0-alpha.40

1 year ago

2.0.0-alpha.39

2 years ago

2.0.0-alpha.38

2 years ago

2.0.0-alpha.37

2 years ago

2.0.0-alpha.33

2 years ago

2.0.0-alpha.32

2 years ago

2.0.0-alpha.31

2 years ago

2.0.0-alpha.30

2 years ago

2.0.0-alpha.36

2 years ago

2.0.0-alpha.35

2 years ago

2.0.0-alpha.34

2 years ago

2.0.0-alpha.29

2 years ago

2.0.0-alpha.28

2 years ago

2.0.0-alpha.27

2 years ago

2.0.0-alpha.26

2 years ago

2.0.0-alpha.25

2 years ago

2.0.0-alpha.24

2 years ago

2.0.0-alpha.23

2 years ago

2.0.0-alpha.22

2 years ago

2.0.0-alpha.21

2 years ago

2.0.0-alpha.20

2 years ago

2.0.0-alpha.19

2 years ago

2.0.0-alpha.18

2 years ago

2.0.0-alpha.17

2 years ago

2.0.0-alpha.11

2 years ago

2.0.0-alpha.16

2 years ago

2.0.0-alpha.15

2 years ago

2.0.0-alpha.14

2 years ago

2.0.0-alpha.13

2 years ago

2.0.0-alpha.12

2 years ago

2.0.0-alpha.10

2 years ago

2.0.0-alpha.7

2 years ago

2.0.0-alpha.8

2 years ago

2.0.0-alpha.9

2 years ago

2.0.0-alpha.5

3 years ago

2.0.0-alpha.6

3 years ago

2.0.0-alpha.4

3 years ago

2.0.0-alpha.3

3 years ago

2.0.0-alpha.2

3 years ago

2.0.0-alpha.1

3 years ago