grafx

A 3D graphics framework for WebGL.

DISCLAIMER: This has some rough edges and should probably not be used directly within production apps.

See this in use at levi.codes/space-debris!

This framework only defines graphics logic. If you also need a 3D physics engine, checkout physx. Or checkout gamex, a game engine that ties the grafx and physx frameworks together.

Notable Features

• A system for defining 3D shapes, models, and controllers.
• A system for configuring and drawing multiple simultaneous WebGL programs.
• A system for loading and compiling WebGL shaders and programs.
• Support for both per-model and post-processing shaders.
• A system for loading textures.
• An animation framework.
• A camera framework with built-in first-person and third-person cameras.
• A collection of basic shape definitions, each with vertex position, normal, texture coordinate, and vertex indices configurations.
• Algorithms for converting to and from a vertex-indexing array.
• An algorithm for polygon tesselation.
  • This is used for subdividing all faces of a polygon into a parameterized number of triangles.
  • All of the resulting vertices can then be pushed out to a given radius in order to render a smoother sphere.
• An algorithm for mapping spherical lat-long textures onto an icosahedron.
  • This involves careful consideration of the texture coordinates around the un-even seam of the icosahedron.

Acknowledgements / Technology Stack

The technologies used in this library include:

• ES2015
• WebGL
• gulp.js
• Babel
• Browserify
• SASS
• [animation][animation]
• Numerous other packages that are available via NPM (these are listed within the package.json file)

Many online resources influenced the design of this library. Some of these include:

• MDN tutorial
• webglfundamentals.org

Developing / Running the Code

See Getting Set Up or Understanding the Code for more info.

License

MIT