Skip to content

Updates in xeogl v1.0

Lindsay Kay edited this page Nov 23, 2018 · 7 revisions

Picking enhancements

TODO: describe new PickResult class.

Support custom drawables

I've exposed extension points within xeogl's core WebGL renderer, to allow us to create custom "drawables" that plug into the renderer.

Drawable API

You can now define your own drawable components, to plug into xeogl's WebGL renderer.

The (virtual) Drawable interface defines the contract that your drawable components must implement.

  • isDrawable():boolean Returns true to indicate that the component implements the Drawable interface.
  • isStateSortable():boolean Returns true if the component should be drawn in order relative to other Drawables that also have this method, which also returns true.
  • stateSortCompare(drawable1, drawable2):number Comparison function for sorting the drawable component relative to other drawables of the same class.
  • needDrawOpaqueFill():boolean Returns true if the drawable needs to be drawn solid and opaque.
  • needDrawTransparentFill():boolean Returns true if the drawable needs to be drawn solid and transparent.
  • needDrawOpaqueEdges():boolean Returns true if the drawable needs its edges drawn opaque.

TODO: Add needDrawTransparentFill etc - eg. don;t rely on 'transparent' property, because BigModel transparent can be set while it contains BigModelMeshes that are not transparent.

Extending picking to support custom drawables

var hit = scene.pick({
  canvasPos: [23, 131]
});

if (hit) { // Picked a Mesh
  var mesh = hit.mesh;
}
var hit = scene.pick({
  pickSurface: true,
  canvasPos: [23, 131]
});

if (hit) { // Picked a Mesh
  var drawable = hit.drawable;
    if (drawable.isType("xeogl.Mesh")) {
      // These properties are only on the hit result when we do a ray-pick:

      var primitive = hit.primitive; // Type of primitive that was picked, usually "triangles"
      var primIndex = hit.primIndex; // Position of triangle's first index in the picked Mesh's Geometry's indices array
      var indices = hit.indices; // UInt32Array containing the triangle's vertex indices
      var localPos = hit.localPos; // Float32Array containing the picked Local-space position on the triangle
      var worldPos = hit.worldPos; // Float32Array containing the picked World-space position on the triangle
      var viewPos = hit.viewPos; // Float32Array containing the picked View-space position on the triangle
      var bary = hit.bary; // Float32Array containing the picked barycentric position within the triangle
      var normal = hit.normal; // Float32Array containing the interpolated normal vector at the picked position on the triangle
      var uv = hit.uv; // Float32Array containing the interpolated UV coordinates at the picked position on the triangle

    } else if (drawable.isType("xeogl.BigModelMesh")) {

    }
}
Clone this wiki locally