This is a very bad abstraction. Don't install this.
Loads the WebGL graphics buffer data from a .dae file that's been parsed using a .dae parser and return a draw command that accepts options
$ npm install --save load-collada-dae
// TODO
var loadDae = require('load-collada-dae')
// You would usually parse your .dae files before runtime and then `xhr` GET request the pre-parsed JSON
var parseDae = require('collada-dae-parser')
var modelJSON = parseDae(GetColladaFileSomehow())
// Get your WebGL context directly from a canvas, or the context exposed by your favorite library / framework
var gl = GetCanvasWebGLContextSomehow()
// This can be a DOM image element or a Uint8Array of pixel data
var image = document.getElementById('some-already-loaded-image')
var model = loadDae(gl, modelJSON, {texure: image})
// Later inside of your render function
gl.useProgram(model.shaderProgram)
model.draw({
attributes: model.attributes,
uniforms: {
uUseLighting: true,
uAmbientColor: [0, 0, 0],
uLightingDirection: [0, 0, 0],
uDirectionalColor: [0, 0, 0],
uMVMatrix: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0.0, 0.0, -17.0, 1],
uPMatrix: mat4Perspective([], Math.PI / 4, 256 / 256, 0.1, 100),
// These might come from `skeletal-animation-system`
boneRotQuaternions0: jointDualQuats.rotQuaternions[0],
boneRotQuaternions1: jointDualQuats.rotQuaternions[1],
boneTransQuaternions0: jointDualQuats.transQuaternions[0],
boneTransQuaternions1: jointDualQuats.transQuaternions[1]
}
})See something broken, confusing or ripe for improvement? Feel free to open an issue or PR!
Required
Type: string
A collada .dae file that has been parsed into JSON.
Usually you'd use collada-dae-parser to parser the .dae file pre-runtime.
But any parser that outputs the same format will do.
Optional
type: object
load-collada-dae comes with default options, but you'll likely want to override some.
var myOptions = {
textureImage: document.getElementById('some-already-loaded-image') || new Uint8Array([255, 0, 0, 255])
}type HTMLImageElement or Uint8Array
Optional
You pass in an HTMLImageElement or Uint8Array for your model's texture
If using an image element, make sure that the onload event has already fired
// example of loading the image
var image = document.getElementById('my-image') || new window.Image()
image.onload = function () {
loadDae(gl, modelJSON, {texture: image})
}
image.src = 'https://cool-image-texture.com/cool-image.jpg'TODO: Uint8Array example
Optional
A function that will be passed the number of joints and returns a fragment shader for your skinned 3d model.
load-collada-dae comes with a default vertex shader generator.
You would typically override it if the default shader didn't match your needs. For example, if you wanted to add in point lighting.
function generatefragmentShader (opts) {
console.log(opts.numJoints)
// Some Number.. i.e. `12` (or however many joints your model has)
return `
// Some fragment shader
`
}Optional
A function that will be passed the number of joints and returns a vertex shader for your skinned 3d model.
load-collada-dae comes with a default vertex shader generator.
You would typically override it if the default shader didn't match your needs. For example, if you wanted to add in point lighting.
function generateVertexShader (opts) {
console.log(opts.numJoints)
// Some Number.. i.e. `12` (or however many joints your model has)
return `
// Your custom vertex shader
`
}We return a model object with a draw function
TODO: Flesh out example.. For now look at the test directory
// Example draw options
var myDrawOptions = {
attributes: {},
uniforms: {}
}- Demo in raw WebGL using an orbiting light source and materials
- Add unit test with default lighting turned on
Our test suite requires imagemagick to be installed locally, due to our image-diff dependency
$ npm run testMIT