ccpgames / ccpwgl

CCP WebGL Library
MIT License
103 stars 30 forks source link

Future of CCPWGL #197

Closed cppctamber closed 7 years ago

cppctamber commented 8 years ago

Below are some topics regarding the future of ccpwgl that I'd like to discuss. The following pull request has been created to support this discussion: https://github.com/ccpgames/ccpwgl/pull/196

Matrix Library

Do we want to upgrade to a newer matrix library?

The latest glMatrix library from glMatrix.net (a later version of the one used now) has some performance benefits, a much more logical and consistent argument order (the receiving object is almost always first) vs the current ( the receiving object is either the last or the first argument), more functionality and optimizations.

Benefits:

Penalties:

While the latest glMatrix.net library has a lot of functionality it is lacking some basic scalar operations (I have included these in the pull request in the file ext.js) and it's focus excludes any functionality for things like bounding boxes, bounding spheres, ray casting and planes (I have versions of these in testing presently).

There is no need for any of this extra functionality for ccpwgl to work with the new library as it is. Refactoring and replacing the current library is all that would be required.

However, my proposal is:

I'd like to start adding (or see others adding) useful generic 3d library methods to enable quality applications to be made with minimal effort. Raycasting, colour picking and physics would be at the top of that list :3

I do not see this library having to be upgraded often once implemented so maintenance should be low.

Proposed Files and Folders

/src/math

// base
/src/math/gl3.js - Generic

// core
/src/math/vec2.js - Vector 2
/src/math/vec3.js - Vector 3
/src/math/vec4.js - Vector 4
/src/math/quat.js - Quaternion
/src/math/mat3.js - Matrix 3x3
/src/math/mat4.js - Matrix 4x4

// extended
/src/math/clr.js - Colors
/src/math/box.js - Bounding Box
/src/math/sph.js - Bounding Sphere
/src/math/pln.js - Plane
/src/math/tri.js - Triangle/ Face
/src/math/ray.js - Ray casting

// build
/dist/ccpwgl_gl3.js - Unminified
/dist/ccpwgl_gl3.min.js - Minified

EMCAScript 6 / Typescript

A couple of months back I converted the ccpwgl_int files to ES6 and while I didn't initially see any benefits as it was a pain to keep up to date, it did make extending the library easier, removed the need for a build process (apart from converting to ES5), made things a little more readable and simplified some of the code.

Would anyone apart from myself benefit from moving to ES6 (or to Typescript as some others have suggested)? And more importantly, would @filipppavlov want to maintain the library in this format. :3 I'd be willing to put in the hours to covert it again (and the 10k or so linting issues as well) but only if it was to become the standard version.

For the immediate future I propose that we introduce some build tasks to create versions of ccpwgl_int and the matrix library that support the ES6 import and export features. Included in the aforementioned pull request there is a working example of how this could work: grunt es6

Proposed Files and Folders

/dist/ccpwgl_int.es6
/dist/ccpwgl_gl3.es6

Compiled Files

Move all compiled files to /dist/. Users of ccpwgl would only need this folder for ccpwgl to work.

cppctamber commented 8 years ago

Presently trying to decide on a format for the extended matrix and collidables methods for y'all to consider, of which I have multiple versions. Any input would be appreciated. I've included an example for each option which shows how you'd expand a Tw2 meshes' bounding box by a given point (this isn't necessarily something you'd want to do, just an example!).

var mesh = ship.wrappedObjects[0].mesh.geometryResource.meshes[0]

Match the style of the glMatrix libraries

/**
 * Copies a box3 to another
 * @param {box3} out - Receiving box3
 * @param{box3} box - Box to copy
 * @returns {box3} out
 */
box3.copy= function (out, box)
{
    out[0] = box[0];
    out[1] = box[1];
    out[2] = box[2];
    out[3] = box[3];
    out[4] = box[4];
    out[5] = box[5];
    return out;
};

...

// example
var bbox = box3.fromBounds(mesh.minBounds, mesh.maxBounds);
box3.addPoint(bbox, [ 100, 100, 100 ]);
box3.toBounds(bbox, mesh.minBounds, mesh.maxBounds);

Helper functions only, suited to ccpwgl's coding style

/**
 * Copies a bounding box's bounds
 * @param {vec3} outMin- Receiving min bounds
 * @param {vec3} outMax- Receiving max bounds
 * @param {vec3} boxMin - Min bounds to copy
 * @param {vec3} boxMax - Max bounds to copy
 */
box.copy= function (outMin, outMax, boxMin, boxMax)
{
    vec3.copy(outMin, boxMin);
    vec3.copy(outMax, boxMax);
};

...

// example
box.addPoint(mesh.minBounds, mesh.maxBounds, [ 100, 100, 100 ]);

Add new Tw2Parameters

function Tw2BoxParameter(name, minBounds, maxBounds)
{
    this.name = name || '';
    this.min = vec3.fromValues(-Infinity, -Infinity, -Infinity);
    this.max = vec3.fromValues(Infinity, Infinity, Infinity);
    if (minBounds) vec3.copy(this.min, minBounds);
    if (maxBounds) vec3.copy(this.max, maxBounds);
};

Tw2BoxParameter.prototype.Copy = function(box)
{
    vec3.copy(this.min, box.min);
    vec3.copy(this.max, box.max);
};

...

// Example
var bbox = new Tw2BoxParameter('Example Box', mesh.minBounds, mesh.maxBounds);
bbox.addPoint([100,100,100]);
bbox.toArrays(mesh.minBounds, mesh.maxBounds);

New Collidable constructors (wip)

Create a new Tw2CollidableAccumulator constructor and Tw2Collidable constructor which would be used in a similar way to Tw2BatchAccumulator and render batches. Collidables are collected (Planes, SpriteSets, SpotlightSets, Decals, Boosters, Mesh) and then operations are performed on them. All of the extended matrix functions could be added as static methods to these.

function Tw2CollidableAccumulator()
{
    this.collidables = [];
    this.count = 0;
    this._sortFunction = null;
};

Tw2Collidable.Cast = function(rayOrigin, rayDirection, optional, intersected)
{
    // perform ray casting operation on all accumulated collidables
    return intersected;
};

...

function Tw2Collidable(geometryProvider)
{
    this.type = '';
    this.visible = true;
    this.geometryProvider = null;
    this.minBounds = vec3.create();
    this.maxBounds = vec3.create();
    this.boundsSpherePosition = vec3.create();
    this.boundsSphereRadius = 0;
    this.pickingColor = quat4.create();
    this.pickingObjectID = 0;
    this.mode = 0;
    this.usage = Tw2CollidableBatch.BOX;
    this.worldTransform = mat4.create();
    this.transform = mat4.create();
    if (geometryProvider)
    {
        this.SetGeometryProvider(geometryProvider);
    }
};

Tw2Collidable.CopyBox = function(a)
{
    vec3.copy(this.minBounds, a.minBounds);
    vec3.copy(this.maxBounds, a.maxBounds);

    if (this.geometryProvider !== null)
    {
        vec3.copy(this.geometryProvider.minBounds, a.minBounds);
        vec3.copy(this.geometryProvider.maxBounds, a.maxBounds);
    }
};
...

// Example
var bbox = new Tw2Collidable(mesh);
bbox.addPoint([100,100,100]);
...

Extend Tw2Geometry constructors

Extend existing tw2 constructors with relevant methods.

// Example 1 (Updates bounding box and bounding sphere in one go)
mesh.AddPoint([100,100,100]); 

// Example 2
mesh.areas[0].AddPoint([100,100,100]); 
regner commented 8 years ago

Any chance of getting an NPM package built and published? Would be really slick to see something like Travis CI building the repo and publishing it.

cppctamber commented 8 years ago

Here is a test conversation https://github.com/cppctamber/ccpwgl-es6 which is using es6, babel, and webpack. Built with the commands webpack (unminified) and webpack -p (minified). Thanks to Van_Solumun and Narthollis from devfleet for the suggestion and help.

filipppavlov commented 8 years ago

Sorry I didn't reply earlier - I was on vacation. I would really love to upgrade to the newer glMatrix version. I'd do this as a first step.

Regarding "extended" math library. Wouldn't it be cleaner to have it as a totally separate project (either extending glMatrix or providing side-by-side functions) and only pull built minified file. It would also help creating unit tests for it; I've noticed a few bugs in that ext.js file.

ES6: I wouldn't be comfortable with it right now. Maybe next year? :)

Regarding box.js: I'd call the object aabb3 rather than box3 as you may eventually want to add non axis-aligned boxes.

Tw2BoxParameter: we use parameters to pass data to shaders. How would you use this one?

Collidables: I didn't quite get this part. How would you use collidables? How collidables relate to geometry providers? What are these Tw2Geometry constructors?

cppctamber commented 8 years ago

Sorry I didn't reply earlier - I was on vacation.

Welcome back! :3

I would really love to upgrade to the newer glMatrix version. I'd do this as a first step.

Regarding "extended" math library. Wouldn't it be cleaner to have it as a totally separate project (either extending glMatrix or providing side-by-side functions) and only pull built minified file. It would also help creating unit tests for it; I've noticed a few bugs in that ext.js file.

That was just an example for you to look at, I've since fixed most of the bugs and have combined everything together.

Not sure what you mean by side-by-side functions.

Presently I've taken the latest glmatrix library, all but one of the glmatrix and math functions you made for ccpwgl, my own functions, and some THREE.js functions and put them all into one library which I'm almost finished with.

Initially I was going to just extend the latest glmatrix library but I didn't like some of their method naming conventions so renamed a few of them (which may not be desirable for you or ccpwgl). It is unlikely that this library will need to be updated once completed so for me having slightly different names was okay.

Gimme two hours and I'll put the library up for you too look at: https://github.com/cppctamber/ccpwgl-gl3

cppctamber commented 8 years ago

ES6: I wouldn't be comfortable with it right now. Maybe next year? :)

I'm quite far along with this now, and with some help from some #devfleet members its much easier to maintain/ compile that my previous versions. When you've relaxed a bit and get some free time perhaps you can have a look-see :3

Regarding box.js: I'd call the object aabb3 rather than box3 as you may eventually want to add non axis-aligned boxes.

They're not specific to Axis Aligned or Object Aligned, have a peek at the gl3 library to see what I mean.

Tw2BoxParameter: we use parameters to pass data to shaders. How would you use this one?

I found a better way for what I was describing there now and so the only extra Tw2 parameter I am using now is Tw2QuanternionParameter which is pretty much Tw2Vector4Parameter but with some extra methods.

Collidables: I didn't quite get this part. How would you use collidables? How collidables relate to geometry providers? What are these Tw2Geometry constructors?

I was trying to make a system similar to GetBatches which would give users a generic way of doing ray Intersection and picking but have since started added ray Intersect methods to all EveObjects, EveSets/EveSetItems, Tw2GeometryMesh and Tw2GeometryMeshArea instead.

Probably better to discuss the above in #ccpwgl on slack some time. :3

example example 2

cppctamber commented 8 years ago

I've uploaded the gl3 version that I've been using to https://github.com/cppctamber/ccpwgl-gl3 , which you can install locally with npm install ccpwgl-es6 I've had requests to keep this library as close to the glMatrix library as possible and will be re uploading a version with this in mind shortly.