shrekshao/minimal-gltf-loader

A minimal, engine-agnostic JavaScript glTF Loader.

minimal-gltf-loader

A minimal, engine-agnostic JavaScript glTF Loader, with a raw WebGL 2 simple renderer example using the loader.

Viewer Screenshot

Live Demo

click here for live demo

Usage

import {vec3, vec4, quat, mat4} from 'gl-matrix';
var MinimalGLTFLoader = require('build/minimal-gltf-loader.js');

var glTFLoader = new MinimalGLTFLoader.glTFLoader();
glTFLoader.loadGLTF(url, function(glTF){
    //...
});

Loading Features

• Accessors
  • Progressive loading / rendering
• Buffers
• BufferViews
• Images
• Meshes
• Nodes
• Primitives
• Samplers
• Textures
• Shader Loader (not part of the core of glTF 2.0)
• Animations
• Cameras
• Materials
• Skins

Formats

• glTF (.gltf) with separate resources: .bin (geometry, animation, skins), .glsl (shaders), and image files
• glTF (.gltf) with embedded resources
• Binary glTF (.glb) using the KHR_binary_glTF extension

Examples

• WebGL 2 simple renderer
  • baseColorFactor
  • baseColorTexture
  • normalTexture
  • Skybox
  • PBR
  • Animation
  • Interpolations
    • LINEAR
    • STEP
    • CATMULLROMSPLINE
    • CUBICSPLINE
  • Skin
  • Camera (from glTF)
  • Progressive rendering (No plan for this)
  • Occlusion Culling experiment
    • Bounding Box
      • AABB (Axis Aligned Bounding Box, *static)
      • OBB (Object/Oriented Bounding Box)
    • Scene Bounding Box (fast iterated) And auto centered and scaled
    • Build octree
    • Occlusion Query with hierarchy

Credits

• glTF sample Model and Buster Drone By LaVADraGoN
• Great thanks to Trung Le (@trungtle) and Patrick Cozzi (@pjcozzi) for contributing and advising.
• gl-Matrix by Brandon Jones (@toji) and Colin MacKenzie IV (@sinisterchipmunk)
• glTF-WebGL-PBR

---

minimal-gltf-loader-typescript

A minimal, engine-agnostic TypeScript glTF Loader.

What's new in gltf-loader-typescript

This loader is a new instance of the minimal-gltf-loader.

In this branch, the author updated the loading file fuction from XMLHttpRequest to fetch API and used Promise and async/await to make loading procedure much more clearer.

In glTF 2.0 standard, the target attribute on bufferView is optional. Different 3D softwares have different interpretation of glTF exporter. For instance, the glTF files exported by Cinema4D have filled target attribute, but those exported by Blender 2.80+ will NOT have the target attribute filled. (Can see the issue in the following link: KhronosGroup/glTF-Blender-IO#142) Therefore, before binding buffer, the loader should infer the target attribute is whether ARRAY_BUFFER or ELEMENT_ARRAY_BUFFER accoring to the usage of bufferview.

Usage

import {vec3, vec4, quat, mat4} from 'gl-matrix';
import {GLTFLoader, GLTF} from './src/glTFLoader.ts'

let gl : WebGLRenderingContext | WebGL2RenderingContext;

new GLTFLoader(gl).loadGLTF('YourURL').then((glTF: GLTF) => {
    // Create with glTF object, and proceed rendering process...
}).catch (() => {
    // Error control...
});