load-wavefront-obj

STILL VERY MUCH A WORK IN PROGRESS

Loads the graphics buffer data from a .obj file that's been parsed using a .obj parser and return a draw command that accepts options

View demo

To Install

$ npm install --save load-wavefront-obj

Tutorials

• Drawing a rotating 3D airplane model

Running the demo locally

// TODO

Usage

var loadWFObj = require('load-wavefront-obj')
 
// You would usually parse your .obj files before runtime and then `xhr` GET request the pre-parsed JSON
var parseWFObj = require('wavefront-obj-parser')
var modelJSON = parseWFObj(GetWavefrontFileSomehow())
 
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 = loadWFObj(gl, modelJSON, {texureImage: image})
 
// Later inside of your render function
model.draw({
  attributes: model.attributes,
  uniforms: {
    // Specify your uniforms
    uAmbientColor: [1.0, 1.0, 1.0],
    // ...
  }
})

See something broken, confusing or ripe for improvement? Feel free to open an issue or PR!

API

var model = loadWFObj(parsedWFJSON, options) -> object

parsedWFJSON

Required

Type: string

A wavefront .obj file that has been parsed into JSON.

Usually you'd use wavefront-obj-parser to parser the .obj file pre-runtime. But any parser that outputs the same format will do.

Options

textureImage

type HTMLImageElement or Uint8Array

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.src = 'https://cool-image-texture.com/cool-image.jpg'
image.onload = function () {
  loadWFObj(gl, modelJSON, {textureImage: image})
}

model

// lorem ipsum

TODO:

• Finish the first iteration of the draw function
• Demo in raw WebGL
• Demo using regl
• Write Documentation
• Add tests using require('gl') and test against expected .png file fixtures. example

To Test:

The test suite requires imagemagick to be installed locally

$ npm run test

See Also

• wavefront-obj-parser
• collada-dae-parser
• load-collada-dae

License

MIT