How do I reduce ClayGL bundle size with Webpack?

Use tree shaking by importing only specific modules like Renderer and GeometryBase; the README's minimum bundle example shows this can drop to 22k gzipped with careful configuration.

ClayGL vs Three.js: which is better for Web3D?

ClayGL excels in scalable, minimal-bundle applications with advanced rendering features, while Three.js has a larger ecosystem and more community support for general-purpose 3D projects.

Does ClayGL support WebXR for AR/VR experiences?

It supports stereo rendering for VR readiness, but full WebXR integration may require additional handling, as the library focuses on rendering rather than device-specific APIs.

How to load a 3D model from Blender into ClayGL?

Export from Blender to glTF format and use ClayGL's built-in loader; for FBX files, use the converter tool with Python and FBX SDK, though this adds extra steps.

What's the best way to handle shadows in large ClayGL scenes?

Use PSSM (Parallel Split Shadow Maps) for directional lights, as mentioned in the features, to maintain performance and soft shadows in expansive environments without quality loss.

ClayGL

BSD-2-ClauseJavaScript1.3.0

A WebGL graphic library for building scalable Web3D applications with modular architecture and high-quality rendering.

GitHub

2.9k stars298 forks0 contributors

What is ClayGL?

ClayGL is a WebGL graphic library for building scalable Web3D applications. It provides tools for high-quality rendering, animation, and scene management, enabling developers to create interactive 3D experiences in the browser. The library's modular design allows for efficient bundling, making it suitable for both simple and complex projects.

Target Audience

Web developers and 3D graphics programmers building interactive 3D applications, data visualizations, or games for the web. It's ideal for those needing a balance between rendering quality and performance.

Value Proposition

Developers choose ClayGL for its scalable architecture that supports tree shaking to minimize bundle sizes, combined with advanced features like physically based rendering, VR readiness, and a comprehensive animation system—all within an easy-to-use API.

Overview

A WebGL graphic library for building scalable Web3D applications

Use Cases

Best For

Building interactive 3D data visualizations and charts

Related Projects

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub

Creating web-based 3D games or simulations

Developing VR-ready experiences in the browser

Rendering high-quality 3D models with PBR materials

Implementing complex animation systems with skinning and blending

Constructing scalable Web3D applications with minimal bundle sizes

Not Ideal For

Projects focused exclusively on 2D graphics or simple UI animations
Teams needing a vast ecosystem of pre-built 3D components and community plugins
Applications requiring built-in physics engines or real-time multiplayer networking
Environments where installing Python and FBX SDK for asset conversion is impractical

Pros & Cons

Pros

Efficient Bundle Sizes

Modular architecture enables tree shaking, reducing basic 3D apps to 22k gzipped, as shown in the minimum bundle example with Webpack.

Advanced Rendering Pipeline

Supports physically based rendering, HDR, and stereo rendering for VR, providing high-quality graphics configurable for complex scenes.

Robust Animation System

Features GPU-based skinning with 1D/2D blend trees and timeline animations with spline interpolation, enabling smooth, complex character movements.

Standard Asset Support

Includes a built-in glTF loader and FBX to glTF converter, easing import of industry-standard 3D models and animations, though conversion requires external tools.

Cons

Asset Conversion Overhead

The FBX to glTF converter needs Python 3.3 and FBX SDK 2018.1.1, adding setup complexity and external dependencies not typical for web projects.

Limited Third-Party Resources

Compared to alternatives like Three.js, ClayGL has a smaller community, resulting in fewer tutorials, plugins, and shared examples for troubleshooting.

Steep Learning Curve

Assumes WebGL familiarity; the API, while easy to use, lacks extensive beginner-friendly documentation for advanced features like VR setup or custom shaders.

Frequently Asked Questions

Game Engine Development

Vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core

Stars209,800

Forks33,842

Last commit1 year ago

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

:electron: Build cross-platform desktop apps with JavaScript, HTML, and CSS

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Stars112,779

Forks22,760

Last commit4 months ago

Game Engine Development1.3k